diff --git a/packages/esm-patient-registration-app/src/patient-registration/before-save-prompt.tsx b/packages/esm-patient-registration-app/src/patient-registration/before-save-prompt.tsx
index 0db6d6896..94574ab33 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/before-save-prompt.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/before-save-prompt.tsx
@@ -49,17 +49,17 @@ const BeforeSavePrompt: React.FC<BeforeSavePromptProps> = ({ when, redirect }) =
     }
   }, []);
 
-  useEffect(() => {
-    if (when && typeof target === 'undefined') {
-      window.addEventListener('single-spa:before-routing-event', cancelNavigation);
-      window.addEventListener('beforeunload', cancelUnload);
+  // useEffect(() => {
+  //   if (when && typeof target === 'undefined') {
+  //     window.addEventListener('single-spa:before-routing-event', cancelNavigation);
+  //     window.addEventListener('beforeunload', cancelUnload);
 
-      return () => {
-        window.removeEventListener('beforeunload', cancelUnload);
-        window.removeEventListener('single-spa:before-routing-event', cancelNavigation);
-      };
-    }
-  }, [target, when, cancelUnload, cancelNavigation]);
+  //     return () => {
+  //       window.removeEventListener('beforeunload', cancelUnload);
+  //       window.removeEventListener('single-spa:before-routing-event', cancelNavigation);
+  //     };
+  //   }
+  // }, [target, when, cancelUnload, cancelNavigation]);
 
   useEffect(() => {
     if (typeof target === 'string') {
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx
index d0371c9a4..3b57cf7e9 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-field.component.tsx
@@ -9,6 +9,8 @@ import { useOrderedAddressHierarchyLevels } from './address-hierarchy.resource';
 import AddressHierarchyLevels from './address-hierarchy-levels.component';
 import AddressSearchComponent from './address-search.component';
 import styles from '../field.scss';
+import type { FormValues } from '../../patient-registration.types';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 function parseString(xmlDockAsString: string) {
   const parser = new DOMParser();
@@ -47,16 +49,16 @@ export const AddressComponent: React.FC = () => {
     },
   } = config;
 
-  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { setValue } = usePatientRegistrationContext();
   const { orderedFields, isLoadingFieldOrder, errorFetchingFieldOrder } = useOrderedAddressHierarchyLevels();
 
   useEffect(() => {
     if (addressTemplate?.elementDefaults) {
       Object.entries(addressTemplate.elementDefaults).forEach(([name, defaultValue]) => {
-        setFieldValue(`address.${name}`, defaultValue);
+        setValue(`address.${name}`, defaultValue);
       });
     }
-  }, [addressTemplate, setFieldValue]);
+  }, [addressTemplate, setValue]);
 
   const orderedAddressFields = useMemo(() => {
     if (isLoadingFieldOrder || errorFetchingFieldOrder) {
@@ -84,7 +86,7 @@ export const AddressComponent: React.FC = () => {
         {addressLayout.map((attributes, index) => (
           <Input
             key={`combo_input_${index}`}
-            name={`address.${attributes.name}`}
+            name={`address.${attributes.name}` as keyof FormValues}
             labelText={t(attributes.label)}
             id={attributes.name}
             value={selected}
@@ -125,7 +127,7 @@ export const AddressComponent: React.FC = () => {
         orderedAddressFields.map((attributes, index) => (
           <Input
             key={`combo_input_${index}`}
-            name={`address.${attributes.name}`}
+            name={`address.${attributes.name}` as keyof FormValues}
             labelText={t(attributes.label)}
             id={attributes.name}
             value={selected}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy-levels.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy-levels.component.tsx
index 7ad3967f9..73beedaa2 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy-levels.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy-levels.component.tsx
@@ -1,8 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAddressEntries, useAddressEntryFetchConfig } from './address-hierarchy.resource';
-import { useField } from 'formik';
 import ComboInput from '../../input/combo-input/combo-input.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import type { FormValues } from '../../patient-registration.types';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 interface AddressComboBoxProps {
   attribute: {
@@ -20,39 +22,37 @@ interface AddressHierarchyLevelsProps {
 
 const AddressComboBox: React.FC<AddressComboBoxProps> = ({ attribute }) => {
   const { t } = useTranslation();
-  const [field, meta, { setValue }] = useField(`address.${attribute.name}`);
+  const fieldName = `address.${attribute.name}` as keyof FormValues;
+  const { setValue, watch } = usePatientRegistrationContext();
+  const fieldValue = watch(fieldName);
   const { fetchEntriesForField, searchString, updateChildElements } = useAddressEntryFetchConfig(attribute.name);
   const { entries } = useAddressEntries(fetchEntriesForField, searchString);
   const label = t(attribute.label) + (attribute?.required ? '' : ` (${t('optional', 'optional')})`);
 
   const handleInputChange = useCallback(
     (newValue) => {
-      setValue(newValue);
+      setValue(fieldName, newValue);
     },
     [setValue],
   );
 
   const handleSelection = useCallback(
     (selectedItem) => {
-      if (meta.value !== selectedItem) {
-        setValue(selectedItem);
+      if (fieldValue !== selectedItem) {
+        setValue(fieldName, selectedItem);
         updateChildElements();
       }
     },
-    [updateChildElements, meta.value, setValue],
+    [updateChildElements, fieldValue, setValue],
   );
 
   return (
     <ComboInput
       entries={entries}
       handleSelection={handleSelection}
-      name={`address.${attribute.name}`}
-      fieldProps={{
-        ...field,
-        id: attribute.name,
-        labelText: label,
-        required: attribute?.required,
-      }}
+      name={fieldName}
+      required={attribute?.required}
+      labelText={label}
       handleInputChange={handleInputChange}
     />
   );
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy.resource.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy.resource.tsx
index ed9e59ca8..b583209d1 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy.resource.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-hierarchy.resource.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useContext, useEffect, useMemo } from 'react';
-import { useField } from 'formik';
 import useSWRImmutable from 'swr/immutable';
 import { type FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
 import { PatientRegistrationContext } from '../../patient-registration-context';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 interface AddressFields {
   addressField: string;
@@ -57,8 +57,9 @@ export function useAddressEntries(fetchResults, searchString) {
  */
 export function useAddressEntryFetchConfig(addressField: string) {
   const { orderedFields, isLoadingFieldOrder } = useOrderedAddressHierarchyLevels();
-  const { setFieldValue } = useContext(PatientRegistrationContext);
-  const [, { value: addressValues }] = useField('address');
+  const { setValue } = usePatientRegistrationContext();
+  const { watch } = usePatientRegistrationContext();
+  const addressValues = watch('address');
 
   const index = useMemo(
     () => (!isLoadingFieldOrder ? orderedFields.findIndex((field) => field === addressField) : -1),
@@ -87,9 +88,9 @@ export function useAddressEntryFetchConfig(addressField: string) {
       return;
     }
     orderedFields.slice(index + 1).map((fieldName) => {
-      setFieldValue(`address.${fieldName}`, '');
+      setValue(`address.${fieldName}`, '');
     });
-  }, [index, isLoadingFieldOrder, orderedFields, setFieldValue]);
+  }, [index, isLoadingFieldOrder, orderedFields, setValue]);
 
   const results = useMemo(
     () => ({
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-search.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-search.component.tsx
index d763dfd3d..9be025ddf 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/address/address-search.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/address/address-search.component.tsx
@@ -1,9 +1,10 @@
-import React, { useState, useRef, useEffect, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useMemo, useContext } from 'react';
 import { useAddressHierarchy } from './address-hierarchy.resource';
 import { Search } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useFormikContext } from 'formik';
 import styles from './address-search.scss';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 interface AddressSearchComponentProps {
   addressLayout: Array<any>;
@@ -12,6 +13,7 @@ interface AddressSearchComponentProps {
 const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ addressLayout }) => {
   const { t } = useTranslation();
   const separator = ' > ';
+  const { control, setValue } = usePatientRegistrationContext();
   const searchBox = useRef(null);
   const wrapper = useRef(null);
   const [searchString, setSearchString] = useState<string>('');
@@ -29,8 +31,6 @@ const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ address
     return [...options];
   }, [addresses, searchString]);
 
-  const { setFieldValue } = useFormikContext();
-
   const handleInputChange = (e) => {
     setSearchString(e.target.value);
   };
@@ -39,7 +39,7 @@ const AddressSearchComponent: React.FC<AddressSearchComponentProps> = ({ address
     if (address) {
       const values = address.split(separator);
       addressLayout.map(({ name }, index) => {
-        setFieldValue(`address.${name}`, values?.[index] ?? '');
+        setValue(`address.${name}`, values?.[index] ?? '');
       });
       setSearchString('');
     }
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/address/custom-address-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/address/custom-address-field.component.tsx
index c3baa01c8..270de21e2 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/address/custom-address-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/address/custom-address-field.component.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Input } from '../../input/basic-input/input/input.component';
 import styles from '../field.scss';
 import { type FieldDefinition } from '../../../config-schema';
+import type { FormValues } from '../../patient-registration.types';
 
 export interface AddressFieldProps {
   fieldDefinition: FieldDefinition;
@@ -15,18 +16,14 @@ export const AddressField: React.FC<AddressFieldProps> = ({ fieldDefinition }) =
 
   return (
     <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
-      <Field name={fieldDefinition.id}>
-        {({ field, form: { touched, errors }, meta }) => {
-          return (
-            <Input
-              id={fieldDefinition.id}
-              labelText={t(`${fieldDefinition.label}`, `${fieldDefinition.label}`)}
-              required={fieldDefinition?.validation?.required ?? false}
-              {...field}
-            />
-          );
-        }}
-      </Field>
+      return (
+      <Input
+        id={fieldDefinition.id}
+        name={fieldDefinition.id as keyof FormValues}
+        labelText={t(`${fieldDefinition.label}`, `${fieldDefinition.label}`)}
+        required={fieldDefinition?.validation?.required ?? false}
+      />
+      );
     </div>
   );
 };
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/cause-of-death/cause-of-death.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/cause-of-death/cause-of-death.component.tsx
index e764d0e81..269e96245 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/cause-of-death/cause-of-death.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/cause-of-death/cause-of-death.component.tsx
@@ -1,17 +1,20 @@
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
-import { Field, useField } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification, Layer, Select, SelectItem, SelectSkeleton, TextInput } from '@carbon/react';
 import { useConfig } from '@openmrs/esm-framework';
 import { type RegistrationConfig } from '../../../config-schema';
 import { useConceptAnswers } from '../field.resource';
 import styles from '../field.scss';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { Controller } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export const CauseOfDeathField: React.FC = () => {
   const { t } = useTranslation();
   const { fieldConfigurations, freeTextFieldConceptUuid } = useConfig<RegistrationConfig>();
-  const [deathCause, deathCauseMeta] = useField('deathCause');
+  const { getFieldState, control } = usePatientRegistrationContext();
+  const { error, isTouched } = getFieldState('deathCause');
 
   const conceptUuid = fieldConfigurations?.causeOfDeath?.conceptUuid;
   const required = fieldConfigurations?.causeOfDeath?.required;
@@ -50,15 +53,17 @@ export const CauseOfDeathField: React.FC = () => {
         />
       ) : (
         <>
-          <Field name="deathCause">
-            {({ field, form: { touched, errors }, meta }) => {
-              return (
+          <Controller
+            control={control}
+            name="deathCause"
+            render={({ field, fieldState: { error, isTouched } }) => (
+              <>
                 <Layer>
                   <Select
                     {...field}
                     id="deathCause"
-                    invalid={errors.deathCause && touched.deathCause}
-                    invalidText={errors.deathCause?.message}
+                    invalid={isTouched && error?.message}
+                    invalidText={error?.message}
                     labelText={t('causeOfDeathInputLabel', 'Cause of Death')}
                     name="deathCause"
                     required={required}>
@@ -68,29 +73,31 @@ export const CauseOfDeathField: React.FC = () => {
                     ))}
                   </Select>
                 </Layer>
-              );
-            }}
-          </Field>
-          {deathCause.value === freeTextFieldConceptUuid && (
-            <div className={styles.nonCodedCauseOfDeath}>
-              <Field name="nonCodedCauseOfDeath">
-                {({ field, form: { touched, errors }, meta }) => {
-                  return (
-                    <Layer>
-                      <TextInput
-                        {...field}
-                        id="nonCodedCauseOfDeath"
-                        invalid={errors?.nonCodedCauseOfDeath && touched.nonCodedCauseOfDeath}
-                        invalidText={errors?.nonCodedCauseOfDeath?.message}
-                        labelText={t('nonCodedCauseOfDeath', 'Non-coded cause of death')}
-                        placeholder={t('enterNonCodedCauseOfDeath', 'Enter non-coded cause of death')}
-                      />
-                    </Layer>
-                  );
-                }}
-              </Field>
-            </div>
-          )}
+                {field.value === freeTextFieldConceptUuid && (
+                  <div className={styles.nonCodedCauseOfDeath}>
+                    <Controller
+                      control={control}
+                      name="nonCodedCauseOfDeath"
+                      render={({ field, fieldState: { isTouched, error } }) => {
+                        return (
+                          <Layer>
+                            <TextInput
+                              {...field}
+                              id="nonCodedCauseOfDeath"
+                              invalid={isTouched && error?.message}
+                              invalidText={error?.message}
+                              labelText={t('nonCodedCauseOfDeath', 'Non-coded cause of death')}
+                              placeholder={t('enterNonCodedCauseOfDeath', 'Enter non-coded cause of death')}
+                            />
+                          </Layer>
+                        );
+                      }}
+                    />
+                  </div>
+                )}
+              </>
+            )}
+          />
         </>
       )}
     </div>
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx
index 0a27740f4..b31555717 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx
@@ -3,11 +3,11 @@ import classNames from 'classnames';
 import dayjs from 'dayjs';
 import { Layer, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { useField } from 'formik';
 import { OpenmrsDatePicker } from '@openmrs/esm-framework';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import type { FormValues } from '../../patient-registration.types';
 import styles from '../field.scss';
+import { Controller } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export const DateAndTimeOfDeathField: React.FC = () => {
   const { t } = useTranslation();
@@ -24,61 +24,75 @@ export const DateAndTimeOfDeathField: React.FC = () => {
 };
 
 function DeathDateField() {
-  const { values, setFieldValue } = useContext(PatientRegistrationContext);
-  const [deathDate, deathDateMeta] = useField<keyof FormValues>('deathDate');
+  const { watch, setValue, control } = usePatientRegistrationContext();
+  const isDead = watch('isDead');
   const { t } = useTranslation();
   const today = dayjs().hour(23).minute(59).second(59).toDate();
-  const onDateChange = useCallback(
-    (selectedDate: Date) => {
-      setFieldValue(
-        'deathDate',
-        selectedDate ? dayjs(selectedDate).hour(0).minute(0).second(0).millisecond(0).toDate() : undefined,
-      );
-    },
-    [deathDate],
-  );
+  const onDateChange = useCallback((selectedDate: Date) => {
+    setValue(
+      'deathDate',
+      selectedDate ? dayjs(selectedDate).hour(0).minute(0).second(0).millisecond(0).toDate() : undefined,
+    );
+  }, []);
 
   return (
-    <Layer>
-      <OpenmrsDatePicker
-        {...deathDate}
-        id="deathDate"
-        invalidText={t(deathDateMeta.error)}
-        invalid={!!(deathDateMeta.touched && deathDateMeta.error)}
-        isRequired={values.isDead}
-        labelText={t('deathDateInputLabel', 'Date of death')}
-        maxDate={today}
-        onChange={onDateChange}
-      />
-    </Layer>
+    <Controller
+      control={control}
+      name="deathDate"
+      render={({ field, fieldState: { isTouched, error } }) => (
+        <Layer>
+          <OpenmrsDatePicker
+            {...field}
+            id="deathDate"
+            invalidText={error?.message}
+            invalid={Boolean(isTouched && error?.message)}
+            isRequired={isDead}
+            labelText={t('deathDateInputLabel', 'Date of death')}
+            maxDate={today}
+            onChange={onDateChange}
+          />
+        </Layer>
+      )}
+    />
   );
 }
 
 function DeathTimeField() {
   const { t } = useTranslation();
-  const [deathTimeField, deathTimeMeta] = useField<keyof FormValues>('deathTime');
-  const [deathTimeFormatField, deathTimeFormatMeta] = useField<keyof FormValues>('deathTimeFormat');
+  const { control } = usePatientRegistrationContext();
 
   return (
-    <Layer>
-      <TimePicker
-        {...deathTimeField}
-        id="time-picker"
-        labelText={t('timeOfDeathInputLabel', 'Time of death (hh:mm)')}
-        className={styles.timeOfDeathField}
-        pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
-        invalid={!!(deathTimeMeta.touched && deathTimeMeta.error)}
-        invalidText={t(deathTimeMeta.error)}>
-        <TimePickerSelect
-          {...deathTimeFormatField}
-          id="time-format-picker"
-          aria-label={t('timeFormat', 'Time Format')}
-          invalid={!!deathTimeFormatMeta.touched && deathTimeFormatMeta.error}
-          invalidText={t(deathTimeFormatMeta.error)}>
-          <SelectItem value="AM" text="AM" />
-          <SelectItem value="PM" text="PM" />
-        </TimePickerSelect>
-      </TimePicker>
-    </Layer>
+    <Controller
+      name="deathTime"
+      control={control}
+      render={({ field, fieldState: { isTouched, error } }) => (
+        <Layer>
+          <TimePicker
+            {...field}
+            id="time-picker"
+            labelText={t('timeOfDeathInputLabel', 'Time of death (hh:mm)')}
+            className={styles.timeOfDeathField}
+            pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
+            invalid={Boolean(isTouched && error?.message)}
+            invalidText={error?.message}>
+            <Controller
+              control={control}
+              name="deathTimeFormat"
+              render={({ field: deathTimeFormatField, fieldState: { isTouched, error } }) => (
+                <TimePickerSelect
+                  {...deathTimeFormatField}
+                  id="time-format-picker"
+                  aria-label={t('timeFormat', 'Time Format')}
+                  invalid={Boolean(isTouched && error?.message)}
+                  invalidText={error?.message}>
+                  <SelectItem value="AM" text="AM" />
+                  <SelectItem value="PM" text="PM" />
+                </TimePickerSelect>
+              )}
+            />
+          </TimePicker>
+        </Layer>
+      )}
+    />
   );
 }
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
index 6599103ec..2f1ed260d 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
@@ -1,11 +1,12 @@
-import React, { type ChangeEvent, useCallback, useContext } from 'react';
-import { ContentSwitcher, Layer, Switch, TextInput } from '@carbon/react';
+import React, { useCallback } from 'react';
+import { ContentSwitcher, Layer, Switch } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { useField } from 'formik';
-import { PatientRegistrationContext } from '../../patient-registration-context';
 import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { type RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
+import { Controller, useFormContext } from 'react-hook-form';
+import useZodSchema from '../../useZodSchema';
+import { NumberInput } from '@carbon/react';
 
 const calcBirthdate = (yearDelta, monthDelta, dateOfBirth) => {
   const { enabled, month, dayOfMonth } = dateOfBirth.useEstimatedDateOfBirth;
@@ -26,66 +27,67 @@ export const DobField: React.FC = () => {
     fieldConfigurations: { dateOfBirth },
   } = useConfig<RegistrationConfig>();
   const allowEstimatedBirthDate = dateOfBirth?.allowEstimatedDateOfBirth;
-  const [{ value: dobUnknown }] = useField('birthdateEstimated');
-  const [birthdate, birthdateMeta] = useField('birthdate');
-  const [yearsEstimated, yearsEstimateMeta] = useField('yearsEstimated');
-  const [monthsEstimated, monthsEstimateMeta] = useField('monthsEstimated');
-  const { setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext);
+  const { watch, control, setValue } = useFormContext();
+  const dobUnknown = watch('birthdateEstimated');
   const today = new Date();
 
+  const { updateZodSchema } = useZodSchema();
+
+  // useEffect(() => {
+  //   const yearsEstimatedSchema = z
+  //     .number({
+  //       invalid_type_error: t('yearsEstimatedTypeError', 'Years estimated must be a number'),
+  //     })
+  //     .min(0)
+  //     .max(140, {
+  //       message: t('maxError', 'Max error'),
+  //     });
+  //   updateZodSchema('yearsEstimated', dobUnknown ? yearsEstimatedSchema : yearsEstimatedSchema.optional());
+  // }, [t, dobUnknown]);
+
   const onToggle = useCallback(
     (e: { name?: string | number }) => {
-      setFieldValue('birthdateEstimated', e.name === 'unknown');
-      setFieldValue('birthdate', '');
-      setFieldValue('yearsEstimated', 0);
-      setFieldValue('monthsEstimated', '');
-      setFieldTouched('birthdateEstimated', true, false);
-    },
-    [setFieldValue],
-  );
-
-  const onDateChange = useCallback(
-    (birthdate: Date) => {
-      setFieldValue('birthdate', birthdate);
-      setFieldTouched('birthdate', true, false);
+      setValue('birthdateEstimated', e.name === 'unknown');
+      setValue('birthdate', '');
+      setValue('yearsEstimated', undefined);
+      setValue('monthsEstimated', undefined);
+      // setFieldTouched('birthdateEstimated', true, false);
     },
-    [setFieldValue, setFieldTouched],
+    [setValue],
   );
 
-  const onEstimatedYearsChange = useCallback(
-    (ev: ChangeEvent<HTMLInputElement>) => {
-      const years = +ev.target.value;
+  // TODO: Make this validated as different fields
+  // const onEstimatedYearsChange = useCallback(
+  //   (ev: ChangeEvent<HTMLInputElement>) => {
+  //     const years = +ev.target.value;
 
-      if (!isNaN(years) && years < 140 && years >= 0) {
-        setFieldValue('yearsEstimated', years);
-        setFieldValue('birthdate', calcBirthdate(years, monthsEstimateMeta.value, dateOfBirth));
-      }
-    },
-    [setFieldValue, dateOfBirth, monthsEstimateMeta.value],
-  );
+  //     if (!isNaN(years) && years < 140 && years >= 0) {
+  //       setValue('yearsEstimated', years);
+  //       setValue('birthdate', calcBirthdate(years, monthsEstimated, dateOfBirth));
+  //     }
+  //   },
+  //   [setValue, dateOfBirth, monthsEstimated],
+  // );
 
-  const onEstimatedMonthsChange = useCallback(
-    (ev: ChangeEvent<HTMLInputElement>) => {
-      const months = +ev.target.value;
+  // const onEstimatedMonthsChange = useCallback(
+  //   (ev: ChangeEvent<HTMLInputElement>) => {
+  //     const months = +ev.target.value;
 
-      if (!isNaN(months)) {
-        setFieldValue('monthsEstimated', months);
-        setFieldValue('birthdate', calcBirthdate(yearsEstimateMeta.value, months, dateOfBirth));
-      }
-    },
-    [setFieldValue, dateOfBirth, yearsEstimateMeta.value],
-  );
+  //     if (!isNaN(months)) {
+  //       setValue('monthsEstimated', months);
+  //       setValue('birthdate', calcBirthdate(yearsEstimated, months, dateOfBirth));
+  //     }
+  //   },
+  //   [setValue, dateOfBirth, yearsEstimated],
+  // );
 
-  const updateBirthdate = useCallback(() => {
-    const months = +monthsEstimateMeta.value % 12;
-    const years = +yearsEstimateMeta.value + Math.floor(monthsEstimateMeta.value / 12);
-    setFieldValue('yearsEstimated', years);
-    setFieldValue('monthsEstimated', months > 0 ? months : '');
-    setFieldValue('birthdate', calcBirthdate(years, months, dateOfBirth));
-    setFieldTouched('yearsEstimated', true, false);
-    setFieldTouched('monthsEstimated', true, false);
-    setFieldTouched('birthdate', true, false);
-  }, [setFieldValue, setFieldTouched, monthsEstimateMeta, yearsEstimateMeta, dateOfBirth]);
+  // const updateBirthdate = useCallback(() => {
+  //   const months = +monthsEstimated % 12;
+  //   const years = +yearsEstimated + Math.floor(monthsEstimated / 12);
+  //   setValue('yearsEstimated', years);
+  //   setValue('monthsEstimated', months > 0 ? months : undefined);
+  //   setValue('birthdate', calcBirthdate(years, months, dateOfBirth));
+  // }, [setValue, monthsEstimated, yearsEstimated, dateOfBirth]);
 
   return (
     <div className={styles.halfWidthInDesktopView}>
@@ -104,58 +106,58 @@ export const DobField: React.FC = () => {
       <Layer>
         {!dobUnknown ? (
           <div className={styles.dobField}>
-            <OpenmrsDatePicker
-              id="birthdate"
-              {...birthdate}
-              onChange={onDateChange}
-              onBlur={() => setFieldTouched('birthdate', true, false)}
-              maxDate={today}
-              labelText={t('dateOfBirthLabelText', 'Date of birth')}
-              isInvalid={!!(birthdateMeta.touched && birthdateMeta.error)}
-              invalidText={t(birthdateMeta.error)}
-              value={birthdate.value}
+            <Controller
+              control={control}
+              name="birthdate"
+              render={({ field, fieldState: { isTouched, error } }) => (
+                <OpenmrsDatePicker
+                  id="birthdate"
+                  {...field}
+                  // onChange={onDateChange}
+                  maxDate={today}
+                  labelText={t('dateOfBirthLabelText', 'Date of birth')}
+                  isInvalid={Boolean(isTouched && error?.message)}
+                  invalidText={error?.message}
+                />
+              )}
             />
           </div>
         ) : (
           <div className={styles.grid}>
             <div className={styles.dobField}>
-              <TextInput
-                id="yearsEstimated"
-                type="number"
-                name={yearsEstimated.name}
-                onChange={onEstimatedYearsChange}
-                labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
-                invalid={!!(yearsEstimateMeta.touched && yearsEstimateMeta.error)}
-                invalidText={yearsEstimateMeta.error && t(yearsEstimateMeta.error)}
-                value={yearsEstimated.value}
-                min={0}
-                required
-                {...yearsEstimated}
-                onBlur={(e) => {
-                  yearsEstimated.onBlur(e);
-                  setFieldTouched('yearsEstimated', true, false);
-                  updateBirthdate();
+              <Controller
+                control={control}
+                name="yearsEstimated"
+                render={({ field, fieldState: { isTouched, error } }) => {
+                  return (
+                    <NumberInput
+                      {...field}
+                      id="yearsEstimated"
+                      type="number"
+                      labelText={t('estimatedAgeInYearsLabelText', 'Estimated age in years')}
+                      invalid={Boolean(isTouched && error?.message)}
+                      invalidText={error?.message}
+                      min={0}
+                    />
+                  );
                 }}
               />
             </div>
             <div className={styles.dobField}>
-              <TextInput
-                id="monthsEstimated"
-                type="number"
-                name={monthsEstimated.name}
-                onChange={onEstimatedMonthsChange}
-                labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
-                invalid={!!(monthsEstimateMeta.touched && monthsEstimateMeta.error)}
-                invalidText={monthsEstimateMeta.error && t(monthsEstimateMeta.error)}
-                value={monthsEstimated.value}
-                min={0}
-                {...monthsEstimated}
-                required={!yearsEstimateMeta.value}
-                onBlur={(e) => {
-                  monthsEstimated.onBlur(e);
-                  setFieldTouched('monthsEstimated', true, false);
-                  updateBirthdate();
-                }}
+              <Controller
+                control={control}
+                name="monthsEstimated"
+                render={({ field, fieldState: { isTouched, error } }) => (
+                  <NumberInput
+                    {...field}
+                    id="monthsEstimated"
+                    type="number"
+                    labelText={t('estimatedAgeInMonthsLabelText', 'Estimated age in months')}
+                    invalid={Boolean(isTouched && error?.message)}
+                    invalidText={error?.message}
+                    min={0}
+                  />
+                )}
               />
             </div>
           </div>
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
index 75fa4663a..4a9d0d592 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx
@@ -2,22 +2,18 @@ import React, { useContext } from 'react';
 import { RadioButton, RadioButtonGroup } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { useField } from 'formik';
 import { type RegistrationConfig } from '../../../config-schema';
 import { useConfig } from '@openmrs/esm-framework';
 import styles from '../field.scss';
+import { Controller } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export const GenderField: React.FC = () => {
   const { fieldConfigurations } = useConfig<RegistrationConfig>();
   const { t } = useTranslation();
-  const [field, meta] = useField('gender');
-  const { setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext);
+  const { control } = usePatientRegistrationContext();
   const fieldConfigs = fieldConfigurations?.gender;
 
-  const setGender = (gender: string) => {
-    setFieldValue('gender', gender);
-    setFieldTouched('gender', true, false);
-  };
   /**
    * DO NOT REMOVE THIS COMMENT HERE, ADDS TRANSLATION FOR SEX OPTIONS
    * t('male', 'Male')
@@ -31,19 +27,27 @@ export const GenderField: React.FC = () => {
       <h4 className={styles.productiveHeading02Light}>{t('sexFieldLabelText', 'Sex')}</h4>
       <div className={styles.sexField}>
         <p className="cds--label">{t('genderLabelText', 'Sex')}</p>
-        <RadioButtonGroup name="gender" orientation="vertical" onChange={setGender} valueSelected={field.value}>
-          {fieldConfigs.map((option) => (
-            <RadioButton
-              key={option.label ?? option.value}
-              id={`gender-option-${option.value}`}
-              value={option.value}
-              labelText={t(option.label ?? option.value, option.label ?? option.value)}
-            />
-          ))}
-        </RadioButtonGroup>
-        {meta.touched && meta.error && (
-          <div className={styles.radioFieldError}>{t(meta.error, 'Gender is required')}</div>
-        )}
+        <Controller
+          control={control}
+          name="gender"
+          render={({ field, fieldState: { isTouched, error } }) => (
+            <RadioButtonGroup
+              {...field}
+              orientation="vertical"
+              valueSelected={field.value}
+              invalid={isTouched && error?.message}
+              invalidText={error?.message}>
+              {fieldConfigs.map((option) => (
+                <RadioButton
+                  key={option.label ?? option.value}
+                  id={`gender-option-${option.value}`}
+                  value={option.value}
+                  labelText={t(option.label ?? option.value, option.label ?? option.value)}
+                />
+              ))}
+            </RadioButtonGroup>
+          )}
+        />
       </div>
     </div>
   );
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx
index cfd27ba5e..72a5091ae 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/id/id-field.component.tsx
@@ -14,6 +14,7 @@ import type {
 } from '../../patient-registration.types';
 import { ResourcesContext } from '../../../offline.resources';
 import styles from '../field.scss';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export function setIdentifierSource(
   identifierSource: IdentifierSource,
@@ -59,7 +60,13 @@ export function deleteIdentifierType(identifiers: FormValues['identifiers'], ide
 export const Identifiers: React.FC = () => {
   const { identifierTypes } = useContext(ResourcesContext);
   const isLoading = !identifierTypes?.length;
-  const { values, setFieldValue, initialFormValues, isOffline } = useContext(PatientRegistrationContext);
+  const {
+    watch,
+    formState: { defaultValues },
+    setValue,
+    isOffline,
+  } = usePatientRegistrationContext();
+  const identifiers = watch('identifiers');
   const { t } = useTranslation();
   const layout = useLayoutType();
   const [showIdentifierOverlay, setShowIdentifierOverlay] = useState(false);
@@ -78,11 +85,11 @@ export const Identifiers: React.FC = () => {
               (defaultIdentifierTypeUuid) => defaultIdentifierTypeUuid === type.uuid,
             ),
         )
-        .filter((type) => !values.identifiers[type.fieldName])
+        .filter((type) => !identifiers[type.fieldName])
         .forEach((type) => {
           identifiers[type.fieldName] = initializeIdentifier(
             type,
-            values.identifiers[type.uuid] ?? initialFormValues.identifiers[type.uuid] ?? {},
+            identifiers[type.uuid] ?? defaultValues.identifiers[type.uuid] ?? {},
           );
         });
       /*
@@ -91,14 +98,14 @@ export const Identifiers: React.FC = () => {
         fall into an infinite run.
       */
       if (Object.keys(identifiers).length) {
-        setFieldValue('identifiers', {
-          ...values.identifiers,
+        setValue('identifiers', {
+          ...identifiers,
           ...identifiers,
         });
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [identifierTypes, setFieldValue, defaultPatientIdentifierTypes, values.identifiers, initializeIdentifier]);
+  }, [identifierTypes, setValue, defaultPatientIdentifierTypes, identifiers, initializeIdentifier]);
 
   const closeIdentifierSelectionOverlay = useCallback(
     () => setShowIdentifierOverlay(false),
@@ -131,11 +138,12 @@ export const Identifiers: React.FC = () => {
         </div>
       </UserHasAccess>
       <div>
-        {Object.entries(values.identifiers).map(([fieldName, identifier]) => (
+        {Object.entries(identifiers).map(([fieldName, identifier]) => (
+          // @ts-ignore
           <IdentifierInput key={fieldName} fieldName={fieldName} patientIdentifier={identifier} />
         ))}
         {showIdentifierOverlay && (
-          <IdentifierSelectionOverlay setFieldValue={setFieldValue} closeOverlay={closeIdentifierSelectionOverlay} />
+          <IdentifierSelectionOverlay setFieldValue={setValue} closeOverlay={closeIdentifierSelectionOverlay} />
         )}
       </div>
     </div>
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/id/identifier-selection-overlay.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/id/identifier-selection-overlay.component.tsx
index b181c5114..97d727003 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/id/identifier-selection-overlay.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/id/identifier-selection-overlay.component.tsx
@@ -12,17 +12,25 @@ import {
 } from '../../input/custom-input/identifier/utils';
 import { initializeIdentifier, setIdentifierSource } from './id-field.component';
 import styles from './identifier-selection.scss';
+import { type UseFormSetValue } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 interface PatientIdentifierOverlayProps {
-  setFieldValue: (string, PatientIdentifierValue) => void;
+  setFieldValue: UseFormSetValue<FormValues>;
   closeOverlay: () => void;
 }
 
 const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ closeOverlay, setFieldValue }) => {
   const layout = useLayoutType();
   const { identifierTypes } = useContext(ResourcesContext);
-  const { isOffline, values, initialFormValues } = useContext(PatientRegistrationContext);
-  const [unsavedIdentifierTypes, setUnsavedIdentifierTypes] = useState<FormValues['identifiers']>(values.identifiers);
+  const {
+    isOffline,
+    watch,
+    formState: { defaultValues },
+  } = usePatientRegistrationContext();
+  const identifiers = watch('identifiers');
+  const [unsavedIdentifierTypes, setUnsavedIdentifierTypes] = useState<FormValues['identifiers']>(identifiers);
+  console.log({ unsavedIdentifierTypes });
   const [searchString, setSearchString] = useState<string>('');
   const { t } = useTranslation();
   const { defaultPatientIdentifierTypes } = useConfig();
@@ -35,8 +43,8 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
   }, [defaultPatientIdentifierTypes]);
 
   useEffect(() => {
-    setUnsavedIdentifierTypes(values.identifiers);
-  }, [values.identifiers]);
+    setUnsavedIdentifierTypes(identifiers);
+  }, [identifiers]);
 
   const handleSearch = useCallback((event) => setSearchString(event?.target?.value ?? ''), []);
 
@@ -53,9 +61,7 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
             ...unsavedIdentifierTypes,
             [identifierType.fieldName]: initializeIdentifier(
               identifierType,
-              values.identifiers[identifierType.fieldName] ??
-                initialFormValues.identifiers[identifierType.fieldName] ??
-                {},
+              identifiers[identifierType.fieldName] ?? defaultValues.identifiers[identifierType.fieldName] ?? {},
             ),
           };
         }
@@ -66,7 +72,7 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
         }
         return unsavedIdentifierTypes;
       }),
-    [initialFormValues.identifiers, values.identifiers],
+    [defaultValues.identifiers, identifiers],
   );
 
   const handleSelectingIdentifierSource = (identifierType: PatientIdentifierType, sourceUuid) =>
@@ -92,7 +98,7 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
           defaultPatientIdentifierTypesMap[identifierType.uuid] ||
           // De-selecting shouldn't be allowed if the identifier was selected earlier and is present in the form.
           // If the user wants to de-select an identifier-type already present in the form, they'll need to delete the particular identifier from the form itself.
-          values.identifiers[identifierType.fieldName];
+          identifiers[identifierType.fieldName];
         const isDisabledOffline = isOffline && shouldBlockPatientIdentifierInOfflineMode(identifierType);
 
         return (
@@ -149,7 +155,7 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
       filteredIdentifiers,
       unsavedIdentifierTypes,
       defaultPatientIdentifierTypesMap,
-      values.identifiers,
+      identifiers,
       isOffline,
       handleCheckingIdentifier,
       t,
@@ -158,7 +164,7 @@ const PatientIdentifierOverlay: React.FC<PatientIdentifierOverlayProps> = ({ clo
 
   const handleConfiguringIdentifiers = useCallback(() => {
     setFieldValue('identifiers', unsavedIdentifierTypes);
-    closeOverlay();
+    // closeOverlay();
   }, [unsavedIdentifierTypes, setFieldValue, closeOverlay]);
 
   return (
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx
index f2b4e2147..29c1c913b 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx
@@ -1,12 +1,12 @@
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ContentSwitcher, Switch } from '@carbon/react';
-import { useField } from 'formik';
 import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
 import { Input } from '../../input/basic-input/input/input.component';
-import { PatientRegistrationContext } from '../../patient-registration-context';
 import { type RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
+import type { FormValues } from '../../patient-registration.types';
 
 export const unidentifiedPatientAttributeTypeUuid = '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47';
 const containsNoNumbers = /^([^0-9]*)$/;
@@ -21,7 +21,7 @@ function checkNumber(value: string) {
 
 export const NameField = () => {
   const { t } = useTranslation();
-  const { setCapturePhotoProps, currentPhoto, setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext);
+  const { setCapturePhotoProps, currentPhoto, setValue, control, watch } = usePatientRegistrationContext();
   const {
     fieldConfigurations: {
       name: {
@@ -35,8 +35,14 @@ export const NameField = () => {
     },
   } = useConfig<RegistrationConfig>();
 
-  const [{ value: isPatientUnknownValue }, , { setValue: setUnknownPatient }] = useField<string>(
-    `attributes.${unidentifiedPatientAttributeTypeUuid}`,
+  const unknownPatientFieldName = useMemo(
+    () => `attributes.${unidentifiedPatientAttributeTypeUuid}` as keyof FormValues,
+    [],
+  );
+  const isPatientUnknownValue = watch(unknownPatientFieldName);
+  const setUnknownPatient = useCallback(
+    (value: string) => setValue(unknownPatientFieldName, value),
+    [unknownPatientFieldName, setValue],
   );
 
   const isPatientUnknown = isPatientUnknownValue === 'true';
@@ -48,7 +54,7 @@ export const NameField = () => {
           imageData: dataUri,
           dateTime: photoDateTime,
         });
-        setFieldTouched('photo', true, false);
+        // setFieldTouched('photo', true, false);
       }
     },
     [setCapturePhotoProps],
@@ -56,17 +62,17 @@ export const NameField = () => {
 
   const toggleNameKnown = (e) => {
     if (e.name === 'known') {
-      setFieldValue('givenName', '');
-      setFieldValue('familyName', '');
+      setValue('givenName', '');
+      setValue('familyName', '');
       setUnknownPatient('false');
     } else {
-      setFieldValue('givenName', defaultUnknownGivenName);
-      setFieldValue('familyName', defaultUnknownFamilyName);
+      setValue('givenName', defaultUnknownGivenName);
+      setValue('familyName', defaultUnknownFamilyName);
       setUnknownPatient('true');
     }
-    setFieldTouched('givenName', true);
-    setFieldTouched('familyName', true);
-    setFieldTouched(`attributes.${unidentifiedPatientAttributeTypeUuid}`, true, false);
+    // setFieldTouched('givenName', true);
+    // setFieldTouched('familyName', true);
+    // setFieldTouched(`attributes.${unidentifiedPatientAttributeTypeUuid}`, true, false);
   };
 
   const firstNameField = (
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/obs/obs-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/obs/obs-field.component.tsx
index 7eecbf520..6cf118578 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/obs/obs-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/obs/obs-field.component.tsx
@@ -4,12 +4,14 @@ import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
 import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
-import { type ConceptResponse } from '../../patient-registration.types';
+import type { FormValues, ConceptResponse } from '../../patient-registration.types';
 import { type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
 import { Input } from '../../input/basic-input/input/input.component';
 import { useConcept, useConceptAnswers } from '../field.resource';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import styles from './../field.scss';
+import { Controller } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export interface ObsFieldProps {
   fieldDefinition: FieldDefinition;
@@ -94,6 +96,7 @@ interface TextObsFieldProps {
 function TextObsField({ concept, validationRegex, label, required }: TextObsFieldProps) {
   const { t } = useTranslation();
 
+  // TODO: Add validation in the ZOD Schema
   const validateInput = (value: string) => {
     if (!value || !validationRegex || validationRegex === '' || typeof validationRegex !== 'string' || value === '') {
       return;
@@ -109,19 +112,13 @@ function TextObsField({ concept, validationRegex, label, required }: TextObsFiel
   const fieldName = `obs.${concept.uuid}`;
   return (
     <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
-      <Field name={fieldName} validate={validateInput}>
-        {({ field, form: { touched, errors }, meta }) => {
-          return (
-            <Input
-              id={fieldName}
-              labelText={label ?? concept.display}
-              required={required}
-              invalid={errors[fieldName] && touched[fieldName]}
-              {...field}
-            />
-          );
-        }}
-      </Field>
+      <Input
+        // @ts-ignore
+        name={fieldName as keyof FormValues}
+        id={fieldName}
+        labelText={label ?? concept.display}
+        required={required}
+      />
     </div>
   );
 }
@@ -137,20 +134,14 @@ function NumericObsField({ concept, label, required }: NumericObsFieldProps) {
 
   return (
     <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
-      <Field name={fieldName}>
-        {({ field, form: { touched, errors }, meta }) => {
-          return (
-            <Input
-              id={fieldName}
-              labelText={label ?? concept.display}
-              required={required}
-              invalid={errors[fieldName] && touched[fieldName]}
-              type="number"
-              {...field}
-            />
-          );
-        }}
-      </Field>
+      <Input
+        // @ts-ignore
+        name={fieldName}
+        id={fieldName}
+        labelText={label ?? concept.display}
+        required={required}
+        type="number"
+      />
     </div>
   );
 }
@@ -166,33 +157,34 @@ interface DateObsFieldProps {
 function DateObsField({ concept, label, required, placeholder }: DateObsFieldProps) {
   const { t } = useTranslation();
   const fieldName = `obs.${concept.uuid}`;
-  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { setValue } = usePatientRegistrationContext();
+  const { control } = usePatientRegistrationContext();
 
   const onDateChange = (date: Date) => {
-    setFieldValue(fieldName, date);
+    setValue(fieldName as keyof FormValues, date);
   };
 
   return (
     <Layer>
       <div className={styles.dobField}>
-        <Field name={fieldName}>
-          {({ field, form: { touched, errors }, meta }) => {
-            return (
-              <>
-                <OpenmrsDatePicker
-                  id={fieldName}
-                  {...field}
-                  isRequired={required}
-                  onChange={onDateChange}
-                  labelText={label ?? concept.display}
-                  isInvalid={errors[fieldName] && touched[fieldName]}
-                  invalidText={t(meta.error)}
-                  value={field.value}
-                />
-              </>
-            );
-          }}
-        </Field>
+        <Controller
+          control={control}
+          name={fieldName as keyof FormValues}
+          render={({ field, fieldState: { isTouched, error } }) => (
+            <>
+              <OpenmrsDatePicker
+                id={fieldName}
+                {...field}
+                value={field.value as Date}
+                isRequired={required}
+                onChange={onDateChange}
+                labelText={label ?? concept.display}
+                isInvalid={Boolean(isTouched && error?.message)}
+                invalidText={error?.message}
+              />
+            </>
+          )}
+        />
       </div>
     </Layer>
   );
@@ -209,6 +201,7 @@ interface CodedObsFieldProps {
 function CodedObsField({ concept, answerConceptSetUuid, label, required, customConceptAnswers }: CodedObsFieldProps) {
   const { t } = useTranslation();
   const fieldName = `obs.${concept.uuid}`;
+  const { control } = usePatientRegistrationContext();
 
   const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
     customConceptAnswers.length ? '' : answerConceptSetUuid ?? concept.uuid,
@@ -227,30 +220,30 @@ function CodedObsField({ concept, answerConceptSetUuid, label, required, customC
   return (
     <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
       {!isLoadingConceptAnswers ? (
-        <Field name={fieldName}>
-          {({ field, form: { touched, errors }, meta }) => {
-            return (
-              <Layer>
-                <Select
-                  id={fieldName}
-                  name={fieldName}
-                  labelText={label ?? concept?.display}
-                  required={required}
-                  invalid={errors[fieldName] && touched[fieldName]}
-                  {...field}>
-                  <SelectItem
-                    key={`no-answer-select-item-${fieldName}`}
-                    value={''}
-                    text={t('selectAnOption', 'Select an option')}
-                  />
-                  {answers.map((answer) => (
-                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
-                  ))}
-                </Select>
-              </Layer>
-            );
-          }}
-        </Field>
+        <Controller
+          control={control}
+          name={fieldName as keyof FormValues}
+          render={({ field, fieldState: { isTouched, error } }) => (
+            <Layer>
+              <Select
+                id={fieldName}
+                name={fieldName}
+                labelText={label ?? concept?.display}
+                required={required}
+                invalid={Boolean(isTouched && error?.message)}
+                invalidText={error?.message}>
+                <SelectItem
+                  key={`no-answer-select-item-${fieldName}`}
+                  value={''}
+                  text={t('selectAnOption', 'Select an option')}
+                />
+                {answers.map((answer) => (
+                  <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
+                ))}
+              </Select>
+            </Layer>
+          )}
+        />
       ) : null}
     </div>
   );
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx
index e5b06a050..f8f5ac71b 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx
@@ -3,10 +3,12 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Field } from 'formik';
 import { Layer, Select, SelectItem } from '@carbon/react';
-import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import type { FormValues, PersonAttributeTypeResponse } from '../../patient-registration.types';
 import { useConceptAnswers } from '../field.resource';
 import styles from './../field.scss';
-import { reportError } from '@openmrs/esm-framework';
+import { fetchCurrentPatient, reportError } from '@openmrs/esm-framework';
+import { Controller } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export interface CodedPersonAttributeFieldProps {
   id: string;
@@ -28,6 +30,7 @@ export function CodedPersonAttributeField({
   const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
     customConceptAnswers.length ? '' : answerConceptSetUuid,
   );
+  const { control } = usePatientRegistrationContext();
 
   const { t } = useTranslation();
   const fieldName = `attributes.${personAttributeType.uuid}`;
@@ -93,26 +96,25 @@ export function CodedPersonAttributeField({
     <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
       {!isLoadingConceptAnswers ? (
         <Layer>
-          <Field name={fieldName}>
-            {({ field, form: { touched, errors }, meta }) => {
-              return (
-                <>
-                  <Select
-                    id={id}
-                    name={`person-attribute-${personAttributeType.uuid}`}
-                    labelText={label ?? personAttributeType?.display}
-                    invalid={errors[fieldName] && touched[fieldName]}
-                    required={required}
-                    {...field}>
-                    <SelectItem value={''} text={t('selectAnOption', 'Select an option')} />
-                    {answers.map((answer) => (
-                      <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
-                    ))}
-                  </Select>
-                </>
-              );
-            }}
-          </Field>
+          <Controller
+            control={control}
+            name={fieldName as keyof FormValues}
+            render={({ field, fieldState: { error, isTouched } }) => (
+              <Select
+                {...field}
+                id={id}
+                name={`person-attribute-${personAttributeType.uuid}`}
+                labelText={label ?? personAttributeType?.display}
+                invalid={Boolean(isTouched && error?.message)}
+                required={required}
+                invalidText={error?.message}>
+                <SelectItem value={''} text={t('selectAnOption', 'Select an option')} />
+                {answers.map((answer) => (
+                  <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
+                ))}
+              </Select>
+            )}
+          />
         </Layer>
       ) : null}
     </div>
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/text-person-attribute-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/text-person-attribute-field.component.tsx
index 16b9c6f86..32c528b8f 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/text-person-attribute-field.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/field/person-attributes/text-person-attribute-field.component.tsx
@@ -3,8 +3,10 @@ import classNames from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { Input } from '../../input/basic-input/input/input.component';
-import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import type { FormValues, PersonAttributeTypeResponse } from '../../patient-registration.types';
 import styles from './../field.scss';
+import { Controller } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export interface TextPersonAttributeFieldProps {
   id: string;
@@ -39,20 +41,12 @@ export function TextPersonAttributeField({
 
   return (
     <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
-      <Field name={fieldName} validate={validateInput}>
-        {({ field, form: { touched, errors }, meta }) => {
-          return (
-            <Input
-              id={id}
-              name={`person-attribute-${personAttributeType.uuid}`}
-              labelText={label ?? personAttributeType?.display}
-              invalid={errors[fieldName] && touched[fieldName]}
-              {...field}
-              required={required}
-            />
-          );
-        }}
-      </Field>
+      <Input
+        id={id}
+        name={`person-attribute-${personAttributeType.uuid}` as keyof FormValues}
+        labelText={label ?? personAttributeType?.display}
+        required={required}
+      />
     </div>
   );
 }
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx
index fa6edca8a..43c57e06b 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/input/input.component.tsx
@@ -1,7 +1,10 @@
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Layer, TextInput } from '@carbon/react';
-import { useField } from 'formik';
+import { Controller, type ControllerRenderProps } from 'react-hook-form';
+import { type FormValues } from '../../../patient-registration.types';
+import { PatientRegistrationContext } from '../../../patient-registration-context';
+import { usePatientRegistrationContext } from '../../../patient-registration-hooks';
 
 // FIXME Temporarily imported here
 export interface TextInputProps
@@ -124,12 +127,14 @@ export interface TextInputProps
 }
 
 interface InputProps extends TextInputProps {
-  checkWarning?(value: string): string;
+  checkWarning?(value: string | number): string;
+  name: keyof FormValues;
 }
 
 export const Input: React.FC<InputProps> = ({ checkWarning, ...props }) => {
-  const [field, meta] = useField(props.name);
   const { t } = useTranslation();
+  const { getFieldState, control, watch } = usePatientRegistrationContext();
+  const { error } = getFieldState(props.name);
 
   /*
     Do not remove these comments
@@ -151,8 +156,8 @@ export const Input: React.FC<InputProps> = ({ checkWarning, ...props }) => {
     t('nonCodedCauseOfDeathRequired', 'Non-coded cause of death is required')
   */
 
-  const value = field.value || '';
-  const invalidText = meta.error && t(meta.error);
+  const value = watch(props.name) as string;
+  const invalidText = error?.message;
   const warnText = useMemo(() => {
     if (!invalidText && typeof checkWarning === 'function') {
       const warning = checkWarning(value);
@@ -166,18 +171,23 @@ export const Input: React.FC<InputProps> = ({ checkWarning, ...props }) => {
 
   return (
     <div style={{ marginBottom: '1rem' }}>
-      <Layer>
-        <TextInput
-          {...props}
-          {...field}
-          labelText={labelText}
-          invalid={!!(meta.touched && meta.error)}
-          invalidText={invalidText}
-          warn={!!warnText}
-          warnText={warnText}
-          value={value}
-        />
-      </Layer>
+      <Controller
+        control={control}
+        name={props.name}
+        render={({ field, fieldState: { isTouched, error } }) => (
+          <Layer>
+            <TextInput
+              {...props}
+              {...field}
+              labelText={labelText}
+              invalid={!!(isTouched && error?.message)}
+              invalidText={invalidText}
+              warn={!!warnText}
+              warnText={warnText}
+            />
+          </Layer>
+        )}
+      />
     </div>
   );
 };
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.component.tsx
index c120bbc83..165c8007b 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/basic-input/select/select-input.component.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Layer, Select, SelectItem } from '@carbon/react';
-import { useField } from 'formik';
 import { useTranslation } from 'react-i18next';
 
 interface SelectInputProps {
@@ -11,7 +10,6 @@ interface SelectInputProps {
 }
 
 export const SelectInput: React.FC<SelectInputProps> = ({ name, options, label, required }) => {
-  const [field] = useField(name);
   const { t } = useTranslation();
   const selectOptions = [
     <SelectItem disabled hidden text={`Select ${label}`} key="" value="" />,
@@ -20,13 +18,5 @@ export const SelectInput: React.FC<SelectInputProps> = ({ name, options, label,
 
   const labelText = required ? label : `${label} (${t('optional', 'optional')})`;
 
-  return (
-    <div style={{ marginBottom: '1rem' }}>
-      <Layer>
-        <Select id="identifier" {...field} labelText={labelText}>
-          {selectOptions}
-        </Select>
-      </Layer>
-    </div>
-  );
+  return null;
 };
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/combo-input/combo-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/combo-input/combo-input.component.tsx
index 291b4314f..efc4175db 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/combo-input/combo-input.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/combo-input/combo-input.component.tsx
@@ -1,26 +1,35 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { TextInput, Layer } from '@carbon/react';
 import SelectionTick from './selection-tick.component';
 import styles from '../input.scss';
+import { Controller } from 'react-hook-form';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { type FormValues } from '../../patient-registration.types';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 interface ComboInputProps {
   entries: Array<string>;
-  name: string;
-  fieldProps: {
-    value: string;
-    labelText: string;
-    [x: string]: any;
-  };
+  name: keyof FormValues;
   handleInputChange: (newValue: string) => void;
   handleSelection: (newSelection) => void;
+  required: boolean;
+  labelText: string;
 }
 
-const ComboInput: React.FC<ComboInputProps> = ({ entries, fieldProps, handleInputChange, handleSelection }) => {
+const ComboInput: React.FC<ComboInputProps> = ({
+  entries,
+  name,
+  labelText,
+  required,
+  handleInputChange,
+  handleSelection,
+}) => {
   const [highlightedEntry, setHighlightedEntry] = useState(-1);
-  const { value = '' } = fieldProps;
   const [showEntries, setShowEntries] = useState(false);
   const comboInputRef = useRef(null);
+  const { control, setValue, watch } = usePatientRegistrationContext();
+  const value = watch(name) ?? '';
 
   const handleFocus = useCallback(() => {
     setShowEntries(true);
@@ -34,7 +43,7 @@ const ComboInput: React.FC<ComboInputProps> = ({ entries, fieldProps, handleInpu
     if (!value) {
       return entries;
     }
-    return entries.filter((entry) => entry.toLowerCase().includes(value.toLowerCase()));
+    return entries.filter((entry) => entry.toLowerCase().includes((value as string).toLowerCase()));
   }, [entries, value]);
 
   const handleOptionClick = useCallback(
@@ -81,46 +90,58 @@ const ComboInput: React.FC<ComboInputProps> = ({ entries, fieldProps, handleInpu
 
   return (
     <div className={styles.comboInput} ref={comboInputRef}>
-      <Layer>
-        <TextInput
-          {...fieldProps}
-          onChange={(e) => {
-            setHighlightedEntry(-1);
-            handleInputChange(e.target.value);
-          }}
-          onFocus={handleFocus}
-          autoComplete={'off'}
-          onKeyDown={handleKeyPress}
-        />
-      </Layer>
-      <div className={styles.comboInputEntries}>
-        {showEntries && (
-          <div className="cds--combo-box cds--list-box cds--list-box--expanded">
-            <div id="downshift-1-menu" className="cds--list-box__menu" role="listbox">
-              {filteredEntries.map((entry, indx) => (
-                <div
-                  className={classNames('cds--list-box__menu-item', {
-                    'cds--list-box__menu-item--highlighted': indx === highlightedEntry,
-                  })}
-                  key={indx}
-                  id="downshift-1-item-0"
-                  role="option"
-                  tabIndex={-1}
-                  aria-selected="true"
-                  onClick={() => handleOptionClick(entry)}>
-                  <div
-                    className={classNames('cds--list-box__menu-item__option', styles.comboInputItemOption, {
-                      'cds--list-box__menu-item--active': entry === value,
-                    })}>
-                    {entry}
-                    {entry === value && <SelectionTick />}
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error, isTouched } }) => (
+          <>
+            <Layer>
+              <TextInput
+                {...field}
+                onChange={(e) => {
+                  setHighlightedEntry(-1);
+                  handleInputChange(e.target.value);
+                }}
+                labelText={labelText}
+                onFocus={handleFocus}
+                autoComplete={'off'}
+                onKeyDown={handleKeyPress}
+                invalid={Boolean(isTouched && error?.message)}
+                invalidText={error?.message}
+                required={required}
+              />
+            </Layer>
+            <div className={styles.comboInputEntries}>
+              {showEntries && (
+                <div className="cds--combo-box cds--list-box cds--list-box--expanded">
+                  <div id="downshift-1-menu" className="cds--list-box__menu" role="listbox">
+                    {filteredEntries.map((entry, indx) => (
+                      <div
+                        className={classNames('cds--list-box__menu-item', {
+                          'cds--list-box__menu-item--highlighted': indx === highlightedEntry,
+                        })}
+                        key={indx}
+                        id="downshift-1-item-0"
+                        role="option"
+                        tabIndex={-1}
+                        aria-selected="true"
+                        onClick={() => handleOptionClick(entry)}>
+                        <div
+                          className={classNames('cds--list-box__menu-item__option', styles.comboInputItemOption, {
+                            'cds--list-box__menu-item--active': entry === value,
+                          })}>
+                          {entry}
+                          {entry === value && <SelectionTick />}
+                        </div>
+                      </div>
+                    ))}
                   </div>
                 </div>
-              ))}
+              )}
             </div>
-          </div>
+          </>
         )}
-      </div>
+      />
     </div>
   );
 };
diff --git a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
index 3a3166ceb..c837d67d9 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx
@@ -1,16 +1,17 @@
 import React, { useState, useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useField } from 'formik';
 import { Button } from '@carbon/react';
 import { TrashCan, Edit, Reset } from '@carbon/react/icons';
 import { ResourcesContext } from '../../../../offline.resources';
 import { showModal, useConfig, UserHasAccess } from '@openmrs/esm-framework';
 import { shouldBlockPatientIdentifierInOfflineMode } from './utils';
 import { deleteIdentifierType, setIdentifierSource } from '../../../field/id/id-field.component';
-import { type PatientIdentifierValue } from '../../../patient-registration.types';
+import type { FormValues, PatientIdentifierValue } from '../../../patient-registration.types';
 import { PatientRegistrationContext } from '../../../patient-registration-context';
 import { Input } from '../../basic-input/input/input.component';
 import styles from '../../input.scss';
+import { Controller, useFormContext } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../../patient-registration-hooks';
 
 interface IdentifierInputProps {
   patientIdentifier: PatientIdentifierValue;
@@ -21,15 +22,15 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
   const { t } = useTranslation();
   const { defaultPatientIdentifierTypes } = useConfig();
   const { identifierTypes } = useContext(ResourcesContext);
-  const { isOffline, values, setFieldValue } = useContext(PatientRegistrationContext);
+  const { isOffline, watch, setValue, getFieldState, control } = usePatientRegistrationContext();
   const identifierType = useMemo(
     () => identifierTypes.find((identifierType) => identifierType.uuid === patientIdentifier.identifierTypeUuid),
     [patientIdentifier, identifierTypes],
   );
   const { autoGeneration, initialValue, identifierValue, identifierName, required } = patientIdentifier;
   const [hideInputField, setHideInputField] = useState(autoGeneration || initialValue === identifierValue);
-  const name = `identifiers.${fieldName}.identifierValue`;
-  const [identifierField, identifierFieldMeta] = useField(name);
+  const name = `identifiers.${fieldName}.identifierValue` as keyof FormValues;
+  const { isTouched, error } = getFieldState(name);
 
   const disabled = isOffline && shouldBlockPatientIdentifierInOfflineMode(identifierType);
 
@@ -43,7 +44,7 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
 
   const handleReset = useCallback(() => {
     setHideInputField(true);
-    setFieldValue(`identifiers.${fieldName}`, {
+    setValue(`identifiers.${fieldName}`, {
       ...patientIdentifier,
       identifierValue: initialValue,
       selectedSource: null,
@@ -54,7 +55,7 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
 
   const handleEdit = () => {
     setHideInputField(false);
-    setFieldValue(`identifiers.${fieldName}`, {
+    setValue(`identifiers.${fieldName}`, {
       ...patientIdentifier,
       ...setIdentifierSource(identifierType?.identifierSources?.[0], initialValue, initialValue),
     });
@@ -71,7 +72,7 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
       const confirmDeleteIdentifierModal = showModal('delete-identifier-confirmation-modal', {
         deleteIdentifier: (deleteIdentifier) => {
           if (deleteIdentifier) {
-            setFieldValue('identifiers', deleteIdentifierType(values.identifiers, fieldName));
+            setValue('identifiers', deleteIdentifierType(watch('identifiers'), fieldName));
           }
           confirmDeleteIdentifierModal();
         },
@@ -79,7 +80,7 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
         initialValue,
       });
     } else {
-      setFieldValue('identifiers', deleteIdentifierType(values.identifiers, fieldName));
+      setValue('identifiers', deleteIdentifierType(watch('identifiers'), fieldName));
     }
   };
 
@@ -89,13 +90,10 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
         <Input
           id={name}
           labelText={identifierName}
+          // @ts-ignore
           name={name}
           disabled={disabled}
           required={required}
-          invalid={!!(identifierFieldMeta.touched && identifierFieldMeta.error)}
-          invalidText={identifierFieldMeta.error && t(identifierFieldMeta.error)}
-          // t('identifierValueRequired', 'Identifier value is required')
-          {...identifierField}
         />
       ) : (
         <div className={styles.textID}>
@@ -103,11 +101,13 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
           <p data-testid="identifier-label" className={styles.bodyShort02}>
             {autoGeneration ? t('autoGeneratedPlaceholderText', 'Auto-generated') : identifierValue}
           </p>
-          <input data-testid="identifier-input" type="hidden" {...identifierField} disabled />
+          <Controller
+            name={name}
+            control={control}
+            render={({ field }) => <input type="hidden" {...field} value={field.value as string} disabled />}
+          />
           {/* This is added for any error descriptions */}
-          {!!(identifierFieldMeta.touched && identifierFieldMeta.error) && (
-            <span className={styles.dangerLabel01}>{identifierFieldMeta.error && t(identifierFieldMeta.error)}</span>
-          )}
+          {Boolean(isTouched && error?.message) && <span className={styles.dangerLabel01}>{error?.message}</span>}
         </div>
       )}
       <div style={{ marginBottom: '1rem' }}>
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration-context.ts b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-context.ts
index 2f29433f0..0d5bfc2a2 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/patient-registration-context.ts
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-context.ts
@@ -2,19 +2,20 @@ import { useConfig } from '@openmrs/esm-framework';
 import { createContext, type SetStateAction } from 'react';
 import { type RegistrationConfig } from '../config-schema';
 import { type CapturePhotoProps, type FormValues } from './patient-registration.types';
+import { type UseFormReturn } from 'react-hook-form';
 
 export interface PatientRegistrationContextProps {
   currentPhoto: string;
   identifierTypes: Array<any>;
   inEditMode: boolean;
-  initialFormValues: FormValues;
+  // initialFormValues: Partial<FormValues>;
   isOffline: boolean;
-  setInitialFormValues?: React.Dispatch<SetStateAction<FormValues>>;
+  // setInitialFormValues?: React.Dispatch<SetStateAction<FormValues>>;
   validationSchema: any;
-  values: FormValues;
+  // values: FormValues;
   setCapturePhotoProps(value: SetStateAction<CapturePhotoProps>): void;
-  setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
-  setFieldTouched(field: string, isTouched?: any, shouldValidate?: boolean): void;
+  // setFieldValue(field: string, value: any, shouldValidate?: boolean): void;
+  // setFieldTouched(field: string, isTouched?: any, shouldValidate?: boolean): void;
 }
 
 export const PatientRegistrationContext = createContext<PatientRegistrationContextProps | undefined>(undefined);
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts
index ff50d4b20..25aa5c5d2 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts
@@ -8,7 +8,7 @@ import {
   usePatient,
 } from '@openmrs/esm-framework';
 import camelCase from 'lodash-es/camelCase';
-import { type Dispatch, useEffect, useMemo, useState } from 'react';
+import { type Dispatch, useContext, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import { v4 } from 'uuid';
 import { type RegistrationConfig } from '../config-schema';
@@ -30,6 +30,9 @@ import {
 } from './patient-registration-utils';
 import { useInitialPatientRelationships } from './section/patient-relationships/relationships.resource';
 import dayjs from 'dayjs';
+import { z } from 'zod';
+import { PatientRegistrationContext } from './patient-registration-context';
+import { useFormContext } from 'react-hook-form';
 
 export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch<FormValues>] {
   const { freeTextFieldConceptUuid } = useConfig<RegistrationConfig>();
@@ -336,3 +339,10 @@ function getPatientAttributeUuidMapForPatient(attributes: Array<PersonAttributeR
   });
   return attributeUuidMap;
 }
+
+export function usePatientRegistrationContext() {
+  return {
+    ...useContext(PatientRegistrationContext),
+    ...useFormContext<FormValues>(),
+  };
+}
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration-rhf.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-rhf.component.tsx
new file mode 100644
index 000000000..2613dd297
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-rhf.component.tsx
@@ -0,0 +1,249 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Button, InlineLoading, Link, Form } from '@carbon/react';
+import { XAxis } from '@carbon/react/icons';
+import { useLocation, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  createErrorHandler,
+  interpolateUrl,
+  showSnackbar,
+  useConfig,
+  usePatient,
+  usePatientPhoto,
+} from '@openmrs/esm-framework';
+import { getValidationSchema } from './validation/patient-registration-validation';
+import { type CapturePhotoProps, type FormValues } from './patient-registration.types';
+import { PatientRegistrationContext } from './patient-registration-context';
+import { type SavePatientForm, SavePatientTransactionManager } from './form-manager';
+import { DummyDataInput } from './input/dummy-data/dummy-data-input.component';
+import { cancelRegistration, filterOutUndefinedPatientIdentifiers, scrollIntoView } from './patient-registration-utils';
+import { useInitialAddressFieldValues, useInitialFormValues, usePatientUuidMap } from './patient-registration-hooks';
+import { ResourcesContext } from '../offline.resources';
+import { builtInSections, type RegistrationConfig, type SectionDefinition } from '../config-schema';
+import { SectionWrapper } from './section/section-wrapper.component';
+import BeforeSavePrompt from './before-save-prompt';
+import styles from './patient-registration.scss';
+import { FormProvider, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import useZodSchema from './useZodSchema';
+
+let exportedInitialFormValuesForTesting = {} as FormValues;
+
+export interface PatientRegistrationProps {
+  savePatientForm: SavePatientForm;
+  isOffline: boolean;
+}
+
+export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePatientForm, isOffline }) => {
+  const { currentSession, identifierTypes } = useContext(ResourcesContext);
+  const { search } = useLocation();
+  const config = useConfig() as RegistrationConfig;
+  const [target, setTarget] = useState<undefined | string>();
+  const { patientUuid: uuidOfPatientToEdit } = useParams();
+  const { isLoading: isLoadingPatientToEdit, patient: patientToEdit } = usePatient(uuidOfPatientToEdit);
+  const { t } = useTranslation();
+  const [capturePhotoProps, setCapturePhotoProps] = useState<CapturePhotoProps | null>(null);
+  const [initialFormValues, setInitialFormValues] = useInitialFormValues(uuidOfPatientToEdit);
+  const [initialAddressFieldValues] = useInitialAddressFieldValues(uuidOfPatientToEdit);
+  const [patientUuidMap] = usePatientUuidMap(uuidOfPatientToEdit);
+  const location = currentSession?.sessionLocation?.uuid;
+  const inEditMode = isLoadingPatientToEdit ? undefined : !!(uuidOfPatientToEdit && patientToEdit);
+  const showDummyData = useMemo(() => localStorage.getItem('openmrs:devtools') === 'true' && !inEditMode, [inEditMode]);
+  const { data: photo } = usePatientPhoto(patientToEdit?.id);
+  const savePatientTransactionManager = useRef(new SavePatientTransactionManager());
+  const fieldDefinition = config?.fieldDefinitions?.filter((def) => def.type === 'address');
+  const validationSchema = getValidationSchema(config);
+
+  useEffect(() => {
+    exportedInitialFormValuesForTesting = initialFormValues;
+  }, [initialFormValues]);
+
+  const sections: Array<SectionDefinition> = useMemo(() => {
+    return config.sections
+      .map(
+        (sectionName) =>
+          config.sectionDefinitions.filter((s) => s.id == sectionName)[0] ??
+          builtInSections.filter((s) => s.id == sectionName)[0],
+      )
+      .filter((s) => s);
+  }, [config.sections, config.sectionDefinitions]);
+
+  const { zodSchema } = useZodSchema();
+
+  const methods = useForm<FormValues>({
+    defaultValues: initialFormValues,
+    resolver: zodResolver(zodSchema),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isDirty, isSubmitting, defaultValues },
+    setValue,
+    getValues,
+    reset,
+  } = methods;
+
+  console.log('rerendering');
+
+  const onFormSubmit = async (values: FormValues) => {
+    const abortController = new AbortController();
+    // helpers.setSubmitting(true);
+    const updatedFormValues = { ...values, identifiers: filterOutUndefinedPatientIdentifiers(values.identifiers) };
+    try {
+      await savePatientForm(
+        !inEditMode,
+        updatedFormValues,
+        patientUuidMap,
+        initialAddressFieldValues,
+        capturePhotoProps,
+        location,
+        initialFormValues['identifiers'],
+        currentSession,
+        config,
+        savePatientTransactionManager.current,
+        abortController,
+      );
+
+      showSnackbar({
+        subtitle: inEditMode
+          ? t('updatePatientSuccessSnackbarSubtitle', "The patient's information has been successfully updated")
+          : t(
+              'registerPatientSuccessSnackbarSubtitle',
+              'The patient can now be found by searching for them using their name or ID number',
+            ),
+        title: inEditMode
+          ? t('updatePatientSuccessSnackbarTitle', 'Patient Details Updated')
+          : t('registerPatientSuccessSnackbarTitle', 'New Patient Created'),
+        kind: 'success',
+        isLowContrast: true,
+      });
+
+      const afterUrl = new URLSearchParams(search).get('afterUrl');
+      const redirectUrl = interpolateUrl(afterUrl || config.links.submitButton, { patientUuid: values.patientUuid });
+
+      setTarget(redirectUrl);
+    } catch (error) {
+      if (error.responseBody?.error?.globalErrors) {
+        error.responseBody.error.globalErrors.forEach((error) => {
+          showSnackbar({
+            title: inEditMode
+              ? t('updatePatientErrorSnackbarTitle', 'Patient Details Update Failed')
+              : t('registrationErrorSnackbarTitle', 'Patient Registration Failed'),
+            subtitle: error.message,
+            kind: 'error',
+          });
+        });
+      } else if (error.responseBody?.error?.message) {
+        showSnackbar({
+          title: inEditMode
+            ? t('updatePatientErrorSnackbarTitle', 'Patient Details Update Failed')
+            : t('registrationErrorSnackbarTitle', 'Patient Registration Failed'),
+          subtitle: error.responseBody.error.message,
+          kind: 'error',
+        });
+      } else {
+        createErrorHandler()(error);
+      }
+
+      // helpers.setSubmitting(false);
+    }
+  };
+
+  const getDescription = (errors) => {
+    return (
+      <ul style={{ listStyle: 'inside' }}>
+        {Object.keys(errors).map((error, index) => {
+          return <li key={index}>{t(`${error}LabelText`, error)}</li>;
+        })}
+      </ul>
+    );
+  };
+
+  const displayErrors = (errors) => {
+    if (errors && typeof errors === 'object' && !!Object.keys(errors).length) {
+      showSnackbar({
+        isLowContrast: true,
+        kind: 'warning',
+        title: t('fieldsWithErrors', 'The following fields have errors:'),
+        subtitle: <>{getDescription(errors)}</>,
+      });
+    }
+  };
+
+  const contextState = useMemo(
+    () => ({
+      identifierTypes: identifierTypes,
+      validationSchema,
+      inEditMode,
+      setCapturePhotoProps,
+      currentPhoto: photo?.imageSrc,
+      isOffline,
+    }),
+    [identifierTypes, identifierTypes, validationSchema, inEditMode, setCapturePhotoProps, photo?.imageSrc, isOffline],
+  );
+
+  return (
+    <Form className={styles.form} onSubmit={handleSubmit(onFormSubmit, displayErrors)}>
+      <BeforeSavePrompt when={isDirty} redirect={target} />
+      <div className={styles.formContainer}>
+        <div>
+          <div className={styles.stickyColumn}>
+            <h4>
+              {inEditMode
+                ? t('editPatientDetails', 'Edit patient details')
+                : t('createNewPatient', 'Create new patient')}
+            </h4>
+            {showDummyData && <DummyDataInput setValues={() => {}} />}
+            <p className={styles.label01}>{t('jumpTo', 'Jump to')}</p>
+            {sections.map((section) => (
+              <div className={classNames(styles.space05, styles.touchTarget)} key={section.name}>
+                <Link className={styles.linkName} onClick={() => scrollIntoView(section.id)}>
+                  <XAxis size={16} /> {t(`${section.id}Section`, section.name)}
+                </Link>
+              </div>
+            ))}
+            <Button
+              className={styles.submitButton}
+              type="submit"
+              // Current session and identifiers are required for patient registration.
+              // If currentSession or identifierTypes are not available, then the
+              // user should be blocked to register the patient.
+              disabled={!currentSession || !identifierTypes || isSubmitting}>
+              {isSubmitting ? (
+                <InlineLoading
+                  className={styles.spinner}
+                  description={`${t('submitting', 'Submitting')} ...`}
+                  iconDescription="submitting"
+                />
+              ) : inEditMode ? (
+                t('updatePatient', 'Update patient')
+              ) : (
+                t('registerPatient', 'Register patient')
+              )}
+            </Button>
+            <Button className={styles.cancelButton} kind="tertiary" onClick={cancelRegistration}>
+              {t('cancel', 'Cancel')}
+            </Button>
+          </div>
+        </div>
+        <div className={styles.infoGrid}>
+          <PatientRegistrationContext.Provider value={contextState}>
+            <FormProvider {...methods}>
+              {sections.map((section, index) => (
+                <SectionWrapper key={`registration-section-${section.id}`} sectionDefinition={section} index={index} />
+              ))}
+            </FormProvider>
+          </PatientRegistrationContext.Provider>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+/**
+ * @internal
+ * Just exported for testing
+ */
+export { exportedInitialFormValuesForTesting as initialFormValues };
diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
index 55b250bda..f51a1161e 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { Button, InlineLoading, Link } from '@carbon/react';
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/death-info/death-info-section.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/death-info/death-info-section.component.tsx
index 3deb60b82..fd728b1bc 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/section/death-info/death-info-section.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/death-info/death-info-section.component.tsx
@@ -1,10 +1,11 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Checkbox, Layer } from '@carbon/react';
-import { useField } from 'formik';
 import { Field } from '../../field/field.component';
-import { PatientRegistrationContext } from '../../patient-registration-context';
 import styles from './../section.scss';
+import { Controller, useFormContext } from 'react-hook-form';
+import { type FormValues } from '../../patient-registration.types';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export interface DeathInfoSectionProps {
   fields: Array<string>;
@@ -12,24 +13,24 @@ export interface DeathInfoSectionProps {
 
 export const DeathInfoSection: React.FC<DeathInfoSectionProps> = ({ fields }) => {
   const { t } = useTranslation();
-  const { values, setFieldValue } = useContext(PatientRegistrationContext);
-  const [deathDate, deathDateMeta] = useField('deathDate');
-  const today = new Date();
+  const { watch, control } = usePatientRegistrationContext();
+  const isDead = watch('isDead');
 
   return (
     <section className={styles.formSection} aria-label="Death Info Section">
       <section className={styles.fieldGroup}>
         <Layer>
           <div className={styles.isDeadFieldContainer}>
-            <Checkbox
-              checked={values.isDead}
-              id="isDead"
-              labelText={t('isDeadInputLabel', 'Is dead')}
-              onChange={(event, { checked, id }) => setFieldValue(id, checked)}
+            <Controller
+              control={control}
+              name="isDead"
+              render={({ field, fieldState }) => (
+                <Checkbox {...field} id="isDead" labelText={t('isDeadInputLabel', 'Is dead')} />
+              )}
             />
           </div>
         </Layer>
-        {values.isDead ? fields.map((field) => <Field key={`death-info-${field}`} name={field} />) : null}
+        {isDead ? fields.map((field) => <Field key={`death-info-${field}`} name={field} />) : null}
       </section>
     </section>
   );
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.component.tsx
index 3ab1adb22..a1611dc4b 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/demographics/demographics-section.component.tsx
@@ -3,22 +3,26 @@ import styles from './../section.scss';
 import { useField } from 'formik';
 import { PatientRegistrationContext } from '../../patient-registration-context';
 import { Field } from '../../field/field.component';
+import { useFormContext } from 'react-hook-form';
+import { usePatientRegistrationContext } from '../../patient-registration-hooks';
 
 export interface DemographicsSectionProps {
   fields: Array<string>;
 }
 
 export const DemographicsSection: React.FC<DemographicsSectionProps> = ({ fields }) => {
-  const [field, meta] = useField('addNameInLocalLanguage');
-  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { control, setValue, watch, getFieldState } = usePatientRegistrationContext();
+  const addNameInLocalLanguageFieldName = 'addNameInLocalLanguage';
+  const nameInLocalLanguage = watch(addNameInLocalLanguageFieldName);
+  const isTouched = getFieldState(addNameInLocalLanguageFieldName);
 
-  useEffect(() => {
-    if (!field.value && meta.touched) {
-      setFieldValue('additionalGivenName', '');
-      setFieldValue('additionalMiddleName', '');
-      setFieldValue('additionalFamilyName', '');
-    }
-  }, [field.value, meta.touched]);
+  // useEffect(() => {
+  //   if (nameInLocalLanguage && isTouched) {
+  //     setValue('additionalGivenName', '');
+  //     setValue('additionalMiddleName', '');
+  //     setValue('additionalFamilyName', '');
+  //   }
+  // }, [nameInLocalLanguage, isTouched]);
 
   return (
     <section className={styles.formSection} aria-label="Demographics Section">
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx
index 5076a31e6..f2f6dcae8 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/patient-relationships/relationships-section.component.tsx
@@ -18,6 +18,7 @@ import { fetchPerson } from '../../patient-registration.resource';
 import { type RelationshipValue } from '../../patient-registration.types';
 import sectionStyles from '../section.scss';
 import styles from './relationships.scss';
+import { useFormContext } from 'react-hook-form';
 
 interface RelationshipType {
   display: string;
@@ -39,7 +40,7 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
   remove,
 }) => {
   const { t } = useTranslation();
-  const { setFieldValue } = React.useContext(PatientRegistrationContext);
+  const { setValue } = useFormContext();
   const [isInvalid, setIsInvalid] = useState<boolean>(false);
   const newRelationship = !relationship.uuid;
 
@@ -48,20 +49,20 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
       const { target } = event;
       const field = target.name;
       const value = target.options[target.selectedIndex].value;
-      setFieldValue(field, value);
+      setValue(field, value);
       if (!relationship?.action) {
-        setFieldValue(`relationships[${index}].action`, 'UPDATE');
+        setValue(`relationships[${index}].action`, 'UPDATE');
       }
     },
-    [index, relationship?.action, setFieldValue],
+    [index, relationship?.action, setValue],
   );
 
   const handleSuggestionSelected = useCallback(
     (field: string, selectedSuggestion: string) => {
       setIsInvalid(!selectedSuggestion);
-      setFieldValue(field, selectedSuggestion);
+      setValue(field, selectedSuggestion);
     },
-    [setFieldValue],
+    [setValue],
   );
 
   const searchPerson = async (query: string) => {
@@ -73,17 +74,17 @@ const RelationshipView: React.FC<RelationshipViewProps> = ({
     if (relationship.action === 'ADD') {
       remove(index);
     } else {
-      setFieldValue(`relationships[${index}].action`, 'DELETE');
+      setValue(`relationships[${index}].action`, 'DELETE');
     }
-  }, [relationship, index, remove, setFieldValue]);
+  }, [relationship, index, remove, setValue]);
 
   const restoreRelationship = useCallback(() => {
-    setFieldValue(`relationships[${index}]`, {
+    setValue(`relationships[${index}]`, {
       ...relationship,
       action: undefined,
       relationshipType: relationship.initialrelationshipTypeValue,
     });
-  }, [index, setFieldValue, relationship]);
+  }, [index, setValue, relationship]);
 
   return relationship.action !== 'DELETE' ? (
     <div className={styles.relationship}>
diff --git a/packages/esm-patient-registration-app/src/patient-registration/section/section.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/section/section.component.tsx
index 5b8fec26a..c1cdab540 100644
--- a/packages/esm-patient-registration-app/src/patient-registration/section/section.component.tsx
+++ b/packages/esm-patient-registration-app/src/patient-registration/section/section.component.tsx
@@ -16,6 +16,7 @@ export function Section({ sectionDefinition }: SectionProps) {
     case 'death':
       return <DeathInfoSection fields={sectionDefinition.fields} />;
     case 'relationships':
+      return null;
       return <RelationshipsSection />;
     default: // includes 'contact'
       return <GenericSection sectionDefinition={sectionDefinition} />;
diff --git a/packages/esm-patient-registration-app/src/patient-registration/useZodSchema.ts b/packages/esm-patient-registration-app/src/patient-registration/useZodSchema.ts
new file mode 100644
index 000000000..c6f305e26
--- /dev/null
+++ b/packages/esm-patient-registration-app/src/patient-registration/useZodSchema.ts
@@ -0,0 +1,58 @@
+import { getGlobalStore } from '@openmrs/esm-framework';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { z } from 'zod';
+import type { FormValues } from './patient-registration.types';
+import { useTranslation } from 'react-i18next';
+
+export function getZodSchemaStore() {
+  return getGlobalStore<z.ZodSchema<Partial<FormValues>>>(
+    'patient-registration-zod-schema',
+    z.object({
+      firstName: z.string({
+        required_error: 'First name is required',
+      }),
+      yearsEstimated: z
+        .number({
+          invalid_type_error: 'Years estimated must be a number',
+        })
+        .min(0)
+        .max(140, {
+          message: 'Max error',
+        }),
+    }),
+  );
+}
+
+export function addFieldSchemaToZod(fieldName: string, schema: z.ZodSchema) {
+  const zodSchemaStore = getZodSchemaStore();
+  zodSchemaStore.setState((prev) => ({
+    ...prev,
+    [fieldName]: schema,
+  }));
+}
+
+type T = keyof FormValues;
+
+export default function useZodSchema() {
+  const { t } = useTranslation();
+  const [zodSchema, setZodSchema] = useState<z.ZodSchema>(getZodSchemaStore().getState());
+  const updateZodSchema = useCallback((key: T, value: z.ZodSchema) => {
+    getZodSchemaStore().setState({
+      [key]: value,
+    });
+  }, []);
+  useEffect(() => {
+    const unsubscribe = getZodSchemaStore().subscribe(setZodSchema);
+    return () => {
+      unsubscribe();
+    };
+  }, [setZodSchema]);
+  const results = useMemo(
+    () => ({
+      zodSchema,
+      updateZodSchema,
+    }),
+    [zodSchema, updateZodSchema],
+  );
+  return results;
+}
diff --git a/packages/esm-patient-registration-app/src/root.component.tsx b/packages/esm-patient-registration-app/src/root.component.tsx
index da6f1403a..59e7f96c6 100644
--- a/packages/esm-patient-registration-app/src/root.component.tsx
+++ b/packages/esm-patient-registration-app/src/root.component.tsx
@@ -11,7 +11,7 @@ import {
   fetchPatientIdentifierTypesWithSources,
 } from './offline.resources';
 import { FormManager } from './patient-registration/form-manager';
-import { PatientRegistration } from './patient-registration/patient-registration.component';
+import { PatientRegistration } from './patient-registration/patient-registration-rhf.component';
 import styles from './root.scss';
 
 export default function Root() {