diff --git a/website/src/pages/ComparePage/ComparePage.tsx b/website/src/pages/ComparePage/ComparePage.tsx
index 0ee3bd31c..946fe33d6 100644
--- a/website/src/pages/ComparePage/ComparePage.tsx
+++ b/website/src/pages/ComparePage/ComparePage.tsx
@@ -20,8 +20,8 @@ import RingLoader from "react-spinners/RingLoader";
 import useApiCall from "../../utils/Hook";
 import Hero from "./components/Hero";
 import Macrobench from "../../common/Macrobench";
-import Microbench from "../MicroPage/components/Microbench/Microbench";
-
+import { CompareData } from '@/types'
+ 
 export default function Compare() {
   const urlParams = new URLSearchParams(window.location.search);
 
@@ -31,11 +31,11 @@ export default function Compare() {
   });
 
   const {
-    data: dataMacrobench,
+    data: compareData,
     isLoading: isMacrobenchLoading,
     textLoading: macrobenchTextLoading,
     error: macrobenchError,
-  } = useApiCall(
+  } = useApiCall<CompareData>(
     `${import.meta.env.VITE_API_URL}macrobench/compare?new=${gitRef.new}&old=${gitRef.old}`
   );
 
@@ -62,11 +62,11 @@ export default function Compare() {
         </div>
       )}
 
