diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
index de0ab305f48..5fbff1b48cb 100644
--- a/src/Common/constants.tsx
+++ b/src/Common/constants.tsx
@@ -1308,7 +1308,7 @@ export const CONSENT_PATIENT_CODE_STATUS_CHOICES = [
   { id: 1, text: "Do Not Hospitalise (DNH)" },
   { id: 2, text: "Do Not Resuscitate (DNR)" },
   { id: 3, text: "Comfort Care Only" },
-  { id: 4, text: "Active treatment (Default)" },
+  { id: 4, text: "Active treatment" },
 ];
 export const OCCUPATION_TYPES = [
   {
diff --git a/src/Components/Facility/ConsultationForm.tsx b/src/Components/Facility/ConsultationForm.tsx
index 7e6fe345f7c..8a9a19db2bc 100644
--- a/src/Components/Facility/ConsultationForm.tsx
+++ b/src/Components/Facility/ConsultationForm.tsx
@@ -1,6 +1,6 @@
 import * as Notification from "../../Utils/Notifications.js";
 
-import { BedModel, FacilityModel } from "./models";
+import { BedModel, ConsentRecord, FacilityModel } from "./models";
 import {
   CONSULTATION_SUGGESTION,
   DISCHARGE_REASONS,
@@ -8,8 +8,6 @@ import {
   PATIENT_CATEGORIES,
   REVIEW_AT_CHOICES,
   TELEMEDICINE_ACTIONS,
-  CONSENT_TYPE_CHOICES,
-  CONSENT_PATIENT_CODE_STATUS_CHOICES,
 } from "../../Common/constants";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import { DraftSection, useAutoSaveReducer } from "../../Utils/AutoSave";
@@ -59,8 +57,6 @@ import {
   CreateDiagnosesBuilder,
   EditDiagnosesBuilder,
 } from "../Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.js";
-import { FileUpload } from "../Patient/FileUpload.js";
-import ConfirmDialog from "../Common/ConfirmDialog.js";
 import request from "../../Utils/request/request.js";
 import routes from "../../Redux/api.js";
 import useQuery from "../../Utils/request/useQuery.js";
@@ -71,13 +67,6 @@ const PageTitle = lazy(() => import("../Common/PageTitle"));
 
 type BooleanStrings = "true" | "false";
 
-export type ConsentRecord = {
-  id: string;
-  type: (typeof CONSENT_TYPE_CHOICES)[number]["id"];
-  patient_code_status?: (typeof CONSENT_PATIENT_CODE_STATUS_CHOICES)[number]["id"];
-  deleted?: boolean;
-};
-
 type FormDetails = {
   symptoms: number[];
   other_symptoms: string;
@@ -125,6 +114,7 @@ type FormDetails = {
   death_datetime: string;
   death_confirmed_doctor: string;
   InvestigationAdvice: InvestigationType[];
+  procedures: ProcedureType[];
   consent_records: ConsentRecord[];
 };
 
@@ -175,6 +165,7 @@ const initForm: FormDetails = {
   death_datetime: "",
   death_confirmed_doctor: "",
   InvestigationAdvice: [],
+  procedures: [],
   consent_records: [],
 };
 
@@ -226,7 +217,6 @@ type ConsultationFormSection =
   | "Consultation Details"
   | "Diagnosis"
   | "Treatment Plan"
-  | "Consent Records"
   | "Bed Status";
 
 type Props = {
@@ -259,14 +249,8 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
   const [diagnosisVisible, diagnosisRef] = useVisibility(-300);
   const [treatmentPlanVisible, treatmentPlanRef] = useVisibility(-300);
   const [bedStatusVisible, bedStatusRef] = useVisibility(-300);
-  const [consentRecordsVisible, consentRecordsRef] = useVisibility(-300);
+
   const [disabledFields, setDisabledFields] = useState<string[]>([]);
-  const [collapsedConsentRecords, setCollapsedConsentRecords] = useState<
-    number[]
-  >([]);
-  const [showDeleteConsent, setShowDeleteConsent] = useState<string | null>(
-    null,
-  );
 
   const { min_encounter_date } = useConfig();
 
@@ -286,11 +270,6 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
       visible: treatmentPlanVisible,
       ref: treatmentPlanRef,
     },
-    "Consent Records": {
-      iconClass: "l-file-alt",
-      visible: consentRecordsVisible,
-      ref: consentRecordsRef,
-    },
     "Bed Status": {
       iconClass: "l-bed",
       visible: bedStatusVisible,
@@ -303,7 +282,6 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
       if (consultationDetailsVisible) return "Consultation Details";
       if (diagnosisVisible) return "Diagnosis";
       if (treatmentPlanVisible) return "Treatment Plan";
-      if (consentRecordsVisible) return "Consent Records";
       if (bedStatusVisible) return "Bed Status";
       return prev;
     });
@@ -311,7 +289,6 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
     consultationDetailsVisible,
     diagnosisVisible,
     treatmentPlanVisible,
-    consentRecordsVisible,
     bedStatusVisible,
   ]);
 
@@ -769,7 +746,6 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
         height: Number(state.form.height),
         bed: bed && bed instanceof Array ? bed[0]?.id : bed?.id,
         patient_no: state.form.patient_no || null,
-        consent_records: state.form.consent_records || [],
       };
 
       const { data: obj } = await request(
@@ -917,64 +893,6 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
     };
   };
 
