diff --git a/src/services/api/handlers/forms.ts b/src/services/api/handlers/forms.ts
index 57c93de7ad..9e1bee72fa 100644
--- a/src/services/api/handlers/forms.ts
+++ b/src/services/api/handlers/forms.ts
@@ -1,52 +1,44 @@
+import { response } from "../libs/handler";
+
 import * as fs from "fs";
 import { APIGatewayEvent } from "aws-lambda";
 
 export const forms = async (event: APIGatewayEvent) => {
   try {
-    const body = event.body ? JSON.parse(event.body) : {};
-    const formId = body.formId;
-    const formVersion = body.formVersion;
+    const formId = event.queryStringParameters.formId;
+    const formVersion = event.queryStringParameters.formVersion;
 
     if (!formId) {
-      return {
+      return response({
         statusCode: 400,
-        headers: {
-          "Content-Type": "application/json",
-        },
         body: JSON.stringify({ error: "File ID was not provided" }),
-      };
+      });
     }
 
     const filePath = getFilepathForIdAndVersion(formId, formVersion);
     const jsonData = await fs.promises.readFile(filePath, "utf-8");
 
     if (!jsonData) {
-      return {
+      return response({
         statusCode: 404,
-        headers: {
-          "Content-Type": "application/json",
-        },
         body: JSON.stringify({
           error: "No file was found with provided formId and formVersion",
         }),
-      };
+      });
     }
     console.log(jsonData);
-    return {
+    return response({
       statusCode: 200,
-      headers: {
-        "Content-Type": "application/json",
-      },
       body: jsonData,
-    };
+    });
   } catch (error) {
     console.error("Error:", error);
-    return {
+    return response({
       statusCode: 500,
       body: JSON.stringify({
         error: error.message ? error.message : "Internal server error",
       }),
-    };
+    });
   }
 };
 
diff --git a/src/services/ui/src/api/index.ts b/src/services/ui/src/api/index.ts
index 8165896841..1413d6a571 100644
--- a/src/services/ui/src/api/index.ts
+++ b/src/services/ui/src/api/index.ts
@@ -1,3 +1,4 @@
 export * from "./useSearch";
+export * from "./useGetForm";
 export * from "./useGetItem";
 export * from "./getAttachmentUrl";
diff --git a/src/services/ui/src/api/useGetForm.ts b/src/services/ui/src/api/useGetForm.ts
new file mode 100644
index 0000000000..5cb2f9eeca
--- /dev/null
+++ b/src/services/ui/src/api/useGetForm.ts
@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import { API } from "aws-amplify";
+import { ReactQueryApiError } from "shared-types";
+
+// TODO: Use the Document type here once it is in a shared location.
+export const getForm = async (
+  formId: string,
+  formVersion?: string
+): Promise<any> => {
+  const form = await API.get("os", "/forms", {
+    queryStringParameters: { formId, formVersion },
+  });
+
+  return form;
+};
+
+export const useGetForm = (formId: string, formVersion?: string) => {
+  return useQuery<any, ReactQueryApiError>([formId], () =>
+    getForm(formId, formVersion)
+  );
+};
diff --git a/src/services/ui/src/pages/form/index.tsx b/src/services/ui/src/pages/form/index.tsx
index 2d1cc83ac2..f5c81a1a30 100644
--- a/src/services/ui/src/pages/form/index.tsx
+++ b/src/services/ui/src/pages/form/index.tsx
@@ -1,6 +1,5 @@
 import { useForm } from "react-hook-form";
 import { Button, Form } from "@/components/Inputs";
-
 import { RHFDocument } from "@/components/RHF";
 import { ABP1 } from "./proto";
 import { documentInitializer } from "@/components/RHF";