diff --git a/src/lib/components/FinancialChart.svelte b/src/lib/components/FinancialChart.svelte
index ff6b5288..5067b6a0 100644
--- a/src/lib/components/FinancialChart.svelte
+++ b/src/lib/components/FinancialChart.svelte
@@ -1,61 +1,27 @@
 <script lang="ts">
   import highcharts from "$lib/highcharts.ts";
   import { abbreviateNumber } from "$lib/utils";
+  import Lazy from "svelte-lazy";
+  import { onMount } from "svelte";
 
   export let data;
   export let displayStatement;
   export let filterRule = "annual";
-  export let tableList = [];
   export let statementConfig;
+  export let processedData = null; // Accept pre-processed data
 
   let config = null;
+  let isLoaded = false;
+  let chartElement;
 
-  function plotData() {
-    let labelName = "-";
-    let xList = [];
-    let valueList = [];
-    tableList = []; // Assuming tableList is a global variable
-
-    const index = statementConfig?.findIndex(
-      (item) => item?.propertyName === displayStatement,
-    );
-
-    // Loop through the income array in reverse order
-    for (let i = data?.length - 1; i >= 0; i--) {
-      const statement = data[i];
-      const year = statement?.calendarYear?.slice(-2);
-      const quarter = statement?.period;
-
-      // Determine label based on filterRule
-      if (filterRule === "annual") {
-        xList.push("FY" + year);
-      } else {
-        xList.push("FY" + year + " " + quarter);
-      }
-
-      // Calculate the value, converting to a number
-      const rawValue = Number(statement[statementConfig[index]?.propertyName]);
-      const value = parseFloat(rawValue.toFixed(2));
-      valueList.push(value);
-
-      // Populate tableList
-      tableList.push({
-        date: statement?.date,
-        value: value,
-      });
-    }
-
-    // Sort tableList by date (newest first)
-    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
-
-    labelName = statementConfig[index]?.label;
-
-    const options = {
+  // Memoize chart options to prevent unnecessary recalculations
+  function getChartOptions(xList, valueList, labelName) {
+    return {
       chart: {
         type: "column",
         backgroundColor: "#09090B",
         plotBackgroundColor: "#09090B",
-        height: 360, // Set the maximum height for the chart
+        height: 360,
         animation: false,
       },
       credits: { enabled: false },
@@ -83,12 +49,19 @@
         style: { color: "white" },
       },
       xAxis: {
+        endOnTick: false,
         categories: xList,
-        labels: {
-          style: { color: "#fff" },
+        crosshair: {
+          color: "#fff", // Set the color of the crosshair line
+          width: 1, // Adjust the line width as needed
+          dashStyle: "Solid",
+        },
+        labels: {
+          style: {
+            color: "#fff",
+          },
+          distance: 10, // Increases space between label and axis
         },
-        lineColor: "#fff",
-        tickColor: "#fff",
       },
       yAxis: {
         gridLineWidth: 1,
@@ -105,8 +78,8 @@
       tooltip: {
         shared: true,
         useHTML: true,
-        backgroundColor: "rgba(0, 0, 0, 0.8)", // Semi-transparent black
-        borderColor: "rgba(255, 255, 255, 0.2)", // Slightly visible white border
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
         borderWidth: 1,
         style: {
           color: "#fff",
@@ -115,17 +88,13 @@
         },
         borderRadius: 4,
         formatter: function () {
-          // Format the x value to display time in hh:mm format
           let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${this?.x}</span><br>`;
-
-          // Loop through each point in the shared tooltip
           this.points.forEach((point) => {
-            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> 
+            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
           <span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber(
             point.y,
           )}</span><br>`;
           });
-
           return tooltipContent;
         },
       },
@@ -134,21 +103,67 @@
           name: labelName,
           data: valueList,
           color: "#fff",
+          borderRadius: "1px",
         },
       ],
     };
-
-    return options;
   }
 
