From c2f9cde371327e2eadc71d7c260ddab7206088a0 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 25 Dec 2024 18:43:08 +0100
Subject: [PATCH] ui fixes

---
 src/lib/components/Infobox.svelte             |  38 +-
 .../stocks/[tickerID]/metrics/+layout.svelte  |  53 ++-
 .../stocks/[tickerID]/metrics/+page.svelte    | 108 +++--
 .../[tickerID]/metrics/[slug]/+page.svelte    |  27 +-
 .../stocks/[tickerID]/statistics/+page.svelte | 446 ++++++++++++------
 .../statistics/employees/+layout.svelte       |   2 +-
 .../statistics/employees/+page.svelte         |  95 ++--
 .../statistics/market-cap/+layout.svelte      |   2 +-
 .../statistics/market-cap/+page.svelte        |  49 +-
 tailwind.config.cjs                           |   1 +
 10 files changed, 486 insertions(+), 335 deletions(-)

diff --git a/src/lib/components/Infobox.svelte b/src/lib/components/Infobox.svelte
index c12f6a03..3199f7e1 100644
--- a/src/lib/components/Infobox.svelte
+++ b/src/lib/components/Infobox.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-    export let text;
+  export let text;
 </script>
 
 <div
-class="mt-5 sm:mt-0 border-l-4 border-white  p-0 sm:p-4 text-white flex flex-row items-center"
+  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"
 >
-<svg
-  class="h-6 w-6 hidden sm:block"
-  viewBox="0 0 20 20"
-  fill="currentColor"
-  style="max-width:40px"
-  aria-hidden="true"
-  ><path
-    fill-rule="evenodd"
-    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-    clip-rule="evenodd"
-  ></path></svg
->
-<div class="ml-3 w-full">
-  <div class="flex w-full flex-row justify-between">
-    <div>
-      {@html text}
+  <svg
+    class="h-6 w-6 hidden sm:block"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    style="max-width:40px"
+    aria-hidden="true"
+    ><path
+      fill-rule="evenodd"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+      clip-rule="evenodd"
+    ></path></svg
+  >
+  <div class="ml-3 w-full">
+    <div class="flex w-full flex-row justify-between">
+      <div>
+        {@html text}
+      </div>
     </div>
   </div>
 </div>
-</div>
\ No newline at end of file
diff --git a/src/routes/stocks/[tickerID]/metrics/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
index e956ef6c..6f3a5def 100644
--- a/src/routes/stocks/[tickerID]/metrics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { stockTicker, screenWidth } from "$lib/store";
+  import { stockTicker } from "$lib/store";
   import { page } from "$app/stores";
 
   export let data;
@@ -57,33 +57,34 @@
 
 <section class="w-full bg-[#09090B] overflow-hidden h-full">
   <div class="m-auto h-full overflow-hidden">