-      {!isMacrobenchLoading && !macrobenchTextLoading && dataMacrobench && (
+      {!isMacrobenchLoading && !macrobenchTextLoading && compareData && compareData.length > 0 && (
         <section className="flex flex-col items-center">
           <h3 className="my-6 text-primary text-2xl">Macro Benchmarks</h3>
           <div className="flex flex-col gap-y-20">
-            {dataMacrobench.map((macro, index) => {
+            {compareData.map((macro, index) => {
               return (
                 <div key={index}>
                   <Macrobench
diff --git a/website/src/pages/DailyPage/DailyPage.tsx b/website/src/pages/DailyPage/DailyPage.tsx
index 0a5a13d70..285c303ee 100644
--- a/website/src/pages/DailyPage/DailyPage.tsx
+++ b/website/src/pages/DailyPage/DailyPage.tsx
@@ -22,26 +22,39 @@ import useApiCall from "../../utils/Hook";
 import ResponsiveChart from "./components/Chart";
 import DailySummary from "./components/DailySummary";
 import Hero from "./components/Hero";
+import { MacroData, MacroDataValue } from "@/types";
 
 import { secondToMicrosecond } from "../../utils/Utils";
 
+interface DailySummarydata {
+  name: string;
+  data : { total_qps: MacroDataValue }[];
+}
+
+type NumberDataPoint = { x: string; y: number};
+type StringDataPoint = { x: string; y: string };
+
+type ChartDataItem =
+  | { id: string; data: NumberDataPoint[] }
+  | { id: string; data: StringDataPoint[] };
+
 export default function DailyPage() {
   const urlParams = new URLSearchParams(window.location.search);
-  const [benchmarkType, setBenchmarktype] = useState(
-    urlParams.get("type") == null ? "OLTP" : urlParams.get("type")
+  const [benchmarkType, setBenchmarktype] = useState<string>(
+    urlParams.get("type") ?? "OLTP"
   );
 
   const {
     data: dataDailySummary,
     isLoading: isLoadingDailySummary,
     error: errorDailySummary,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}daily/summary`);
+  } = useApiCall<DailySummarydata>(`${import.meta.env.VITE_API_URL}daily/summary`);
 
   const {
     data: dataDaily,
     error: dailyError,
     textLoading: dailyTextLoading,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}daily?type=${benchmarkType}`);
+  } = useApiCall<MacroData>(`${import.meta.env.VITE_API_URL}daily?type=${benchmarkType}`);
 
   const navigate = useNavigate();
 
@@ -49,14 +62,14 @@ export default function DailyPage() {
     navigate(`?type=${benchmarkType}`);
   }, [benchmarkType]);
 
-  const TPSData = [
+  const TPSData: { id: string; data: NumberDataPoint[] }[] = [
     {
       id: "TPS",
       data: [],
     },
   ];
 
-  const QPSData = [
+  const QPSData: { id: string; data: NumberDataPoint[] }[] = [
     {
       id: "Reads",
       data: [],
@@ -77,14 +90,14 @@ export default function DailyPage() {
     },
   ];
 
-  const latencyData = [
+  const latencyData: { id: string; data: NumberDataPoint[] }[] = [
     {
       id: "Latency",
       data: [],
     },
   ];
 
-  const CPUTimeData = [
+  const CPUTimeData : { id: string; data: StringDataPoint[] }[]= [
     {
       id: "Total",
       data: [],
@@ -99,7 +112,7 @@ export default function DailyPage() {
     },
   ];
 
-  const MemBytesData = [
+  const MemBytesData: { id: string; data: NumberDataPoint[] }[] = [
     {
       id: "Total",
       data: [],
@@ -188,7 +201,11 @@ export default function DailyPage() {
     });
   }
 
-  const allChartData = [
+  const allChartData: {
+    data: ChartDataItem[];
+    title: string;
+    colors: string[];
+  }[] = [
     {
       data: QPSData,
       title: "QPS (Queries per second)",
@@ -234,9 +251,9 @@ export default function DailyPage() {
         </div>
       )}
 
-      {!errorDailySummary && dataDailySummary && (
+      {!errorDailySummary && dataDailySummary && dataDailySummary.length > 0 &&(
         <>
-          <section className="flex p-page justify-center flex-wrap gap-10 py-10">
+          <section className="flex p-page justif-center flex-wrap gap-10 py-10">
             {dataDailySummary.map((dailySummary, index) => {
               return (
                 <DailySummary
@@ -258,7 +275,7 @@ export default function DailyPage() {
               {allChartData.map((chartData, index) => (
                 <div key={index} className="relative w-full h-[500px]">
                   <ResponsiveChart
-                    data={chartData.data}
+                    data={chartData.data as any}
                     title={chartData.title}
                     colors={chartData.colors}
                     isFirstChart={index === 0}
diff --git a/website/src/pages/ForeignKeysPage/ForeignKeysPage.tsx b/website/src/pages/ForeignKeysPage/ForeignKeysPage.tsx
index adf1f65e4..dcdefb051 100644
--- a/website/src/pages/ForeignKeysPage/ForeignKeysPage.tsx
+++ b/website/src/pages/ForeignKeysPage/ForeignKeysPage.tsx
@@ -17,23 +17,36 @@ limitations under the License.
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import RingLoader from "react-spinners/RingLoader";
-
+import { MacrosData } from '@/types'
 
 import { errorApi } from "../../utils/Utils";
 import Hero from "./components/Hero";
 import FK from "./components/FK";
 
-const ForeignKeys = () => {
+interface Ref {
+  Name: string;
+  CommitHash: string;
+  Version: {
+    Major: number;
+    Minor: number;
+    Patch: number;
+  };
+  RCnumber: number;
+}
+
+interface ForeignKeysProps {}
+
+const ForeignKeys: React.FC<ForeignKeysProps> = () => {
   const urlParams = new URLSearchParams(window.location.search);
 
-  const [gitRef, setGitRef] = useState({
+  const [gitRef, setGitRef] = useState<{ tag: string }>({
     tag: urlParams.get("tag") || "",
   });
 
-  const [dataRefs, setDataRefs] = useState();
-  const [dataFKs, setDataFKs] = useState([]);
-  const [error, setError] = useState<null | string>(null);
-  const [loading, setLoading] = useState(true);
+  const [dataRefs, setDataRefs] = useState<Ref[] | undefined>();
+  const [dataFKs, setDataFKs] = useState<MacrosData[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
 
   async function loadRefs() {
     try {
@@ -49,7 +62,7 @@ const ForeignKeys = () => {
 
   async function loadData() {
     const commits = {
-      tag: dataRefs.filter((r) => r.Name === gitRef.tag)[0].CommitHash,
+      tag: dataRefs?.filter((r) => r.Name === gitRef.tag)[0]?.CommitHash || "",
     };
 
     setLoading(true);
diff --git a/website/src/pages/PRPage/PRPage.tsx b/website/src/pages/PRPage/PRPage.tsx
index 1dcf5a80f..c397a0430 100644
--- a/website/src/pages/PRPage/PRPage.tsx
+++ b/website/src/pages/PRPage/PRPage.tsx
@@ -20,6 +20,7 @@ import useApiCall from "../../utils/Hook";
 import RingLoader from "react-spinners/RingLoader";
 
 import { formatDate, errorApi } from "../../utils/Utils";
+import { prDataTypes } from "@/types";
 
 export default function PRPage() {
   const { pull_nb } = useParams();
@@ -28,13 +29,15 @@ export default function PRPage() {
     data: dataSinglePr,
     isLoading: singlePrLoading,
     error: singlePrError,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}pr/info/${pull_nb}`, []);
+  } = useApiCall<prDataTypes>(`${import.meta.env.VITE_API_URL}pr/info/${pull_nb}`);
+
+  const singlePrData = dataSinglePr.length > 0 ? dataSinglePr[0] : null;
 
   const isComparisonAvailable =
-    dataSinglePr.Base !== "" && dataSinglePr.Head !== "";
+    singlePrData?.Base !== "" && singlePrData?.Head !== "";
 
   if (
-    dataSinglePr.error ==
+    singlePrData?.error ==
     "GET https://api.github.com/repos/vitessio/vitess/pulls/13675: 404 Not Found []"
   ) {
     return (
@@ -65,11 +68,11 @@ export default function PRPage() {
                   >
                     [#{pull_nb}]
                   </Link>{" "}
-                  {dataSinglePr.Title}
+                  {singlePrData?.Title}
                 </h2>
                 <span>
-                  By {dataSinglePr.Author} at{" "}
-                  {formatDate(dataSinglePr.CreatedAt)}{" "}
+                  By {singlePrData?.Author} at{" "}
+                  {formatDate(singlePrData?.CreatedAt)}{" "}
                 </span>
               </div>
 
@@ -77,7 +80,7 @@ export default function PRPage() {
                 <div className="flex justify-center items-center">
                   <Link
                     className="text-primary p-6 border border-primary rounded-xl duration-300 hover:bg-primary hover:bg-opacity-20 hover:scale-105 whitespace-nowrap"
-                    to={`/compare?ltag=${dataSinglePr.Base}&rtag=${dataSinglePr.Head}`}
+                    to={`/compare?ltag=${singlePrData?.Base}&rtag=${singlePrData?.Head}`}
                   >
                     Compare with base commit
                   </Link>
@@ -87,8 +90,8 @@ export default function PRPage() {
             <div className="flex flex-col justify-between p-5 text-lg leading-loose">
               {isComparisonAvailable ? (
                 <>
-                  <span>Base: {dataSinglePr.Base}</span>
-                  <span>Head: {dataSinglePr.Head}</span>
+                  <span>Base: {singlePrData?.Base}</span>
+                  <span>Head: {singlePrData?.Head}</span>
                 </>
               ) : (
                 <div>
@@ -96,7 +99,7 @@ export default function PRPage() {
                   pull request.
                 </div>
               )}
-              <span>{dataSinglePr.error}</span>
+              <span>{singlePrData?.error}</span>
             </div>
           </div>
         )}
diff --git a/website/src/pages/PRsPage/PRsPage.tsx b/website/src/pages/PRsPage/PRsPage.tsx
index 6590ff362..a44f3ba8d 100644
--- a/website/src/pages/PRsPage/PRsPage.tsx
+++ b/website/src/pages/PRsPage/PRsPage.tsx
@@ -21,13 +21,14 @@ import useApiCall from "../../utils/Hook";
 import RingLoader from "react-spinners/RingLoader";
 
 import PRTable from "./components/PRTable";
+import { prDataTypes } from "@/types";
 
 export default function PRsPage() {
   const {
     data: dataPRList,
     isLoading: isPRListLoading,
     error: PRListError,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}pr/list`, []);
+  } = useApiCall<prDataTypes>(`${import.meta.env.VITE_API_URL}pr/list`);
 
   return (
     <>
diff --git a/website/src/pages/SearchPage/SearchPage.tsx b/website/src/pages/SearchPage/SearchPage.tsx
index 492f53e52..3b8198a8a 100644
--- a/website/src/pages/SearchPage/SearchPage.tsx
+++ b/website/src/pages/SearchPage/SearchPage.tsx
@@ -21,6 +21,7 @@ import useApiCall from "../../utils/Hook";
 
 import Hero from "./components/Hero";
 import SearchMacro from "./components/SearchMacro";
+import { SearchData } from "@/types";
 
 export default function SearchPage() {
   const urlParams = new URLSearchParams(window.location.search);
@@ -30,7 +31,9 @@ export default function SearchPage() {
     data: dataSearch,
     isLoading: isSearchLoading,
     error: searchError,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}search?sha=${gitRef}`);
+  } = useApiCall<SearchData>(
+    `${import.meta.env.VITE_API_URL}search?sha=${gitRef}`
+  );
 
   const navigate = useNavigate();
 
@@ -42,7 +45,9 @@ export default function SearchPage() {
     <>
       <Hero setGitRef={setGitRef} />
 
-      {searchError && <div className="text-red-500 text-center my-2">{searchError}</div>}
+      {searchError && (
+        <div className="text-red-500 text-center my-2">{searchError}</div>
+      )}
 
       {isSearchLoading && (
         <div className="flex my-10 justify-center items-center">
@@ -50,19 +55,25 @@ export default function SearchPage() {
         </div>
       )}
 
-      {!isSearchLoading && dataSearch && (
+      {!isSearchLoading && dataSearch && dataSearch.length > 0 && (
         <section className="flex flex-col items-center p-page">
           <div className="w-1/2 flex flex-col gap-y-16">
-            {dataSearch.Macros &&
-              typeof dataSearch.Macros === "object" &&
-              Object.entries(dataSearch.Macros).map(function (
-                searchMacro,
-                index
-              ) {
-                return (
-                  <SearchMacro key={index} data={searchMacro} gitRef={gitRef} />
-                );
-              })}
+            {dataSearch.map((searchData, index) => (
+              <div key={index}>
+                {searchData.Macros &&
+                  typeof searchData.Macros === "object" &&
+                  Object.entries(searchData.Macros).map(
+                    ([macroName, macroData], idx) => (
+                      <SearchMacro
+                        key={`${index}-${idx}`}
+                        macroName={macroName}
+                        macroData={macroData}
+                        gitRef={gitRef}
+                      />
+                    )
+                  )}
+              </div>
+            ))}
           </div>
         </section>
       )}
diff --git a/website/src/pages/SearchPage/components/SearchMacro.tsx b/website/src/pages/SearchPage/components/SearchMacro.tsx
index 3631fdc5a..952ae92d8 100644
--- a/website/src/pages/SearchPage/components/SearchMacro.tsx
+++ b/website/src/pages/SearchPage/components/SearchMacro.tsx
@@ -20,30 +20,19 @@ import { formatByte, secondToMicrosecond } from "../../../utils/Utils";
 import { Link } from "react-router-dom";
 import {getRange} from "@/common/Macrobench";
 import PropTypes from "prop-types";
+import { MacroData } from "@/types";
 
 interface SearchMacroProps {
+  macroName: string;
+  macroData: MacroData;
   gitRef: string;
-  data: Array<string | any>;
 }
 
-interface RowProps {
-  title: string;
-  value: {
-    center: string | number;
-    range: {
-      infinite: boolean;
-      unknown: boolean;
-      value: number;
-    };
-  };
-  fmt?: string;
-}
-
-export default function SearchMacro({ data, gitRef }: SearchMacroProps) {
+export default function SearchMacro({ macroName, macroData, gitRef }: SearchMacroProps) {
   return (
     <div className="flex flex-col border border-primary relative rounded-xl bg-background bg-opacity-5 shadow-xl">
       <div className="p-5">
-        <h3 className="text-xl font-semibold">{data[0]}</h3>
+        <h3 className="text-xl font-semibold">{macroName}</h3>
         <Link
           target="_blank"
           className="text-primary"
@@ -56,72 +45,72 @@ export default function SearchMacro({ data, gitRef }: SearchMacroProps) {
         <tbody>
           <Row
             title={"QPS Total"}
-            value={data[1].total_qps}
+            value={macroData.total_qps}
           />
 
           <Row
             title={"QPS Reads"}
-            value={data[1].reads_qps}
+            value={macroData.reads_qps}
           />
 
           <Row
             title={"QPS Writes"}
-            value={data[1].writes_qps}
+            value={macroData.writes_qps}
           />
 
           <Row
             title={"QPS Other"}
-            value={data[1].other_qps}
+            value={macroData.other_qps}
           />
 
           <Row
             title={"TPS"}
-            value={data[1].tps}
+            value={macroData.tps}
           />
 
           <Row
             title={"Latency"}
-            value={data[1].latency}
+            value={macroData.latency}
           />
 
           <Row
             title={"Errors"}
-            value={data[1].errors}
+            value={macroData.errors}
           />
 
           <Row
             title={"Total CPU / query"}
-            value={data[1].total_components_cpu_time}
+            value={macroData.total_components_cpu_time}
             fmt={"time"}
           />
 
           <Row
             title={"CPU / query (vtgate)"}
-            value={data[1].components_cpu_time.vtgate}
+            value={macroData.components_cpu_time.vtgate}
             fmt={"time"}
           />
 
           <Row
             title={"CPU / query (vttablet)"}
-            value={data[1].components_cpu_time.vttablet}
+            value={macroData.components_cpu_time.vttablet}
             fmt={"time"}
           />
 
           <Row
             title={"Total Allocated / query"}
-            value={data[1].total_components_mem_stats_alloc_bytes}
+            value={macroData.total_components_mem_stats_alloc_bytes}
             fmt={"memory"}
           />
 
           <Row
             title={"Allocated / query (vtgate)"}
-            value={data[1].components_mem_stats_alloc_bytes.vtgate}
+            value={macroData.components_mem_stats_alloc_bytes.vtgate}
             fmt={"memory"}
           />
 
           <Row
             title={"Allocated / query (vttablet)"}
-            value={data[1].components_mem_stats_alloc_bytes.vttablet}
+            value={macroData.components_mem_stats_alloc_bytes.vttablet}
             fmt={"memory"}
           />
         </tbody>
@@ -130,7 +119,7 @@ export default function SearchMacro({ data, gitRef }: SearchMacroProps) {
   );
 }
 
-function Row({ title, value, fmt }:RowProps) {
+function Row({ title, value, fmt }) {
     var valFmt = value.center
     if (fmt == "time") {
         valFmt = secondToMicrosecond(value.center)
diff --git a/website/src/pages/StatusPage/StatusPage.tsx b/website/src/pages/StatusPage/StatusPage.tsx
index 35842831a..69cb1e0ca 100644
--- a/website/src/pages/StatusPage/StatusPage.tsx
+++ b/website/src/pages/StatusPage/StatusPage.tsx
@@ -17,17 +17,19 @@ limitations under the License.
 import React from "react";
 import RingLoader from "react-spinners/RingLoader";
 import useApiCall from "../../utils/Hook";
+import { statusDataTypes } from "@/types";
 
 import Hero from "./components/Hero";
 import ExecutionQueue from "./components/PreviousExecutions";
 import PreviousExecutions from "./components/PreviousExecutions";
 
+
 export default function StatusPage() {
   const {
     data: dataQueue,
     isLoading: isLoadingQueue,
     error: errorQueue,
-  } = useApiCall(`${import.meta.env.VITE_API_URL}queue`);
+  } = useApiCall<statusDataTypes>(`${import.meta.env.VITE_API_URL}queue`);
   const { data: dataPreviousExe, isLoading: isLoadingPreviousExe } = useApiCall(
     `${import.meta.env.VITE_API_URL}recent`
   );
diff --git a/website/src/pages/StatusPage/components/Hero.tsx b/website/src/pages/StatusPage/components/Hero.tsx
index 286b5ad31..fd283f307 100644
--- a/website/src/pages/StatusPage/components/Hero.tsx
+++ b/website/src/pages/StatusPage/components/Hero.tsx
@@ -15,6 +15,7 @@ limitations under the License.
 */
 import React from "react";
 import useApiCall from "../../../utils/Hook";
+import { statusDataTypes } from "@/types";
 
 const info = [
   { title: "Total Benchmarks", content: "Total" },
@@ -23,7 +24,7 @@ const info = [
 ];
 
 export default function Hero() {
-  const { data: dataStatusStats } = useApiCall(
+  const { data: dataStatusStats } = useApiCall<statusDataTypes>(
     `${import.meta.env.VITE_API_URL}status/stats`
   );
 
diff --git a/website/src/types/index.ts b/website/src/types/index.ts
index 537a73739..2add5b824 100644
--- a/website/src/types/index.ts
+++ b/website/src/types/index.ts
@@ -15,3 +15,94 @@ limitations under the License.
 */
 
 export type Theme = "default" | "dark";
+
+export type statusDataTypes = {
+    uuid: string;
+    git_ref: string;
+    source: string;
+    started_at: string;
+    finished_at: string;
+    type_of: string;
+    pull_nb?: number;
+    golang_version: string;
+    status: string;
+}
+
+export type prDataTypes = {
+    ID: number;
+    Author: string;
+    Title: string;
+    CreatedAt: string;
+    Base: string;
+    Head: string;
+    error?: any
+}
+
+export interface Range {
+    infinite: boolean;
+    unknown: boolean;
+    value: number;
+}
+  
+export interface MacroDataValue {
+  center: number;
+  confidence: number;
+  range: Range;
+}
+
+export interface ComponentStats {
+  vtgate: MacroDataValue;
+  vttablet: MacroDataValue;
+}
+
+export interface MacroData {
+  git_ref: string;
+  total_qps: MacroDataValue;
+  reads_qps: MacroDataValue;
+  writes_qps: MacroDataValue;
+  other_qps: MacroDataValue;
+  tps: MacroDataValue;
+  latency: MacroDataValue;
+  errors: MacroDataValue;
+  total_components_cpu_time: MacroDataValue;
+  components_cpu_time: ComponentStats;
+  total_components_mem_stats_alloc_bytes: MacroDataValue;
+  components_mem_stats_alloc_bytes: ComponentStats;
+}
+
+export interface MacrosData {
+  [key: string]: MacroData;
+}
+
+export interface SearchData {
+  Macros: MacrosData;
+}
+
+export interface Range {
+  infinite: boolean;
+  unknown: boolean;
+  value: number;
+}
+
+export interface ComparedValue {
+  insignificant: boolean;
+  delta: number;
+  p: number;
+  n1: number;
+  n2: number;
+  old: MacroDataValue;
+  new: MacroDataValue;
+}
+
+export interface CompareResult {
+  total_qps: ComparedValue;
+  reads_qps: ComparedValue;
+  writes_qps: ComparedValue;
+  other_qps: ComparedValue;
+  tps: ComparedValue;
+}
+
+export interface CompareData {
+  type: string;
+  result: CompareResult;
+}
\ No newline at end of file
diff --git a/website/src/utils/Hook.tsx b/website/src/utils/Hook.tsx
index 8587e2fe8..474454ed3 100644
--- a/website/src/utils/Hook.tsx
+++ b/website/src/utils/Hook.tsx
@@ -18,8 +18,8 @@ import { useState, useEffect } from "react";
 
 import { errorApi } from "./Utils";
 
-const useApiCall = (url: string) => {
-  const [data, setData] = useState([]);
+const useApiCall = <T,>(url: string) : { data: T[], isLoading: boolean, error: string | null, textLoading: boolean } => {
+  const [data, setData] = useState<T[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [textLoading, setTextLoading] = useState(true);