diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index d0c7749e..b41681c5 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -10,6 +10,7 @@
   import DownloadData from "$lib/components/DownloadData.svelte";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import highcharts from "$lib/highcharts.ts";
+  import { mode } from "mode-watcher";
 
   export let data;
 
@@ -35,8 +36,8 @@
     const options = {
       chart: {
         type: "bar",
-        backgroundColor: "#09090B",
-        plotBackgroundColor: "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
         height: 360, // Set the maximum height for the chart
         animation: false,
       },
@@ -44,19 +45,22 @@
       legend: {
         enabled: true,
         animation: false,
-        itemStyle: { color: "#fff" },
+        itemStyle: { color: $mode === "light" ? "black" : "white" },
       },
       title: {
         text: `<h3 class="mt-3 mb-1 text-center">${removeCompanyStrings($displayCompanyName)} Ownership Distribution</h3>`,
         useHTML: true,
-        style: { color: "white" },
+        style: { color: $mode === "light" ? "black" : "white" },
       },
       xAxis: {
         categories: [""],
         animation: false,
       },
       yAxis: {
-        title: { text: null, style: { color: "#fff" } },
+        title: {
+          text: null,
+          style: { color: $mode === "light" ? "black" : "white" },
+        },
         opposite: true,
         gridLineWidth: 1,
         gridLineColor: "#111827",
@@ -64,7 +68,7 @@
           formatter: function () {
             return this?.value + "%";
           },
-          style: { color: "#fff" },
+          style: { color: $mode === "light" ? "black" : "white" },
         },
         tickPositioner: function () {
           // Create custom tick positions with wider spacing
@@ -84,11 +88,11 @@
       },
       plotOptions: {
         series: {
-          color: "white",
+          color: $mode === "light" ? "black" : "white",
           animation: false,
           dataLabels: {
             enabled: false,
-            color: "white",
+            color: $mode === "light" ? "black" : "white",
             style: {
               fontSize: "13px",
               fontWeight: "bold",
@@ -131,8 +135,6 @@
     putCallRatio = 0;
   }
 
-  config = plotData();
-
   let charNumber = 30;
 
   async function handleScroll() {
@@ -233,12 +235,18 @@
     // Sort using the generic comparison function
     displayList = [...originalData].sort(compareValues)?.slice(0, 50);
   };
+
+  $: {
+    if ($mode) {
+      config = plotData();
+    }
+  }
 </script>
 
-<section class="overflow-hidden text-white h-full pb-8">
+<section class="overflow-hidden h-full pb-8">
   <main class="overflow-hidden">
     {#if shareholderList?.length !== 0}
-      <div class="text-white text-[1rem] mt-3">
+      <div class=" text-[1rem] mt-3">
         <p>
           Total Institutes of {rawData?.investorsHolding?.toLocaleString(
             "en-US",
@@ -289,11 +297,11 @@
       </div>
 
       {#if putCallRatio !== 0}
-        <h1 class="text-white font-semibold text-xl sm:text-2xl mb-3 mt-5">
+        <h1 class=" font-semibold text-xl sm:text-2xl mb-3 mt-5">
           Options Activity
         </h1>
 
-        <div class="mt-3 text-white text-md">
+        <div class="mt-3 text-md">
           Institutions are holding {callPercentage > 55
             ? "more Calls Contracts as Puts Contracts, indicating a bullish sentiment."
             : callPercentage < 45
@@ -307,11 +315,11 @@
           >
             <!--Start Put/Call-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 shadow-sm border border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
             >
               <div class="flex flex-col items-start">
-                <span class=" text-white text-sm sm:text-[1rem]">Put/Call</span>
-                <span class="text-start text-sm sm:text-[1rem] text-white">
+                <span class="  text-sm sm:text-[1rem]">Put/Call</span>
+                <span class="text-start text-sm sm:text-[1rem]">
                   {putCallRatio?.toFixed(3)}
                 </span>
               </div>
@@ -328,7 +336,7 @@
                     cy="18"
                     r="16"
                     fill="none"
-                    class="stroke-current text-[#3E3E3E]"
+                    class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
                     stroke-width="3"
                   ></circle>
                   <!-- Progress Circle inside a group with rotation -->
@@ -351,7 +359,7 @@
                 <div
                   class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
                 >
-                  <span class="text-center text-white text-sm"
+                  <span class="text-center text-sm"
                     >{putCallRatio?.toFixed(2)}</span
                   >
                 </div>
@@ -361,12 +369,11 @@
             <!--End Put/Call-->
             <!--Start Call Flow-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 shadow-sm border border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
             >
               <div class="flex flex-col items-start">
-                <span class=" text-white text-sm sm:text-[1rem]">Call Flow</span
-                >
-                <span class="text-start text-sm sm:text-[1rem] text-white">
+                <span class="  text-sm sm:text-[1rem]">Call Flow</span>
+                <span class="text-start text-sm sm:text-[1rem]">
                   {new Intl.NumberFormat("en", {
                     minimumFractionDigits: 0,
                     maximumFractionDigits: 0,
@@ -386,7 +393,7 @@
                     cy="18"
                     r="16"
                     fill="none"
-                    class="stroke-current text-[#3E3E3E]"
+                    class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
                     stroke-width="3"
                   ></circle>
                   <!-- Progress Circle inside a group with rotation -->
@@ -407,7 +414,7 @@
                 <div
                   class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
                 >
-                  <span class="text-center text-white text-sm"
+                  <span class="text-center text-sm"
                     >{callPercentage?.toFixed(0)}%</span
                   >
                 </div>
@@ -418,11 +425,11 @@
 
             <!--Start Put Flow-->
             <div
-              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
+              class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 shadow-sm border border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
             >
               <div class="flex flex-col items-start">
-                <span class=" text-white text-sm sm:text-[1rem]">Put Flow</span>
-                <span class="text-start text-sm sm:text-[1rem] text-white">
+                <span class="  text-sm sm:text-[1rem]">Put Flow</span>
+                <span class="text-start text-sm sm:text-[1rem]">
                   {new Intl.NumberFormat("en", {
                     minimumFractionDigits: 0,
                     maximumFractionDigits: 0,
@@ -442,7 +449,7 @@
                     cy="18"
                     r="16"
                     fill="none"
-                    class="stroke-current text-[#3E3E3E]"
+                    class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
                     stroke-width="3"
                   ></circle>
                   <!-- Progress Circle inside a group with rotation -->
@@ -463,7 +470,7 @@
                 <div
                   class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
                 >
-                  <span class="text-center text-white text-sm"
+                  <span class="text-center text-sm"
                     >{putPercentage?.toFixed(0)}%</span
                   >
                 </div>
@@ -476,12 +483,10 @@
       {/if}
 
       <div class="flex flex-row items-center justify-between mb-3">
-        <h3 class="text-white font-semibold text-xl sm:text-2xl">
-          Top Shareholders
-        </h3>
+        <h3 class=" font-semibold text-xl sm:text-2xl">Top Shareholders</h3>
 
         {#if topHolders !== 0}
-          <span class="text-white text-[1rem">
+          <span class=" text-[1rem">
             The Top 10 shareholders collectively own <span class="font-semibold"
               >{topHolders <= 0.01
                 ? "< 0.01%"
@@ -504,7 +509,7 @@
         class="flex justify-start items-center w-full m-auto mt-3 overflow-x-auto"
       >
         <table
-          class="table table-sm table-compact bg-table border border-gray-800 w-full"
+          class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
         >
           <thead>
             <TableHeader {columns} {sortOrders} {sortData} />
@@ -513,7 +518,7 @@
             {#each displayList as item, index}
               {#if item?.investorName?.length > 0}
                 <tr
-                  class="border-b border-gray-800 odd:bg-odd sm:hover:bg-[#245073]/10 {index +
+                  class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                     1 ===
                     shareholderList?.length &&
                   !['Pro', 'Plus']?.includes(data?.user?.tier)
@@ -523,7 +528,7 @@
                   <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
                     <a
                       href={"/hedge-funds/" + item?.cik}
-                      class="sm:hover:underline sm:hover:underline-offset-4 text-white"
+                      class="sm:hover:underline sm:hover:underline-offset-4"
                     >
                       {item?.investorName?.length > charNumber
                         ? formatString(
@@ -534,7 +539,7 @@
                   </td>
 
                   <td
-                    class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                    class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     {item?.ownership <= 0.01
                       ? "< 0.01%"
@@ -542,7 +547,7 @@
                   </td>
 
                   <td
-                    class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                    class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     {@html item?.sharesNumber !== null
                       ? abbreviateNumber(item?.sharesNumber, false, true)
@@ -550,7 +555,7 @@
                   </td>
 
                   <td
-                    class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                    class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     {#if item?.changeInSharesNumberPercentage >= 0}
                       <span class="text-green-600 dark:text-[#00FC50]"
@@ -570,7 +575,7 @@
                   </td>
 
                   <td
-                    class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                    class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     {item?.marketValue !== null
                       ? abbreviateNumber(item?.marketValue)
@@ -578,7 +583,7 @@
                   </td>
 
                   <td
-                    class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
+                    class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
                   >
                     {item?.weight <= 0.01
                       ? "< 0.01%"
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte
index 280ec1f7..fae41810 100644
--- a/src/routes/stocks/[tickerID]/financials/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte
@@ -54,7 +54,7 @@
         <main class="w-full">
           <div class="m-auto">
             <nav
-              class="sm:ml-4 pt-1 overflow-x-auto md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
+              class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
             >
               <ul class="flex flex-row items-center w-full text-white">
                 <a
diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte
index bfa792c2..e9de4f63 100644
--- a/src/routes/stocks/[tickerID]/financials/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+page.svelte
@@ -324,16 +324,14 @@
 />
 
 <section class=" w-full overflow-hidden h-full">
-  <div
-    class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
-  >
+  <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       <main class="w-full">
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
           <div
-            class="mb-3 flex flex-col sm:flex-row items-center justify-between"
+            class="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between"
           >
             <h1 class="text-xl sm:text-2xl font-bold">
               {removeCompanyStrings($displayCompanyName)} Income Statement
diff --git a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
index f63180e8..b78b7864 100644
--- a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
@@ -360,16 +360,14 @@
 />
 
 <section class=" w-full overflow-hidden h-full">
-  <div
-    class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
-  >
+  <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       <main class="w-full">
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
           <div
-            class="mb-3 flex flex-col sm:flex-row items-center justify-between"
+            class="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between"
           >
             <h1 class="text-xl sm:text-2xl font-bold">
               {removeCompanyStrings($displayCompanyName)} Balance Sheet Statement
diff --git a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
index a34918c8..73fd9552 100644
--- a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
@@ -322,16 +322,14 @@
 />
 
 <section class=" w-full overflow-hidden h-full">
-  <div
-    class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
-  >
+  <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       <main class="w-full">
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
           <div
-            class="mb-3 flex flex-col sm:flex-row items-center justify-between"
+            class="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between"
           >
             <h1 class="text-xl sm:text-2xl font-bold">
               {removeCompanyStrings($displayCompanyName)} Cash Flow Statement
diff --git a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
index db8ab987..a626248e 100644
--- a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
@@ -311,16 +311,14 @@
 />
 
 <section class=" w-full overflow-hidden h-full">
-  <div
-    class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
-  >
+  <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       <main class="w-full">
         <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
           <div
-            class="mb-3 flex flex-col sm:flex-row items-center justify-between"
+            class="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between"
           >
             <h1 class="text-xl sm:text-2xl font-bold">
               {removeCompanyStrings($displayCompanyName)} Ratios Statement
diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index 75ae121a..f0a5b487 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -79,15 +79,15 @@
       >
         <main class="w-full lg:w-3/4 lg:pr-10">
           <nav
-            class="mb-5 sm:mb-0 sm:ml-4 pt-1 overflow-x-auto md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap"
+            class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
           >
             <ul class="flex flex-row items-center w-full text-white">
               <a
                 href={`/stocks/${$stockTicker}/insider`}
                 on:click={() => changeSubSection("insider")}
                 class="p-2 px-5 cursor-pointer {displaySubSection === 'insider'
-                  ? 'text-white bg-secondary'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Insider Trading
               </a>
@@ -97,8 +97,8 @@
                 on:click={() => changeSubSection("institute")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'institute'
-                  ? 'text-white bg-secondary'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 13F Institute
               </a>
@@ -108,8 +108,8 @@
                 on:click={() => changeSubSection("congress-trading")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'congress-trading'
-                  ? 'text-white bg-secondary'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Congress Trading
               </a>
@@ -118,8 +118,8 @@
                 on:click={() => changeSubSection("transcripts")}
                 class="p-2 px-5 cursor-pointer {displaySubSection ===
                 'transcripts'
-                  ? 'text-white bg-secondary'
-                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
+                  ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                  : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
               >
                 Transcripts
               </a>
@@ -129,21 +129,19 @@
           <slot />
         </main>
 
-        <aside class="hidden lg:block relative fixed w-1/4 mt-3">
+        <aside class="hidden lg:block relative fixed w-1/4">
           {#if newsList?.length !== 0}
             <div
-              class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
               <div class="p-4 text-sm">
-                <h3 class="text-lg text-white font-semibold mb-3">
-                  {$stockTicker} News
-                </h3>
-                <ul class="text-white">
+                <h3 class="text-xl font-bold mb-3">{$stockTicker} News</h3>
+                <ul class="">
                   {#each newsList?.slice(0, 10) as item}
                     <li class="mb-3 last:mb-1">
                       {formatDate(item?.publishedDate)} ago -
                       <a
-                        class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
+                        class="sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400"
                         href={item?.url}
                         target="_blank"
                         rel="noopener noreferrer nofollow">{item?.title}</a
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index a4ad82f4..017f4cb9 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-  import {
-    displayCompanyName,
-    numberOfUnreadNotification,
-    stockTicker,
-  } from "$lib/store";
+  import { displayCompanyName, stockTicker } from "$lib/store";
   import { formatString, abbreviateNumber } from "$lib/utils";
   import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
   import { onMount } from "svelte";
@@ -11,6 +7,7 @@
   import { Button } from "$lib/components/shadcn/button/index.js";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
   import SEO from "$lib/components/SEO.svelte";
+  import Infobox from "$lib/components/Infobox.svelte";
 
   export let data;
   let isLoaded = true;
@@ -218,33 +215,19 @@
   description={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
 />
 
-<section class="w-full bg-default overflow-hidden text-white h-full">
+<section class="w-full overflow-hidden h-full">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
         <div class="w-full mb-6">
-          <h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
-            Insider Trading
-          </h1>
+          <h1 class="text-xl sm:text-2xl font-bold mb-4">Insider Trading</h1>
           {#if insiderTradingList?.length === 0}
-            <div
-              class="w-fit text-white p-3 sm:p-5 mb-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
-            >
-              <svg
-                class="w-6 h-6 shrink-0 inline-block sm:mr-2"
-                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
-              >
-
-              No trading history available for {$displayCompanyName}. Likely no
-              insider trading has happened yet.
-            </div>
+            <Infobox
+              text={`No trading history available for ${$displayCompanyName}. Likely no
+              insider trading has happened yet.`}
+            />
           {/if}
         </div>
 
@@ -257,9 +240,9 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                        class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:border-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                       >
-                        <span class="truncate text-white">Year: {year}</span>
+                        <span class="truncate">Year: {year}</span>
                         <svg
                           class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                           viewBox="0 0 20 20"
@@ -278,7 +261,7 @@
                     <DropdownMenu.Content
                       class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                     >
-                      <DropdownMenu.Label class="text-gray-400">
+                      <DropdownMenu.Label class="text-muted dark:text-gray-400">
                         Select Year
                       </DropdownMenu.Label>
                       <DropdownMenu.Separator />
@@ -286,7 +269,7 @@
                         {#each yearRange as index}
                           <DropdownMenu.Item
                             on:click={() => (year = index)}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             {index}
                           </DropdownMenu.Item>
@@ -300,11 +283,9 @@
                     <DropdownMenu.Trigger asChild let:builder>
                       <Button
                         builders={[builder]}
-                        class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                        class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:border-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
                       >
-                        <span class="truncate text-white"
-                          >Quarter: Q{quarter}</span
-                        >
+                        <span class="truncate">Quarter: Q{quarter}</span>
                         <svg
                           class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                           viewBox="0 0 20 20"
@@ -323,7 +304,7 @@
                     <DropdownMenu.Content
                       class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                     >
-                      <DropdownMenu.Label class="text-gray-400">
+                      <DropdownMenu.Label class="text-muted dark:text-gray-400">
                         Select Quarter
                       </DropdownMenu.Label>
                       <DropdownMenu.Separator />
@@ -331,7 +312,7 @@
                         {#each [1, 2, 3, 4] as index}
                           <DropdownMenu.Item
                             on:click={() => (quarter = index)}
-                            class="cursor-pointer hover:bg-primary"
+                            class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
                             Q{index}
                           </DropdownMenu.Item>
@@ -342,7 +323,7 @@
                 </div>
               </div>
 
-              <h3 class="text-white text-lg font-semibold pt-5">
+              <h3 class=" text-lg font-semibold pt-5">
                 Q{statistics?.quarter}
                 {statistics?.year} Insider Statistics
               </h3>
@@ -355,15 +336,11 @@
                 >
                   <!--Start Put/Call-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
-                      <span class=" text-white text-sm sm:text-[1rem]"
-                        >Buy/Sell</span
-                      >
-                      <span
-                        class="text-start text-sm sm:text-[1rem] text-white"
-                      >
+                      <span class="  text-sm sm:text-[1rem]">Buy/Sell</span>
+                      <span class="text-start text-sm sm:text-[1rem]">
                         {buySellRatio > 0
                           ? buySellRatio?.toFixed(1)
                           : buySellRatio}
@@ -382,7 +359,7 @@
                           cy="18"
                           r="16"
                           fill="none"
-                          class="stroke-current text-[#3E3E3E]"
+                          class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
                           stroke-width="3"
                         ></circle>
                         <!-- Progress Circle inside a group with rotation -->
@@ -405,8 +382,7 @@
                       <div
                         class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
                       >
-                        <span
-                          class="text-center text-white text-sm sm:text-[1rem]"
+                        <span class="text-center text-sm sm:text-[1rem]"
                           >{(buySellRatio * 100)?.toFixed(0)}%</span
                         >
                       </div>
@@ -416,15 +392,12 @@
                   <!--End Put/Call-->
                   <!--Start Call Flow-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20"
+                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
                   >
                     <div class="flex flex-col items-start">
-                      <span class=" text-white text-sm sm:text-[1rem]"
-                        >Bought Shares</span
-                      >
-                      <span
-                        class="text-start text-sm sm:text-[1rem] text-white"
+                      <span class="  text-sm sm:text-[1rem]">Bought Shares</span
                       >
+                      <span class="text-start text-sm sm:text-[1rem]">
                         {new Intl.NumberFormat("en", {
                           minimumFractionDigits: 0,
                           maximumFractionDigits: 0,
@@ -444,7 +417,7 @@
                           cy="18"
                           r="16"
                           fill="none"
-                          class="stroke-current text-[#3E3E3E]"
+                          class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
                           stroke-width="3"
                         ></circle>
                         <!-- Progress Circle inside a group with rotation -->
@@ -466,8 +439,7 @@
                       <div
                         class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
                       >
-                        <span
-                          class="text-center text-white text-sm sm:text-[1rem]"
+                        <span class="text-center text-sm sm:text-[1rem]"
                           >{statistics?.buySharesPercentage}%</span
                         >
                       </div>
@@ -477,15 +449,11 @@
                   <!--End Call Flow-->
                   <!--Start Put Flow-->
                   <div
-                    class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded-md bg-primary h-20"
+                    class="shadow-sm flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-200 dark:bg-primary h-20"
                   >
                     <div class="flex flex-col items-start">
-                      <span class=" text-white text-sm sm:text-[1rem]"
-                        >Sold Shares</span
-                      >
-                      <span
-                        class="text-start text-sm sm:text-[1rem] text-white"
-                      >
+                      <span class="  text-sm sm:text-[1rem]">Sold Shares</span>
+                      <span class="text-start text-sm sm:text-[1rem]">
                         {new Intl.NumberFormat("en", {
                           minimumFractionDigits: 0,
                           maximumFractionDigits: 0,
@@ -505,7 +473,7 @@
                           cy="18"
                           r="16"
                           fill="none"
-                          class="stroke-current text-[#3E3E3E]"
+                          class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
                           stroke-width="3"
                         ></circle>
                         <!-- Progress Circle inside a group with rotation -->
@@ -527,8 +495,7 @@
                       <div
                         class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
                       >
-                        <span
-                          class="text-center text-white text-sm sm:text-[1rem]"
+                        <span class="text-center text-sm sm:text-[1rem]"
                           >{statistics?.soldSharesPercentage}%</span
                         >
                       </div>
@@ -545,7 +512,7 @@
               class="flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto no-scrollbar"
             >
               <table
-                class="table table-sm table-pin-rows table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
+                class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto"
               >
                 <thead>
                   <TableHeader {columns} {sortOrders} {sortData} />
@@ -554,16 +521,14 @@
                   {#each insiderTradingList as item, index}
                     {#if item?.price > 0}
                       <tr
-                        class="text-white odd:bg-odd border-b border-gray-800 {index +
+                        class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
                           1 ===
                           insiderTradingList?.slice(0, 6)?.length &&
                         !['Pro', 'Plus']?.includes(data?.user?.tier)
                           ? 'opacity-[0.1]'
                           : ''}"
                       >
-                        <td
-                          class="text-white text-sm sm:text-[1rem] ] whitespace-nowrap"
-                        >
+                        <td class=" text-sm sm:text-[1rem] ] whitespace-nowrap">
                           <div class="flex flex-col">
                             <span class=""
                               >{formatString(item?.reportingName)?.replace(
@@ -571,14 +536,14 @@
                                 "",
                               )}</span
                             >
-                            <span class="text-sm text-white"
+                            <span class="text-sm"
                               >{extractOfficeInfo(item?.typeOfOwner)}</span
                             >
                           </div>
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white ]"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap ]"
                         >
                           {new Date(item?.transactionDate)?.toLocaleString(
                             "en-US",
@@ -592,7 +557,7 @@
                         </td>
 
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white ]"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap ]"
                         >
                           {@html abbreviateNumber(
                             item?.securitiesTransacted,
@@ -601,12 +566,12 @@
                           )}
                         </td>
                         <td
-                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white ]"
+                          class="text-end text-sm sm:text-[1rem] whitespace-nowrap ]"
                         >
                           ${item?.price?.toFixed(2)}
                         </td>
                         <td
-                          class=" text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
+                          class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
                         >
                           {@html abbreviateNumber(item?.value, false, true)}
                         </td>
@@ -615,7 +580,7 @@
                             class="w-auto px-4 py-1 rounded-full uppercase {item?.transactionType ===
                             'Bought'
                               ? 'bg-[#75D377] text-black'
-                              : 'bg-[#cd4050] text-white'} font-semibold"
+                              : 'bg-[#cd4050] '} font-semibold"
                           >
                             {transactionStyles[item?.transactionType]}
                           </div>
@@ -630,7 +595,7 @@
             {#if rawData?.length > 5 && rawData?.length === insiderTradingList?.length && ["Pro", "Plus"]?.includes(data?.user?.tier)}
               <label
                 on:click={backToTop}
-                class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
+                class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-300 dark:border-gray-600 rounded-full"
               >
                 Back to top
               </label>
@@ -654,21 +619,3 @@
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/stocks/[tickerID]/insider/institute/+page.svelte b/src/routes/stocks/[tickerID]/insider/institute/+page.svelte
index d316ff18..249dfee9 100644
--- a/src/routes/stocks/[tickerID]/insider/institute/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/institute/+page.svelte
@@ -12,16 +12,14 @@
   description={`Get the latest 13F Institute Ownership of ${$displayCompanyName} (${$stockTicker}).`}
 />
 
-<section class="w-full bg-default overflow-hidden text-white h-full">
+<section class="w-full overflow-hidden h-full">
   <div class="w-full flex h-full overflow-hidden">
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
       <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
         <div class="w-full">
-          <h1 class="text-xl sm:text-2xl text-white font-bold">
-            13F Institute Ownership
-          </h1>
+          <h1 class="text-xl sm:text-2xl font-bold">13F Institute Ownership</h1>
         </div>
 
         <ShareHolders {data} />
diff --git a/src/routes/stocks/[tickerID]/metrics/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
index db7beca3..d13de29f 100644
--- a/src/routes/stocks/[tickerID]/metrics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
@@ -60,7 +60,9 @@
     <main class="w-full">
       <div class="m-auto">
         {#if names?.length > 0}
-          <nav class="ml-4 overflow-x-auto whitespace-nowrap">
+          <nav
+            class="sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
+          >
             <ul class="flex flex-row items-center w-full text-white">
               {#each subsectionTitles as title}
                 {@const sectionKey = title
diff --git a/src/routes/stocks/[tickerID]/profile/+layout.svelte b/src/routes/stocks/[tickerID]/profile/+layout.svelte
index 879bea4a..e30c65a2 100644
--- a/src/routes/stocks/[tickerID]/profile/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/profile/+layout.svelte
@@ -40,7 +40,7 @@
     <main class="w-full">
       <div class="m-auto">
         <nav
-          class="sm:ml-4 pt-1 overflow-x-auto text-sm sm:text-[1rem] whitespace-nowrap"
+          class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
         >
           <ul class="flex flex-row items-center w-full text-white">
             <a
diff --git a/src/routes/stocks/[tickerID]/statistics/+layout.svelte b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
index 1da0ebe8..31727ddd 100644
--- a/src/routes/stocks/[tickerID]/statistics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+layout.svelte
@@ -46,7 +46,7 @@
     <main class="w-full">
       <div class="m-auto">
         <nav
-          class="sm:ml-4 pt-1 overflow-x-auto text-sm sm:text-[1rem] whitespace-nowrap"
+          class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
         >
           <ul class="flex flex-row items-center w-full text-white">
             <a