-    <main class="w-fit sm:w-full sm:max-w-2xl">
+    <main class="w-full">
       <div class="m-auto">
         {#if names?.length > 0}
-        <nav
-          class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
-        >
-          <ul class="flex flex-row items-center w-full text-white">
-            {#each subsectionTitles?.slice(0, 4) as title}
-              {@const sectionKey = title
-                ?.toLowerCase()
-                ?.replace(/&/g, "") // Remove & symbol
-                ?.replace(/\s+/g, "-") // Replace spaces with dash
-                ?.replace(/-{2,}/g, "-") // Replace multiple dashes with single dash
-                ?.replace(/^-|-$/g, "") // Remove leading/trailing dashes
-                ?.trim()}
-              <a
-                href={getHref(sectionKey)}
-                on:click={() => changeSubSection(sectionKey)}
-                class="p-2 px-5 cursor-pointer {displaySubSection === sectionKey
-                  ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
-              >
-                {title}
-              </a>
-            {/each}
-          </ul>
-        </nav>
+          <nav
+            class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
+          >
+            <ul class="flex flex-row items-center w-full text-white">
+              {#each subsectionTitles as title}
+                {@const sectionKey = title
+                  ?.toLowerCase()
+                  ?.replace(/&/g, "") // Remove & symbol
+                  ?.replace(/\s+/g, "-") // Replace spaces with dash
+                  ?.replace(/-{2,}/g, "-") // Replace multiple dashes with single dash
+                  ?.replace(/^-|-$/g, "") // Remove leading/trailing dashes
+                  ?.trim()}
+                <a
+                  href={getHref(sectionKey)}
+                  on:click={() => changeSubSection(sectionKey)}
+                  class="p-2 px-5 cursor-pointer {displaySubSection ===
+                  sectionKey
+                    ? 'text-white bg-primary sm:hover:bg-opacity-[0.95]'
+                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
+                >
+                  {title}
+                </a>
+              {/each}
+            </ul>
+          </nav>
         {/if}
       </div>
     </main>
diff --git a/src/routes/stocks/[tickerID]/metrics/+page.svelte b/src/routes/stocks/[tickerID]/metrics/+page.svelte
index 81e8b14b..784d9550 100644
--- a/src/routes/stocks/[tickerID]/metrics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+page.svelte
@@ -103,17 +103,17 @@
             class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-scroll pr-5 sm:pr-0"
           >
             <table
-              class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
+              class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B]"
             >
-              <thead>
+              <thead class="">
                 <tr>
                   <th
-                    class="bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm sm:text-[1rem] text-start"
+                    class=" border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
                     >Quarter</th
                   >
                   {#each xData as item}
                     <th
-                      class="z-20 bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm text-center bg-[#09090B]"
+                      class="z-20 border-b border-gray-800 text-white font-semibold text-sm text-center"
                       >{new Date(item ?? null)?.toLocaleString("en-US", {
                         month: "short",
                         day: "numeric",
@@ -125,32 +125,30 @@
               </thead>
               <tbody class="shadow-md">
                 {#each revenueNames as name, index}
-                  <tr class="bg-[#09090B] border-b-[#09090B] odd:bg-secondary">
+                  <tr class="bg-[#09090B] border-b-[#09090B] odd:bg-odd">
                     <th
-                      class="whitespace-nowrap odd:bg-secondary text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
+                      class="whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] text-start font-medium border-b border-gray-800"
                     >
-                      {#if index < 3}
-                        <a
-                          href={getHref(name)}
-                          class="sm:hover:text-blue-400 cursor-pointer underline underline-offset-4"
-                        >
-                          {name} Revenue
-                        </a>
-                      {:else}
+                      <a
+                        href={getHref(name)}
+                        class="sm:hover:text-blue-400 cursor-pointer underline underline-offset-4"
+                      >
                         {name} Revenue
-                      {/if}
+                      </a>
                     </th>
                     {#each categoryValues[index] as value}
                       <td
-                        class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]"
+                        class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-gray-800"
                       >
-                        {value !== null && value !== undefined ? abbreviateNumber(value) : "n/a"}
+                        {@html value !== null && value !== undefined
+                          ? abbreviateNumber(value, false, true)
+                          : "n/a"}
                       </td>
                     {/each}
                   </tr>
                   <tr class="bg-[#09090B] border-b-[#09090B]">
                     <td
-                      class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-[#09090B]"
+                      class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-gray-800"
                     >
                       <span class="ml-2">{name} Revenue Growth</span>
                     </td>
@@ -160,9 +158,10 @@
                           ? 'text-[#00FC50]'
                           : growthValue < 0
                             ? 'text-[#FF2F1F]'
-                            : 'text-white'} font-medium border-b border-[#09090B]"
+                            : 'text-white'} font-medium border-b border-gray-800"
                       >
-                        {growthValue > 0 ? "+" : ""}{growthValue !== null && growthValue !== undefined
+                        {growthValue > 0 ? "+" : ""}{growthValue !== null &&
+                        growthValue !== undefined
                           ? growthValue?.toFixed(2) + "%"
                           : "n/a"}
                       </td>
@@ -187,12 +186,12 @@
                 <thead>
                   <tr>
                     <th
-                      class="bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm sm:text-[1rem] text-start"
+                      class="bg-[#09090B] border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
                       >Quarter</th
                     >
                     {#each geographicXData as item}
                       <th
-                        class="z-20 bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm text-center bg-[#09090B]"
+                        class="z-20 bg-[#09090B] border-b border-gray-800 text-white font-semibold text-sm text-center bg-[#09090B]"
                         >{new Date(item ?? null)?.toLocaleString("en-US", {
                           month: "short",
                           day: "numeric",
@@ -204,26 +203,26 @@
                 </thead>
                 <tbody class="shadow-md">
                   {#each geographicNames as name, index}
-                    <tr
-                      class="bg-[#09090B] border-b-[#09090B] odd:bg-secondary"
-                    >
+                    <tr class="bg-[#09090B] border-b-[#09090B] odd:bg-odd">
                       <th
-                        class="text-white whitespace-nowrap odd:bg-secondary text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
+                        class="text-white whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] text-start font-medium border-b border-gray-800"
                         >{name} Revenue</th
                       >
                       {#each geographiCategoryValues[index] as value}
                         <th
-                          class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]"
+                          class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-gray-800"
                         >
-                          {value !== null && value !== 0 && value !== undefined
-                            ? abbreviateNumber(value)
-                            : "-"}
+                          {@html value !== null &&
+                          value !== 0 &&
+                          value !== undefined
+                            ? abbreviateNumber(value, false, true)
+                            : "n/a"}
                         </th>
                       {/each}
                     </tr>
                     <tr class="bg-[#09090B] border-b-[#09090B]">
                       <td
-                        class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-[#09090B]"
+                        class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-gray-800"
                       >
                         <span class="ml-2">{name} Revenue Growth</span>
                       </td>
@@ -234,13 +233,13 @@
                             ? 'text-[#00FC50]'
                             : growthValue < 0
                               ? 'text-[#FF2F1F]'
-                              : 'text-white'} font-medium border-b border-[#09090B]"
+                              : 'text-white'} font-medium border-b border-gray-800"
                         >
                           {growthValue > 0 ? "+" : ""}{growthValue !== null &&
                           growthValue !== 0 &&
                           growthValue !== undefined
                             ? growthValue?.toFixed(2) + "%"
-                            : "-"}
+                            : "n/a"}
                         </td>
                       {/each}
                     </tr>
@@ -250,30 +249,29 @@
             </div>
           {/if}
         {:else}
-        <div
-                class="mt-5 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"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  style="max-width:40px"
-                  aria-hidden="true"
-                  ><path
-                    fill-rule="evenodd"
-                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                    clip-rule="evenodd"
-                  ></path></svg
-                >
-                <div class="ml-3 w-full">
-                  <div class="flex w-full flex-row justify-between">
-                    <div>
-                      Currently, there are no business metrics available for {$stockTicker}.
-                    </div>
-                  </div>
+          <div
+            class="mt-5 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"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              style="max-width:40px"
+              aria-hidden="true"
+              ><path
+                fill-rule="evenodd"
+                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                clip-rule="evenodd"
+              ></path></svg
+            >
+            <div class="ml-3 w-full">
+              <div class="flex w-full flex-row justify-between">
+                <div>
+                  Currently, there are no business metrics available for {$stockTicker}.
                 </div>
               </div>
-
+            </div>
+          </div>
         {/if}
       </div>
     </div>
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index 0c141b44..bc96cd85 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -8,10 +8,10 @@
 
   import { Chart } from "svelte-echarts";
   import { init, use } from "echarts/core";
-  import { LineChart, BarChart } from "echarts/charts";
+  import { BarChart } from "echarts/charts";
   import { GridComponent, TooltipComponent } from "echarts/components";
   import { CanvasRenderer } from "echarts/renderers";
-  use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
+  use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   export let data;
 
@@ -98,8 +98,7 @@
         {
           name: "Revenue",
           data: valueList,
-          type: "line",
-          areaStyle: { opacity: 0.08 },
+          type: "bar",
           smooth: true,
           symbol: "none",
           itemStyle: {
@@ -206,7 +205,7 @@
                   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-gray-600">
+                    <tr class="border-b border-gray-800">
                       <th
                         class="text-white font-semibold text-start text-sm sm:text-[1rem]"
                         >Quarter</th
@@ -229,9 +228,7 @@
                   <tbody>
                     {#each tableList as item, index}
                       <!-- row -->
-                      <tr
-                        class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] cursor-pointer"
-                      >
+                      <tr class=" odd:bg-odd border-b border-gray-800">
                         <td
                           class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
                         >
@@ -248,20 +245,22 @@
                         <td
                           class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
                         >
-                          {item?.value !== null
-                            ? abbreviateNumber(item?.value)
-                            : "-"}
+                          {@html item?.value !== null
+                            ? abbreviateNumber(item?.value, false, true)
+                            : "n/a"}
                         </td>
 
                         <td
                           class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
                         >
                           {#if Number(item?.value - tableList[index + 1]?.value)}
-                            {abbreviateNumber(
+                            {@html abbreviateNumber(
                               item?.value - tableList[index + 1]?.value,
+                              false,
+                              true,
                             )}
                           {:else}
-                            -
+                            n/a
                           {/if}
                         </td>
 
@@ -298,7 +297,7 @@
         <div class="w-full flex justify-center items-center h-80">
           <div class="relative">
             <label
-              class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+              class="bg-odd rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
             >
               <span class="loading loading-spinner loading-md text-gray-400"
               ></span>
diff --git a/src/routes/stocks/[tickerID]/statistics/+page.svelte b/src/routes/stocks/[tickerID]/statistics/+page.svelte
index 759a8bea..bd3c0944 100644
--- a/src/routes/stocks/[tickerID]/statistics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+page.svelte
@@ -91,22 +91,30 @@
               <p
                 class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
-                {companyName} has {abbreviateNumber(rawData?.sharesOutStanding)}
+                {companyName} has {@html abbreviateNumber(
+                  rawData?.sharesOutStanding,
+                  false,
+                  true,
+                )}
                 shares outstanding. The number of shares has increased by {rawData?.sharesYoY}%
                 in one year.
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Shares Outstanding</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       title="3,194,640,415"
-                      >{abbreviateNumber(rawData?.sharesOutStanding)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.sharesOutStanding,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Shares Change (YoY)</span>
                     </td>
@@ -117,7 +125,7 @@
                         "percent",
                       )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Shares Change (QoQ)</span>
                     </td>
@@ -125,7 +133,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{checkValue(rawData?.sharesQoQ, "percent")}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Owned by Institutions (%)</span>
                     </td>
@@ -136,26 +144,34 @@
                         "percent",
                       )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Shares Floating</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       title="2,777,647,654"
-                      >{abbreviateNumber(rawData?.floatShares)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.floatShares,
+                        false,
+                        true,
+                      )}</td
                     >
                   </tr>
-                  <tr class="border-y border-gray-600 odd:bg-secondary"
+                  <tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Failed to Deliver (FTD) Shares</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       title="2,777,647,654"
-                      >{abbreviateNumber(rawData?.failToDeliver)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.failToDeliver,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>FTD / Avg. Volume</span>
                     </td>
@@ -177,23 +193,29 @@
               <p
                 class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
-                The latest short interest is {abbreviateNumber(
+                The latest short interest is {@html abbreviateNumber(
                   rawData?.sharesShort,
+                  false,
+                  true,
                 )}, so {rawData?.shortOutStandingPercent}% of the outstanding
                 shares have been sold short.
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Short Interest</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       title="74,332,630"
-                      >{abbreviateNumber(rawData?.sharesShort)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.sharesShort,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Short % of Shares Out</span>
                     </td>
@@ -201,7 +223,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.shortOutStandingPercent}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Short % of Float</span>
                     </td>
@@ -209,7 +231,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.shortFloatPercent}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Short Ratio (days to cover)</span>
                     </td>
@@ -238,7 +260,7 @@
 
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>PE Ratio</span>
                     </td>
@@ -246,7 +268,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.priceEarningsRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Forward PE</span>
                     </td>
@@ -254,7 +276,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.forwardPE}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>PS Ratio</span>
                     </td>
@@ -262,7 +284,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.priceToSalesRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Forward PS</span>
                     </td>
@@ -270,7 +292,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.forwardPS}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>PB Ratio</span>
                     </td>
@@ -278,7 +300,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.priceToBookRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>P/FCF Ratio</span>
                     </td>
@@ -286,7 +308,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.priceToFreeCashFlowsRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>PEG Ratio</span>
                     </td>
@@ -311,55 +333,57 @@
               <p
                 class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
-              {#if rawData?.enterpriseValue !== null}
-                {$displayCompanyName} has an Enterprise Value (EV) of {abbreviateNumber(
-                  rawData?.enterpriseValue,
-                )}.
-              {:else}
-              Currently the Enterprise Value (EV) is not available for {$displayCompanyName}.
-              {/if}
+                {#if rawData?.enterpriseValue !== null}
+                  {$displayCompanyName} has an Enterprise Value (EV) of {@html abbreviateNumber(
+                    rawData?.enterpriseValue,
+                    false,
+                    true,
+                  )}.
+                {:else}
+                  Currently the Enterprise Value (EV) is not available for {$displayCompanyName}.
+                {/if}
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EV / Earnings</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.evEarnings ?? 'n/a'}</td
+                      >{rawData?.evEarnings ?? "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EV / Sales</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.evSales ?? 'n/a'}</td
+                      >{rawData?.evSales ?? "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EV / EBITDA</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.evEBITDA ?? 'n/a'}</td
+                      >{rawData?.evEBITDA ?? "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EV / EBIT</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.evEBIT ?? 'n/a'}</td
+                      >{rawData?.evEBIT ?? "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EV / FCF</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.evFCF ?? 'n/a'}</td
+                      >{rawData?.evFCF ?? "n/a"}</td
                     >
                   </tr></tbody
                 >
@@ -377,7 +401,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Current Ratio</span>
                     </td>
@@ -385,7 +409,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.currentRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Quick Ratio</span>
                     </td>
@@ -393,7 +417,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.quickRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Debt / Equity</span>
                     </td>
@@ -401,17 +425,19 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.debtEquityRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Total Debt / Capitalization</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(
+                      >{@html abbreviateNumber(
                         rawData?.totalDebtToCapitalization,
+                        false,
+                        true,
                       )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Cash Flow / Debt</span>
                     </td>
@@ -419,7 +445,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.cashFlowToDebtRatio}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Interest Coverage</span>
                     </td>
@@ -443,7 +469,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Return on Equity (ROE)</span>
                     </td>
@@ -451,7 +477,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.returnOnEquity}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Return on Assets (ROA)</span>
                     </td>
@@ -459,7 +485,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.returnOnAssets}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Return on Capital (ROIC)</span>
                     </td>
@@ -467,31 +493,44 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.returnOnInvestedCapital}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Revenue Per Employee</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.revenuePerEmployee)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.revenuePerEmployee,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Profits Per Employee</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.profitPerEmployee)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.profitPerEmployee,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Employee Count</span></td
                     >
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      title="140,473">{abbreviateNumber(rawData?.employees)}</td
+                      title="140,473"
+                      >{@html abbreviateNumber(
+                        rawData?.employees,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Asset Turnover</span>
                     </td>
@@ -499,13 +538,17 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.assetTurnover}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Inventory Turnover</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.inventoryTurnover)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.inventoryTurnover,
+                        false,
+                        true,
+                      )}</td
                     >
                   </tr></tbody
                 >
@@ -515,15 +558,19 @@
               <h2 class="mb-2 px-0.5 text-xl font-bold text-white">Taxes</h2>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Income Tax</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.incomeTaxExpense)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.incomeTaxExpense,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Effective Tax Rate</span>
                     </td>
@@ -552,7 +599,7 @@
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Beta</span>
                     </td>
@@ -560,7 +607,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.beta}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>52-Week Price Change</span>
                     </td>
@@ -568,7 +615,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.change1Y}%</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>50-Day Moving Average</span>
                     </td>
@@ -576,7 +623,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.sma50}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>200-Day Moving Average</span>
                     </td>
@@ -584,7 +631,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.sma200}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Relative Strength Index (RSI)</span>
                     </td>
@@ -592,13 +639,17 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       >{rawData?.rsi}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Average Volume (20 Days)</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.avgVolume)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.avgVolume,
+                        false,
+                        true,
+                      )}</td
                     >
                   </tr></tbody
                 >
@@ -612,64 +663,91 @@
               <p
                 class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
-              {#if rawData?.revenue !== null && rawData?.revenue !== 0}
-                In the last 12 months, {companyName} had revenue of {abbreviateNumber(
-                  rawData?.revenue)}
-                and earned {abbreviateNumber(rawData?.netIncome)} in profits.
-                Earnings per share was {rawData?.eps}.
+                {#if rawData?.revenue !== null && rawData?.revenue !== 0}
+                  In the last 12 months, {companyName} had revenue of {@html abbreviateNumber(
+                    rawData?.revenue,
+                    false,
+                    true,
+                  )}
+                  and earned {@html abbreviateNumber(
+                    rawData?.netIncome,
+                    false,
+                    true,
+                  )} in profits. Earnings per share was {rawData?.eps}.
                 {/if}
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Revenue</span></td
                     >
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.revenue !== 0 && rawData?.revenue !== null ? abbreviateNumber(rawData?.revenue) : 'n/a'}</td
+                      >{@html rawData?.revenue !== 0 &&
+                      rawData?.revenue !== null
+                        ? abbreviateNumber(rawData?.revenue, false, true)
+                        : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Gross Profit</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.grossProfit)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.grossProfit,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Operating Income</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.operatingIncome)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.operatingIncome,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Net Income</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.netIncome)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.netIncome,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EBITDA</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.ebitda)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.ebitda,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EBIT</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.ebit !== 0 && rawData?.ebit !== null ? abbreviateNumber(rawData?.ebit) : 'n/a'}</td
+                      >{@html rawData?.ebit !== 0 && rawData?.ebit !== null
+                        ? abbreviateNumber(rawData?.ebit, false, true)
+                        : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Earnings Per Share (EPS)</span>
                     </td>
@@ -694,67 +772,94 @@
               <p
                 class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
-                The company has {abbreviateNumber(
+                The company has {@html abbreviateNumber(
                   rawData?.cashAndCashEquivalents,
+                  false,
                   true,
-                )} in cash and {abbreviateNumber(rawData?.totalDebt, true)} in debt,
-                giving a net cash position of {abbreviateNumber(
+                )} in cash and {@html abbreviateNumber(
+                  rawData?.totalDebt,
+                  false,
+                  true,
+                )} in debt, giving a net cash position of {@html abbreviateNumber(
                   rawData?.cashAndCashEquivalents - rawData?.totalDebt,
+                  false,
                   true,
                 )}.
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Cash &amp; Cash Equivalents</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.cashAndCashEquivalents)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.cashAndCashEquivalents,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Total Debt</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.totalDebt)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.totalDebt,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Net Cash</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       title="20,865,000,000"
-                      >{abbreviateNumber(
+                      >{@html abbreviateNumber(
                         rawData?.cashAndCashEquivalents - rawData?.totalDebt,
+                        false,
+                        true,
                       )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Retained Earnings</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.retainedEarnings)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.retainedEarnings,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Total Assets</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.totalAssets)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.totalAssets,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Working Capital</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.workingCapital)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.workingCapital,
+                        false,
+                        true,
+                      )}</td
                     >
                   </tr></tbody
                 >
@@ -773,45 +878,60 @@
               <p
                 class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
-                In the last 12 months, operating cash flow was {abbreviateNumber(
+                In the last 12 months, operating cash flow was {@html abbreviateNumber(
                   rawData?.operatingCashFlow,
+                  false,
                   true,
                 )}
-                and capital expenditures {abbreviateNumber(
+                and capital expenditures {@html abbreviateNumber(
                   rawData?.capitalExpenditure,
+                  false,
                   true,
-                )}, giving a free cash flow of {abbreviateNumber(
+                )}, giving a free cash flow of {@html abbreviateNumber(
                   rawData?.freeCashFlow,
+                  false,
                   true,
                 )}.
               </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Operating Cash Flow</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.operatingCashFlow)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.operatingCashFlow,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Capital Expenditures</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.capitalExpenditure)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.capitalExpenditure,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Free Cash Flow</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{abbreviateNumber(rawData?.freeCashFlow)}</td
+                      >{@html abbreviateNumber(
+                        rawData?.freeCashFlow,
+                        false,
+                        true,
+                      )}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>FCF Per Share</span>
                     </td>
@@ -834,73 +954,95 @@
               <p
                 class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
-              {#if rawData?.grossProfitMargin !== 0 && rawData?.grossProfitMargin !== null}
-                Gross margin is {checkValue(
-                  rawData?.grossProfitMargin,
-                  "int",
-                )}%, with operating and profit margins of {checkValue(
-                  rawData?.operatingProfitMargin,
-                  "int",
-                )}% and {checkValue(rawData?.netProfitMargin, "int")}%.
-              {/if}  
-            </p>
+                {#if rawData?.grossProfitMargin !== 0 && rawData?.grossProfitMargin !== null}
+                  Gross margin is {checkValue(
+                    rawData?.grossProfitMargin,
+                    "int",
+                  )}%, with operating and profit margins of {checkValue(
+                    rawData?.operatingProfitMargin,
+                    "int",
+                  )}% and {checkValue(rawData?.netProfitMargin, "int")}%.
+                {/if}
+              </p>
               <table class="w-full">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Gross Margin</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.grossProfitMargin !== 0 && rawData?.grossProfitMargin !== null ? checkValue(rawData?.grossProfitMargin, "int")+'%' : 'n/a'}</td
+                      >{rawData?.grossProfitMargin !== 0 &&
+                      rawData?.grossProfitMargin !== null
+                        ? checkValue(rawData?.grossProfitMargin, "int") + "%"
+                        : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Operating Margin</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.operatingProfitMargin !== 0 && rawData?.operatingProfitMargin !== null ? checkValue(rawData?.operatingProfitMargin, "int")+'%' : 'n/a'}</td
+                      >{rawData?.operatingProfitMargin !== 0 &&
+                      rawData?.operatingProfitMargin !== null
+                        ? checkValue(rawData?.operatingProfitMargin, "int") +
+                          "%"
+                        : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Pretax Margin</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.pretaxProfitMargin !== 0 && rawData?.pretaxProfitMargin !== null ? checkValue(rawData?.pretaxProfitMargin, "int")+'%' : 'n/a'}</td
+                      >{rawData?.pretaxProfitMargin !== 0 &&
+                      rawData?.pretaxProfitMargin !== null
+                        ? checkValue(rawData?.pretaxProfitMargin, "int") + "%"
+                        : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Profit Margin</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.netProfitMargin !== 0 && rawData?.netProfitMargin !== null ? checkValue(rawData?.netProfitMargin, "int")+'%' : 'n/a'}</td
+                      >{rawData?.netProfitMargin !== 0 &&
+                      rawData?.netProfitMargin !== null
+                        ? checkValue(rawData?.netProfitMargin, "int") + "%"
+                        : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EBITDA Margin</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.ebitdaMargin !== 0 && rawData?.ebitdaMargin !== null ? checkValue(rawData?.ebitdaMargin, "int")+'%' : 'n/a'}</td
+                      >{rawData?.ebitdaMargin !== 0 &&
+                      rawData?.ebitdaMargin !== null
+                        ? checkValue(rawData?.ebitdaMargin, "int") + "%"
+                        : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>EBIT Margin</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.ebitMargin !== 0 && rawData?.ebitMargin !== null ? checkValue(rawData?.ebitMargin, "int")+'%' : 'n/a'}</td
+                      >{rawData?.ebitMargin !== 0 &&
+                      rawData?.ebitMargin !== null
+                        ? checkValue(rawData?.ebitMargin, "int") + "%"
+                        : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>FCF Margin</span>
                     </td>
                     <td
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
-                      >{rawData?.freeCashFlowMargin !== 0 && rawData?.freeCashFlowMargin !== null ? checkValue(rawData?.freeCashFlowMargin, "int")+'%' : 'n/a'}</td
+                      >{rawData?.freeCashFlowMargin !== 0 &&
+                      rawData?.freeCashFlowMargin !== null
+                        ? checkValue(rawData?.freeCashFlowMargin, "int") + "%"
+                        : "n/a"}</td
                     >
                   </tr></tbody
                 >
@@ -925,7 +1067,7 @@
               </p>
               <table class="w-full" data-test="statistics-table">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Dividend Per Share</span>
                     </td>
@@ -935,7 +1077,7 @@
                         ? "$" + rawData?.annualDividend?.toFixed(2)
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Dividend Yield</span>
                     </td>
@@ -945,7 +1087,7 @@
                         ? rawData?.dividendYield + "%"
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Dividend Growth (YoY)</span>
                     </td>
@@ -955,7 +1097,7 @@
                         ? rawData?.dividendGrowth + "%"
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Payout Ratio</span>
                     </td>
@@ -966,7 +1108,7 @@
                         ? rawData?.payoutRatio + "%"
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Earnings Yield</span>
                     </td>
@@ -976,7 +1118,7 @@
                         ? rawData?.earningsYield + "%"
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>FCF Yield</span>
                     </td>
@@ -1016,7 +1158,7 @@
               </p>
               <table class="w-full" data-test="statistics-table">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Price Target</span>
                     </td>
@@ -1027,7 +1169,7 @@
                         ? "$" + rawData?.priceTarget
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Price Target Difference</span>
                     </td>
@@ -1038,7 +1180,7 @@
                         ? rawData?.upside + "%"
                         : "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Analyst Consensus</span>
                     </td>
@@ -1046,7 +1188,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       title="Strong Buy">{rawData?.analystRating ?? "n/a"}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Analyst Count</span>
                     </td>
@@ -1086,7 +1228,7 @@
                 </p>
                 <table class="w-full" data-test="statistics-table">
                   <tbody
-                    ><tr class="border-y border-gray-600 odd:bg-secondary"
+                    ><tr class="border-y border-gray-800 odd:bg-odd"
                       ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                         ><span>Last Split Date</span>
                       </td>
@@ -1103,7 +1245,7 @@
                           },
                         )}</td
                       >
-                    </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                    </tr><tr class="border-y border-gray-800 odd:bg-odd"
                       ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                         ><span>Split Type</span>
                       </td>
@@ -1111,7 +1253,7 @@
                         class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                         title="Forward">{rawData?.splitType}</td
                       >
-                    </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                    </tr><tr class="border-y border-gray-800 odd:bg-odd"
                       ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                         ><span>Split Ratio</span>
                       </td>
@@ -1128,7 +1270,7 @@
               <h2 class="mb-2 px-0.5 text-xl font-bold text-white">Scores</h2>
               <table class="w-full" data-test="statistics-table">
                 <tbody
-                  ><tr class="border-y border-gray-600 odd:bg-secondary"
+                  ><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Altman Z-Score</span>
                     </td>
@@ -1136,7 +1278,7 @@
                       class="px-[5px] py-1.5 text-right font-semibold xs:px-2.5 xs:py-2"
                       title="n/a">{rawData?.altmanZScore}</td
                     >
-                  </tr><tr class="border-y border-gray-600 odd:bg-secondary"
+                  </tr><tr class="border-y border-gray-800 odd:bg-odd"
                     ><td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2"
                       ><span>Piotroski F-Score</span>
                     </td>
diff --git a/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
index b0af19b3..ff8fb470 100644
--- a/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/employees/+layout.svelte
@@ -40,7 +40,7 @@
           {/if}
           {#if similarStocks?.length > 0}
             <div
-              class="w-full p-2 text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full p-2 bg-primary text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
               <table class="table table-sm table-compact w-full text-white">
diff --git a/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte b/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
index 98036937..30a08a10 100644
--- a/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
@@ -345,20 +345,26 @@
   };
 
   function generateEmployeeInfoHTML() {
-  if (employeeHistory?.length !== 0 && !dateDistance) {
-    const formattedEmployees = new Intl.NumberFormat('en').format(employees);
-    const latestFilingDate = new Date(
-      employeeHistory[employeeHistory.length - 1]['filingDate']
-    ).toLocaleString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric'
-    });
-    const formattedChangeRate = new Intl.NumberFormat('en').format(changeRate);
-    const changeDirection = changeRate >= 0 && changeRate !== null ? 'increased' : 'decreased';
-    const growthRateClass = changeRate >= 0 && changeRate !== null ? 'text-[#00FC50]' : 'text-[#FF2F1F]';
+    if (employeeHistory?.length !== 0 && !dateDistance) {
+      const formattedEmployees = new Intl.NumberFormat("en").format(employees);
+      const latestFilingDate = new Date(
+        employeeHistory[employeeHistory.length - 1]["filingDate"],
+      ).toLocaleString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+      const formattedChangeRate = new Intl.NumberFormat("en").format(
+        changeRate,
+      );
+      const changeDirection =
+        changeRate >= 0 && changeRate !== null ? "increased" : "decreased";
+      const growthRateClass =
+        changeRate >= 0 && changeRate !== null
+          ? "text-[#00FC50]"
+          : "text-[#FF2F1F]";
 
-    return `
+      return `
       <span>
         ${$displayCompanyName} had ${formattedEmployees} employees on ${latestFilingDate}. The number of employees ${changeDirection}
         by ${formattedChangeRate} or
@@ -368,31 +374,31 @@
         compared to the previous year.
       </span>
     `;
-  } else if (employeeHistory?.length !== 0 && dateDistance) {
-    const abbreviatedEmployees = abbreviateNumber(employees);
-    const latestFilingDate = new Date(
-      employeeHistory[employeeHistory.length - 1]['filingDate']
-    ).toLocaleString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric'
-    });
+    } else if (employeeHistory?.length !== 0 && dateDistance) {
+      const abbreviatedEmployees = abbreviateNumber(employees);
+      const latestFilingDate = new Date(
+        employeeHistory[employeeHistory.length - 1]["filingDate"],
+      ).toLocaleString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
 
-    return `
+      return `
       <span>
         ${$displayCompanyName} had ${abbreviatedEmployees} employees on ${latestFilingDate}. Since then, the company has not submitted any additional employee data for more than a year.
       </span>
     `;
-  } else {
-    return `
+    } else {
+      return `
       <span>
         No employee history for ${$displayCompanyName}. Probably, no records of past employees.
       </span>
     `;
+    }
   }
-}
 
-const htmlOutput = generateEmployeeInfoHTML();
+  const htmlOutput = generateEmployeeInfoHTML();
 </script>
 
 <svelte:head>
@@ -443,12 +449,11 @@ const htmlOutput = generateEmployeeInfoHTML();
             {$stockTicker} Employees
           </h2>
 
-          
-         <Infobox text={htmlOutput} />
+          <Infobox text={htmlOutput} />
         </div>
 
         <div
-          class="my-5 grid grid-cols-2 gap-3  xs:mt-6 bp:mt-7 sm:grid-cols-3 sm:gap-6 "
+          class="my-5 grid grid-cols-2 gap-3 xs:mt-6 bp:mt-7 sm:grid-cols-3 sm:gap-6"
         >
           <div>
             Employees
@@ -515,7 +520,11 @@ const htmlOutput = generateEmployeeInfoHTML();
             <div
               class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
             >
-              {abbreviateNumber(data?.getStockQuote?.marketCap)}
+              {@html abbreviateNumber(
+                data?.getStockQuote?.marketCap,
+                false,
+                true,
+              )}
             </div>
           </div>
         </div>
@@ -527,9 +536,7 @@ const htmlOutput = generateEmployeeInfoHTML();
             Employees Chart
           </h1>
           {#if historyList?.length > 0}
-            <div
-              class="flex flex-row items-center w-fit   ml-auto"
-            >
+            <div class="flex flex-row items-center w-fit ml-auto">
               <div class="relative inline-block text-left grow">
                 <DropdownMenu.Root>
                   <DropdownMenu.Trigger asChild let:builder>
@@ -623,25 +630,25 @@ const htmlOutput = generateEmployeeInfoHTML();
             <table
               class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
             >
-              <thead>
+              <thead class="border-b border-gray-800">
                 <tr>
                   <th
-                    class="text-start border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold"
+                    class="text-start text-white text-sm whitespace-nowrap font-semibold"
                   >
                     Date
                   </th>
                   <th
-                    class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold"
+                    class="text-end text-white text-sm whitespace-nowrap font-semibold"
                   >
                     Employees
                   </th>
                   <th
-                    class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold"
+                    class="text-end text-white text-sm whitespace-nowrap font-semibold"
                   >
                     Change
                   </th>
                   <th
-                    class="text-end border-b border-[#09090B] bg-[#09090B] text-white text-sm whitespace-nowrap font-semibold"
+                    class="text-end text-white text-sm whitespace-nowrap font-semibold"
                   >
                     Growth
                   </th>
@@ -649,9 +656,9 @@ const htmlOutput = generateEmployeeInfoHTML();
               </thead>
               <tbody class="">
                 {#each historyList as item, index}
-                  <tr class="text-gray-200 odd:bg-secondary">
+                  <tr class="text-gray-200 odd:bg-odd">
                     <td
-                      class="text-start border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                      class="text-start border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white"
                     >
                       {new Date(item?.filingDate)?.toLocaleString("en-US", {
                         month: "short",
@@ -661,12 +668,12 @@ const htmlOutput = generateEmployeeInfoHTML();
                       })}
                     </td>
                     <td
-                      class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                      class="text-end border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white"
                     >
                       {new Intl.NumberFormat("en").format(item?.employeeCount)}
                     </td>
                     <td
-                      class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                      class="text-end border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white"
                     >
                       {#if Number(item?.employeeCount - historyList[index + 1]?.employeeCount)}
                         {new Intl.NumberFormat("en")?.format(
@@ -678,7 +685,7 @@ const htmlOutput = generateEmployeeInfoHTML();
                       {/if}
                     </td>
                     <td
-                      class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white text-end"
+                      class="text-end border-b border-gray-800 text-sm sm:text-[1rem] whitespace-nowrap text-white text-end"
                     >
                       {#if index + 1 - historyList?.length === 0}
                         n/a
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
index 569efab7..869267f2 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+layout.svelte
@@ -105,7 +105,7 @@
 
           {#if similarStocks?.length > 0}
             <div
-              class="w-full p-2 text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
+              class="w-full p-2 text-white border border-gray-600 bg-primary rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <h3 class="p-2 pt-4 text-2xl font-semibold">Related Stocks</h3>
               <table class="table table-sm table-compact w-full text-white">
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index 685f7849..1c7476fb 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@@ -301,7 +301,6 @@
           name: "Mkt Cap",
           data: filteredData?.marketCapList,
           type: "line",
-          areaStyle: { opacity: 0.2 },
           smooth: true,
           symbol: "none",
           itemStyle: {
@@ -416,27 +415,27 @@
 
             {#if rawData?.length !== 0}
               <div class="grid grid-cols-1 gap-2">
-
-                <Infobox text={`${$displayCompanyName} has a market cap of ${abbreviateNumber(
-                    data?.getStockQuote?.marketCap
+                <Infobox
+                  text={`${$displayCompanyName} has a market cap of ${abbreviateNumber(
+                    data?.getStockQuote?.marketCap,
                   )} as of ${new Date()?.toLocaleString("en-US", {
                     month: "short",
                     day: "numeric",
                     year: "numeric",
                     daySuffix: "2-digit",
-                  })}. Its market cap has ${changePercentageYearAgo > 0
-                    ? "increased"
-                    : changePercentageYearAgo < 0
-                      ? "decreased"
-                      : "unchanged"} by ${abbreviateNumber(
+                  })}. Its market cap has ${
+                    changePercentageYearAgo > 0
+                      ? "increased"
+                      : changePercentageYearAgo < 0
+                        ? "decreased"
+                        : "unchanged"
+                  } by ${abbreviateNumber(
                     changePercentageYearAgo?.toFixed(2),
-                  )}% in one year.`} 
-              />
-
-               
+                  )}% in one year.`}
+                />
 
                 <div
-                  class="mb-4 mt-5 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="mb-4 mt-5 bg-primary 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">
@@ -446,7 +445,11 @@
                       <div
                         class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
                       >
-                        {abbreviateNumber(data?.getStockQuote?.marketCap)}
+                        {@html abbreviateNumber(
+                          data?.getStockQuote?.marketCap,
+                          false,
+                          true,
+                        )}
                       </div>
                     </div>
                   </div>
@@ -660,10 +663,10 @@
 
                 <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"
+                    class="table table-sm table-compact rounded-none sm:rounded-md w-full m-auto mt-4"
                   >
-                    <thead>
-                      <tr class="border border-gray-600">
+                    <thead class="">
+                      <tr class="border-b border-gray-800">
                         <th class="text-white font-semibold text-start text-sm"
                           >Date</th
                         >
@@ -679,22 +682,22 @@
                       {#each tableList as item, index}
                         <!-- row -->
                         <tr
-                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-secondary border-b-[#09090B] shake-ticker cursor-pointer"
+                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-odd border-b border-gray-800"
                         >
                           <td
-                            class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                            class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b border-gray-800"
                           >
                             {item?.date}
                           </td>
 
                           <td
-                            class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
+                            class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b border-gray-800"
                           >
                             {abbreviateNumber(item?.marketCap)}
                           </td>
 
                           <td
-                            class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
+                            class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b border-gray-800"
                           >
                             {#if index + 1 - tableList?.length === 0}
                               -
@@ -740,7 +743,7 @@
         <div class="w-full flex justify-center items-center h-80">
           <div class="relative">
             <label
-              class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+              class="bg-odd rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
             >
               <span class="loading loading-spinner loading-md text-gray-400"
               ></span>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 5053b3ca..c836df5d 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -27,6 +27,7 @@ module.exports = {
         foreground: "hsl(var(--foreground) / <alpha-value>)",
         primary: "#1E222D",
         secondary: "#2A2E39",
+        odd: "#121217",
         destructive: {
           DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
           foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",