diff --git a/app/src/App/routes/SurgeRoutes.tsx b/app/src/App/routes/SurgeRoutes.tsx
index ae0cadec1..543a38b75 100644
--- a/app/src/App/routes/SurgeRoutes.tsx
+++ b/app/src/App/routes/SurgeRoutes.tsx
@@ -122,12 +122,11 @@ const emergencyResponseUnit = customWrapRoute({
     },
 });
 
-const updateERUReadinessForm = customWrapRoute({
+const eruReadinessForm = customWrapRoute({
     parent: rootLayout,
-    path: 'update-eru-readiness',
+    path: 'eru-readiness',
     component: {
-        // TODO: Add ERUReadinessUpdateForm Route
-        render: () => import('#views/Home'),
+        render: () => import('#views/EruReadinessForm'),
         props: {},
     },
     wrapperComponent: Auth,
@@ -1631,5 +1630,5 @@ export default {
     activeSurgeDeployments,
     rapidResponsePersonnel,
     emergencyResponseUnit,
-    updateERUReadinessForm,
+    eruReadinessForm,
 };
diff --git a/app/src/views/EruReadinessForm/EruInputItem/i18n.json b/app/src/views/EruReadinessForm/EruInputItem/i18n.json
new file mode 100644
index 000000000..661579b87
--- /dev/null
+++ b/app/src/views/EruReadinessForm/EruInputItem/i18n.json
@@ -0,0 +1,11 @@
+{
+    "namespace": "eruReadinessForm",
+    "strings": {
+        "eruEquipmentReadiness": "Equipment Readiness",
+        "eruPeopleReadiness": "People Readiness",
+        "eruFundingReadiness": "Funding Readiness",
+        "eruComments": "Comments",
+        "eruLead": "Confirm that you have capacity to lead this type of ERU",
+        "eruSupport": "Confirm that you have capacity to support this type of ERU"
+    }
+}
diff --git a/app/src/views/EruReadinessForm/EruInputItem/index.tsx b/app/src/views/EruReadinessForm/EruInputItem/index.tsx
new file mode 100644
index 000000000..ce2eea385
--- /dev/null
+++ b/app/src/views/EruReadinessForm/EruInputItem/index.tsx
@@ -0,0 +1,160 @@
+import { useMemo } from 'react';
+import {
+    Checkbox,
+    InputSection,
+    RadioInput,
+    TextArea,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { randomString } from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import { type PartialEruItem } from '../schema';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+
+type ReadinessOption = NonNullable<GlobalEnumsResponse['deployments_eru_readiness_status']>[number];
+
+function readinessKeySelector(option: ReadinessOption) {
+    return option.key;
+}
+
+function readinessLabelSelector(option: ReadinessOption) {
+    return option.value;
+}
+
+const defaultCollectionValue: PartialEruItem = {
+    client_id: randomString(),
+};
+
+interface Props {
+    index: number;
+    value: PartialEruItem;
+    onChange: (value: SetValueArg<PartialEruItem>, index: number) => void;
+    error: ArrayError<PartialEruItem> | undefined;
+}
+
+function EruInputItem(props: Props) {
+    const {
+        index,
+        value,
+        onChange,
+        error: errorFromProps,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const {
+        deployments_eru_type: eruTypeOptions,
+        deployments_eru_readiness_status,
+    } = useGlobalEnums();
+
+    const onFieldChange = useFormObject(
+        index,
+        onChange,
+        defaultCollectionValue,
+    );
+
+    const error = (value && value.client_id && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : undefined;
+
+    const title = useMemo(() => (
+        eruTypeOptions?.find((eruType) => eruType.key === value.type)?.value
+    ), [eruTypeOptions, value.type]);
+
+    return (
+        <InputSection
+            title={title}
+            className={styles.eruInputItem}
+            contentSectionClassName={styles.content}
+        >
+            <InputSection
+                title={strings.eruEquipmentReadiness}
+                className={styles.inputSection}
+            >
+                <RadioInput
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
+                    name="equipment_readiness"
+                    value={value.equipment_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={readinessLabelSelector}
+                    error={error?.equipment_readiness}
+                />
+            </InputSection>
+            <InputSection
+                title={strings.eruPeopleReadiness}
+                className={styles.inputSection}
+            >
+                <RadioInput
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
+                    name="people_readiness"
+                    value={value.people_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={readinessLabelSelector}
+                    error={error?.people_readiness}
+                />
+            </InputSection>
+            <InputSection
+                title={strings.eruFundingReadiness}
+                className={styles.inputSection}
+            >
+                <RadioInput
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
+                    name="funding_readiness"
+                    value={value.funding_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={readinessLabelSelector}
+                    error={error?.funding_readiness}
+                />
+            </InputSection>
+            <InputSection
+                title={strings.eruComments}
+                className={styles.inputSection}
+            >
+                <TextArea
+                    name="comment"
+                    value={value?.comment}
+                    onChange={onFieldChange}
+                    error={error?.comment}
+                />
+                <Checkbox
+                    label={strings.eruLead}
+                    name="has_capacity_to_lead"
+                    value={value?.has_capacity_to_lead}
+                    onChange={onFieldChange}
+                    error={error?.has_capacity_to_lead}
+                />
+                <Checkbox
+                    label={strings.eruSupport}
+                    name="has_capacity_to_support"
+                    value={value?.has_capacity_to_support}
+                    onChange={onFieldChange}
+                    error={error?.has_capacity_to_support}
+                />
+            </InputSection>
+        </InputSection>
+    );
+}
+
+export default EruInputItem;
diff --git a/app/src/views/EruReadinessForm/EruInputItem/styles.module.css b/app/src/views/EruReadinessForm/EruInputItem/styles.module.css
new file mode 100644
index 000000000..ed68ee334
--- /dev/null
+++ b/app/src/views/EruReadinessForm/EruInputItem/styles.module.css
@@ -0,0 +1,25 @@
+.eru-input-item {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+        display: flex;
+        gap: var(--go-ui-spacing-sm);
+        flex-wrap: wrap;
+
+        .input-section {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+
+            .readiness-input {
+                display: flex;
+
+                .radio-list {
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
+        }
+    }
+}
diff --git a/app/src/views/EruReadinessForm/i18n.json b/app/src/views/EruReadinessForm/i18n.json
new file mode 100644
index 000000000..7d783646b
--- /dev/null
+++ b/app/src/views/EruReadinessForm/i18n.json
@@ -0,0 +1,21 @@
+{
+    "namespace": "eruReadinessForm",
+    "strings": {
+        "eruReadinessFormTitle": "Update ERU Readiness Form",
+        "eruReadinessFormHeading": "ERU Deployment Readiness",
+        "eruReadinessFormDescription": "Complete the form with the ERU readiness data of your National Society. In case of any questions, contact: {imContact} or {surgeContact}.",
+        "imContact": "im@ifrc.org",
+        "surgeContact": "surge@ifrc.org",
+        "eruCancelButton": "Cancel",
+        "eruSaveAndCloseButton": "Save and Close",
+        "eruSelectNationalSociety": "National Society",
+        "eruSelectErus": "Select ERU Type(s)",
+        "eruFormSuccessfullyUpdated": "Successfully updated ERU readiness",
+        "eruFormFailedToUpdate": "Failed to update ERU readiness",
+        "eruNoRecord": "No existing record",
+        "eruOwnerFailedToFetch": "Failed to fetch ERU owners!",
+        "eruReadinessFailedToFetch": "Failed to fetch ERU readiness information!",
+        "eruFormSuccessfullyCreated": "Successfully created ERU readiness",
+        "eruFormFailedToCreate": "Failed to create ERU readiness"
+    }
+}
diff --git a/app/src/views/EruReadinessForm/index.tsx b/app/src/views/EruReadinessForm/index.tsx
new file mode 100644
index 000000000..f0e097cae
--- /dev/null
+++ b/app/src/views/EruReadinessForm/index.tsx
@@ -0,0 +1,406 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import {
+    Button,
+    Container,
+    InputSection,
+    MultiSelectInput,
+    SelectInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    injectClientId,
+    resolveToComponent,
+    stringValueSelector,
+} from '@ifrc-go/ui/utils';
+import {
+    isDefined,
+    isNotDefined,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    createSubmitHandler,
+    getErrorObject,
+    useForm,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import Link from '#components/Link';
+import NonFieldError from '#components/NonFieldError';
+import Page from '#components/Page';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import useAlertContext from '#hooks/useAlert';
+import useRouting from '#hooks/useRouting';
+import {
+    type GoApiResponse,
+    useLazyRequest,
+    useRequest,
+} from '#utils/restRequest';
+import { transformObjectError } from '#utils/restRequest/error';
+
+import EruInputItem from './EruInputItem';
+import schema, {
+    type EruReadinessPatchBody,
+    type EruReadinessPostBody,
+    type FormType,
+    type PartialEruItem,
+} from './schema';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+type EruOwners = GoApiResponse<'/api/v2/eru_owner/mini/'>;
+type EruOwnerOption = NonNullable<EruOwners['results']>[number];
+type EruOption = NonNullable<GlobalEnumsResponse['deployments_eru_type']>[number];
+type EruResponse = GoApiResponse<'/api/v2/eru-readiness/{id}/'>;
+
+function eruOwnerKeySelector(option: EruOwnerOption) {
+    return option.id;
+}
+function eruOwnerLabelSelector(option: EruOwnerOption) {
+    return option.national_society_country_details.society_name ?? '';
+}
+
+function eruTypeKeySelector(eruType: EruOption) {
+    return eruType.key;
+}
+
+const defaultFormValues: FormType = {};
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    const { goBack } = useRouting();
+    const alert = useAlertContext();
+    const {
+        deployments_eru_type: eruTypeOptions,
+    } = useGlobalEnums();
+
+    const {
+        value,
+        setFieldValue,
+        validate,
+        setError,
+        setValue,
+        error: formError,
+    } = useForm(
+        schema,
+        { value: defaultFormValues },
+    );
+
+    const error = getErrorObject(formError);
+
+    const [eruReadinessId, setEruReadinessId] = useState<number | undefined>();
+
+    const patchEruFormValues = (response: EruResponse) => {
+        setEruReadinessId(response.id);
+        setValue({
+            eru_owner: response.eru_owner_details.id,
+            eru_types: response.eru_types.map((eruType) => ({
+                ...injectClientId(eruType),
+                id: eruType.id,
+                type: eruType.type,
+                equipment_readiness: eruType.equipment_readiness,
+                people_readiness: eruType.people_readiness,
+                funding_readiness: eruType.funding_readiness,
+                comment: eruType.comment,
+                has_capacity_to_lead: eruType.has_capacity_to_lead,
+                has_capacity_to_support: eruType.has_capacity_to_support,
+                client_id: randomString(),
+            })),
+        });
+    };
+    const {
+        trigger: updateEruReadiness,
+        pending: updateEruReadinessPending,
+    } = useLazyRequest({
+        url: '/api/v2/eru-readiness/{id}/',
+        method: 'PATCH',
+        pathVariables: eruReadinessId ? { id: Number(eruReadinessId) } : undefined,
+        body: (ctx: EruReadinessPatchBody) => ctx,
+        onSuccess: (response) => {
+            patchEruFormValues(response);
+            alert.show(
+                strings.eruFormSuccessfullyUpdated,
+                { variant: 'success' },
+            );
+            goBack();
+        },
+        onFailure: ({
+            value: {
+                messageForNotification,
+                formErrors,
+            },
+            debugMessage,
+        }) => {
+            setError(transformObjectError(formErrors, () => undefined));
+            alert.show(
+                strings.eruFormFailedToUpdate,
+                {
+                    variant: 'danger',
+                    debugMessage,
+                    description: messageForNotification,
+                },
+            );
+        },
+    });
+
+    const {
+        trigger: createEruReadiness,
+        pending: createEruReadinessPending,
+    } = useLazyRequest({
+        url: '/api/v2/eru-readiness/',
+        method: 'POST',
+        body: (ctx: EruReadinessPostBody) => ctx,
+        onSuccess: (response) => {
+            patchEruFormValues(response);
+            alert.show(
+                strings.eruFormSuccessfullyCreated,
+                { variant: 'success' },
+            );
+            goBack();
+        },
+        onFailure: ({
+            value: {
+                messageForNotification,
+                formErrors,
+            },
+            debugMessage,
+        }) => {
+            setError(transformObjectError(formErrors, () => undefined));
+            alert.show(
+                strings.eruFormFailedToCreate,
+                {
+                    variant: 'danger',
+                    debugMessage,
+                    description: messageForNotification,
+                },
+            );
+        },
+    });
+    const {
+        response: eruOwnerResponse,
+        pending: eruOwnerPending,
+    } = useRequest({
+        url: '/api/v2/eru_owner/mini/',
+        preserveResponse: true,
+        onFailure: () => {
+            alert.show(
+                strings.eruOwnerFailedToFetch,
+                {
+                    variant: 'danger',
+                },
+            );
+        },
+    });
+
+    const {
+        trigger: fetchEruReadinessData,
+        pending: fetchEruReadinessDataPending,
+    } = useLazyRequest({
+        url: '/api/v2/eru-readiness/',
+        query: (eruOwnerId: number) => ({ eru_owner: eruOwnerId }),
+        preserveResponse: true,
+        onSuccess: (response) => {
+            const results = response?.results ?? [];
+            if (results?.length > 0) {
+                patchEruFormValues(results[0]);
+            } else {
+                setEruReadinessId(undefined);
+                setValue((oldValues) => ({
+                    ...oldValues,
+                    eru_types: undefined,
+                }));
+            }
+        },
+        onFailure: () => {
+            alert.show(
+                strings.eruReadinessFailedToFetch,
+                {
+                    variant: 'danger',
+                },
+            );
+        },
+    });
+
+    const {
+        setValue: onEruChange,
+    } = useFormArray<'eru_types', PartialEruItem>(
+        'eru_types',
+        setFieldValue,
+    );
+
+    const handleSubmit = useCallback((formValues: FormType) => {
+        if (eruReadinessId) {
+            updateEruReadiness(formValues as EruReadinessPatchBody);
+        } else {
+            createEruReadiness(formValues as EruReadinessPostBody);
+        }
+    }, [eruReadinessId, updateEruReadiness, createEruReadiness]);
+
+    const handleFormSubmit = createSubmitHandler(validate, setError, handleSubmit);
+
+    const pending = updateEruReadinessPending
+        || eruOwnerPending
+        || fetchEruReadinessDataPending
+        || createEruReadinessPending;
+
+    const handleCancel = useCallback(() => {
+        setValue(defaultFormValues);
+        goBack();
+    }, [
+        goBack,
+        setValue,
+    ]);
+
+    const handleSelectEru = useCallback((values: EruOption['key'][] | undefined) => {
+        const addedEruIdList = values?.filter(
+            (eruType) => !value.eru_types?.some(({ type }) => type === eruType),
+        );
+
+        const addedEruList: PartialEruItem[] | undefined = addedEruIdList
+            ?.map((a) => ({
+                client_id: randomString(),
+                type: a,
+            }));
+
+        const remainingEruList = value.eru_types?.filter(
+            (eru) => isDefined(eru.type) && values?.includes(eru.type),
+        );
+
+        setFieldValue([
+            ...(remainingEruList ?? []),
+            ...(addedEruList ?? []),
+        ], 'eru_types' as const);
+    }, [setFieldValue, value]);
+
+    const handleEruOwnerChange = useCallback(
+        (newValue: number | undefined) => {
+            setValue({
+                ...defaultFormValues,
+                eru_owner: newValue,
+            });
+            if (isDefined(newValue)) {
+                fetchEruReadinessData(newValue);
+            }
+        },
+        [fetchEruReadinessData, setValue],
+    );
+
+    const eruTypes = useMemo(() => (
+        value.eru_types?.map((eruType) => eruType.type).filter(isDefined)
+    ), [value.eru_types]);
+
+    return (
+        <Page
+            title={strings.eruReadinessFormTitle}
+            heading={strings.eruReadinessFormHeading}
+            description={resolveToComponent(
+                strings.eruReadinessFormDescription,
+                {
+                    imContact: (
+                        <Link
+                            href="mailto:im@ifrc.org"
+                            external
+                            variant="tertiary"
+                        >
+                            {strings.imContact}
+                        </Link>
+                    ),
+                    surgeContact: (
+                        <Link
+                            href="mailto:surge@ifrc.org"
+                            external
+                            variant="tertiary"
+                        >
+                            {strings.imContact}
+                        </Link>
+                    ),
+                },
+            )}
+            withBackgroundColorInMainSection
+            mainSectionClassName={styles.mainSection}
+            actions={(
+                <>
+                    <Button
+                        name={undefined}
+                        onClick={handleCancel}
+                        variant="secondary"
+                    >
+                        {strings.eruCancelButton}
+                    </Button>
+                    <Button
+                        name={undefined}
+                        onClick={handleFormSubmit}
+                        variant="primary"
+                    >
+                        {strings.eruSaveAndCloseButton}
+                    </Button>
+                </>
+            )}
+        >
+            <NonFieldError
+                error={formError}
+                withFallbackError
+            />
+            <Container
+                withFooterBorder
+                contentViewType="vertical"
+            >
+                <InputSection
+                    title={strings.eruSelectNationalSociety}
+                    withAsteriskOnTitle
+                >
+                    <SelectInput
+                        name="eru_owner"
+                        options={eruOwnerResponse?.results}
+                        onChange={handleEruOwnerChange}
+                        value={value.eru_owner}
+                        keySelector={eruOwnerKeySelector}
+                        labelSelector={eruOwnerLabelSelector}
+                        error={error?.eru_owner}
+                        required
+                        disabled={pending}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.eruSelectErus}
+                >
+                    <MultiSelectInput
+                        name="eru_types"
+                        options={eruTypeOptions}
+                        value={eruTypes}
+                        keySelector={eruTypeKeySelector}
+                        labelSelector={stringValueSelector}
+                        onChange={handleSelectEru}
+                        required
+                        disabled={pending || isNotDefined(value.eru_owner)}
+                    />
+                </InputSection>
+            </Container>
+            <Container
+                contentViewType="vertical"
+                pending={fetchEruReadinessDataPending}
+            >
+                <NonFieldError error={getErrorObject(error?.eru_types)} />
+                {value.eru_types?.map((eru, index) => (
+                    <EruInputItem
+                        key={eru.client_id}
+                        index={index}
+                        value={eru}
+                        onChange={onEruChange}
+                        error={getErrorObject(error?.eru_types)}
+                    />
+                ))}
+            </Container>
+        </Page>
+    );
+}
+
+Component.displayName = 'EruReadinessForm';
diff --git a/app/src/views/EruReadinessForm/schema.ts b/app/src/views/EruReadinessForm/schema.ts
new file mode 100644
index 000000000..d0a5c2064
--- /dev/null
+++ b/app/src/views/EruReadinessForm/schema.ts
@@ -0,0 +1,62 @@
+import { type DeepReplace } from '@ifrc-go/ui/utils';
+import {
+    type ArraySchema,
+    type ObjectSchema,
+    type PartialForm,
+    requiredListCondition,
+    undefinedValue,
+} from '@togglecorp/toggle-form';
+
+import { type GoApiBody } from '#utils/restRequest';
+
+export type EruReadinessPatchBody = GoApiBody<'/api/v2/eru-readiness/{id}/', 'PATCH'>;
+export type EruReadinessPostBody = GoApiBody<'/api/v2/eru-readiness/', 'POST'>;
+type RawEruItem = NonNullable<EruReadinessPatchBody['eru_types']>[number];
+type EruItem = RawEruItem & { client_id: string }
+
+type EruReadinessFormFields = DeepReplace<
+    EruReadinessPatchBody,
+    RawEruItem,
+    EruItem
+>;
+
+export type FormType = PartialForm<EruReadinessFormFields, 'client_id'>;
+
+export type PartialEruItem = NonNullable<FormType['eru_types']>[number];
+
+type FormSchema = ObjectSchema<FormType>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>;
+
+type EruItemSchema = ObjectSchema<PartialForm<EruItem, 'client_id'>, FormType>;
+type EruItemSchemaFields = ReturnType<EruItemSchema['fields']>;
+type EruItemListSchema = ArraySchema<PartialForm<EruItem, 'client_id'>, FormType>;
+type EruItemListMemberSchema = ReturnType<EruItemListSchema['member']>;
+
+const schema: FormSchema = {
+    fields: (): FormSchemaFields => ({
+        eru_owner: {
+            required: true,
+        },
+        eru_types: {
+            required: true,
+            requiredValidation: requiredListCondition,
+            defaultValue: [],
+            keySelector: (col) => col.client_id,
+            member: (): EruItemListMemberSchema => ({
+                fields: (): EruItemSchemaFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    type: { required: true },
+                    equipment_readiness: { required: true },
+                    people_readiness: { required: true },
+                    funding_readiness: { required: true },
+                    comment: {},
+                    has_capacity_to_lead: { defaultValue: false },
+                    has_capacity_to_support: { defaultValue: false },
+                }),
+            }),
+        },
+    }),
+};
+
+export default schema;
diff --git a/app/src/views/EruReadinessForm/styles.module.css b/app/src/views/EruReadinessForm/styles.module.css
new file mode 100644
index 000000000..a757a61a5
--- /dev/null
+++ b/app/src/views/EruReadinessForm/styles.module.css
@@ -0,0 +1,6 @@
+.main-section {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: var(--go-ui-spacing-sm);
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json
new file mode 100644
index 000000000..e2c805486
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "surgeOverview",
+    "strings": {
+        "emergencyResponseUnitOwnerCardLastUpdated": "Last updated",
+        "emergencyResponseUnitOwnerCardReady": "{count} Ready ERUs",
+        "emergencyResponseUnitOwnerCardDeployed": "{count} Deployed ERUs"
+    }
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
new file mode 100644
index 000000000..967703d37
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/index.tsx
@@ -0,0 +1,208 @@
+import { CheckboxCircleLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    Modal,
+    TextOutput,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import { _cs } from '@togglecorp/fujs';
+
+import { type GoApiResponse } from '#utils/restRequest';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+function getReadinessColor(rank: number | undefined) {
+    if (rank === 1) return styles.greenIcon;
+    if (rank === 2) return styles.yellowIcon;
+    if (rank === 3) return styles.redIcon;
+    return styles.grayIcon;
+}
+
+type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
+
+export type ReadinessList = Array<NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_types'][0] & {
+    eruOwner: NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['eru_owner_details'];
+    updatedAt: NonNullable<NonNullable<GetEruReadinessResponse['results']>[0]>['updated_at'];
+}>
+
+interface Props {
+    className?: string;
+    typeDisplay: string;
+    nationalSocieties: string;
+    fundingReadiness: number | undefined;
+    equipmentReadiness: number | undefined;
+    peopleReadiness: number | undefined;
+    updatedAt: number | undefined;
+    readinessList: ReadinessList;
+}
+
+function EmergencyResponseUnitTypeCard(props: Props) {
+    const {
+        className,
+        typeDisplay,
+        nationalSocieties,
+        fundingReadiness,
+        equipmentReadiness,
+        peopleReadiness,
+        updatedAt,
+        readinessList,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [
+        showReadinessInfo,
+        {
+            setTrue: setShowReadinessInfoTrue,
+            setFalse: setShowReadinessInfoFalse,
+        },
+    ] = useBooleanState(false);
+
+    return (
+        <Container
+            className={_cs(styles.emergencyResponseTypeCard, className)}
+            withInternalPadding
+            withHeaderBorder
+            heading={typeDisplay}
+            headerDescription={(
+                <TextOutput
+                    className={styles.lastUpdated}
+                    label={strings.emergencyResponseUnitOwnerCardLastUpdated}
+                    value={updatedAt}
+                    valueType="date"
+                />
+            )}
+            withFooterBorder
+            footerActions={(
+                <Button
+                    name={undefined}
+                    onClick={setShowReadinessInfoTrue}
+                    variant="tertiary"
+                    title="See readiness info"
+                >
+                    See readiness info
+                </Button>
+            )}
+            childrenContainerClassName={styles.content}
+        >
+            <Container
+                footerContentClassName={styles.readinessContent}
+                withFooterBorder
+                footerContent={(
+                    <>
+                        <TextOutput
+                            className={styles.readiness}
+                            label="Equipment Readiness"
+                            value={(
+                                <CheckboxCircleLineIcon
+                                    className={getReadinessColor(equipmentReadiness)}
+                                />
+                            )}
+                            valueClassName={styles.icon}
+                            withoutLabelColon
+                        />
+                        <div className={styles.separatorLeft} />
+                        <TextOutput
+                            className={styles.readiness}
+                            label="People Readiness"
+                            value={(
+                                <CheckboxCircleLineIcon
+                                    className={getReadinessColor(peopleReadiness)}
+                                />
+                            )}
+                            valueClassName={styles.icon}
+                            withoutLabelColon
+                        />
+                        <div className={styles.separatorLeft} />
+                        <TextOutput
+                            className={styles.readiness}
+                            label="Funding Readiness"
+                            value={(
+                                <CheckboxCircleLineIcon
+                                    className={getReadinessColor(fundingReadiness)}
+                                />
+                            )}
+                            valueClassName={styles.icon}
+                            withoutLabelColon
+                        />
+                    </>
+                )}
+            >
+                <TextOutput
+                    className={styles.eruOwners}
+                    label="National Society"
+                    value={nationalSocieties}
+                    strongValue
+                    withoutLabelColon
+                />
+            </Container>
+            {showReadinessInfo && (
+                <Modal
+                    className={styles.modal}
+                    heading={typeDisplay}
+                    headerDescription="Readiness Information by National Society"
+                    onClose={setShowReadinessInfoFalse}
+                    withHeaderBorder
+                    size="md"
+                    contentViewType="vertical"
+                    spacing="comfortable"
+                >
+                    {readinessList?.map((readiness) => (
+                        <Container
+                            key={readiness.id}
+                            heading={
+                                readiness.eruOwner.national_society_country_details.society_name
+                            }
+                            headingLevel={5}
+                            withHeaderBorder
+                            childrenContainerClassName={styles.readinessContainer}
+                        >
+                            <TextOutput
+                                className={styles.readiness}
+                                label="Equipment Readiness"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(readiness.equipment_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                            <div className={styles.separatorLeft} />
+                            <TextOutput
+                                className={styles.readiness}
+                                label="People Readiness"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(readiness.people_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                            <div className={styles.separatorLeft} />
+                            <TextOutput
+                                className={styles.readiness}
+                                label="Funding Readiness"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(readiness.funding_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                        </Container>
+                    ))}
+                </Modal>
+            )}
+        </Container>
+    );
+}
+
+export default EmergencyResponseUnitTypeCard;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/styles.module.css b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/styles.module.css
new file mode 100644
index 000000000..62363f147
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/EmergencyResponseUnitCard/styles.module.css
@@ -0,0 +1,71 @@
+.emergency-response-type-card {
+    border-radius: var(--go-ui-border-radius-lg);
+    box-shadow: var(--go-ui-box-shadow-md);
+
+    .last-updated {
+        color: var(--go-ui-color-text-light);
+    }
+
+
+    .content {
+        display: flex;
+        flex-grow: 1;
+    }
+
+    .readiness-content {
+        display: flex;
+        flex-grow: 1;
+        padding-top: var(--go-ui-spacing-sm);
+        gap: var(--go-ui-spacing-md);
+
+        .readiness {
+            flex: 1 0 0;
+            flex-direction: column-reverse;
+
+            .icon {
+                color: var(--go-ui-color-primary-gray);
+                font-size: var(--go-ui-height-compact-status-icon);
+            }
+        }
+    }
+}
+
+.modal {
+    .readiness-container {
+        display: flex;
+        border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+        padding-bottom: var(--go-ui-spacing-md);
+        gap: var(--go-ui-spacing-md);
+
+        .readiness {
+            flex: 1 0 0;
+            flex-direction: column-reverse;
+
+            .icon {
+                color: var(--go-ui-color-primary-gray);
+                font-size: var(--go-ui-height-compact-status-icon);
+            }
+        }
+    }
+}
+
+.separator-left {
+    flex-shrink: 0;
+    border-left: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+.green-icon {
+    color: var(--go-ui-color-green);
+}
+
+.yellow-icon {
+    color: var(--go-ui-color-semantic-yellow);
+}
+
+.red-icon {
+    color: var(--go-ui-color-primary-red);
+}
+
+.gray-icon {
+    color: var(--go-ui-color-primary-gray);
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/i18n.json b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/i18n.json
new file mode 100644
index 000000000..e2c805486
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "surgeOverview",
+    "strings": {
+        "emergencyResponseUnitOwnerCardLastUpdated": "Last updated",
+        "emergencyResponseUnitOwnerCardReady": "{count} Ready ERUs",
+        "emergencyResponseUnitOwnerCardDeployed": "{count} Deployed ERUs"
+    }
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
new file mode 100644
index 000000000..215b5b5b4
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/index.tsx
@@ -0,0 +1,149 @@
+import { CheckboxCircleLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    Modal,
+    TextOutput,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import { _cs } from '@togglecorp/fujs';
+
+import { joinStrings } from '#utils/common';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GetEruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
+type EruReadinessListItem = NonNullable<GetEruReadinessResponse['results']>[number];
+
+function getReadinessColor(rank: number | undefined) {
+    if (rank === 1) return styles.greenIcon;
+    if (rank === 2) return styles.yellowIcon;
+    if (rank === 3) return styles.redIcon;
+    return styles.grayIcon;
+}
+
+interface Props {
+    className?: string;
+    eruData: EruReadinessListItem;
+}
+
+function NationalSocietyTypeCard(props: Props) {
+    const {
+        className,
+        eruData,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const [
+        showReadinessInfo,
+        {
+            setTrue: setShowReadinessInfoTrue,
+            setFalse: setShowReadinessInfoFalse,
+        },
+    ] = useBooleanState(false);
+
+    const eruTypes = joinStrings(eruData.eru_types.map((eruType) => eruType.type_display));
+
+    return (
+        <Container
+            className={_cs(styles.nationalSocietyTypeCard, className)}
+            withInternalPadding
+            withHeaderBorder
+            withFooterBorder
+            heading={eruData.eru_owner_details.national_society_country_details.society_name}
+            headerDescription={(
+                <TextOutput
+                    className={styles.lastUpdated}
+                    label={strings.emergencyResponseUnitOwnerCardLastUpdated}
+                    value={eruData.updated_at}
+                    valueType="date"
+                />
+            )}
+            footerActions={(
+                <Button
+                    name={undefined}
+                    onClick={setShowReadinessInfoTrue}
+                    variant="tertiary"
+                    title="Show Readiness Information"
+                >
+                    Show Readiness Information
+                </Button>
+            )}
+        >
+            <TextOutput
+                label="ERU Type(s)"
+                value={eruTypes}
+                strongValue
+                withoutLabelColon
+            />
+            {showReadinessInfo && (
+                <Modal
+                    className={styles.modal}
+                    heading={
+                        eruData.eru_owner_details.national_society_country_details.society_name
+                    }
+                    headerDescription="Readiness Information by ERU Type"
+                    onClose={setShowReadinessInfoFalse}
+                    withHeaderBorder
+                    size="md"
+                    contentViewType="vertical"
+                    spacing="comfortable"
+                >
+                    {eruData.eru_types.map((eruType) => (
+                        <Container
+                            key={eruType.id}
+                            heading={eruType.type_display}
+                            headingLevel={5}
+                            withHeaderBorder
+                            childrenContainerClassName={styles.readinessContainer}
+                        >
+                            <TextOutput
+                                className={styles.readiness}
+                                label="Equipment Readiness"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(eruType.equipment_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                            <div className={styles.separatorLeft} />
+                            <TextOutput
+                                className={styles.readiness}
+                                label="People Readiness"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(eruType.people_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                            <div className={styles.separatorLeft} />
+                            <TextOutput
+                                className={styles.readiness}
+                                label="Funding EruType"
+                                value={(
+                                    <CheckboxCircleLineIcon
+                                        className={getReadinessColor(eruType.funding_readiness)}
+                                    />
+                                )}
+                                valueClassName={styles.icon}
+                                withoutLabelColon
+                            />
+                        </Container>
+                    ))}
+                </Modal>
+            )}
+        </Container>
+    );
+}
+
+export default NationalSocietyTypeCard;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/styles.module.css b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/styles.module.css
new file mode 100644
index 000000000..5220b086e
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/NationalSocietyCard/styles.module.css
@@ -0,0 +1,49 @@
+.national-society-type-card {
+    border-radius: var(--go-ui-border-radius-lg);
+    box-shadow: var(--go-ui-box-shadow-md);
+
+    .last-updated {
+        color: var(--go-ui-color-text-light);
+    }
+}
+
+.modal {
+    .separator-left {
+        flex-shrink: 0;
+        border-left: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+    }
+
+    .readiness-container {
+        display: flex;
+        border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+        padding-bottom: var(--go-ui-spacing-md);
+        gap: var(--go-ui-spacing-md);
+
+        .readiness {
+            display: flex;
+            flex-direction: column-reverse;
+            flex-grow: 1;
+
+            .icon {
+                color: var(--go-ui-color-primary-gray);
+                font-size: var(--go-ui-height-compact-status-icon);
+            }
+        }
+    }
+}
+
+.green-icon {
+    color: var(--go-ui-color-green);
+}
+
+.yellow-icon {
+    color: var(--go-ui-color-semantic-yellow);
+}
+
+.red-icon {
+    color: var(--go-ui-color-primary-red);
+}
+
+.gray-icon {
+    color: var(--go-ui-color-primary-gray);
+}
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx
new file mode 100644
index 000000000..5a780ddcf
--- /dev/null
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/index.tsx
@@ -0,0 +1,217 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import {
+    Container,
+    Grid,
+    SelectInput,
+    Tab,
+    TabList,
+    TabPanel,
+    Tabs,
+} from '@ifrc-go/ui';
+import {
+    maxSafe,
+    minSafe,
+    numericIdSelector,
+    stringKeySelector,
+} from '@ifrc-go/ui/utils';
+import {
+    isDefined,
+    listToGroupList,
+    mapToList,
+} from '@togglecorp/fujs';
+
+import Link from '#components/Link';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import useFilterState from '#hooks/useFilterState';
+import { joinStrings } from '#utils/common';
+import {
+    type GoApiResponse,
+    useRequest,
+} from '#utils/restRequest';
+
+import EmergencyResponseUnitCard, { type ReadinessList } from './EmergencyResponseUnitCard';
+import NationalSocietyCard from './NationalSocietyCard';
+
+type EruReadinessResponse = GoApiResponse<'/api/v2/eru-readiness/'>;
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+type EruOwners = GoApiResponse<'/api/v2/eru_owner/mini/'>;
+type EruOwnerOption = NonNullable<EruOwners['results']>[number];
+type EruTypeOption = NonNullable<GlobalEnumsResponse['deployments_eru_type']>[number];
+type EruReadiness = NonNullable<EruReadinessResponse['results']>[0];
+
+function eruOwnerKeySelector(option: EruOwnerOption) {
+    return option.id;
+}
+function eruOwnerLabelSelector(option: EruOwnerOption) {
+    return option.national_society_country_details.society_name ?? '';
+}
+const emergencyResponseUnitTypeKeySelector = (item: EruTypeOption) => item.key;
+const emergencyResponseUnitTypeLabelSelector = (item: EruTypeOption) => item.value ?? '?';
+
+function EmergencyResponseUnitReadiness() {
+    const {
+        rawFilter,
+        filtered,
+        filter,
+        setFilterField,
+    } = useFilterState<{
+        selectEruTypes? : EruTypeOption['key'],
+        selectEruOwner? : EruOwnerOption['id'],
+    }>({
+        filter: {},
+    });
+
+    const {
+        error: eruOwnersError,
+        response: eruOwnersResponse,
+        pending: eruOwnersPending,
+    } = useRequest({
+        url: '/api/v2/eru_owner/mini/',
+        preserveResponse: true,
+    });
+
+    const {
+        error: eruReadinessError,
+        response: eruReadinessResponse,
+        pending: eruReadinessPending,
+    } = useRequest({
+        url: '/api/v2/eru-readiness/',
+        preserveResponse: true,
+        query: {
+            eru_type: filter.selectEruTypes,
+            eru_owner: filter.selectEruOwner,
+        },
+    });
+
+    const {
+        deployments_eru_type: deploymentEruType,
+    } = useGlobalEnums();
+
+    const [activeTab, setActiveTab] = useState<'eruType' | 'nationalSociety'>('eruType');
+
+    const groupedByEruType = useMemo(() => {
+        const eruData = eruReadinessResponse?.results?.flatMap((readiness) => (
+            [...(readiness.eru_types.map((eruType) => (
+                {
+                    ...eruType,
+                    eruOwner: readiness.eru_owner_details,
+                    updatedAt: readiness.updated_at,
+                }
+            )))]
+        ));
+        return (
+            mapToList(
+                listToGroupList(
+                    eruData,
+                    (eru) => eru.type,
+                ),
+                (readinessList, eruType) => ({ key: eruType, readinessList }),
+            )
+        );
+    }, [eruReadinessResponse?.results]);
+
+    const eruRendererParams = useCallback((_: string, item: {
+        key: string;
+        readinessList: ReadinessList;
+    }) => ({
+        typeDisplay: item.readinessList[0].type_display,
+        nationalSocieties: joinStrings(
+            item.readinessList.map((v) => (
+                v.eruOwner.national_society_country_details.society_name
+            )).filter(isDefined),
+        ),
+        fundingReadiness: minSafe(item.readinessList.map((v) => v.funding_readiness)),
+        equipmentReadiness: minSafe(item.readinessList.map((v) => v.equipment_readiness)),
+        peopleReadiness: minSafe(item.readinessList.map((v) => v.people_readiness)),
+        updatedAt: maxSafe(item.readinessList.map((v) => (new Date(v.updatedAt).getTime()))),
+        readinessList: item.readinessList,
+    }), []);
+
+    const nsRendererParams = useCallback((_: number, item: EruReadiness) => ({
+        eruData: item,
+    }), []);
+
+    return (
+        <Tabs
+            onChange={setActiveTab}
+            value={activeTab}
+            variant="tertiary"
+        >
+            <Container
+                heading={`ERU Capacity and Readiness (${eruReadinessResponse?.count})`}
+                withHeaderBorder
+                actions={(
+                    <Link
+                        to="eruReadinessForm"
+                        variant="primary"
+                    >
+                        Update ERU Readiness
+                    </Link>
+                )}
+                contentViewType="vertical"
+                filters={(
+                    <>
+
+                        <SelectInput
+                            placeholder="National Society"
+                            name="selectEruOwner"
+                            options={eruOwnersResponse?.results}
+                            onChange={setFilterField}
+                            value={rawFilter.selectEruOwner}
+                            keySelector={eruOwnerKeySelector}
+                            labelSelector={eruOwnerLabelSelector}
+                            error={isDefined(eruOwnersError)}
+                            disabled={eruOwnersPending}
+                        />
+                        <SelectInput
+                            placeholder="ERU Type"
+                            name="selectEruTypes"
+                            value={rawFilter.selectEruTypes}
+                            onChange={setFilterField}
+                            keySelector={emergencyResponseUnitTypeKeySelector}
+                            labelSelector={emergencyResponseUnitTypeLabelSelector}
+                            options={deploymentEruType}
+                        />
+                    </>
+                )}
+                filterActions={(
+                    <TabList>
+                        <Tab name="eruType">ERU Type</Tab>
+                        <Tab name="nationalSociety">National Society</Tab>
+                    </TabList>
+                )}
+            >
+                <TabPanel name="eruType">
+                    <Grid
+                        numPreferredColumns={3}
+                        data={groupedByEruType}
+                        pending={eruReadinessPending}
+                        errored={isDefined(eruReadinessError)}
+                        filtered={filtered}
+                        keySelector={stringKeySelector}
+                        renderer={EmergencyResponseUnitCard}
+                        rendererParams={eruRendererParams}
+                    />
+                </TabPanel>
+                <TabPanel name="nationalSociety">
+                    <Grid
+                        numPreferredColumns={3}
+                        data={eruReadinessResponse?.results}
+                        pending={eruReadinessPending}
+                        errored={isDefined(eruReadinessError)}
+                        filtered={filtered}
+                        keySelector={numericIdSelector}
+                        renderer={NationalSocietyCard}
+                        rendererParams={nsRendererParams}
+                    />
+                </TabPanel>
+            </Container>
+        </Tabs>
+    );
+}
+
+export default EmergencyResponseUnitReadiness;
diff --git a/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx b/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
index 4356c1a9f..060a146bd 100644
--- a/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
+++ b/app/src/views/SurgeOverview/EmergencyResponseUnit/index.tsx
@@ -1,15 +1,18 @@
-import Link from '#components/Link';
+import { Container } from '@ifrc-go/ui';
 
+import OngoingERUDeployments from '../../ActiveSurgeDeployments/OngoingERUDeployments';
+import EmergencyResponseUnitReadiness from './EmergencyResponseUnitReadiness';
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     return (
-        <Link
-            to="updateERUReadinessForm"
-            variant="primary"
+        <Container
+            contentViewType="vertical"
+            spacing="loose"
         >
-            Update ERU Readiness
-        </Link>
+            <EmergencyResponseUnitReadiness />
+            <OngoingERUDeployments />
+        </Container>
     );
 }