diff --git a/src/Components/Facility/TriageForm.tsx b/src/Components/Facility/TriageForm.tsx
index 9264661fc45..32971f1d302 100644
--- a/src/Components/Facility/TriageForm.tsx
+++ b/src/Components/Facility/TriageForm.tsx
@@ -2,15 +2,7 @@ import ConfirmDialog from "../Common/ConfirmDialog";
 import Card from "../../CAREUI/display/Card";
 
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import { useCallback, useReducer, useState, useEffect, lazy } from "react";
-import { useDispatch } from "react-redux";
-import { statusType, useAbortableEffect } from "../../Common/utils";
-import {
-  createTriageForm,
-  getTriageDetails,
-  getAnyFacility,
-  getTriageInfo,
-} from "../../Redux/actions";
+import { useReducer, useState, lazy } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import TextFormField from "../Form/FormFields/TextFormField";
 import { PatientStatsModel } from "./models";
@@ -22,10 +14,13 @@ const Loading = lazy(() => import("../Common/Loading"));
 import Page from "../Common/components/Page";
 import dayjs from "dayjs";
 import { dateQueryString, scrollTo } from "../../Utils/utils";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import request from "../../Utils/request/request";
 
-interface triageFormProps extends PatientStatsModel {
-  facilityId: number;
-  id?: number;
+interface Props extends PatientStatsModel {
+  facilityId: string;
+  id?: string;
 }
 
 const initForm: any = {
@@ -61,99 +56,40 @@ const triageFormReducer = (state = initialState, action: any) => {
   }
 };
 
-export const TriageForm = (props: triageFormProps) => {
+export const TriageForm = ({ facilityId, id }: Props) => {
   const { goBack } = useAppHistory();
-  const dispatchTriageData: any = useDispatch();
-  const dispatchAction: any = useDispatch();
-  const { facilityId, id } = props;
   const [state, dispatch] = useReducer(triageFormReducer, initialState);
   const [isLoading, setIsLoading] = useState(false);
-  const [facilityName, setFacilityName] = useState("");
-  const [patientStatsData, setPatientStatsData] = useState<
-    Array<PatientStatsModel>
-  >([]);
   const [openModalForExistingTriage, setOpenModalForExistingTriage] =
     useState<boolean>(false);
   const headerText = !id ? "Add Triage" : "Edit Triage";
   const buttonText = !id ? "Save Triage" : "Update Triage";
 
-  const fetchData = useCallback(
-    async (status: statusType) => {
-      setIsLoading(true);
-      if (id) {
-        // Edit Form functionality
-        const res = await dispatchAction(
-          getTriageDetails({ facilityId: facilityId, id: id })
-        );
-        if (!status.aborted && res && res.data) {
-          dispatch({
-            type: "set_form",
-            form: {
-              entry_date: res.data.entry_date
-                ? dayjs(res.data.entry_date).toDate()
-                : null,
-              num_patients_visited: res.data.num_patients_visited,
-              num_patients_home_quarantine:
-                res.data.num_patients_home_quarantine,
-              num_patients_isolation: res.data.num_patients_isolation,
-              num_patient_referred: res.data.num_patient_referred,
-              num_patient_confirmed_positive:
-                res.data.num_patient_confirmed_positive,
-            },
-          });
-        }
-      }
-      setIsLoading(false);
-    },
-    [dispatchAction, facilityId, id]
-  );
-
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchData(status);
-    },
-    [dispatch, fetchData, id]
-  );
-
-  // this will fetch all triage data of the facility
-  const fetchTriageData = useCallback(
-    async (status: statusType) => {
-      const [triageRes] = await Promise.all([
-        dispatchTriageData(getTriageInfo({ facilityId })),
-      ]);
-      if (!status.aborted) {
-        if (
-          triageRes &&
-          triageRes.data &&
-          triageRes.data.results &&
-          triageRes.data.results.length
-        ) {
-          setPatientStatsData(triageRes.data.results);
-        }
-      }
+  const triageDetailsQuery = useQuery(routes.getTriageDetails, {
+    pathParams: { facilityId, id: id! },
+    prefetch: !!id,
+    onResponse: ({ data }) => {
+      if (!data) return;
+      dispatch({
+        type: "set_form",
+        form: {
+          ...data,
+          entry_date: data.entry_date ? dayjs(data.entry_date).toDate() : null,
+        },
+      });
     },
-    [dispatchTriageData, facilityId]
-  );
+  });
 
-  useAbortableEffect(
-    (status: statusType) => {
-      fetchTriageData(status);
-    },
-    [dispatch, fetchTriageData]
-  );
+  const patientStatsQuery = useQuery(routes.getTriage, {
+    pathParams: { facilityId },
+  });
 
-  useEffect(() => {
-    async function fetchFacilityName() {
-      if (facilityId) {
-        const res = await dispatchAction(getAnyFacility(facilityId));
+  const patientStatsData = patientStatsQuery.data?.results ?? [];
 
-        setFacilityName(res?.data?.name || "");
-      } else {
-        setFacilityName("");
-      }
-    }
-    fetchFacilityName();
-  }, [dispatchAction, facilityId]);
+  const facilityQuery = useQuery(routes.getAnyFacility, {
+    pathParams: { id: facilityId },
+  });
+  const facilityName = facilityQuery.data?.name ?? "";
 
   const validateForm = () => {
     const errors = { ...initForm };
@@ -216,20 +152,17 @@ export const TriageForm = (props: triageFormProps) => {
       ) {
         setOpenModalForExistingTriage(false);
         setIsLoading(true);
-        const res = await dispatchAction(
-          createTriageForm(data, { facilityId })
-        );
+        const { res } = await request(routes.createTriage, {
+          pathParams: { facilityId },
+          body: data,
+        });
         setIsLoading(false);
-        if (res && res.data) {
+        if (res?.ok) {
           dispatch({ type: "set_form", form: initForm });
           if (id) {
-            Notification.Success({
-              msg: "Triage updated successfully",
-            });
+            Notification.Success({ msg: "Triage updated successfully" });
           } else {
-            Notification.Success({
-              msg: "Triage created successfully",
-            });
+            Notification.Success({ msg: "Triage created successfully" });
           }
           goBack();
         }
@@ -246,7 +179,12 @@ export const TriageForm = (props: triageFormProps) => {
     });
   };
 
-  if (isLoading) {
+  if (
+    isLoading ||
+    facilityQuery.loading ||
+    triageDetailsQuery.loading ||
+    patientStatsQuery.loading
+  ) {
     return <Loading />;
   }