-  const handleConsentTypeChange: FieldChangeEventHandler<number> = async (
-    event,
-  ) => {
-    if (!id) return;
-    const consentRecords = [...state.form.consent_records];
-    if (
-      consentRecords
-        .filter((cr) => cr.deleted !== true)
-        .map((cr) => cr.type)
-        .includes(event.value)
-    ) {
-      return;
-    } else {
-      const randomId = "consent-" + new Date().getTime().toString();
-      const newRecords = [
-        ...consentRecords,
-        { id: randomId, type: event.value },
-      ];
-      await request(routes.partialUpdateConsultation, {
-        pathParams: { id },
-        body: { consent_records: newRecords },
-      });
-      dispatch({
-        type: "set_form",
-        form: { ...state.form, consent_records: newRecords },
-      });
-    }
-  };
-
-  const handleConsentPCSChange: FieldChangeEventHandler<number> = (event) => {
-    dispatch({
-      type: "set_form",
-      form: {
-        ...state.form,
-        consent_records: state.form.consent_records.map((cr) =>
-          cr.type === 2 ? { ...cr, patient_code_status: event.value } : cr,
-        ),
-      },
-    });
-  };
-
-  const handleDeleteConsent = async () => {
-    const consent_id = showDeleteConsent;
-    if (!consent_id || !id) return;
-    const newRecords = state.form.consent_records.map((cr) =>
-      cr.id === consent_id ? { ...cr, deleted: true } : cr,
-    );
-    await request(routes.partialUpdateConsultation, {
-      pathParams: { id },
-      body: { consent_records: newRecords },
-    });
-    dispatch({
-      type: "set_form",
-      form: { ...state.form, consent_records: newRecords },
-    });
-    setShowDeleteConsent(null);
-  };
-
   return (
     <div className="relative flex flex-col pb-2">
       <PageTitle
@@ -994,10 +912,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
       <div className="top-0 mt-5 flex grow-0 sm:mx-12">
         <div className="fixed hidden h-full w-72 flex-col xl:flex">
           {Object.keys(sections).map((sectionTitle) => {
-            if (
-              !isUpdate &&
-              ["Bed Status", "Consent Records"].includes(sectionTitle)
-            ) {
+            if (!isUpdate && ["Bed Status"].includes(sectionTitle)) {
               return null;
             }
             const isCurrent = currentSection === sectionTitle;
@@ -1551,118 +1466,6 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                     </>
                   )}
                 </div>
-                {id && (
-                  <>
-                    <div className="flex flex-col gap-4 pb-4">
-                      {sectionTitle("Consent Records", true)}
-                    </div>
-                    <ConfirmDialog
-                      show={showDeleteConsent !== null}
-                      onClose={() => setShowDeleteConsent(null)}
-                      onConfirm={handleDeleteConsent}
-                      action="Delete"
-                      variant="danger"
-                      description={
-                        "Are you sure you want to delete this consent record?"
-                      }
-                      title="Delete Consent"
-                      className="w-auto"
-                    />
-                    <SelectFormField
-                      {...selectField("consent_type")}
-                      onChange={handleConsentTypeChange}
-                      label="Add Consent Type"
-                      options={CONSENT_TYPE_CHOICES.filter(
-                        (c) =>
-                          !state.form.consent_records
-                            .filter((r) => r.deleted !== true)
-                            .map((record) => record.type)
-                            .includes(c.id),
-                      )}
-                    />
-                    <div className="flex flex-col gap-4">
-                      {state.form.consent_records
-                        .filter((record) => record.deleted !== true)
-                        .map((record, index) => (
-                          <div
-                            className="overflow-hidden rounded-xl border border-gray-300 bg-gray-100"
-                            key={index}
-                          >
-                            <div className="flex items-center justify-between bg-gray-200 p-4">
-                              <button
-                                type="button"
-                                className="font-bold"
-                                onClick={() =>
-                                  setCollapsedConsentRecords((prev) =>
-                                    prev.includes(record.type)
-                                      ? prev.filter((r) => r !== record.type)
-                                      : [...prev, record.type],
-                                  )
-                                }
-                              >
-                                <CareIcon
-                                  icon={
-                                    collapsedConsentRecords.includes(
-                                      record.type,
-                                    )
-                                      ? "l-arrow-down"
-                                      : "l-arrow-up"
-                                  }
-                                  className="mr-2"
-                                />
-                                {
-                                  CONSENT_TYPE_CHOICES.find(
-                                    (c) => c.id === record.type,
-                                  )?.text
-                                }
-                              </button>
-                              <button
-                                className="text-red-400"
-                                type="button"
-                                onClick={() => {
-                                  setShowDeleteConsent(record.id);
-                                }}
-                              >
-                                <CareIcon
-                                  icon="l-trash-alt"
-                                  className="h-4 w-4"
-                                />
-                              </button>
-                            </div>
-                            <div
-                              className={`${
-                                collapsedConsentRecords.includes(record.type)
-                                  ? "hidden"
-                                  : ""
-                              }`}
-                            >
-                              <div className="px-4 pt-4">
-                                {record.type === 2 && (
-                                  <SelectFormField
-                                    {...selectField("consent_type")}
-                                    onChange={handleConsentPCSChange}
-                                    label="Patient Code Status"
-                                    value={record.patient_code_status}
-                                    options={
-                                      CONSENT_PATIENT_CODE_STATUS_CHOICES
-                                    }
-                                  />
-                                )}
-                              </div>
-                              <FileUpload
-                                changePageMetadata={false}
-                                type="CONSENT_RECORD"
-                                hideBack
-                                unspecified
-                                className="w-full"
-                                consentId={record.id}
-                              />
-                            </div>
-                          </div>
-                        ))}
-                    </div>
-                  </>
-                )}
                 <div className="mt-6 flex flex-col justify-end gap-3 sm:flex-row">
                   <Cancel
                     onClick={() =>
diff --git a/src/Components/Facility/models.tsx b/src/Components/Facility/models.tsx
index 49a2f1346af..252603ab89f 100644
--- a/src/Components/Facility/models.tsx
+++ b/src/Components/Facility/models.tsx
@@ -1,4 +1,6 @@
 import {
+  CONSENT_PATIENT_CODE_STATUS_CHOICES,
+  CONSENT_TYPE_CHOICES,
   ConsultationSuggestionValue,
   DISCHARGE_REASONS,
   PATIENT_NOTES_THREADS,
@@ -12,7 +14,6 @@ import { ConsultationDiagnosis, CreateDiagnosis } from "../Diagnosis/types";
 import { NormalPrescription, PRNPrescription } from "../Medicine/models";
 import { AssignedToObjectModel, DailyRoundsModel } from "../Patient/models";
 import { UserBareMinimum } from "../Users/models";
-import { ConsentRecord } from "./ConsultationForm";
 
 export interface LocalBodyModel {
   id: number;
@@ -97,6 +98,13 @@ export interface OptionsType {
 
 export type PatientCategory = "Comfort Care" | "Mild" | "Moderate" | "Critical";
 
+export type ConsentRecord = {
+  id: string;
+  type: (typeof CONSENT_TYPE_CHOICES)[number]["id"];
+  patient_code_status?: (typeof CONSENT_PATIENT_CODE_STATUS_CHOICES)[number]["id"];
+  deleted?: boolean;
+};
+
 export interface ConsultationModel {
   encounter_date: string;
   icu_admission_date?: string;
diff --git a/src/Components/Patient/FileUpload.tsx b/src/Components/Patient/FileUpload.tsx
index 81e92efdf8b..6f63a697229 100644
--- a/src/Components/Patient/FileUpload.tsx
+++ b/src/Components/Patient/FileUpload.tsx
@@ -57,7 +57,7 @@ export const header_content_type: URLS = {
 };
 
 // Array of image extensions
-const ExtImage: string[] = [
+export const ExtImage: string[] = [
   "jpeg",
   "jpg",
   "png",
@@ -119,12 +119,13 @@ interface URLS {
   [id: string]: string;
 }
 
-interface ModalDetails {
+export interface ModalDetails {
   name?: string;
   id?: string;
   reason?: string;
   userArchived?: string;
   archiveTime?: any;
+  associatedId?: string;
 }
 
 export interface StateInterface {
diff --git a/src/Components/Patient/PatientConsentRecordBlock.tsx b/src/Components/Patient/PatientConsentRecordBlock.tsx
new file mode 100644
index 00000000000..8f1d3715e8e
--- /dev/null
+++ b/src/Components/Patient/PatientConsentRecordBlock.tsx
@@ -0,0 +1,157 @@
+import dayjs from "dayjs";
+import {
+  CONSENT_PATIENT_CODE_STATUS_CHOICES,
+  CONSENT_TYPE_CHOICES,
+} from "../../Common/constants";
+import routes from "../../Redux/api";
+import useQuery from "../../Utils/request/useQuery";
+import { ConsentRecord } from "../Facility/models";
+import { FileUploadModel } from "./models";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import ButtonV2 from "../Common/components/ButtonV2";
+import { useEffect } from "react";
+import useAuthUser from "../../Common/hooks/useAuthUser";
+
+export default function PatientConsentRecordBlockGroup(props: {
+  consentRecord: ConsentRecord;
+  previewFile: (file: FileUploadModel, file_associating_id: string) => void;
+  archiveFile: (file: FileUploadModel, file_associating_id: string) => void;
+  onDelete: (consentRecord: ConsentRecord) => void;
+  refreshTrigger: any;
+  showArchive: boolean;
+  onFilesFound: () => void;
+}) {
+  const {
+    consentRecord,
+    previewFile,
+    archiveFile,
+    refreshTrigger,
+    showArchive,
+  } = props;
+
+  const authUser = useAuthUser();
+
+  const filesQuery = useQuery(routes.viewUpload, {
+    query: {
+      file_type: "CONSENT_RECORD",
+      associating_id: consentRecord.id,
+      is_archived: false,
+      limit: 100,
+      offset: 0,
+    },
+  });
+
+  const archivedFilesQuery = useQuery(routes.viewUpload, {
+    query: {
+      file_type: "CONSENT_RECORD",
+      associating_id: consentRecord.id,
+      is_archived: true,
+      limit: 100,
+      offset: 0,
+    },
+  });
+
+  const consent = CONSENT_TYPE_CHOICES.find((c) => c.id === consentRecord.type);
+  const consentPCS = CONSENT_PATIENT_CODE_STATUS_CHOICES.find(
+    (c) => c.id === consentRecord.patient_code_status,
+  );
+
+  const data = showArchive
+    ? [
+        ...(archivedFilesQuery.data?.results || []),
+        ...(filesQuery.data?.results || []),
+      ]
+    : filesQuery.data?.results;
+
+  useEffect(() => {
+    filesQuery.refetch();
+    archivedFilesQuery.refetch();
+  }, [refreshTrigger]);
+
+  useEffect(() => {
+    if ((data?.length || 0) > 1) {
+      props.onFilesFound();
+    }
+  }, [data]);
+
+  return (
+    <div
+      className={`flex flex-col gap-2 ${(data?.length || 0) < 1 && "hidden"}`}
+    >
+      <div className="flex items-center justify-between">
+        <div>
+          <h4>
+            {consent?.text} {consentPCS?.text && `(${consentPCS.text})`}
+          </h4>
+          {consentRecord.deleted && (
+            <div>
+              <div className="text-sm">
+                <CareIcon icon="l-archive" className="mr-1" />
+                Archived
+              </div>
+            </div>
+          )}
+        </div>
+        {/*
+        {!consentRecord.deleted && !showArchive && (
+          <button
+            className="text-red-500 hover:text-red-600"
+            onClick={() => props.onDelete(consentRecord)}
+          >
+            <CareIcon icon="l-archive" className="mr-1" />
+            Archive
+          </button>
+        )}
+      */}
+      </div>
+
+      {data?.map((file: FileUploadModel, i: number) => (
+        <div
+          key={i}
+          className={`flex items-center justify-between rounded-lg border border-gray-300 ${showArchive ? "text-gray-600" : "bg-white"}  px-4 py-2 transition-all hover:bg-gray-100`}
+        >
+          <div className="flex items-center gap-4 ">
+            <div>
+              <CareIcon icon="l-file" className="text-5xl text-gray-600" />
+            </div>
+            <div className="min-w-[40%] break-all">
+              <div className="">
+                {file.name}
+                {file.extension} {file.is_archived && "(Archived)"}
+              </div>
+              <div className="text-xs text-gray-700">
+                {dayjs(file.created_date).format("DD MMM YYYY, hh:mm A")}
+              </div>
+            </div>
+          </div>
+          <div className="flex shrink-0 gap-2">
+            {!file.is_archived && (
+              <ButtonV2
+                onClick={() => previewFile(file, consentRecord.id)}
+                className=""
+              >
+                <CareIcon icon="l-eye" />
+                View
+              </ButtonV2>
+            )}
+            {(file.is_archived ||
+              file?.uploaded_by?.username === authUser.username ||
+              authUser.user_type === "DistrictAdmin" ||
+              authUser.user_type === "StateAdmin") && (
+              <ButtonV2
+                variant={file.is_archived ? "primary" : "secondary"}
+                onClick={() => archiveFile(file, consentRecord.id)}
+                className=""
+              >
+                <CareIcon
+                  icon={file.is_archived ? "l-info-circle" : "l-archive"}
+                />
+                {file.is_archived ? "More Info" : "Archive"}
+              </ButtonV2>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/Components/Patient/PatientConsentRecords.tsx b/src/Components/Patient/PatientConsentRecords.tsx
new file mode 100644
index 00000000000..7b81bb562c0
--- /dev/null
+++ b/src/Components/Patient/PatientConsentRecords.tsx
@@ -0,0 +1,307 @@
+import { useEffect, useState } from "react";
+import {
+  CONSENT_PATIENT_CODE_STATUS_CHOICES,
+  CONSENT_TYPE_CHOICES,
+} from "../../Common/constants";
+import routes from "../../Redux/api";
+import useQuery from "../../Utils/request/useQuery";
+import Page from "../Common/components/Page";
+import { ConsentRecord } from "../Facility/models";
+import request from "../../Utils/request/request";
+import ConfirmDialog from "../Common/ConfirmDialog";
+import { SelectFormField } from "../Form/FormFields/SelectFormField";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { formatDateTime } from "../../Utils/utils";
+import TextFormField from "../Form/FormFields/TextFormField";
+import ButtonV2 from "../Common/components/ButtonV2";
+import useFileUpload from "../../Utils/useFileUpload";
+import PatientConsentRecordBlockGroup from "./PatientConsentRecordBlock";
+import SwitchTabs from "../Common/components/SwitchTabs";
+import useFileManager from "../../Utils/useFileManager";
+
+export default function PatientConsentRecords(props: {
+  facilityId: string;
+  patientId: string;
+  consultationId: string;
+}) {
+  const { facilityId, patientId, consultationId } = props;
+  const [showArchived, setShowArchived] = useState(false);
+  const [filesFound, setFilesFound] = useState(false);
+  const [showPCSChangeModal, setShowPCSChangeModal] = useState<number | null>(
+    null,
+  );
+  const [newConsent, setNewConsent] = useState({
+    type: 0,
+    patient_code_status: 4,
+  });
+
+  const fileUpload = useFileUpload({
+    type: "CONSENT_RECORD",
+  });
+
+  const fileManager = useFileManager({
+    type: "CONSENT_RECORD",
+    onArchive: async () => {
+      refetch();
+    },
+  });
+
+  const { data: patient } = useQuery(routes.getPatient, {
+    pathParams: {
+      id: patientId,
+    },
+  });
+  const { data: consultation, refetch } = useQuery(routes.getConsultation, {
+    pathParams: { id: consultationId! },
+    onResponse: (data) => {
+      if (data.data && data.data.consent_records) {
+        setConsentRecords(data.data.consent_records);
+      }
+    },
+  });
+
+  const [showDeleteConsent, setShowDeleteConsent] = useState<string | null>(
+    null,
+  );
+
+  const [consentRecords, setConsentRecords] = useState<ConsentRecord[] | null>(
+    null,
+  );
+
+  const handleDeleteConsent = async () => {
+    const consent_id = showDeleteConsent;
+    if (!consent_id || !consultationId || !consentRecords) return;
+    const newRecords = consentRecords.map((cr) =>
+      cr.id === consent_id ? { ...cr, deleted: true } : cr,
+    );
+    setConsentRecords(newRecords);
+    setShowDeleteConsent(null);
+  };
+
+  const selectField = (name: string) => {
+    return {
+      name,
+      optionValue: (option: any) => option.id,
+      optionLabel: (option: any) => option.text,
+      optionDescription: (option: any) => option.desc,
+    };
+  };
+
+  const handleUpload = async (diffPCS?: ConsentRecord) => {
+    if (newConsent.type === 0) return;
+    const consentTypeExists = consentRecords?.find(
+      (record) => record.type === newConsent.type && record.deleted !== true,
+    );
+    if (consentTypeExists && !diffPCS) {
+      await fileUpload.handleFileUpload(consentTypeExists.id);
+    } else {
+      const randomId = "consent-" + new Date().getTime().toString();
+      const newRecords = [
+        ...(consentRecords?.map((r) =>
+          r.id === diffPCS?.id ? { ...r, deleted: true } : r,
+        ) || []),
+        {
+          id: randomId,
+          type: newConsent.type,
+          patient_code_status:
+            newConsent.type === 2 ? newConsent.patient_code_status : undefined,
+        },
+      ];
+      await request(routes.partialUpdateConsultation, {
+        pathParams: { id: consultationId },
+        body: { consent_records: newRecords },
+      });
+      await fileUpload.handleFileUpload(randomId);
+      setConsentRecords(newRecords);
+    }
+
+    refetch();
+  };
+
+  useEffect(() => {
+    const timeout = setTimeout(async () => {
+      if (consentRecords) {
+        await request(routes.partialUpdateConsultation, {
+          pathParams: { id: consultationId },
+          body: { consent_records: consentRecords },
+        });
+      }
+    }, 1000);
+    return () => clearTimeout(timeout);
+  }, [consentRecords]);
+
+  const tabConsents = consentRecords?.filter(
+    (record) => showArchived || record.deleted !== true,
+  );
+
+  useEffect(() => {
+    setFilesFound(false);
+  }, [showArchived]);
+
+  return (
+    <Page
+      title={"Patient Consent Records"}
+      crumbsReplacements={{
+        [facilityId]: { name: patient?.facility_object?.name },
+        [patientId]: { name: patient?.name },
+        [consultationId]: {
+          name:
+            patient?.last_consultation?.suggestion === "A"
+              ? `Admitted on ${formatDateTime(
+                  patient?.last_consultation?.encounter_date,
+                )}`
+              : patient?.last_consultation?.suggestion_text,
+        },
+      }}
+      backUrl={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/`}
+    >
+      <fileUpload.Dialogues />
+      {fileManager.Dialogues}
+      <ConfirmDialog
+        show={showDeleteConsent !== null}
+        onClose={() => setShowDeleteConsent(null)}
+        onConfirm={handleDeleteConsent}
+        action="Archive"
+        variant="danger"
+        description={
+          "Are you sure you want to archive this consent record? You can find it in the archive section."
+        }
+        title="Archive Consent"
+        className="w-auto"
+      />
+      <ConfirmDialog
+        show={showPCSChangeModal !== null}
+        onClose={() => setShowPCSChangeModal(null)}
+        onConfirm={() => {
+          if (showPCSChangeModal !== null) {
+            handleUpload(
+              consentRecords?.find(
+                (record) =>
+                  record.type === 2 &&
+                  !record.deleted &&
+                  record.patient_code_status !== showPCSChangeModal,
+              ),
+            );
+          }
+          setShowPCSChangeModal(null);
+        }}
+        action="Change Patient Code Status"
+        variant="danger"
+        description={`Consent records exist with the "${CONSENT_PATIENT_CODE_STATUS_CHOICES.find((c) => consentRecords?.find((c) => c.type === 2 && !c.deleted)?.patient_code_status === c.id)?.text}" patient code status. Adding a new record for a different type will archive the existing records. Are you sure you want to proceed?`}
+        title="Archive Previous Records"
+        className="w-auto"
+      />
+      <SwitchTabs
+        tab1="Files"
+        tab2="Archived"
+        className="my-4"
+        onClickTab1={() => setShowArchived(false)}
+        onClickTab2={() => setShowArchived(true)}
+        isTab2Active={showArchived}
+      />
+      <div className="mt-8 flex flex-col gap-4 md:flex-row-reverse">
+        <div className="shrink-0 md:w-[350px]">
+          <h4 className="font-black">Add New Record</h4>
+          <SelectFormField
+            {...selectField("consent_type")}
+            onChange={async (e) => {
+              setNewConsent({ ...newConsent, type: e.value });
+            }}
+            value={newConsent.type}
+            label="Consent Type"
+            options={CONSENT_TYPE_CHOICES}
+            required
+          />
+          {newConsent.type === 2 && (
+            <SelectFormField
+              {...selectField("consent_type")}
+              onChange={(e) => {
+                setNewConsent({
+                  ...newConsent,
+                  patient_code_status: e.value,
+                });
+              }}
+              label="Patient Code Status"
+              value={newConsent.patient_code_status}
+              options={CONSENT_PATIENT_CODE_STATUS_CHOICES}
+              required
+            />
+          )}
+          <TextFormField
+            name="filename"
+            label="File Name"
+            value={fileUpload.fileName}
+            onChange={(e) => fileUpload.setFileName(e.value)}
+          />
+          <div className="flex gap-2">
+            {fileUpload.file ? (
+              <>
+                <ButtonV2
+                  onClick={() => {
+                    const diffPCS = consentRecords?.find(
+                      (record) =>
+                        record.type === 2 &&
+                        record.patient_code_status !==
+                          newConsent.patient_code_status &&
+                        record.deleted !== true,
+                    );
+                    if (diffPCS) {
+                      setShowPCSChangeModal(newConsent.patient_code_status);
+                    } else {
+                      handleUpload();
+                    }
+                  }}
+                  loading={!!fileUpload.progress}
+                  className="flex-1"
+                >
+                  <CareIcon icon="l-check" className="mr-2" />
+                  Upload
+                </ButtonV2>
+                <ButtonV2
+                  variant="danger"
+                  onClick={fileUpload.clearFile}
+                  disabled={!!fileUpload.progress}
+                >
+                  <CareIcon icon="l-trash-alt" className="" />
+                </ButtonV2>
+              </>
+            ) : (
+              <>
+                <fileUpload.UploadButton />
+                <button
+                  type="button"
+                  className="flex aspect-square h-9 shrink-0 items-center justify-center rounded text-xl transition-all hover:bg-black/10"
+                  onClick={fileUpload.handleCameraCapture}
+                >
+                  <CareIcon icon={"l-camera"} />
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+        <div className="flex-1">
+          {tabConsents?.length === 0 ||
+            (!filesFound && (
+              <div className="flex h-32 items-center justify-center text-gray-500">
+                No records found
+              </div>
+            ))}
+          <div className="flex flex-col gap-4">
+            {tabConsents?.map((record, index) => (
+              <PatientConsentRecordBlockGroup
+                key={index}
+                consentRecord={record}
+                previewFile={fileManager.viewFile}
+                archiveFile={fileManager.archiveFile}
+                onDelete={(record) => setShowDeleteConsent(record.id)}
+                refreshTrigger={consultation}
+                showArchive={showArchived}
+                onFilesFound={() => setFilesFound(true)}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Page>
+  );
+}
diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
index 50fc5819314..991e5636106 100644
--- a/src/Components/Patient/PatientHome.tsx
+++ b/src/Components/Patient/PatientHome.tsx
@@ -552,7 +552,7 @@ export const PatientHome = (props: any) => {
                     0 && (
                     <div
                       className={
-                        "mb-6 mt-6 inline-flex w-full items-center justify-center rounded-md border p-3 text-xs font-semibold leading-4 shadow-sm lg:mt-0 " +
+                        "mb-6 inline-flex w-full items-center justify-center rounded-md border p-3 text-xs font-semibold leading-4 shadow-sm lg:mt-0 " +
                         (dayjs().isBefore(patientData.review_time)
                           ? " bg-gray-100"
                           : " bg-red-600/5 p-1 text-sm font-normal text-red-600")
@@ -567,6 +567,15 @@ export const PatientHome = (props: any) => {
                       </p>
                     </div>
                   )}
+                {(
+                  patientData.last_consultation?.consent_records?.filter(
+                    (c) => !c.deleted,
+                  ) || []
+                ).length < 1 && (
+                  <div className="mb-6 inline-flex w-full items-center justify-center rounded-md border bg-red-600/5 p-1 text-sm font-normal leading-4 text-red-600 shadow-sm lg:mt-0">
+                    Consent Records Missing
+                  </div>
+                )}
                 <div className="mb-6 rounded-sm bg-white p-2 text-center shadow">
                   <div className="flex justify-between">
                     <div className="w-1/2 border-r-2">
diff --git a/src/Components/Patient/PatientInfoCard.tsx b/src/Components/Patient/PatientInfoCard.tsx
index 7a88c478bba..a2e6dbaf01c 100644
--- a/src/Components/Patient/PatientInfoCard.tsx
+++ b/src/Components/Patient/PatientInfoCard.tsx
@@ -352,6 +352,18 @@ export default function PatientInfoCard(props: {
                         </div>
                       </div>
                     )}
+                  {(
+                    consultation?.consent_records?.filter((c) => !c.deleted) ||
+                    []
+                  ).length < 1 && (
+                    <div>
+                      <div className="inline-flex w-full items-center justify-start rounded border border-gray-500 bg-red-400 p-1 px-3 text-xs font-semibold leading-4">
+                        <span className="font-semibold text-white">
+                          Consent Records Missing
+                        </span>
+                      </div>
+                    </div>
+                  )}
                   {consultation?.suggestion === "DC" && (
                     <div>
                       <div>
@@ -634,6 +646,12 @@ export default function PatientInfoCard(props: {
                       consultation?.id &&
                       !consultation?.discharge_date,
                   ],
+                  [
+                    `/facility/${patient.facility}/patient/${patient.id}/consultation/${consultation?.id}/consent-records`,
+                    "Consent Records",
+                    "l-file-medical",
+                    patient.is_active,
+                  ],
                   [
                     `/patient/${patient.id}/investigation_reports`,
                     "Investigation Summary",
@@ -667,7 +685,10 @@ export default function PatientInfoCard(props: {
                             key={i}
                             className="dropdown-item-primary pointer-events-auto m-2 flex cursor-pointer items-center justify-start gap-2 rounded border-0 p-2 text-sm font-normal transition-all duration-200 ease-in-out"
                             href={
-                              action[1] !== "Treatment Summary" &&
+                              ![
+                                "Treatment Summary",
+                                "Consent Records",
+                              ].includes(action[1]) &&
                               consultation?.admitted &&
                               !consultation?.current_bed &&
                               i === 1
@@ -676,7 +697,10 @@ export default function PatientInfoCard(props: {
                             }
                             onClick={() => {
                               if (
-                                action[1] !== "Treatment Summary" &&
+                                ![
+                                  "Treatment Summary",
+                                  "Consent Records",
+                                ].includes(action[1]) &&
                                 consultation?.admitted &&
                                 !consultation?.current_bed &&
                                 i === 1
diff --git a/src/Components/Patient/models.tsx b/src/Components/Patient/models.tsx
index b6f6fae7ea2..6d6e0b3c979 100644
--- a/src/Components/Patient/models.tsx
+++ b/src/Components/Patient/models.tsx
@@ -332,7 +332,7 @@ export interface FacilityNameModel {
 
 // File Upload Models
 
-type FileCategory = "UNSPECIFIED" | "XRAY" | "AUDIO" | "IDENTITY_PROOF";
+export type FileCategory = "UNSPECIFIED" | "XRAY" | "AUDIO" | "IDENTITY_PROOF";
 
 export interface CreateFileRequest {
   file_type: string | number;
diff --git a/src/Routers/routes/ConsultationRoutes.tsx b/src/Routers/routes/ConsultationRoutes.tsx
index 6dc5fa9c05d..8b75e3f147f 100644
--- a/src/Routers/routes/ConsultationRoutes.tsx
+++ b/src/Routers/routes/ConsultationRoutes.tsx
@@ -9,6 +9,7 @@ import { make as CriticalCareRecording } from "../../Components/CriticalCareReco
 import { ConsultationDetails } from "../../Components/Facility/ConsultationDetails";
 import TreatmentSummary from "../../Components/Facility/TreatmentSummary";
 import ConsultationDoctorNotes from "../../Components/Facility/ConsultationDoctorNotes";
+import PatientConsentRecords from "../../Components/Patient/PatientConsentRecords";
 
 export default {
   "/facility/:facilityId/patient/:patientId/consultation": ({
@@ -22,6 +23,14 @@ export default {
   }: any) => (
     <ConsultationForm facilityId={facilityId} patientId={patientId} id={id} />
   ),
+  "/facility/:facilityId/patient/:patientId/consultation/:id/consent-records":
+    ({ facilityId, patientId, id }: any) => (
+      <PatientConsentRecords
+        facilityId={facilityId}
+        patientId={patientId}
+        consultationId={id}
+      />
+    ),
   "/facility/:facilityId/patient/:patientId/consultation/:id/files/": ({
     facilityId,
     patientId,
diff --git a/src/Utils/useFileManager.tsx b/src/Utils/useFileManager.tsx
new file mode 100644
index 00000000000..aa57e1918a8
--- /dev/null
+++ b/src/Utils/useFileManager.tsx
@@ -0,0 +1,256 @@
+import { useState } from "react";
+import FilePreviewDialog from "../Components/Common/FilePreviewDialog";
+import { FileUploadModel } from "../Components/Patient/models";
+import { ExtImage, StateInterface } from "../Components/Patient/FileUpload";
+import request from "./request/request";
+import routes from "../Redux/api";
+import DialogModal from "../Components/Common/Dialog";
+import CareIcon from "../CAREUI/icons/CareIcon";
+import TextAreaFormField from "../Components/Form/FormFields/TextAreaFormField";
+import { Cancel, Submit } from "../Components/Common/components/ButtonV2";
+import { formatDateTime } from "./utils";
+import * as Notification from "./Notifications.js";
+
+export interface FileManagerOptions {
+  type: string;
+  onArchive?: () => void;
+}
+
+export interface FileManagerResult {
+  viewFile: (file: FileUploadModel, associating_id: string) => void;
+  archiveFile: (file: FileUploadModel, associating_id: string) => void;
+  Dialogues: React.ReactNode;
+}
+
+export default function useFileManager(
+  options: FileManagerOptions,
+): FileManagerResult {
+  const { type: fileType, onArchive } = options;
+
+  const [file_state, setFileState] = useState<StateInterface>({
+    open: false,
+    isImage: false,
+    name: "",
+    extension: "",
+    zoom: 4,
+    isZoomInDisabled: false,
+    isZoomOutDisabled: false,
+    rotation: 0,
+  });
+  const [fileUrl, setFileUrl] = useState<string>("");
+  const [downloadURL, setDownloadURL] = useState<string>("");
+  const [archiveDialogueOpen, setArchiveDialogueOpen] = useState<
+    (FileUploadModel & { associating_id: string }) | null
+  >(null);
+  const [archiveReason, setArchiveReason] = useState("");
+  const [archiveReasonError, setArchiveReasonError] = useState("");
+  const [archiving, setArchiving] = useState(false);
+
+  const getExtension = (url: string) => {
+    const div1 = url.split("?")[0].split(".");
+    const ext: string = div1[div1.length - 1].toLowerCase();
+    return ext;
+  };
+
+  const viewFile = async (file: FileUploadModel, associating_id: string) => {
+    setFileUrl("");
+    setFileState({ ...file_state, open: true });
+    const { data } = await request(routes.retrieveUpload, {
+      query: {
+        file_type: fileType,
+        associating_id,
+      },
+      pathParams: { id: file.id || "" },
+    });
+
+    if (!data) return;
+
+    const signedUrl = data.read_signed_url as string;
+    const extension = getExtension(signedUrl);
+
+    const downloadFileUrl = (url: string) => {
+      fetch(url)
+        .then((res) => res.blob())
+        .then((blob) => {
+          setDownloadURL(URL.createObjectURL(blob));
+        });
+    };
+
+    setFileState({
+      ...file_state,
+      open: true,
+      name: data.name as string,
+      extension,
+      isImage: ExtImage.includes(extension),
+    });
+    downloadFileUrl(signedUrl);
+    setFileUrl(signedUrl);
+  };
+
+  const validateArchiveReason = (name: any) => {
+    if (name.trim() === "") {
+      setArchiveReasonError("Please enter a valid reason!");
+      return false;
+    } else {
+      setArchiveReasonError("");
+      return true;
+    }
+  };
+
+  const handleFileArchive = async () => {
+    if (!validateArchiveReason(archiveReason)) {
+      setArchiving(false);
+      return;
+    }
+
+    const { res } = await request(routes.editUpload, {
+      body: { is_archived: true, archive_reason: archiveReason },
+      pathParams: {
+        id: archiveDialogueOpen?.id || "",
+        fileType,
+        associatingId: archiveDialogueOpen?.associating_id || "",
+      },
+    });
+
+    if (res?.ok) {
+      Notification.Success({ msg: "File archived successfully" });
+    }
+
+    setArchiveDialogueOpen(null);
+    setArchiving(false);
+    onArchive && onArchive();
+    return res;
+  };
+
+  const archiveFile = (file: FileUploadModel, associating_id: string) => {
+    setArchiveDialogueOpen({ ...file, associating_id });
+  };
+
+  const handleFilePreviewClose = () => {
+    setDownloadURL("");
+    setFileState({
+      ...file_state,
+      open: false,
+      zoom: 4,
+      isZoomInDisabled: false,
+      isZoomOutDisabled: false,
+    });
+  };
+
+  const Dialogues = (
+    <>
+      <FilePreviewDialog
+        show={file_state.open}
+        fileUrl={fileUrl}
+        file_state={file_state}
+        setFileState={setFileState}
+        downloadURL={downloadURL}
+        onClose={handleFilePreviewClose}
+        fixedWidth={false}
+        className="h-[80vh] w-full md:h-screen"
+      />
+      <DialogModal
+        show={
+          archiveDialogueOpen !== null &&
+          archiveDialogueOpen.archived_datetime === null
+        }
+        title={
+          <div className="flex flex-row">
+            <div className="my-1 mr-3 rounded-full bg-red-100 px-5 py-4 text-center">
+              <CareIcon
+                icon="l-exclamation-triangle"
+                className="text-lg text-danger-500"
+              />
+            </div>
+            <div className="text-grey-200 text-sm">
+              <h1 className="text-xl text-black">Archive File</h1>
+              This action is irreversible. Once a file is archived it cannot be
+              unarchived.
+            </div>
+          </div>
+        }
+        onClose={() => setArchiveDialogueOpen(null)}
+      >
+        <form
+          onSubmit={(event: any) => {
+            event.preventDefault();
+            handleFileArchive();
+          }}
+          className="mx-2 my-4 flex w-full flex-col"
+        >
+          <div>
+            <TextAreaFormField
+              name="editFileName"
+              label={
+                <span>
+                  State the reason for archiving{" "}
+                  <b>{archiveDialogueOpen?.name}</b> file?
+                </span>
+              }
+              rows={6}
+              required
+              placeholder="Type the reason..."
+              value={archiveReason}
+              onChange={(e) => setArchiveReason(e.value)}
+              error={archiveReasonError}
+            />
+          </div>
+          <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row">
+            <Cancel onClick={() => setArchiveDialogueOpen(null)} />
+            <Submit disabled={archiving} label="Proceed" />
+          </div>
+        </form>
+      </DialogModal>
+      <DialogModal
+        show={
+          archiveDialogueOpen !== null &&
+          archiveDialogueOpen.archived_datetime !== null
+        }
+        title={
+          <div className="flex flex-row">
+            <div className="my-1 mr-3 rounded-full bg-primary-100 px-5 py-4 text-center">
+              <CareIcon
+                icon="l-question-circle"
+                className="text-lg text-primary-500"
+              />
+            </div>
+            <div className="text-grey-200 text-sm">
+              <h1 className="text-xl text-black">File Details</h1>
+              This file is archived. Once a file is archived it cannot be
+              unarchived.
+            </div>
+          </div>
+        }
+        onClose={() => setArchiveDialogueOpen(null)}
+      >
+        <div className="flex flex-col">
+          <div>
+            <div className="text-md m-2 text-center">
+              <b id="archive-file-name">{archiveDialogueOpen?.name}</b> file is
+              archived.
+            </div>
+            <div className="text-md text-center" id="archive-file-reason">
+              <b>Reason:</b> {archiveDialogueOpen?.archive_reason}
+            </div>
+            <div className="text-md text-center">
+              <b>Archived by:</b> {archiveDialogueOpen?.archived_by?.username}
+            </div>
+            <div className="text-md text-center">
+              <b>Time of Archive: </b>
+              {formatDateTime(archiveDialogueOpen?.archived_datetime)}
+            </div>
+          </div>
+          <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row">
+            <Cancel onClick={(_) => setArchiveDialogueOpen(null)} />
+          </div>
+        </div>
+      </DialogModal>
+    </>
+  );
+
+  return {
+    viewFile,
+    archiveFile,
+    Dialogues,
+  };
+}
diff --git a/src/Utils/useFileUpload.tsx b/src/Utils/useFileUpload.tsx
new file mode 100644
index 00000000000..f6d0b837d0b
--- /dev/null
+++ b/src/Utils/useFileUpload.tsx
@@ -0,0 +1,448 @@
+import { ChangeEvent, useCallback, useRef, useState } from "react";
+import {
+  CreateFileResponse,
+  FileCategory,
+  FileUploadModel,
+} from "../Components/Patient/models";
+import DialogModal from "../Components/Common/Dialog";
+import CareIcon, { IconName } from "../CAREUI/icons/CareIcon";
+import Webcam from "react-webcam";
+import ButtonV2, { Submit } from "../Components/Common/components/ButtonV2";
+import { t } from "i18next";
+import useWindowDimensions from "../Common/hooks/useWindowDimensions";
+import { classNames } from "./utils";
+import request from "./request/request";
+import routes from "../Redux/api";
+import uploadFile from "./request/uploadFile";
+import * as Notification from "./Notifications.js";
+import imageCompression from "browser-image-compression";
+
+export type FileUploadOptions = {
+  type: string;
+  category?: FileCategory;
+  onUpload?: (file: FileUploadModel) => void;
+} & (
+  | {
+      allowAllExtensions?: boolean;
+    }
+  | {
+      allowedExtensions?: string[];
+    }
+);
+
+export type FileUploadButtonProps = {
+  icon?: IconName;
+  content?: string;
+  className?: string;
+};
+
+export type FileUploadReturn = {
+  progress: null | number;
+  error: null | string;
+  handleCameraCapture: () => void;
+  handleAudioCapture: () => void;
+  handleFileUpload: (associating_id: string) => Promise<void>;
+  Dialogues: () => JSX.Element;
+  UploadButton: (_: FileUploadButtonProps) => JSX.Element;
+  fileName: string;
+  file: File | null;
+  setFileName: (name: string) => void;
+  clearFile: () => void;
+};
+
+const videoConstraints = {
+  width: { ideal: 4096 },
+  height: { ideal: 2160 },
+  facingMode: "user",
+};
+
+// Array of image extensions
+const ExtImage: string[] = [
+  "jpeg",
+  "jpg",
+  "png",
+  "gif",
+  "svg",
+  "bmp",
+  "webp",
+  "jfif",
+];
+
+export default function useFileUpload(
+  options: FileUploadOptions,
+): FileUploadReturn {
+  const { type, onUpload, category = "UNSPECIFIED" } = options;
+
+  const [uploadFileName, setUploadFileName] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+  const [progress, setProgress] = useState<null | number>(null);
+  const [cameraModalOpen, setCameraModalOpen] = useState(false);
+  const [cameraFacingFront, setCameraFacingFront] = useState(true);
+  const webRef = useRef<any>(null);
+  const [previewImage, setPreviewImage] = useState(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const handleSwitchCamera = useCallback(() => {
+    setCameraFacingFront((prevState) => !prevState);
+  }, []);
+
+  const { width } = useWindowDimensions();
+  const LaptopScreenBreakpoint = 640;
+  const isLaptopScreen = width >= LaptopScreenBreakpoint ? true : false;
+
+  const captureImage = () => {
+    setPreviewImage(webRef.current.getScreenshot());
+    const canvas = webRef.current.getCanvas();
+    canvas?.toBlob((blob: Blob) => {
+      const extension = blob.type.split("/").pop();
+      const myFile = new File([blob], `capture.${extension}`, {
+        type: blob.type,
+      });
+      setUploadFileName(uploadFileName || "capture");
+      setFile(myFile);
+    });
+  };
+
+  const onFileChange = (e: ChangeEvent<HTMLInputElement>): any => {
+    if (!e.target.files?.length) {
+      return;
+    }
+    const f = e.target.files[0];
+    const fileName = f.name;
+    setFile(e.target.files[0]);
+    setUploadFileName(
+      uploadFileName ||
+        fileName.substring(0, fileName.lastIndexOf(".")) ||
+        fileName,
+    );
+
+    const ext: string = fileName.split(".")[1];
+
+    if (ExtImage.includes(ext)) {
+      const options = {
+        initialQuality: 0.6,
+        alwaysKeepResolution: true,
+      };
+      imageCompression(f, options).then((compressedFile: File) => {
+        setFile(compressedFile);
+      });
+      return;
+    }
+    setFile(f);
+  };
+
+  const validateFileUpload = () => {
+    const filenameLength = uploadFileName.trim().length;
+    const f = file;
+    if (f === undefined || f === null) {
+      setError("Please choose a file to upload");
+      return false;
+    }
+    if (filenameLength === 0) {
+      setError("Please give a name !!");
+      return false;
+    }
+    if (f.size > 10e7) {
+      setError("Maximum size of files is 100 MB");
+      return false;
+    }
+    return true;
+  };
+  const markUploadComplete = (
+    data: CreateFileResponse,
+    associatingId: string,
+  ) => {
+    return request(routes.editUpload, {
+      body: { upload_completed: true },
+      pathParams: {
+        id: data.id,
+        fileType: type,
+        associatingId,
+      },
+    });
+  };
+
+  const uploadfile = async (data: CreateFileResponse) => {
+    const url = data.signed_url;
+    const internal_name = data.internal_name;
+    const f = file;
+    if (!f) return;
+    const newFile = new File([f], `${internal_name}`);
+    console.log("filetype: ", newFile.type);
+    return new Promise<void>((resolve, reject) => {
+      uploadFile(
+        url,
+        newFile,
+        "PUT",
+        { "Content-Type": file?.type },
+        (xhr: XMLHttpRequest) => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            setProgress(null);
+            setFile(null);
+            setUploadFileName("");
+            Notification.Success({
+              msg: "File Uploaded Successfully",
+            });
+            setError(null);
+            onUpload && onUpload(data);
+            resolve();
+          } else {
+            Notification.Error({
+              msg: "Error Uploading File: " + xhr.statusText,
+            });
+            setProgress(null);
+            reject();
+          }
+        },
+        setProgress as any,
+        () => {
+          Notification.Error({
+            msg: "Error Uploading File: Network Error",
+          });
+          setProgress(null);
+          reject();
+        },
+      );
+    });
+  };
+
+  const handleUpload = async (associating_id: string) => {
+    if (!validateFileUpload()) return;
+    const f = file;
+
+    const filename = uploadFileName === "" && f ? f.name : uploadFileName;
+    const name = f?.name;
+    setProgress(0);
+
+    const { data } = await request(routes.createUpload, {
+      body: {
+        original_name: name ?? "",
+        file_type: type,
+        name: filename,
+        associating_id,
+        file_category: category,
+        mime_type: f?.type ?? "",
+      },
+    });
+
+    if (data) {
+      await uploadfile(data);
+      await markUploadComplete(data, associating_id);
+    }
+  };
+
+  const cameraFacingMode = cameraFacingFront
+    ? "user"
+    : { exact: "environment" };
+
+  const Dialogues = () => (
+    <DialogModal
+      show={cameraModalOpen}
+      title={
+        <div className="flex flex-row">
+          <div className="rounded-full bg-primary-100 px-5 py-4">
+            <CareIcon
+              icon="l-camera-change"
+              className="text-lg text-primary-500"
+            />
+          </div>
+          <div className="m-4">
+            <h1 className="text-xl text-black "> Camera</h1>
+          </div>
+        </div>
+      }
+      className="max-w-2xl"
+      onClose={() => setCameraModalOpen(false)}
+    >
+      <div>
+        {!previewImage ? (
+          <div className="m-3">
+            <Webcam
+              forceScreenshotSourceSize
+              screenshotQuality={1}
+              audio={false}
+              screenshotFormat="image/jpeg"
+              ref={webRef}
+              videoConstraints={{
+                ...videoConstraints,
+                facingMode: cameraFacingMode,
+              }}
+            />
+          </div>
+        ) : (
+          <div className="m-3">
+            <img src={previewImage} />
+          </div>
+        )}
+      </div>
+
+      {/* buttons for mobile screens */}
+      <div className="m-4 flex justify-evenly sm:hidden ">
+        <div>
+          {!previewImage ? (
+            <ButtonV2 onClick={handleSwitchCamera} className="m-2">
+              {t("switch")}
+            </ButtonV2>
+          ) : (
+            <></>
+          )}
+        </div>
+        <div>
+          {!previewImage ? (
+            <>
+              <div>
+                <ButtonV2
+                  onClick={() => {
+                    captureImage();
+                  }}
+                  className="m-2"
+                >
+                  {t("capture")}
+                </ButtonV2>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="flex space-x-2">
+                <ButtonV2
+                  onClick={() => {
+                    setPreviewImage(null);
+                  }}
+                  className="m-2"
+                >
+                  {t("retake")}
+                </ButtonV2>
+                <Submit
+                  onClick={() => {
+                    setPreviewImage(null);
+                    setCameraModalOpen(false);
+                  }}
+                  className="m-2"
+                >
+                  {t("submit")}
+                </Submit>
+              </div>
+            </>
+          )}
+        </div>
+        <div className="sm:flex-1">
+          <ButtonV2
+            variant="secondary"
+            onClick={() => {
+              setPreviewImage(null);
+              setCameraModalOpen(false);
+            }}
+            className="m-2"
+          >
+            {t("close")}
+          </ButtonV2>
+        </div>
+      </div>
+      {/* buttons for laptop screens */}
+      <div className={`${isLaptopScreen ? " " : " hidden "}`}>
+        <div className="m-4 flex lg:hidden">
+          <ButtonV2 onClick={handleSwitchCamera}>
+            <CareIcon icon="l-camera-change" className="text-lg" />
+            {`${t("switch")} ${t("camera")}`}
+          </ButtonV2>
+        </div>
+
+        <div className="flex justify-end  gap-2 p-4">
+          <div>
+            {!previewImage ? (
+              <>
+                <div>
+                  <ButtonV2
+                    onClick={() => {
+                      captureImage();
+                    }}
+                  >
+                    <CareIcon icon="l-capture" className="text-lg" />
+                    {t("capture")}
+                  </ButtonV2>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="flex space-x-2">
+                  <ButtonV2
+                    onClick={() => {
+                      setPreviewImage(null);
+                    }}
+                  >
+                    {t("retake")}
+                  </ButtonV2>
+                  <Submit
+                    onClick={() => {
+                      setCameraModalOpen(false);
+                      setPreviewImage(null);
+                    }}
+                  >
+                    {t("submit")}
+                  </Submit>
+                </div>
+              </>
+            )}
+          </div>
+          <div className="sm:flex-1" />
+          <ButtonV2
+            variant="secondary"
+            onClick={() => {
+              setPreviewImage(null);
+              setCameraModalOpen(false);
+            }}
+          >
+            {`${t("close")} ${t("camera")}`}
+          </ButtonV2>
+        </div>
+      </div>
+    </DialogModal>
+  );
+
+  const UploadButton = (props: FileUploadButtonProps) => (
+    <label
+      className={classNames(
+        "button-size-default button-shape-square button-primary-default inline-flex h-min w-full cursor-pointer items-center justify-center gap-2 whitespace-pre font-medium outline-offset-1 transition-all duration-200 ease-in-out",
+        props.className,
+      )}
+    >
+      <CareIcon icon={props.icon || "l-file-upload-alt"} className="text-lg" />
+      {props.content || t("choose_file")}
+      <input
+        id="file_upload_patient"
+        title="changeFile"
+        onChange={onFileChange}
+        type="file"
+        accept={
+          "allowAllExtensions" in options
+            ? "image/*,video/*,audio/*,text/plain,text/csv,application/rtf,application/msword,application/vnd.oasis.opendocument.text,application/pdf,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.oasis.opendocument.spreadsheet,application/pdf"
+            : "allowedExtensions" in options
+              ? options.allowedExtensions?.join(",")
+              : ""
+        }
+        hidden
+      />
+    </label>
+  );
+
+  return {
+    progress,
+    error,
+    handleCameraCapture: () => {
+      setCameraModalOpen(true);
+    },
+    handleAudioCapture: () => {
+      console.log("Audio capture not implemented");
+    },
+    handleFileUpload: handleUpload,
+    Dialogues,
+    UploadButton,
+    fileName: uploadFileName,
+    file: file,
+    setFileName: setUploadFileName,
+    clearFile: () => {
+      setFile(null);
+      setUploadFileName("");
+    },
+  };
+}