diff --git a/src/lib/components/DarkPool/RealtimeTrade.svelte b/src/lib/components/DarkPool/RealtimeTrade.svelte
index 6d1c5ae8..c38c3da6 100644
--- a/src/lib/components/DarkPool/RealtimeTrade.svelte
+++ b/src/lib/components/DarkPool/RealtimeTrade.svelte
@@ -97,25 +97,37 @@
       },
       xAxis: {
         type: "datetime",
-        min: startTime,
-        max: endTime,
-        tickLength: 0,
+        min: startTime, // Force start at 9:30
+        max: endTime, // Force end at 16:10
         crosshair: {
-          color: $mode === "light" ? "#545454" : "white",
-          width: 1,
+          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
+          width: 1, // Adjust the line width as needed
           dashStyle: "Solid",
         },
         labels: {
           style: { color: $mode === "light" ? "#545454" : "white" },
-          distance: 20,
+          distance: 10, // Increases space between label and axis
           formatter: function () {
             const date = new Date(this?.value);
-            return date?.toLocaleTimeString("en-US", {
-              hour: "2-digit",
-              minute: "2-digit",
+            const timeString = date?.toLocaleTimeString("en-US", {
+              hour: "numeric",
+              hour12: true,
             });
+            return `<span class="text-xs">${timeString.replace(/\s/g, " ")}</span>`;
           },
         },
+        tickPositioner: function () {
+          // Create custom tick positions with wider spacing
+          const positions = [];
+          const info = this.getExtremes();
+          const tickCount = 5; // Reduce number of ticks displayed
+          const interval = (info.max - info.min) / tickCount;
+
+          for (let i = 0; i <= tickCount; i++) {
+            positions.push(info.min + i * interval);
+          }
+          return positions;
+        },
       },
       yAxis: [
         {
@@ -203,6 +215,7 @@
             ],
           },
           color: "#4681f4",
+          borderColor: "4681f4",
           lineWidth: 1.3,
           yAxis: 0, // Use primary yAxis
           animation: false,
diff --git a/src/lib/components/FinancialTable.svelte b/src/lib/components/FinancialTable.svelte
index 8f07e385..8af88673 100644
--- a/src/lib/components/FinancialTable.svelte
+++ b/src/lib/components/FinancialTable.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
   import { abbreviateNumber } from "$lib/utils";
+  import { screenWidth, stockTicker } from "$lib/store";
+  import { mode } from "mode-watcher";
+  import highcharts from "$lib/highcharts.ts";
+
   export let data: any[];
   export let fields: { label: string; key: string }[];
 
-  // Use a Set for fast margin lookup
+  let config = null;
+
   const marginKeys = new Set([
     /*
     "pretaxProfitMargin",
@@ -32,6 +37,117 @@
     const formatted = abbreviateNumber(value.toFixed(2));
     return isMargin ? formatted + "%" : formatted;
   }
+
+  function plotData(label, key) {
+    const rawData = [...data]?.sort((a, b) => a?.fiscalYear - b?.fiscalYear);
+    const dateList = rawData?.map((item) =>
+      item?.period === "FY"
+        ? item?.fiscalYear
+        : `${item?.period} FY ${item?.fiscalYear}`,
+    );
+
+    const valueList = rawData?.map((item) => item[key]);
+
+    const options = {
+      chart: {
+        type: "column",
+        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        height: 360,
+        animation: false,
+      },
+      credits: { enabled: false },
+      legend: { enabled: false },
+      plotOptions: {
+        series: {
+          color: "white",
+          animation: false,
+          dataLabels: {
+            enabled: false,
+            color: "white",
+            style: {
+              fontSize: "13px",
+              fontWeight: "bold",
+            },
+            formatter: function () {
+              return abbreviateNumber(this?.y);
+            },
+          },
+        },
+      },
+      title: {
+        text: `<h3 class="mt-3 mb-1 sm:text-lg">${$stockTicker} ${label}</h3>`,
+        useHTML: true,
+        style: { color: $mode === "light" ? "black" : "white" },
+      },
+      xAxis: {
+        endOnTick: false,
+        categories: dateList,
+        crosshair: {
+          color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
+          width: 1, // Adjust the line width as needed
+          dashStyle: "Solid",
+        },
+        labels: {
+          style: {
+            color: $mode === "light" ? "#545454" : "white",
+          },
+          rotation: -45,
+          distance: 10, // Increases space between label and axis
+        },
+      },
+      yAxis: {
+        gridLineWidth: 1,
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
+        labels: {
+          style: { color: $mode === "light" ? "black" : "white" },
+          formatter: function () {
+            return abbreviateNumber(this.value);
+          },
+        },
+        title: { text: null },
+        opposite: true,
+      },
+      tooltip: {
+        shared: true,
+        useHTML: true,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        borderColor: "rgba(255, 255, 255, 0.2)",
+        borderWidth: 1,
+        style: {
+          color: "#fff",
+          fontSize: "16px",
+          padding: "10px",
+        },
+        borderRadius: 4,
+        formatter: function () {
+          let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${this?.x}</span><br>`;
+          this.points.forEach((point) => {
+            tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
+          <span class="text-white font-normal text-sm">${abbreviateNumber(
+            point.y,
+          )}</span><br>`;
+          });
+          return tooltipContent;
+        },
+      },
+      series: [
+        {
+          name: label,
+          data: valueList,
+          color: $mode === "light" ? "#2C6288" : "white",
+          borderColor: $mode === "light" ? "#2C6288" : "white",
+          borderRadius: "1px",
+          animation: false,
+        },
+      ],
+    };
+    return options;
+  }
+
+  async function handleChart(label, key) {
+    config = plotData(label, key);
+  }
 </script>
 
 {#each computedFields as { label, key, isMargin } (key)}
@@ -39,14 +155,69 @@
     class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd whitespace-nowrap"
   >
     <td
-      class="text-start border-r border-gray-300 dark:border-gray-700 text-sm sm:text-[1rem]"
+      class="text-start min-w-[220px] sm:min-w-[320px] border-r border-gray-300 dark:border-gray-700 text-sm sm:text-[1rem] w-full flex flex-row items-center justify-between"
     >
-      {label}
+      <span class="truncate w-fit max-w-40 sm:max-w-fit">{label}</span>
+      <label
+        for="financialPlotModal"
+        on:click={() => handleChart(label, key)}
+        class="cursor-pointer inline-block"
+      >
+        <svg
+          class="w-5 h-5 text-gray-500 dark:text-gray-300"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+            id="SVGRepo_tracerCarrier"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></g><g id="SVGRepo_iconCarrier">
+            <path
+              d="M9 12H4.6C4.03995 12 3.75992 12 3.54601 12.109C3.35785 12.2049 3.20487 12.3578 3.10899 12.546C3 12.7599 3 13.0399 3 13.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H9M9 21H15M9 21L9 8.6C9 8.03995 9 7.75992 9.10899 7.54601C9.20487 7.35785 9.35785 7.20487 9.54601 7.10899C9.75992 7 10.0399 7 10.6 7H13.4C13.9601 7 14.2401 7 14.454 7.10899C14.6422 7.20487 14.7951 7.35785 14.891 7.54601C15 7.75992 15 8.03995 15 8.6V21M15 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V4.6C21 4.03995 21 3.75992 20.891 3.54601C20.7951 3.35785 20.6422 3.20487 20.454 3.10899C20.2401 3 19.9601 3 19.4 3H16.6C16.0399 3 15.7599 3 15.546 3.10899C15.3578 3.20487 15.2049 3.35785 15.109 3.54601C15 3.75992 15 4.03995 15 4.6V8"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></path>
+          </g></svg
+        >
+      </label>
     </td>
-    {#each data as item, index (index)}
+    {#each data as item}
       <td class="text-sm sm:text-[1rem] text-end">
         {formatValue(item[key], isMargin)}
       </td>
     {/each}
   </tr>
 {/each}
+
+<input type="checkbox" id="financialPlotModal" class="modal-toggle" />
+<dialog
+  id="financialPlotModal"
+  class="modal {$screenWidth < 640 ? 'modal-bottom ' : ''} bg-[#000]/40 sm:px-5"
+>
+  <label for="financialPlotModal" class="cursor-pointer modal-backdrop"></label>
+
+  <div
+    class="modal-box bg-white relative dark:bg-default w-full max-w-3xl rounded-md border-t sm:border border-gray-300 dark:border-gray-700 min-h-48 h-auto"
+  >
+    <label
+      for="financialPlotModal"
+      class="cursor-pointer text-[1.8rem] focus:outline-hidden absolute top-2 right-3"
+    >
+      <svg
+        class="w-8 h-8 text-muted dark:text-white"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        ><path
+          fill="currentColor"
+          d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+        />
+      </svg>
+    </label>
+    {#if config}
+      <div class="mt-2" use:highcharts={config}></div>
+    {/if}
+  </div>
+</dialog>
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index e76f6d23..7f22cda6 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -7,7 +7,7 @@
   export let data;
   export let form;
 
-  let mode = false;
+  let mode = true;
   const emailAddress = "support@stocknear.com";
 
   function toggleMode() {
diff --git a/src/routes/stocks/[tickerID]/financials/+layout.server.ts b/src/routes/stocks/[tickerID]/financials/+layout.server.ts
new file mode 100644
index 00000000..4e16922d
--- /dev/null
+++ b/src/routes/stocks/[tickerID]/financials/+layout.server.ts
@@ -0,0 +1,32 @@
+
+
+export const load = async ({ locals, params }) => {
+   const { apiKey, apiURL } = locals;
+    const postData = {
+      ticker: params.tickerID,
+    };
+
+   const getProfileData = async () => {
+
+
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + "/profile", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getProfileData: await getProfileData(),
+  };
+};
+
diff --git a/src/routes/stocks/[tickerID]/financials/+page.server.ts b/src/routes/stocks/[tickerID]/financials/+page.server.ts
index 8af348bd..6caffc68 100644
--- a/src/routes/stocks/[tickerID]/financials/+page.server.ts
+++ b/src/routes/stocks/[tickerID]/financials/+page.server.ts
@@ -2,15 +2,15 @@ import { error, fail, redirect } from "@sveltejs/kit";
 import { validateData } from "$lib/utils";
 import { loginUserSchema, registerUserSchema } from "$lib/schemas";
 
-
-
 export const load = async ({ locals, params }) => {
-  const getData = async () => {
-    const { apiKey, apiURL } = locals;
+   const { apiKey, apiURL } = locals;
     const postData = {
       ticker: params.tickerID,
     };
 
+
+  const getData = async () => {
+   
     // make the POST request to the endpoint
     const response = await fetch(apiURL + "/stock-income", {
       method: "POST",
@@ -26,6 +26,8 @@ export const load = async ({ locals, params }) => {
     return output;
   };
 
+
+
   // Make sure to return a promise
   return {
     getData: await getData(),
diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte
index 427acb70..0d1be354 100644
--- a/src/routes/stocks/[tickerID]/financials/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+page.svelte
@@ -392,7 +392,7 @@
           <div class="grid grid-cols-1 gap-2">
             {#if financialData?.length > 0}
               <div
-                class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
+                class="flex flex-row items-center w-full justify-end sm:justify-center"
               >
                 <label
                   class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
@@ -415,14 +415,35 @@
                 </label>
 
                 <div class="flex flex-row items-center w-fit sm:ml-auto">
-                  <div class="relative inline-block text-left grow">
+                  <!--
+                  <div class="ml-2 relative inline-block text-left">
+                    <Button
+                      class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-5 rounded-md truncate"
+                    >
+                      <svg
+                        class="w-4 h-4 bp:w-5 bp:h-5 pointer-events-none"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        style="max-width:40px"
+                        ><path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+                        ></path></svg
+                      >
+                    </Button>
+                  </div>
+
+                  <div class="ml-2 relative inline-block text-left grow">
                     <DropdownMenu.Root>
                       <DropdownMenu.Trigger asChild let:builder>
                         <Button
                           builders={[builder]}
-                          class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
+                          class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
                         >
-                          <span class="truncate">{$timeFrame}</span>
+                          <span class="truncate">Raw</span>
                           <svg
                             class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                             viewBox="0 0 20 20"
@@ -441,52 +462,30 @@
                       <DropdownMenu.Content
                         class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                       >
-                        <DropdownMenu.Label
-                          class="text-muted dark:text-gray-400"
-                        >
-                          Select time frame
-                        </DropdownMenu.Label>
-                        <DropdownMenu.Separator />
                         <DropdownMenu.Group>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "5Y")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            5 years
+                            Billions
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "10Y")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            10 years
+                            Millions
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "MAX")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            Max
+                            Raw
                           </DropdownMenu.Item>
                         </DropdownMenu.Group>
                       </DropdownMenu.Content>
                     </DropdownMenu.Root>
                   </div>
-                  <Button
-                    on:click={() => exportFundamentalData("csv")}
-                    class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border  sm:hover:bg-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">Download</span>
-                    <svg
-                      class="{['Pro', 'Plus']?.includes(data?.user?.tier)
-                        ? 'hidden'
-                        : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="currentColor"
-                        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
-                    >
-                  </Button>
+                  -->
                 </div>
               </div>
 
@@ -506,6 +505,91 @@
                   {/each}
                 </div>
               {:else}
+                <div
+                  class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between"
+                >
+                  <span
+                    class="text-sm order-1 sm:order-0 mt-5 sm:mt-0 text-gray-600 dark:text-gray-400 w-full"
+                  >
+                    Financials in {data?.getProfileData?.currency}. Fiscal year
+                    is
+                    {data?.getProfileData?.fiscalYearRange}.
+                  </span>
+                  <div class="flex flex-row items-center justify-end w-full">
+                    <div class="sm:ml-auto relative inline-block">
+                      <DropdownMenu.Root>
+                        <DropdownMenu.Trigger asChild let:builder>
+                          <Button
+                            builders={[builder]}
+                            class="shadow-sm w-full sm:w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
+                          >
+                            <span class="truncate">{$timeFrame}</span>
+                            <svg
+                              class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              style="max-width:40px"
+                              aria-hidden="true"
+                            >
+                              <path
+                                fill-rule="evenodd"
+                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                clip-rule="evenodd"
+                              ></path>
+                            </svg>
+                          </Button>
+                        </DropdownMenu.Trigger>
+                        <DropdownMenu.Content
+                          class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                        >
+                          <DropdownMenu.Label
+                            class="text-muted dark:text-gray-400"
+                          >
+                            Select time frame
+                          </DropdownMenu.Label>
+                          <DropdownMenu.Separator />
+                          <DropdownMenu.Group>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "5Y")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              5 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "10Y")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              10 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "MAX")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              Max
+                            </DropdownMenu.Item>
+                          </DropdownMenu.Group>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Root>
+                    </div>
+                    <Button
+                      on:click={() => exportFundamentalData("csv")}
+                      class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border  sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
+                    >
+                      <span class="truncate">Download</span>
+                      <svg
+                        class="{['Pro', 'Plus']?.includes(data?.user?.tier)
+                          ? 'hidden'
+                          : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="currentColor"
+                          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
+                      >
+                    </Button>
+                  </div>
+                </div>
                 <div
                   class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
                 >
@@ -513,25 +597,40 @@
                     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 class="text-muted dark:text-white dark:bg-default">
-                      <tr class="">
+                      <tr class="border min-w-[250px]">
                         <td class="text-start text-sm font-semibold pr-10"
-                          >Year</td
+                          >Fiscal Year</td
                         >
-                        {#each financialData as cash}
+                        {#each financialData as item}
                           {#if filterRule === "annual"}
-                            <td class=" font-semibold text-sm text-end">
-                              {"FY" + cash?.fiscalYear?.slice(-2)}
+                            <td
+                              class=" font-semibold text-sm text-end border-l border-gray-300 dark:border-gray-800"
+                            >
+                              {"FY" + " " + item?.fiscalYear}
                             </td>
                           {:else}
                             <td class=" font-semibold text-sm text-end">
-                              {"FY" +
-                                cash?.fiscalYear?.slice(-2) +
-                                " " +
-                                cash?.period}
+                              {item?.period + " " + item?.fiscalYear}
                             </td>
                           {/if}
                         {/each}
                       </tr>
+                      <tr class="border min-w-[250px]">
+                        <td class="text-start text-sm font-semibold"
+                          >Period Ending</td
+                        >
+                        {#each financialData as item}
+                          <td
+                            class=" font-semibold text-sm text-end border-l border-gray-300 dark:border-gray-800"
+                          >
+                            {new Date(item?.date).toLocaleDateString("en-US", {
+                              month: "short",
+                              day: "numeric",
+                              year: "numeric",
+                            })}
+                          </td>
+                        {/each}
+                      </tr>
                     </thead>
                     <tbody>
                       <!-- row -->
diff --git a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
index ddf312c9..a97d4da0 100644
--- a/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
@@ -422,7 +422,7 @@
           <div class="grid grid-cols-1 gap-2">
             {#if financialData?.length > 0}
               <div
-                class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
+                class="flex flex-row items-center w-full justify-end sm:justify-center"
               >
                 <label
                   class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
@@ -445,14 +445,35 @@
                 </label>
 
                 <div class="flex flex-row items-center w-fit sm:ml-auto">
-                  <div class="relative inline-block text-left grow">
+                  <!--
+                  <div class="ml-2 relative inline-block text-left">
+                    <Button
+                      class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-5 rounded-md truncate"
+                    >
+                      <svg
+                        class="w-4 h-4 bp:w-5 bp:h-5 pointer-events-none"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        style="max-width:40px"
+                        ><path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+                        ></path></svg
+                      >
+                    </Button>
+                  </div>
+
+                  <div class="ml-2 relative inline-block text-left grow">
                     <DropdownMenu.Root>
                       <DropdownMenu.Trigger asChild let:builder>
                         <Button
                           builders={[builder]}
-                          class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
+                          class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
                         >
-                          <span class="truncate">{$timeFrame}</span>
+                          <span class="truncate">Raw</span>
                           <svg
                             class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                             viewBox="0 0 20 20"
@@ -471,52 +492,30 @@
                       <DropdownMenu.Content
                         class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                       >
-                        <DropdownMenu.Label
-                          class="text-muted dark:text-gray-400"
-                        >
-                          Select time frame
-                        </DropdownMenu.Label>
-                        <DropdownMenu.Separator />
                         <DropdownMenu.Group>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "5Y")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            5 years
+                            Billions
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "10Y")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            10 years
+                            Millions
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "MAX")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            Max
+                            Raw
                           </DropdownMenu.Item>
                         </DropdownMenu.Group>
                       </DropdownMenu.Content>
                     </DropdownMenu.Root>
                   </div>
-                  <Button
-                    on:click={() => exportFundamentalData("csv")}
-                    class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border  sm:hover:bg-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">Download</span>
-                    <svg
-                      class="{['Pro', 'Plus']?.includes(data?.user?.tier)
-                        ? 'hidden'
-                        : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="currentColor"
-                        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
-                    >
-                  </Button>
+                  -->
                 </div>
               </div>
 
@@ -536,6 +535,91 @@
                   {/each}
                 </div>
               {:else}
+                <div
+                  class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between"
+                >
+                  <span
+                    class="text-sm order-1 sm:order-0 mt-5 sm:mt-0 text-gray-600 dark:text-gray-400 w-full"
+                  >
+                    Financials in {data?.getProfileData?.currency}. Fiscal year
+                    is
+                    {data?.getProfileData?.fiscalYearRange}.
+                  </span>
+                  <div class="flex flex-row items-center justify-end w-full">
+                    <div class="sm:ml-auto relative inline-block">
+                      <DropdownMenu.Root>
+                        <DropdownMenu.Trigger asChild let:builder>
+                          <Button
+                            builders={[builder]}
+                            class="shadow-sm w-full sm:w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
+                          >
+                            <span class="truncate">{$timeFrame}</span>
+                            <svg
+                              class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              style="max-width:40px"
+                              aria-hidden="true"
+                            >
+                              <path
+                                fill-rule="evenodd"
+                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                clip-rule="evenodd"
+                              ></path>
+                            </svg>
+                          </Button>
+                        </DropdownMenu.Trigger>
+                        <DropdownMenu.Content
+                          class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                        >
+                          <DropdownMenu.Label
+                            class="text-muted dark:text-gray-400"
+                          >
+                            Select time frame
+                          </DropdownMenu.Label>
+                          <DropdownMenu.Separator />
+                          <DropdownMenu.Group>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "5Y")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              5 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "10Y")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              10 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "MAX")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              Max
+                            </DropdownMenu.Item>
+                          </DropdownMenu.Group>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Root>
+                    </div>
+                    <Button
+                      on:click={() => exportFundamentalData("csv")}
+                      class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border  sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
+                    >
+                      <span class="truncate">Download</span>
+                      <svg
+                        class="{['Pro', 'Plus']?.includes(data?.user?.tier)
+                          ? 'hidden'
+                          : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="currentColor"
+                          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
+                      >
+                    </Button>
+                  </div>
+                </div>
                 <div
                   class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
                 >
@@ -543,25 +627,40 @@
                     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 class="text-muted dark:text-white dark:bg-default">
-                      <tr class="">
+                      <tr class="border min-w-[250px]">
                         <td class="text-start text-sm font-semibold pr-10"
-                          >Year</td
+                          >Fiscal Year</td
                         >
-                        {#each financialData as cash}
+                        {#each financialData as item}
                           {#if filterRule === "annual"}
-                            <td class=" font-semibold text-sm text-end">
-                              {"FY" + cash?.fiscalYear?.slice(-2)}
+                            <td
+                              class=" font-semibold text-sm text-end border-l border-gray-300 dark:border-gray-800"
+                            >
+                              {"FY" + " " + item?.fiscalYear}
                             </td>
                           {:else}
                             <td class=" font-semibold text-sm text-end">
-                              {"FY" +
-                                cash?.fiscalYear?.slice(-2) +
-                                " " +
-                                cash?.period}
+                              {item?.period + " " + item?.fiscalYear}
                             </td>
                           {/if}
                         {/each}
                       </tr>
+                      <tr class="border min-w-[250px]">
+                        <td class="text-start text-sm font-semibold"
+                          >Period Ending</td
+                        >
+                        {#each financialData as item}
+                          <td
+                            class=" font-semibold text-sm text-end border-l border-gray-300 dark:border-gray-800"
+                          >
+                            {new Date(item?.date).toLocaleDateString("en-US", {
+                              month: "short",
+                              day: "numeric",
+                              year: "numeric",
+                            })}
+                          </td>
+                        {/each}
+                      </tr>
                     </thead>
                     <tbody>
                       <!-- row -->
diff --git a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
index b6e3ca75..3e4ba882 100644
--- a/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
@@ -384,7 +384,7 @@
           <div class="grid grid-cols-1 gap-2">
             {#if financialData?.length > 0}
               <div
-                class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
+                class="flex flex-row items-center w-full justify-end sm:justify-center"
               >
                 <label
                   class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
@@ -407,14 +407,35 @@
                 </label>
 
                 <div class="flex flex-row items-center w-fit sm:ml-auto">
-                  <div class="relative inline-block text-left grow">
+                  <!--
+                  <div class="ml-2 relative inline-block text-left">
+                    <Button
+                      class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-5 rounded-md truncate"
+                    >
+                      <svg
+                        class="w-4 h-4 bp:w-5 bp:h-5 pointer-events-none"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        style="max-width:40px"
+                        ><path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+                        ></path></svg
+                      >
+                    </Button>
+                  </div>
+
+                  <div class="ml-2 relative inline-block text-left grow">
                     <DropdownMenu.Root>
                       <DropdownMenu.Trigger asChild let:builder>
                         <Button
                           builders={[builder]}
-                          class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
+                          class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
                         >
-                          <span class="truncate">{$timeFrame}</span>
+                          <span class="truncate">Raw</span>
                           <svg
                             class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                             viewBox="0 0 20 20"
@@ -433,52 +454,30 @@
                       <DropdownMenu.Content
                         class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                       >
-                        <DropdownMenu.Label
-                          class="text-muted dark:text-gray-400"
-                        >
-                          Select time frame
-                        </DropdownMenu.Label>
-                        <DropdownMenu.Separator />
                         <DropdownMenu.Group>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "5Y")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            5 years
+                            Billions
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "10Y")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            10 years
+                            Millions
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "MAX")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            Max
+                            Raw
                           </DropdownMenu.Item>
                         </DropdownMenu.Group>
                       </DropdownMenu.Content>
                     </DropdownMenu.Root>
                   </div>
-                  <Button
-                    on:click={() => exportFundamentalData("csv")}
-                    class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border  sm:hover:bg-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">Download</span>
-                    <svg
-                      class="{['Pro', 'Plus']?.includes(data?.user?.tier)
-                        ? 'hidden'
-                        : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="currentColor"
-                        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
-                    >
-                  </Button>
+                  -->
                 </div>
               </div>
 
@@ -498,6 +497,91 @@
                   {/each}
                 </div>
               {:else}
+                <div
+                  class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between"
+                >
+                  <span
+                    class="text-sm order-1 sm:order-0 mt-5 sm:mt-0 text-gray-600 dark:text-gray-400 w-full"
+                  >
+                    Financials in {data?.getProfileData?.currency}. Fiscal year
+                    is
+                    {data?.getProfileData?.fiscalYearRange}.
+                  </span>
+                  <div class="flex flex-row items-center justify-end w-full">
+                    <div class="sm:ml-auto relative inline-block">
+                      <DropdownMenu.Root>
+                        <DropdownMenu.Trigger asChild let:builder>
+                          <Button
+                            builders={[builder]}
+                            class="shadow-sm w-full sm:w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
+                          >
+                            <span class="truncate">{$timeFrame}</span>
+                            <svg
+                              class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              style="max-width:40px"
+                              aria-hidden="true"
+                            >
+                              <path
+                                fill-rule="evenodd"
+                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                clip-rule="evenodd"
+                              ></path>
+                            </svg>
+                          </Button>
+                        </DropdownMenu.Trigger>
+                        <DropdownMenu.Content
+                          class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                        >
+                          <DropdownMenu.Label
+                            class="text-muted dark:text-gray-400"
+                          >
+                            Select time frame
+                          </DropdownMenu.Label>
+                          <DropdownMenu.Separator />
+                          <DropdownMenu.Group>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "5Y")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              5 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "10Y")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              10 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "MAX")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              Max
+                            </DropdownMenu.Item>
+                          </DropdownMenu.Group>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Root>
+                    </div>
+                    <Button
+                      on:click={() => exportFundamentalData("csv")}
+                      class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border  sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
+                    >
+                      <span class="truncate">Download</span>
+                      <svg
+                        class="{['Pro', 'Plus']?.includes(data?.user?.tier)
+                          ? 'hidden'
+                          : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="currentColor"
+                          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
+                      >
+                    </Button>
+                  </div>
+                </div>
                 <div
                   class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
                 >
@@ -505,25 +589,40 @@
                     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 class="text-muted dark:text-white dark:bg-default">
-                      <tr class="">
+                      <tr class="border min-w-[250px]">
                         <td class="text-start text-sm font-semibold pr-10"
-                          >Year</td
+                          >Fiscal Year</td
                         >
-                        {#each financialData as cash}
+                        {#each financialData as item}
                           {#if filterRule === "annual"}
-                            <td class=" font-semibold text-sm text-end">
-                              {"FY" + cash?.fiscalYear?.slice(-2)}
+                            <td
+                              class=" font-semibold text-sm text-end border-l border-gray-300 dark:border-gray-800"
+                            >
+                              {"FY" + " " + item?.fiscalYear}
                             </td>
                           {:else}
                             <td class=" font-semibold text-sm text-end">
-                              {"FY" +
-                                cash?.fiscalYear?.slice(-2) +
-                                " " +
-                                cash?.period}
+                              {item?.period + " " + item?.fiscalYear}
                             </td>
                           {/if}
                         {/each}
                       </tr>
+                      <tr class="border min-w-[250px]">
+                        <td class="text-start text-sm font-semibold"
+                          >Period Ending</td
+                        >
+                        {#each financialData as item}
+                          <td
+                            class=" font-semibold text-sm text-end border-l border-gray-300 dark:border-gray-800"
+                          >
+                            {new Date(item?.date).toLocaleDateString("en-US", {
+                              month: "short",
+                              day: "numeric",
+                              year: "numeric",
+                            })}
+                          </td>
+                        {/each}
+                      </tr>
                     </thead>
                     <tbody>
                       <!-- row -->
diff --git a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
index 6e04f8f5..96c6ea61 100644
--- a/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
@@ -306,8 +306,8 @@
 </script>
 
 <SEO
-  title={`${$displayCompanyName} (${$stockTicker}) Cash Flow Statement`}
-  description={`Detailed cash flow statements for ${$displayCompanyName} (${$stockTicker}), including operating cash flow, capex and free cash flow.`}
+  title={`${$displayCompanyName} (${$stockTicker}) Ratios Statement`}
+  description={`Financial ratios and valuation metrics for ${$displayCompanyName} (${$stockTicker}). Includes annual, quarterly and trailing numbers with history and charts.`}
 />
 
 <section class=" w-full overflow-hidden h-full">
@@ -373,7 +373,7 @@
           <div class="grid grid-cols-1 gap-2">
             {#if financialData?.length > 0}
               <div
-                class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
+                class="flex flex-row items-center w-full justify-end sm:justify-center"
               >
                 <label
                   class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
@@ -396,14 +396,35 @@
                 </label>
 
                 <div class="flex flex-row items-center w-fit sm:ml-auto">
-                  <div class="relative inline-block text-left grow">
+                  <!--
+                  <div class="ml-2 relative inline-block text-left">
+                    <Button
+                      class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-5 rounded-md truncate"
+                    >
+                      <svg
+                        class="w-4 h-4 bp:w-5 bp:h-5 pointer-events-none"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        style="max-width:40px"
+                        ><path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+                        ></path></svg
+                      >
+                    </Button>
+                  </div>
+
+                  <div class="ml-2 relative inline-block text-left grow">
                     <DropdownMenu.Root>
                       <DropdownMenu.Trigger asChild let:builder>
                         <Button
                           builders={[builder]}
-                          class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2  rounded-md truncate"
+                          class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
                         >
-                          <span class="truncate">{$timeFrame}</span>
+                          <span class="truncate">Raw</span>
                           <svg
                             class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                             viewBox="0 0 20 20"
@@ -422,52 +443,30 @@
                       <DropdownMenu.Content
                         class="w-56 h-fit max-h-72 overflow-y-auto scroller"
                       >
-                        <DropdownMenu.Label
-                          class="text-muted dark:text-gray-400"
-                        >
-                          Select time frame
-                        </DropdownMenu.Label>
-                        <DropdownMenu.Separator />
                         <DropdownMenu.Group>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "5Y")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            5 years
+                            Billions
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "10Y")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            10 years
+                            Millions
                           </DropdownMenu.Item>
                           <DropdownMenu.Item
                             on:click={() => ($timeFrame = "MAX")}
                             class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
                           >
-                            Max
+                            Raw
                           </DropdownMenu.Item>
                         </DropdownMenu.Group>
                       </DropdownMenu.Content>
                     </DropdownMenu.Root>
                   </div>
-                  <Button
-                    on:click={() => exportFundamentalData("csv")}
-                    class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border  sm:hover:bg-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">Download</span>
-                    <svg
-                      class="{['Pro', 'Plus']?.includes(data?.user?.tier)
-                        ? 'hidden'
-                        : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="currentColor"
-                        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
-                    >
-                  </Button>
+                  -->
                 </div>
               </div>
 
@@ -487,6 +486,91 @@
                   {/each}
                 </div>
               {:else}
+                <div
+                  class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between"
+                >
+                  <span
+                    class="text-sm order-1 sm:order-0 mt-5 sm:mt-0 text-gray-600 dark:text-gray-400 w-full"
+                  >
+                    Financials in {data?.getProfileData?.currency}. Fiscal year
+                    is
+                    {data?.getProfileData?.fiscalYearRange}.
+                  </span>
+                  <div class="flex flex-row items-center justify-end w-full">
+                    <div class="sm:ml-auto relative inline-block">
+                      <DropdownMenu.Root>
+                        <DropdownMenu.Trigger asChild let:builder>
+                          <Button
+                            builders={[builder]}
+                            class="shadow-sm w-full sm:w-fit border-gray-300 dark:border-gray-600 border sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
+                          >
+                            <span class="truncate">{$timeFrame}</span>
+                            <svg
+                              class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              style="max-width:40px"
+                              aria-hidden="true"
+                            >
+                              <path
+                                fill-rule="evenodd"
+                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                clip-rule="evenodd"
+                              ></path>
+                            </svg>
+                          </Button>
+                        </DropdownMenu.Trigger>
+                        <DropdownMenu.Content
+                          class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                        >
+                          <DropdownMenu.Label
+                            class="text-muted dark:text-gray-400"
+                          >
+                            Select time frame
+                          </DropdownMenu.Label>
+                          <DropdownMenu.Separator />
+                          <DropdownMenu.Group>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "5Y")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              5 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "10Y")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              10 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "MAX")}
+                              class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
+                            >
+                              Max
+                            </DropdownMenu.Item>
+                          </DropdownMenu.Group>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Root>
+                    </div>
+                    <Button
+                      on:click={() => exportFundamentalData("csv")}
+                      class="shadow-sm ml-2 w-fit border-gray-300 dark:border-gray-600 border  sm:hover:bg-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-1.5  rounded-md truncate"
+                    >
+                      <span class="truncate">Download</span>
+                      <svg
+                        class="{['Pro', 'Plus']?.includes(data?.user?.tier)
+                          ? 'hidden'
+                          : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="currentColor"
+                          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
+                      >
+                    </Button>
+                  </div>
+                </div>
                 <div
                   class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto no-scrollbar"
                 >
@@ -494,25 +578,40 @@
                     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 class="text-muted dark:text-white dark:bg-default">
-                      <tr class="">
+                      <tr class="border min-w-[250px]">
                         <td class="text-start text-sm font-semibold pr-10"
-                          >Year</td
+                          >Fiscal Year</td
                         >
-                        {#each financialData as cash}
+                        {#each financialData as item}
                           {#if filterRule === "annual"}
-                            <td class=" font-semibold text-sm text-end">
-                              {"FY" + cash?.fiscalYear?.slice(-2)}
+                            <td
+                              class=" font-semibold text-sm text-end border-l border-gray-300 dark:border-gray-800"
+                            >
+                              {"FY" + " " + item?.fiscalYear}
                             </td>
                           {:else}
                             <td class=" font-semibold text-sm text-end">
-                              {"FY" +
-                                cash?.fiscalYear?.slice(-2) +
-                                " " +
-                                cash?.period}
+                              {item?.period + " " + item?.fiscalYear}
                             </td>
                           {/if}
                         {/each}
                       </tr>
+                      <tr class="border min-w-[250px]">
+                        <td class="text-start text-sm font-semibold"
+                          >Period Ending</td
+                        >
+                        {#each financialData as item}
+                          <td
+                            class=" font-semibold text-sm text-end border-l border-gray-300 dark:border-gray-800"
+                          >
+                            {new Date(item?.date).toLocaleDateString("en-US", {
+                              month: "short",
+                              day: "numeric",
+                              year: "numeric",
+                            })}
+                          </td>
+                        {/each}
+                      </tr>
                     </thead>
                     <tbody>
                       <!-- row -->
diff --git a/src/routes/stocks/[tickerID]/profile/+page.server.ts b/src/routes/stocks/[tickerID]/profile/+page.server.ts
index 71f53b89..1d38231f 100644
--- a/src/routes/stocks/[tickerID]/profile/+page.server.ts
+++ b/src/routes/stocks/[tickerID]/profile/+page.server.ts
@@ -5,7 +5,6 @@ import { loginUserSchema, registerUserSchema } from "$lib/schemas";
 
 export const load = async ({ params, locals }) => {
   const getData = async () => {
-    let newsList;
 
     const { apiURL, apiKey } = locals;
 
@@ -23,9 +22,9 @@ export const load = async ({ params, locals }) => {
       body: JSON.stringify(postData),
     });
 
-    newsList = await response.json();
+    const output = await response.json();
 
-    return newsList;
+    return  output;
   };
 
   // Make sure to return a promise
diff --git a/static/img/astronaut.png b/static/img/astronaut.png
new file mode 100644
index 00000000..de3d55ef
Binary files /dev/null and b/static/img/astronaut.png differ
diff --git a/static/img/astronaut.png:Zone.Identifier b/static/img/astronaut.png:Zone.Identifier
new file mode 100644
index 00000000..9e8d56b0
--- /dev/null
+++ b/static/img/astronaut.png:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.canva.com/
+HostUrl=https://export-download.canva.com/UUB-4/DAGjgDUUB-4/15/0/0001-8423318452819072229.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAQYCGKMUH5AO7UJ26%2F20250402%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250402T140745Z&X-Amz-Expires=17707&X-Amz-Signature=761feacdef49bdff3e2ad98387de9793c888669042037eefeb34735ca106cdbb&X-Amz-SignedHeaders=host&response-content-disposition=attachment%3B%20filename%2A%3DUTF-8%27%27Kopie%2520von%2520Kopie%2520von%2520Beige%2520Gr%25C3%25BCn%2520Neutral%2520Organisch%2520Pitch%2520Deck%2520Marketing%2520Pr%25C3%25A4sentation.png&response-expires=Wed%2C%2002%20Apr%202025%2019%3A02%3A52%20GMT