-  $: {
-    if (filterRule || displayStatement || data) {
-      config = plotData() || null;
+  async function plotData() {
+    isLoaded = false;
+
+    // Simulate some processing time to ensure loading state is visible
+    // This can be removed in production if the actual data processing takes enough time
+    if (!processedData) {
+      // If no processed data, just show loading
+      return null;
     }
+
+    try {
+      // Add a small delay to ensure the loading state is visible
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      const { xList, valueList, labelName } = processedData[displayStatement];
+      return getChartOptions(xList, valueList, labelName);
+    } catch (error) {
+      console.error("Error processing chart data:", error);
+      return null;
+    } finally {
+      // Don't set isLoaded here - we'll set it after the chart is rendered
+    }
+  }
+
+  // This function will be called whenever the relevant props change
+  async function updateChart() {
+    config = await plotData();
+    // Only set isLoaded to true after a small delay to ensure the chart is fully rendered
+    setTimeout(() => {
+      isLoaded = true;
+    }, 100);
+  }
+
+  onMount(() => {
+    updateChart();
+  });
+
+  // Watch for changes in props and update chart accordingly
+  $: if (filterRule || displayStatement || data || processedData) {
+    updateChart();
   }
 </script>
 
-<div
-  class="border border-gray-800 rounded w-full"
-  use:highcharts={config}
-></div>
+{#if !isLoaded}
+  <div
+    class="w-full h-[360px] flex justify-center items-center m-auto border border-gray-800 rounded"
+  >
+    <span class="loading loading-bars loading-sm"></span>
+  </div>
+{:else}
+  <Lazy fadeOption={{ delay: 50, duration: 100 }} keep={true}>
+    <div
+      class="border border-gray-800 rounded w-full"
+      use:highcharts={config}
+      bind:this={chartElement}
+    ></div>
+  </Lazy>
+{/if}
diff --git a/src/lib/highcharts.ts b/src/lib/highcharts.ts
index 6260ef0b..f72ff679 100644
--- a/src/lib/highcharts.ts
+++ b/src/lib/highcharts.ts
@@ -17,6 +17,9 @@ export default (node, config) => {
   const createChart = () => {
     chart = Highcharts.chart(node, {
       ...config,
+      accessibility: {
+        enabled: false,
+      },
       chart: {
         ...(config.chart || {}),
         events: {
diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte
index 13c5e447..5d77f5e5 100644
--- a/src/routes/stocks/[tickerID]/financials/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+page.svelte
@@ -5,21 +5,20 @@
     coolMode,
     timeFrame,
   } from "$lib/store";
-  import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
+  import { removeCompanyStrings } from "$lib/utils";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
   //import * as XLSX from 'xlsx';
   import FinancialTable from "$lib/components/FinancialTable.svelte";
   import FinancialChart from "$lib/components/FinancialChart.svelte";
-
   import { goto } from "$app/navigation";
   import SEO from "$lib/components/SEO.svelte";
-  import Lazy from "svelte-lazy";
 
   export let data;
 
   let isLoaded = true;
   let tableList = [];
+  let processedData = {};
 
   let income = [];
   let fullStatement = [];
@@ -250,6 +249,61 @@
     }
   };
 
+  // Pre-process all data once instead of in each component
+  function preprocessFinancialData() {
+    processedData = {};
+
+    // Precompute mapping from propertyName to config for quick lookup
+    const configMap = {};
+    statementConfig.forEach((item) => {
+      if (item && item.propertyName) {
+        configMap[item.propertyName] = item;
+      }
+    });
+
+    // Precompute xList from income (reverse order)
+    const xList = [];
+    for (let i = income.length - 1; i >= 0; i--) {
+      const statement = income[i];
+      const year = statement.calendarYear.slice(-2);
+      const quarter = statement.period;
+      xList.push(
+        filterRule === "annual" ? "FY" + year : "FY" + year + " " + quarter,
+      );
+    }
+
+    // Process each field using precomputed config and xList
+    fields.forEach((field) => {
+      const statementKey = field.key;
+      const config = configMap[statementKey];
+      if (!config) return;
+
+      const valueList = [];
+      // Loop through income in reverse to match xList order
+      for (let i = income.length - 1; i >= 0; i--) {
+        const statement = income[i];
+        const rawValue = Number(statement[config.propertyName]);
+        // Round to two decimals
+        const value = parseFloat(rawValue.toFixed(2));
+        valueList.push(value);
+      }
+
+      processedData[statementKey] = {
+        xList, // re-use the precomputed labels
+        valueList,
+        labelName: config.label,
+      };
+    });
+
+    // Build tableList once for all charts and sort by date (newest first)
+    tableList = income.map((statement) => ({
+      date: statement.date,
+      // Add more properties if needed
+    }));
+
+    tableList.sort((a, b) => new Date(b.date) - new Date(a.date));
+  }
+
   $: {
     if ($timeFrame || activeIdx) {
       if (activeIdx === 0) {
@@ -260,6 +314,7 @@
         fullStatement = data?.getIncomeStatement?.quarter;
       }
       income = filterStatement(fullStatement, $timeFrame);
+      preprocessFinancialData();
     }
   }
 </script>
@@ -279,66 +334,63 @@
       {#if isLoaded}
         <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">
+            <div
+              class="mb-3 flex flex-col sm:flex-row items-center justify-between"
+            >
               <h1 class="text-xl sm:text-2xl text-white font-bold">
                 {removeCompanyStrings($displayCompanyName)} Income Statement
               </h1>
+              <div
+                class="mt-3 sm:mt-0 mb-2 sm:mb-0 bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
+              >
+                {#each tabs as item, i}
+                  {#if data?.user?.tier !== "Pro" && i > 0}
+                    <button
+                      on:click={() => goto("/pricing")}
+                      class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
+                    >
+                      <span class="relative text-sm block font-semibold">
+                        {item.title}
+                        <svg
+                          class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          ><path
+                            fill="#A3A3A3"
+                            d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                          /></svg
+                        >
+                      </span>
+                    </button>
+                  {:else}
+                    <button
+                      on:click={() => (activeIdx = i)}
+                      class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                      i
+                        ? 'z-0'
+                        : ''} "
+                    >
+                      {#if activeIdx === i}
+                        <div
+                          class="absolute inset-0 rounded-md bg-[#fff]"
+                        ></div>
+                      {/if}
+                      <span
+                        class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
+                        i
+                          ? 'text-black'
+                          : 'text-white'}"
+                      >
+                        {item.title}
+                      </span>
+                    </button>
+                  {/if}
+                {/each}
+              </div>
             </div>
 
             <div class="grid grid-cols-1 gap-2">
               {#if income?.length > 0}
-                <div
-                  class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
-                >
-                  <div
-                    class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
-                  >
-                    {#each tabs as item, i}
-                      {#if data?.user?.tier !== "Pro" && i > 0}
-                        <button
-                          on:click={() => goto("/pricing")}
-                          class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
-                        >
-                          <span class="relative text-sm block font-semibold">
-                            {item.title}
-                            <svg
-                              class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24"
-                              ><path
-                                fill="#A3A3A3"
-                                d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                              /></svg
-                            >
-                          </span>
-                        </button>
-                      {:else}
-                        <button
-                          on:click={() => (activeIdx = i)}
-                          class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
-                          i
-                            ? 'z-0'
-                            : ''} "
-                        >
-                          {#if activeIdx === i}
-                            <div
-                              class="absolute inset-0 rounded-md bg-[#fff]"
-                            ></div>
-                          {/if}
-                          <span
-                            class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
-                            i
-                              ? 'text-black'
-                              : 'text-white'}"
-                          >
-                            {item.title}
-                          </span>
-                        </button>
-                      {/if}
-                    {/each}
-                  </div>
-                </div>
-
                 <div
                   class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
                 >
@@ -443,19 +495,14 @@
 
                 {#if $coolMode}
                   <div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
-                    {#each fields as item}
-                      <Lazy
-                        fadeOption={{ delay: 100, duration: 100 }}
-                        keep={true}
-                      >
-                        <FinancialChart
-                          data={income}
-                          {tableList}
-                          {statementConfig}
-                          displayStatement={item?.key}
-                          {filterRule}
-                        />
-                      </Lazy>
+                    {#each fields as item, i}
+                      <FinancialChart
+                        data={income}
+                        {statementConfig}
+                        displayStatement={item?.key}
+                        {filterRule}
+                        {processedData}
+                      />
                     {/each}
                   </div>
                 {:else}