diff --git a/app/package.json b/app/package.json
index ea3ee7d2a9..fd752598d3 100644
--- a/app/package.json
+++ b/app/package.json
@@ -48,6 +48,7 @@
         "@togglecorp/toggle-request": "^1.0.0-beta.3",
         "@turf/bbox": "^6.5.0",
         "@turf/buffer": "^6.5.0",
+        "diff": "^8.0.2",
         "exceljs": "^4.3.0",
         "file-saver": "^2.0.5",
         "html-to-image": "^1.11.11",
diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index b25ad826a3..ec94e3d3b5 100644
--- a/app/src/App/routes/index.tsx
+++ b/app/src/App/routes/index.tsx
@@ -319,6 +319,50 @@ const emergencyAdditionalInfo = customWrapRoute({
     },
 });
 
+type DefaultDrefDetailChild = 'dref-detail';
+const drefProcessLayout = customWrapRoute({
+    parent: rootLayout,
+    path: 'dref-process',
+    forwardPath: 'dref-detail' satisfies DefaultDrefDetailChild,
+    component: {
+        render: () => import('#views/DrefProcess'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'DREF Process',
+        visibility: 'anything',
+    },
+});
+
+const drefDetail = customWrapRoute({
+    parent: drefProcessLayout,
+    path: 'dref-detail' satisfies DefaultDrefDetailChild,
+    component: {
+        render: () => import('#views/DrefDetail'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Response and Imminent DREF',
+        visibility: 'anything',
+    },
+});
+
+const eapDetail = customWrapRoute({
+    parent: drefProcessLayout,
+    path: 'eap-detail',
+    component: {
+        render: () => import('#views/EarlyActionProtocols'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Early Action Protocols',
+        visibility: 'anything',
+    },
+});
+
 type DefaultPreparednessChild = 'global-summary';
 const preparednessLayout = customWrapRoute({
     parent: rootLayout,
@@ -715,6 +759,49 @@ const accountMyFormsThreeW = customWrapRoute({
     },
 });
 
+const accountMyFormsEap = customWrapRoute({
+    parent: accountMyFormsLayout,
+    path: 'eap-applications',
+    component: {
+        render: () => import('#views/AccountMyFormsEap'),
+        props: {},
+    },
+    context: {
+        title: 'Account - EAP Applications',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const fullEapForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/full',
+    component: {
+        render: () => import('#views/EapFullForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Full Forms',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const simplifiedEapForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/simplified',
+    component: {
+        render: () => import('#views/SimplifiedEapForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Simplified EAP Form',
+        visibility: 'is-authenticated',
+    },
+});
+
 const accountNotifications = customWrapRoute({
     parent: accountLayout,
     path: 'notifications',
@@ -1094,6 +1181,65 @@ const fieldReportDetails = customWrapRoute({
     },
 });
 
+type DefaultEapRegistrationChild = 'new';
+const eapRegistrationLayout = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap-registration',
+    forwardPath: 'new' satisfies DefaultEapRegistrationChild,
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Process',
+        visibility: 'is-authenticated',
+    },
+});
+
+const newEapDevelopmentRegistration = customWrapRoute({
+    parent: eapRegistrationLayout,
+    path: 'new' satisfies DefaultEapRegistrationChild,
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'New EAP Development Registration',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const eapDevelopmentRegistrationForm = customWrapRoute({
+    parent: eapRegistrationLayout,
+    path: ':eapId/',
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'View EAP',
+        visibility: 'is-authenticated',
+    },
+});
+
+const simplifiedEapExport = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap/:eapId/export',
+    component: {
+        render: () => import('#views/SimplifiedEapExport'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Simplified EAP Export',
+        visibility: 'is-authenticated',
+    },
+});
+
 type DefaultPerProcessChild = 'new';
 const perProcessLayout = customWrapRoute({
     parent: rootLayout,
@@ -1317,6 +1463,7 @@ const wrappedRoutes = {
     accountMyFormsPer,
     accountMyFormsDref,
     accountMyFormsThreeW,
+    accountMyFormsEap,
     resources,
     search,
     allThreeWProject,
@@ -1353,6 +1500,9 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
+    newEapDevelopmentRegistration,
+    fullEapForm,
+    simplifiedEapForm,
     ...regionRoutes,
     ...countryRoutes,
     ...surgeRoutes,
@@ -1363,6 +1513,12 @@ const wrappedRoutes = {
     // Redirects
     preparednessOperationalLearning,
     obsoleteFieldReportDetails,
+    drefDetail,
+    eapDetail,
+    drefProcessLayout,
+    eapRegistrationLayout,
+    eapDevelopmentRegistrationForm,
+    simplifiedEapExport,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));
diff --git a/app/src/components/Navbar/i18n.json b/app/src/components/Navbar/i18n.json
index 0132def3ce..e0ed399edb 100644
--- a/app/src/components/Navbar/i18n.json
+++ b/app/src/components/Navbar/i18n.json
@@ -40,6 +40,7 @@
         "userMenuDrefProcessDescription":"Disaster Response Emergency Fund (DREF) is the quickest way of getting funding directly to local humanitarian actors. Use one of the links below to submit a DREF Application or an update.",
         "userMenuCreateDrefApplication":"Create DREF Application",
         "myDrefApplications": "My DREF Applications",
+        "earlyActionProtocols": "Early Action Protocols (EAP)",
         "userMenuSurge":"The section displays the summary of deployments within current and ongoing emergencies. Login to see available details",
         "userMenuSurgeGlobalOverview":"Surge Global Overview",
         "userMenuOperationalToolbox":"Operational Toolbox",
diff --git a/app/src/components/Navbar/index.tsx b/app/src/components/Navbar/index.tsx
index be067b2ef4..0786bdea76 100644
--- a/app/src/components/Navbar/index.tsx
+++ b/app/src/components/Navbar/index.tsx
@@ -370,12 +370,20 @@ function Navbar(props: Props) {
                                         </Description>
                                         <DropdownMenuItem
                                             type="link"
-                                            to="accountMyFormsDref"
+                                            to="drefDetail"
                                             styleVariant="action"
                                             withoutFullWidth
                                         >
                                             {strings.myDrefApplications}
                                         </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            type="link"
+                                            to="eapDetail"
+                                            styleVariant="action"
+                                            withoutFullWidth
+                                        >
+                                            {strings.earlyActionProtocols}
+                                        </DropdownMenuItem>
                                         <DropdownMenuItem
                                             type="link"
                                             to="newDrefApplicationForm"
diff --git a/app/src/components/PerExportModal/index.tsx b/app/src/components/PerExportModal/index.tsx
index 732fbdb2bb..0602d3938b 100644
--- a/app/src/components/PerExportModal/index.tsx
+++ b/app/src/components/PerExportModal/index.tsx
@@ -14,11 +14,15 @@ import {
 
 import Link from '#components/Link';
 import { type components } from '#generated/types';
-import { useRequest } from '#utils/restRequest';
+import {
+    type GoApiBody,
+    useRequest,
+} from '#utils/restRequest';
 
 import i18n from './i18n.json';
 
 type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum'];
+type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>;
 
 const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum;
 const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum;
@@ -45,8 +49,10 @@ function PerExportModal(props: Props) {
             export_id: Number(perId),
             export_type: 'per' as const,
             per_country: Number(countryId),
-            is_pga: false,
-        }),
+            is_pga: undefined,
+            version: undefined,
+            diff: undefined,
+        } satisfies ExportBody),
         [perId, countryId],
     );
 
diff --git a/app/src/components/domain/Admin2Input/index.tsx b/app/src/components/domain/Admin2Input/index.tsx
new file mode 100644
index 0000000000..a5be123493
--- /dev/null
+++ b/app/src/components/domain/Admin2Input/index.tsx
@@ -0,0 +1,337 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import { CloseLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    ButtonLayout,
+    Container,
+    InputError,
+    ListView,
+    Modal,
+} from '@ifrc-go/ui';
+import { useBooleanState } from '@ifrc-go/ui/hooks';
+import { isNotDefined } from '@togglecorp/fujs';
+import {
+    MapBounds,
+    MapLayer,
+    MapSource,
+} from '@togglecorp/re-map';
+import turfBbox from '@turf/bbox';
+import {
+    type FillLayer,
+    type LineLayer,
+    type MapboxGeoJSONFeature,
+    type SymbolLayer,
+} from 'mapbox-gl';
+
+import GoMapContainer from '#components/GoMapContainer';
+import useCountry from '#hooks/domain/useCountry';
+import {
+    COLOR_BLACK,
+    COLOR_DARK_GREY,
+    COLOR_LIGHT_GREY,
+    COLOR_PRIMARY_RED,
+    COLOR_TEXT,
+    COLOR_TEXT_ON_DARK,
+    DEFAULT_MAP_PADDING,
+    DURATION_MAP_ZOOM,
+} from '#utils/constants';
+
+import BaseMap from '../BaseMap';
+
+interface Props<NAME> {
+    name: NAME;
+    value: number[] | null | undefined;
+    onChange: (newValue: number[] | undefined, name: NAME) => void;
+    countryId: number;
+    error?: React.ReactNode;
+}
+
+function Admin2Input<const NAME>(props: Props<NAME>) {
+    const {
+        name,
+        value,
+        onChange,
+        countryId,
+        error,
+    } = props;
+
+    const countryDetails = useCountry({ id: countryId });
+    const iso3 = countryDetails?.iso3;
+
+    const bounds = useMemo(() => {
+        if (!countryDetails) {
+            return undefined;
+        }
+
+        return turfBbox(countryDetails.bbox);
+    }, [
+        countryDetails,
+    ]);
+
+    const adminOneLabelLayerOptions: Omit<SymbolLayer, 'id'> = useMemo(() => ({
+        type: 'symbol',
+        paint: {
+            'text-opacity': [
+                'match',
+                ['get', 'country_id'],
+                countryId,
+                1,
+                0,
+            ],
+        },
+        layout: {
+            'text-offset': [
+                0, 1,
+            ],
+            visibility: 'visible',
+        },
+    }), [countryId]);
+
+    const adminTwoLineLayerOptions: Omit<LineLayer, 'id'> | undefined = useMemo(() => {
+        if (!iso3) {
+            return undefined;
+        }
+
+        return {
+            type: 'line',
+            'source-layer': `go-admin2-${iso3}-staging`,
+            paint: {
+                'line-color': COLOR_BLACK,
+                'line-opacity': 1,
+            },
+            layout: {
+                visibility: 'visible',
+            },
+        };
+    }, [iso3]);
+
+    const adminTwoFillLayerOptions = useMemo((): Omit<FillLayer, 'id'> | undefined => {
+        if (!iso3) {
+            return undefined;
+        }
+        const defaultColor: NonNullable<FillLayer['paint']>['fill-color'] = [
+            'case',
+            ['boolean', ['feature-state', 'hovered'], false],
+            COLOR_DARK_GREY,
+            COLOR_LIGHT_GREY,
+        ];
+        const options: Omit<FillLayer, 'id'> = {
+            type: 'fill',
+            'source-layer': `go-admin2-${iso3}-staging`,
+            paint: {
+                'fill-color': (!value || value.length <= 0)
+                    ? defaultColor
+                    : [
+                        'match',
+                        ['get', 'id'],
+                        ...value.map((admin2Id) => [
+                            admin2Id,
+                            COLOR_PRIMARY_RED,
+                        ]).flat(),
+                        defaultColor,
+                    ],
+                'fill-outline-color': COLOR_DARK_GREY,
+                'fill-opacity': 1,
+            },
+            layout: {
+                visibility: 'visible',
+            },
+        };
+        return options;
+    }, [iso3, value]);
+
+    const adminTwoLabelLayerOptions = useMemo((): Omit<SymbolLayer, 'id'> | undefined => {
+        const textColor: NonNullable<SymbolLayer['paint']>['text-color'] = (
+            value && value.length > 0
+                ? [
+                    'match',
+                    ['get', 'id'],
+                    ...value.map((admin2Id) => [
+                        admin2Id,
+                        COLOR_TEXT_ON_DARK,
+                    ]).flat(),
+                    COLOR_TEXT,
+                ]
+                : COLOR_TEXT
+        );
+
+        const options: Omit<SymbolLayer, 'id'> = {
+            type: 'symbol',
+            'source-layer': `go-admin2-${iso3}-centroids`,
+            paint: {
+                'text-color': textColor,
+                'text-opacity': 1,
+            },
+            layout: {
+                'text-field': ['get', 'name'],
+                'text-anchor': 'center',
+                'text-size': 10,
+            },
+        };
+        return options;
+    }, [iso3, value]);
+
+    const handleAdmin2Click = useCallback((clickedFeature: MapboxGeoJSONFeature) => {
+        const properties = clickedFeature?.properties as {
+            id: number;
+            admin1_id: number;
+            code: string;
+            admin1_name: string;
+            name?: string;
+        };
+        if (isNotDefined(properties.id)) {
+            return false;
+        }
+
+        const valueIndex = value?.findIndex((admin2Id) => admin2Id === properties.id) ?? -1;
+
+        if (valueIndex === -1) {
+            onChange([...(value ?? []), properties.id], name);
+        } else {
+            onChange(value?.toSpliced(valueIndex, 1), name);
+        }
+
+        return false;
+    }, [value, name, onChange]);
+
+    const [
+        showModal,
+        {
+            setTrue: setShowModalTrue,
+            setFalse: setShowModalFalse,
+        },
+    ] = useBooleanState(false);
+
+    const removeSelection = useCallback((admin2Id: number) => {
+        const index = value?.findIndex((selectedAdmin2Id) => selectedAdmin2Id === admin2Id) ?? -1;
+
+        if (index !== -1) {
+            onChange(value?.toSpliced(index, 1), name);
+        }
+    }, [value, onChange, name]);
+
+    return (
+        <ListView layout="block">
+            <Container
+                heading="Selected areas:"
+                headingLevel={5}
+                footer={(
+                    <Button
+                        name={undefined}
+                        onClick={setShowModalTrue}
+                        // FIXME: use label from props
+                    >
+                        Select areas
+                    </Button>
+                )}
+                withCompactMessage
+                empty={!value || value.length === 0}
+            >
+                <ListView
+                    withWrap
+                    spacing="2xs"
+                >
+                    {value?.map((admin2Id) => (
+                        <ButtonLayout
+                            key={admin2Id}
+                            spacing="2xs"
+                            after={(
+                                <Button
+                                    name={admin2Id}
+                                    onClick={removeSelection}
+                                    styleVariant="action"
+                                >
+                                    <CloseLineIcon />
+                                </Button>
+                            )}
+                        >
+                            {admin2Id}
+                        </ButtonLayout>
+                    ))}
+                </ListView>
+            </Container>
+            {error && (
+                <InputError>
+                    {error}
+                </InputError>
+            )}
+            {showModal && (
+                <Modal
+                    onClose={setShowModalFalse}
+                    // FIXME: use strings
+                    heading="Select Admin-2"
+                    footerActions={(
+                        <Button
+                            name={undefined}
+                            onClick={setShowModalFalse}
+                            // FIXME: use strings
+                        >
+                            Done
+                        </Button>
+                    )}
+                >
+                    <BaseMap
+                        baseLayers={(
+                            <MapLayer
+                                layerKey="admin-1-label"
+                                layerOptions={adminOneLabelLayerOptions}
+                            />
+                        )}
+                    >
+                        <GoMapContainer
+                            title="Admin-2 Map"
+                            withoutDownloadButton
+                        />
+                        {bounds && (
+                            <MapBounds
+                                duration={DURATION_MAP_ZOOM}
+                                padding={DEFAULT_MAP_PADDING}
+                                bounds={bounds}
+                            />
+                        )}
+                        {/* eslint-disable-next-line max-len */}
+                        {adminTwoFillLayerOptions && adminTwoLineLayerOptions && adminTwoLabelLayerOptions && (
+                            <>
+                                <MapSource
+                                    sourceKey="country-admin-2"
+                                    sourceOptions={{
+                                        type: 'vector',
+                                        url: `mapbox://go-ifrc.go-admin2-${iso3}-staging`,
+                                    }}
+                                >
+                                    <MapLayer
+                                        layerKey="admin-2-fill"
+                                        layerOptions={adminTwoFillLayerOptions}
+                                        onClick={handleAdmin2Click}
+                                        hoverable
+                                    />
+                                    <MapLayer
+                                        layerKey="admin-2-line"
+                                        layerOptions={adminTwoLineLayerOptions}
+                                    />
+                                </MapSource>
+                                <MapSource
+                                    sourceKey="country-admin-2-labels"
+                                    sourceOptions={{
+                                        type: 'vector',
+                                        url: `mapbox://go-ifrc.go-admin2-${iso3}-centroids`,
+                                    }}
+                                >
+                                    <MapLayer
+                                        layerKey="admin-2-label"
+                                        layerOptions={adminTwoLabelLayerOptions}
+                                    />
+                                </MapSource>
+                            </>
+                        )}
+                    </BaseMap>
+                </Modal>
+            )}
+        </ListView>
+    );
+}
+
+export default Admin2Input;
diff --git a/app/src/components/domain/BaseMap/index.tsx b/app/src/components/domain/BaseMap/index.tsx
index ec4a793584..125d6138fc 100644
--- a/app/src/components/domain/BaseMap/index.tsx
+++ b/app/src/components/domain/BaseMap/index.tsx
@@ -28,7 +28,7 @@ export type Props = Omit<MapProps, overrides> & {
     withDisclaimer?: boolean;
 } & Partial<Pick<MapProps, overrides>>;
 
-function BaseMap(props: Props) {
+function BaseMapWithoutErrorBoundary(props: Props) {
     const {
         baseLayers,
         mapStyle,
@@ -101,7 +101,7 @@ function BaseMap(props: Props) {
     );
 }
 
-function BaseMapWithErrorBoundary(props: Props) {
+function BaseMap(props: Props) {
     return (
         <ErrorBoundary
             fallback={(
@@ -110,7 +110,7 @@ function BaseMapWithErrorBoundary(props: Props) {
                 </div>
             )}
         >
-            <BaseMap
+            <BaseMapWithoutErrorBoundary
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
             />
@@ -118,4 +118,4 @@ function BaseMapWithErrorBoundary(props: Props) {
     );
 }
 
-export default BaseMapWithErrorBoundary;
+export default BaseMap;
diff --git a/app/src/components/domain/DrefExportModal/index.tsx b/app/src/components/domain/DrefExportModal/index.tsx
index 0bcebcca03..837b67168f 100644
--- a/app/src/components/domain/DrefExportModal/index.tsx
+++ b/app/src/components/domain/DrefExportModal/index.tsx
@@ -24,6 +24,7 @@ import {
     type TypeOfDrefEnum,
 } from '#utils/constants';
 import {
+    type GoApiBody,
     useLazyRequest,
     useRequest,
 } from '#utils/restRequest';
@@ -33,6 +34,7 @@ import styles from './styles.module.css';
 
 type ExportTypeEnum = components<'read'>['schemas']['ExportTypeEnum'];
 type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum'];
+type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>;
 
 const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum;
 const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum;
@@ -83,9 +85,11 @@ function DrefExportModal(props: Props) {
                 export_id: id,
                 export_type: type,
                 is_pga: includePga,
-                selector: '#pdf-preview-ready',
+                // selector: '#pdf-preview-ready',
                 per_country: undefined,
-            };
+                version: undefined,
+                diff: undefined,
+            } satisfies ExportBody;
         },
         [
             id,
diff --git a/app/src/components/domain/EapExportModal/i18n.json b/app/src/components/domain/EapExportModal/i18n.json
new file mode 100644
index 0000000000..19fee027c1
--- /dev/null
+++ b/app/src/components/domain/EapExportModal/i18n.json
@@ -0,0 +1,13 @@
+{
+    "namespace": "eapExportModal",
+    "strings": {
+        "exportTitle": "Export EAP",
+        "preparingExport": "Preparing for export...",
+        "waitingExport": "Waiting for the export to complete...",
+        "exportFailed": "Export failed",
+        "exportSuccessfully": "Export completed successfully!",
+        "downloadLinkDescription": "Click on the download link below!",
+        "downloadLinkLabel": "Download PDF",
+        "failureToExportMessage":"Failed to export PDF."
+    }
+}
diff --git a/app/src/components/domain/EapExportModal/index.tsx b/app/src/components/domain/EapExportModal/index.tsx
new file mode 100644
index 0000000000..669d7a6b65
--- /dev/null
+++ b/app/src/components/domain/EapExportModal/index.tsx
@@ -0,0 +1,197 @@
+import {
+    useEffect,
+    useMemo,
+    useState,
+} from 'react';
+import { DownloadLineIcon } from '@ifrc-go/icons';
+import {
+    Message,
+    Modal,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import Link from '#components/Link';
+import { type components } from '#generated/types';
+import useAlert from '#hooks/useAlert';
+import { EAP_TYPE_SIMPLIFIED } from '#utils/constants';
+import {
+    type GoApiBody,
+    useLazyRequest,
+    useRequest,
+} from '#utils/restRequest';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type EapType = components['schemas']['EapEapTypeEnumKey'];
+type ExportStatusEnum = components<'read'>['schemas']['ExportStatusEnum'];
+
+type ExportBody = GoApiBody<'/api/v2/pdf-export/', 'POST'>;
+
+const EXPORT_STATUS_PENDING = 0 satisfies ExportStatusEnum;
+const EXPORT_STATUS_COMPLETED = 1 satisfies ExportStatusEnum;
+const EXPORT_STATUS_ERRORED = 2 satisfies ExportStatusEnum;
+
+interface Props {
+    eapId: number;
+    eapType: EapType;
+    version?: number;
+    onClose: () => void;
+    diff?: boolean;
+}
+
+function EapExportModal(props: Props) {
+    const {
+        eapId,
+        eapType,
+        onClose,
+        version,
+        diff,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const alert = useAlert();
+
+    const [exportId, setExportId] = useState<number | undefined>();
+
+    const exportTriggerBody = useMemo<ExportBody>(
+        () => ({
+            export_id: eapId,
+            export_type: eapType === EAP_TYPE_SIMPLIFIED ? 'simplified' : 'full',
+            selector: '#pdf-preview-ready',
+            is_pga: undefined,
+            per_country: undefined,
+            version,
+            diff,
+        }),
+        [eapId, eapType, version, diff],
+    );
+
+    const {
+        pending: exportPending,
+        error: exportError,
+        trigger: triggerExport,
+    } = useLazyRequest({
+        method: 'POST',
+        useCurrentLanguageForMutation: true,
+        url: '/api/v2/pdf-export/',
+        body: exportTriggerBody,
+        onSuccess: (response) => {
+            if (isDefined(response.id)) {
+                setExportId(response.id);
+            }
+        },
+        onFailure: () => {
+            alert.show(
+                strings.failureToExportMessage,
+                { variant: 'danger' },
+            );
+        },
+    });
+
+    useEffect(() => {
+        triggerExport(null);
+    }, [triggerExport]);
+
+    const {
+        pending: exportStatusPending,
+        response: exportStatusResponse,
+        error: exportStatusError,
+    } = useRequest({
+        skip: isNotDefined(exportId),
+        url: '/api/v2/pdf-export/{id}/',
+        // FIXME: typings should be fixed in the server
+        pathVariables: isDefined(exportId) ? ({ id: String(exportId) }) : undefined,
+        shouldPoll: (poll) => {
+            if (poll?.errored || poll?.value?.status !== EXPORT_STATUS_PENDING) {
+                return -1;
+            }
+
+            return 5000;
+        },
+    });
+
+    const exportStatus = useMemo(() => {
+        if (exportPending) {
+            return 'PREPARE';
+        }
+
+        if (exportStatusPending || exportStatusResponse?.status === EXPORT_STATUS_PENDING) {
+            return 'WAITING';
+        }
+
+        if (isDefined(exportStatusError)
+            || isDefined(exportError)
+            || (isDefined(exportStatusResponse)
+                && exportStatusResponse.status === EXPORT_STATUS_ERRORED)
+        ) {
+            return 'FAILED';
+        }
+
+        if (isDefined(exportStatusResponse)
+            && isDefined(exportStatusResponse.status === EXPORT_STATUS_COMPLETED)
+            && isDefined(exportStatusResponse.pdf_file)
+        ) {
+            return 'SUCCESS';
+        }
+
+        return 'NOT_STARTED';
+    }, [
+        exportPending,
+        exportStatusError,
+        exportError,
+        exportStatusPending,
+        exportStatusResponse,
+    ]);
+
+    return (
+        <Modal
+            heading={strings.exportTitle}
+            onClose={onClose}
+            className={styles.drefExportModal}
+        >
+            {exportStatus === 'PREPARE' && (
+                <Message
+                    pending
+                    title={strings.preparingExport}
+                />
+            )}
+            {exportStatus === 'WAITING' && (
+                <Message
+                    pending
+                    title={strings.waitingExport}
+                />
+            )}
+            {exportStatus === 'FAILED' && (
+                <Message
+                    title={strings.exportFailed}
+                    description={exportError?.value.messageForNotification
+                            ?? exportStatusError?.value.messageForNotification}
+                />
+            )}
+            {exportStatus === 'SUCCESS' && (
+                <Message
+                    title={strings.exportSuccessfully}
+                    description={strings.downloadLinkDescription}
+                    actions={(
+                        <Link
+                            colorVariant="primary"
+                            styleVariant="outline"
+                            href={exportStatusResponse?.pdf_file}
+                            before={<DownloadLineIcon className={styles.icon} />}
+                            external
+                        >
+                            {strings.downloadLinkLabel}
+                        </Link>
+                    )}
+                />
+            )}
+        </Modal>
+    );
+}
+
+export default EapExportModal;
diff --git a/app/src/components/domain/EapExportModal/styles.module.css b/app/src/components/domain/EapExportModal/styles.module.css
new file mode 100644
index 0000000000..2de1f5fc87
--- /dev/null
+++ b/app/src/components/domain/EapExportModal/styles.module.css
@@ -0,0 +1,5 @@
+.dref-export-modal {
+    .icon {
+        font-size: var(--go-ui-height-icon-multiplier);
+    }
+}
diff --git a/app/src/components/domain/GoMultiFileInput/index.tsx b/app/src/components/domain/GoMultiFileInput/index.tsx
index d4f8f74916..c15ffb3603 100644
--- a/app/src/components/domain/GoMultiFileInput/index.tsx
+++ b/app/src/components/domain/GoMultiFileInput/index.tsx
@@ -31,7 +31,7 @@ import { transformObjectError } from '#utils/restRequest/error';
 
 import i18n from './i18n.json';
 
-export type SupportedPaths = '/api/v2/per-file/multiple/' | '/api/v2/dref-files/multiple/' | '/api/v2/flash-update-file/multiple/';
+export type SupportedPaths = '/api/v2/per-file/multiple/' | '/api/v2/dref-files/multiple/' | '/api/v2/flash-update-file/multiple/' | '/api/v2/eap-file/multiple/';
 
 interface FileUploadResult {
     id: number;
diff --git a/app/src/components/domain/GoSingleFileInput/index.tsx b/app/src/components/domain/GoSingleFileInput/index.tsx
index dc885dfe7b..af10bd7883 100644
--- a/app/src/components/domain/GoSingleFileInput/index.tsx
+++ b/app/src/components/domain/GoSingleFileInput/index.tsx
@@ -23,7 +23,7 @@ import { transformObjectError } from '#utils/restRequest/error';
 
 import i18n from './i18n.json';
 
-export type SupportedPaths = '/api/v2/per-file/' | '/api/v2/dref-files/' | '/api/v2/flash-update-file/' | '/api/v2/per-document-upload/';
+export type SupportedPaths = '/api/v2/per-file/' | '/api/v2/dref-files/' | '/api/v2/flash-update-file/' | '/api/v2/per-document-upload/' | '/api/v2/eap-file/';
 
 type Props<NAME> = Omit<CommonRawFileInputProps<NAME>, 'value'> & {
     name: NAME;
diff --git a/app/src/components/domain/ImageWithCaptionInput/i18n.json b/app/src/components/domain/ImageWithCaptionInput/i18n.json
index 2ac3a6a3ec..f10ddae406 100644
--- a/app/src/components/domain/ImageWithCaptionInput/i18n.json
+++ b/app/src/components/domain/ImageWithCaptionInput/i18n.json
@@ -1,7 +1,8 @@
 {
     "namespace": "imageWithCaptionInput",
     "strings": {
-        "imageWithCaptionEnterCaption": "Enter Caption",
-        "imageWithCaptionPreview": "preview"
+        "captionInputPlaceholder": "Enter Caption",
+        "previewFallbackText": "Preview not available",
+        "defaultLabel": "Select an image"
     }
-}
\ No newline at end of file
+}
diff --git a/app/src/components/domain/ImageWithCaptionInput/index.tsx b/app/src/components/domain/ImageWithCaptionInput/index.tsx
index cf74833d98..ce5df74d19 100644
--- a/app/src/components/domain/ImageWithCaptionInput/index.tsx
+++ b/app/src/components/domain/ImageWithCaptionInput/index.tsx
@@ -21,22 +21,28 @@ import NonFieldError from '#components/NonFieldError';
 
 import i18n from './i18n.json';
 
-type Value = {
-    id?: number | undefined;
+type InputValue = {
+    id?: number;
     client_id: string;
-    caption?: string | undefined;
+    caption?: string | null;
 };
 
-interface Props<N> {
+type OutputValue = {
+    id?: number;
+    client_id: string;
+    caption?: string;
+}
+
+interface Props<NAME> {
     className?: string;
-    name: N;
+    name: NAME;
     url: SupportedPaths;
-    value: Value | null | undefined;
-    onChange: (value: SetValueArg<Value> | undefined, name: N) => void;
-    error: ObjectError<Value> | undefined;
+    value: InputValue | null | undefined;
+    onChange: (value: SetValueArg<OutputValue> | undefined, name: NAME) => void;
+    error: ObjectError<InputValue> | undefined;
     fileIdToUrlMap: Record<number, string>;
     setFileIdToUrlMap?: React.Dispatch<React.SetStateAction<Record<number, string>>>;
-    label: React.ReactNode;
+    label?: React.ReactNode;
     before?: React.ReactNode;
     after?: React.ReactNode;
     disabled?: boolean;
@@ -46,6 +52,8 @@ interface Props<N> {
 
 // FIXME: Move this to components
 function ImageWithCaptionInput<const N extends string | number>(props: Props<N>) {
+    const strings = useTranslation(i18n);
+
     const {
         className,
         readOnly,
@@ -56,15 +64,13 @@ function ImageWithCaptionInput<const N extends string | number>(props: Props<N>)
         setFileIdToUrlMap,
         onChange,
         error: formError,
-        label,
+        label = strings.defaultLabel,
         before,
         after,
         disabled,
         useCurrentLanguageForMutation,
     } = props;
 
-    const strings = useTranslation(i18n);
-
     const setFieldValue = useFormObject(
         name,
         onChange,
@@ -113,13 +119,14 @@ function ImageWithCaptionInput<const N extends string | number>(props: Props<N>)
                 // FIXME: Make Go single file input with preview
                 description={isDefined(fileUrl) ? (
                     <Image
-                        alt={strings.imageWithCaptionPreview}
+                        alt={strings.previewFallbackText}
                         src={fileUrl}
                         size="sm"
                     />
                 ) : undefined}
                 clearable
                 useCurrentLanguageForMutation={useCurrentLanguageForMutation}
+                error={error?.id}
             >
                 {label}
             </GoSingleFileInput>
@@ -130,7 +137,7 @@ function ImageWithCaptionInput<const N extends string | number>(props: Props<N>)
                     readOnly={readOnly}
                     onChange={setFieldValue}
                     error={error?.caption}
-                    placeholder={strings.imageWithCaptionEnterCaption}
+                    placeholder={strings.captionInputPlaceholder}
                     disabled={disabled}
                 />
             )}
diff --git a/app/src/components/domain/MultiImageWithCaptionInput/i18n.json b/app/src/components/domain/MultiImageWithCaptionInput/i18n.json
index a9dca445a8..d454e9df57 100644
--- a/app/src/components/domain/MultiImageWithCaptionInput/i18n.json
+++ b/app/src/components/domain/MultiImageWithCaptionInput/i18n.json
@@ -1,8 +1,9 @@
 {
     "namespace": "multiImageWithCaptionInput",
     "strings": {
-        "removeImagesButtonTitle": "Remove",
-        "imagePreviewAlt": "preview",
-        "enterCaptionPlaceholder": "Enter Caption"
+        "removeImageButtonTitle": "Remove",
+        "imagePreviewFallbackText": "Preview not available",
+        "defaultLabel": "Select images",
+        "captionInputPlaceholder": "Enter caption"
     }
-}
\ No newline at end of file
+}
diff --git a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
index c7e2be8461..2222db54b4 100644
--- a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
+++ b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
@@ -29,22 +29,28 @@ import NonFieldError from '#components/NonFieldError';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-type Value = {
+type InputValue = {
+    id?: number;
     client_id: string;
+    caption?: string | null;
+};
+
+type OutputValue = {
     id?: number;
+    client_id: string;
     caption?: string;
-};
+}
 
 interface Props<N> {
     className?: string;
     name: N;
     url: SupportedPaths;
-    value: Value[] | null | undefined;
-    onChange: (value: SetValueArg<Value[] | undefined>, name: N) => void;
-    error: ArrayError<Value> | undefined;
+    value: InputValue[] | null | undefined;
+    onChange: (value: SetValueArg<OutputValue[] | undefined>, name: N) => void;
+    error: ArrayError<InputValue> | undefined;
     fileIdToUrlMap: Record<number, string>;
     setFileIdToUrlMap?: React.Dispatch<React.SetStateAction<Record<number, string>>>;
-    label: React.ReactNode;
+    label?: React.ReactNode;
     readOnly?: boolean;
     before?: React.ReactNode;
     after?: React.ReactNode;
@@ -54,6 +60,8 @@ interface Props<N> {
 
 // FIXME: Move this to components
 function MultiImageWithCaptionInput<const N extends string | number>(props: Props<N>) {
+    const strings = useTranslation(i18n);
+
     const {
         className,
         name,
@@ -63,7 +71,7 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
         setFileIdToUrlMap,
         onChange,
         error: formError,
-        label,
+        label = strings.defaultLabel,
         readOnly,
         before,
         after,
@@ -71,8 +79,6 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
         useCurrentLanguageForMutation = false,
     } = props;
 
-    const strings = useTranslation(i18n);
-
     const error = getErrorObject(formError);
 
     const {
@@ -185,8 +191,8 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
                                         <IconButton
                                             name={index}
                                             onClick={removeValue}
-                                            title={strings.removeImagesButtonTitle}
-                                            ariaLabel={strings.removeImagesButtonTitle}
+                                            title={strings.removeImageButtonTitle}
+                                            ariaLabel={strings.removeImageButtonTitle}
                                             variant="secondary"
                                             spacing="none"
                                             disabled={disabled || readOnly}
@@ -197,7 +203,7 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
                                 />
                                 <NonFieldError error={imageError} />
                                 <Image
-                                    alt={strings.imagePreviewAlt}
+                                    alt={strings.imagePreviewFallbackText}
                                     src={fileIdToUrlMap[fileValue.id]}
                                     size="sm"
                                 />
@@ -206,7 +212,7 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
                                     value={fileValue?.caption}
                                     onChange={handleCaptionChange}
                                     error={imageError?.caption}
-                                    placeholder={strings.enterCaptionPlaceholder}
+                                    placeholder={strings.captionInputPlaceholder}
                                     readOnly={readOnly}
                                     disabled={disabled}
                                 />
diff --git a/app/src/components/domain/OperationActivityInput/TimeSpanCheck/index.tsx b/app/src/components/domain/OperationActivityInput/TimeSpanCheck/index.tsx
new file mode 100644
index 0000000000..d94c47b047
--- /dev/null
+++ b/app/src/components/domain/OperationActivityInput/TimeSpanCheck/index.tsx
@@ -0,0 +1,90 @@
+import { useCallback } from 'react';
+import {
+    type CheckboxProps,
+    InputError,
+} from '@ifrc-go/ui';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+function TimeSpanCheck<const NAME>(props: CheckboxProps<NAME>) {
+    const {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        checkmarkClassName,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        checkmarkContainerClassName,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        inputClassName,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        labelContainerClassName,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        description,
+
+        className: classNameFromProps,
+        disabled,
+        error,
+        indeterminate,
+        invertedLogic = false,
+        label,
+        name,
+        onChange,
+        readOnly,
+        tooltip,
+        value,
+        withBackground,
+        withDarkBackground,
+        ...otherProps
+    } = props;
+
+    const handleChange = useCallback(
+        (e: React.FormEvent<HTMLInputElement>) => {
+            const v = e.currentTarget.checked;
+            onChange(
+                invertedLogic ? !v : v,
+                name,
+            );
+        },
+        [name, onChange, invertedLogic],
+    );
+
+    const checked = invertedLogic ? !value : value;
+
+    const className = _cs(
+        styles.checkbox,
+        classNameFromProps,
+        !indeterminate && checked && styles.checked,
+        withBackground && styles.withBackground,
+        withDarkBackground && styles.withDarkBackground,
+        disabled && styles.disabledCheckbox,
+        readOnly && styles.readOnly,
+    );
+
+    return (
+        <label // eslint-disable-line jsx-a11y/label-has-associated-control
+            className={_cs(
+                styles.timeSpanCheck,
+                value && styles.checked,
+                className,
+            )}
+            title={tooltip}
+        >
+            <input
+                onChange={handleChange}
+                className={styles.input}
+                type="checkbox"
+                checked={checked ?? false}
+                disabled={disabled || readOnly}
+                readOnly={readOnly}
+                {...otherProps} // eslint-disable-line react/jsx-props-no-spreading
+            />
+            {label}
+            {error && (
+                <InputError floating>
+                    {error}
+                </InputError>
+            )}
+        </label>
+    );
+}
+
+export default TimeSpanCheck;
diff --git a/app/src/components/domain/OperationActivityInput/TimeSpanCheck/styles.module.css b/app/src/components/domain/OperationActivityInput/TimeSpanCheck/styles.module.css
new file mode 100644
index 0000000000..00ca96a56f
--- /dev/null
+++ b/app/src/components/domain/OperationActivityInput/TimeSpanCheck/styles.module.css
@@ -0,0 +1,29 @@
+.time-span-check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-gray-50);
+    border-radius: var(--go-ui-border-radius-md);
+    cursor: pointer;
+    padding: 0 var(--go-ui-spacing-3xs);
+    min-width: 1.5rem;
+    height: 1.5rem;
+    text-align: center;
+    font-size: var(--go-ui-font-size-sm);
+
+    &.checked {
+        border-color: var(--go-ui-color-primary-red);
+        background-color: var(--go-ui-color-primary-red);
+        color: var(--go-ui-color-text-on-dark);
+    }
+
+    .input {
+        position: absolute;
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+        width: 0;
+        height: 0;
+        pointer-events: none;
+    }
+}
diff --git a/app/src/components/domain/OperationActivityInput/i18n.json b/app/src/components/domain/OperationActivityInput/i18n.json
new file mode 100644
index 0000000000..56bb302145
--- /dev/null
+++ b/app/src/components/domain/OperationActivityInput/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "operationActivityInput",
+    "strings": {
+        "operationPriorityActionLabel": "Priority action",
+        "operationTimeFrameLabel": "Time Frame",
+        "operationTimeValueLabel": "Time Value"
+    }
+}
diff --git a/app/src/components/domain/OperationActivityInput/index.tsx b/app/src/components/domain/OperationActivityInput/index.tsx
new file mode 100644
index 0000000000..408118ed56
--- /dev/null
+++ b/app/src/components/domain/OperationActivityInput/index.tsx
@@ -0,0 +1,168 @@
+import { useCallback } from 'react';
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Checklist,
+    InlineLayout,
+    ListView,
+    SelectInput,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { stringValueSelector } from '@ifrc-go/ui/utils';
+import {
+    type ArrayError,
+    getErrorObject,
+    getErrorString,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import { type components } from '#generated/types';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+
+import { type OperationActivityFormFields } from './schema';
+import TimeSpanCheck from './TimeSpanCheck';
+
+import i18n from './i18n.json';
+
+const defaultActivityValue: OperationActivityFormFields = {
+    client_id: '-1',
+};
+
+type TimeframeOption = components['schemas']['EapTimeframeEnum'];
+
+function timeframeKeySelector(option: TimeframeOption) {
+    return option.key;
+}
+
+const timeValueKeySelector = (
+    option: { key: number; value: string },
+) => option.key;
+
+interface Props {
+    value: OperationActivityFormFields;
+    error: ArrayError<OperationActivityFormFields> | undefined;
+    onChange: (value: SetValueArg<OperationActivityFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+}
+
+function OperationActivityInput(props: Props) {
+    const {
+        error: errorFromProps,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const {
+        eap_timeframe,
+        eap_years_timeframe_value,
+        eap_months_timeframe_value,
+        eap_days_timeframe_value,
+        eap_hours_timeframe_value,
+    } = useGlobalEnums();
+    const onFieldChange = useFormObject(index, onChange, defaultActivityValue);
+
+    const error = (value && value.client_id && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : undefined;
+
+    const getTimeValueOptions = useCallback(
+        (timeframe?: number) => {
+            switch (timeframe) {
+                case 10:
+                    return eap_years_timeframe_value ?? [];
+                case 20:
+                    return eap_months_timeframe_value ?? [];
+                case 30:
+                    return eap_days_timeframe_value ?? [];
+                case 40:
+                    return eap_hours_timeframe_value ?? [];
+                default:
+                    return [];
+            }
+        },
+        [
+            eap_years_timeframe_value,
+            eap_months_timeframe_value,
+            eap_days_timeframe_value,
+            eap_hours_timeframe_value,
+        ],
+    );
+
+    const timeValueOptions = getTimeValueOptions(value?.timeframe);
+
+    const handleTimeframeChange = useCallback(
+        (newTimeframe: TimeframeOption['key'] | undefined) => {
+            onFieldChange(newTimeframe, 'timeframe');
+            onFieldChange([], 'time_value');
+        },
+        [onFieldChange],
+    );
+
+    return (
+        <InlineLayout
+            after={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="action"
+                    title="Remove"
+                    disabled={disabled}
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            )}
+        >
+            <ListView layout="grid">
+                <TextInput
+                    label={strings.operationPriorityActionLabel}
+                    name="activity"
+                    value={value.activity}
+                    error={error?.activity}
+                    onChange={onFieldChange}
+                    disabled={disabled}
+                    withAsterisk
+                />
+                <ListView layout="grid">
+                    <SelectInput
+                        label={strings.operationTimeFrameLabel}
+                        name="timeframe"
+                        value={value.timeframe}
+                        onChange={handleTimeframeChange}
+                        keySelector={timeframeKeySelector}
+                        labelSelector={stringValueSelector}
+                        options={eap_timeframe}
+                        disabled={disabled}
+                        error={error?.timeframe}
+                    />
+                    {value?.timeframe && (
+                        <Checklist
+                            label={strings.operationTimeValueLabel}
+                            name="time_value"
+                            value={value?.time_value}
+                            spacing="xs"
+                            onChange={onFieldChange}
+                            keySelector={timeValueKeySelector}
+                            labelSelector={stringValueSelector}
+                            options={timeValueOptions}
+                            disabled={disabled}
+                            renderer={TimeSpanCheck}
+                            withoutOpticalSpacingCorrection
+                            error={getErrorString(error?.time_value)}
+                        />
+                    )}
+                </ListView>
+            </ListView>
+        </InlineLayout>
+    );
+}
+
+export default OperationActivityInput;
diff --git a/app/src/components/domain/OperationActivityInput/schema.ts b/app/src/components/domain/OperationActivityInput/schema.ts
new file mode 100644
index 0000000000..c6042a3e3b
--- /dev/null
+++ b/app/src/components/domain/OperationActivityInput/schema.ts
@@ -0,0 +1,27 @@
+import {
+    type ObjectSchema,
+    type PartialForm,
+    undefinedValue,
+} from '@togglecorp/toggle-form';
+
+import { type components } from '#generated/types';
+
+type OperationActivity = components['schemas']['OperationActivity'];
+
+export type OperationActivityFormFields = PartialForm<Omit<OperationActivity, 'timeframe_display'>> & {
+    client_id: string;
+}
+
+type OperationActivitySchema = ObjectSchema<OperationActivityFormFields>;
+
+const schema: OperationActivitySchema = {
+    fields: (): ReturnType<OperationActivitySchema['fields']> => ({
+        client_id: {},
+        id: { defaultValue: undefinedValue },
+        activity: {},
+        time_value: {},
+        timeframe: {},
+    }),
+};
+
+export default schema;
diff --git a/app/src/components/printable/PrintableContainer/index.tsx b/app/src/components/printable/PrintableContainer/index.tsx
new file mode 100644
index 0000000000..c0d248eefa
--- /dev/null
+++ b/app/src/components/printable/PrintableContainer/index.tsx
@@ -0,0 +1,49 @@
+import {
+    Heading,
+    type HeadingProps,
+} from '@ifrc-go/ui/printable';
+import { getSpacingValue } from '@ifrc-go/ui/utils';
+
+import styles from './styles.module.css';
+
+interface Props {
+    heading?: React.ReactNode;
+    headingLevel?: HeadingProps['level'];
+    breakBefore?: boolean;
+    breakAfter?: boolean;
+    children?: React.ReactNode;
+}
+
+function PrintableContainer(props: Props) {
+    const {
+        heading,
+        headingLevel = 3,
+        breakAfter,
+        breakBefore,
+        children,
+    } = props;
+
+    const spacing = getSpacingValue('3xl', -headingLevel);
+
+    return (
+        <>
+            {breakBefore && <div className={styles.pageBreak} />}
+            {heading && (
+                <Heading
+                    level={headingLevel}
+                    className={styles.heading}
+                >
+                    {heading}
+                </Heading>
+            )}
+            {children}
+            <div
+                className={styles.blockSpacing}
+                style={{ marginBlockEnd: spacing }}
+            />
+            {breakAfter && <div className={styles.pageBreak} />}
+        </>
+    );
+}
+
+export default PrintableContainer;
diff --git a/app/src/components/printable/PrintableContainer/styles.module.css b/app/src/components/printable/PrintableContainer/styles.module.css
new file mode 100644
index 0000000000..904bf35cd1
--- /dev/null
+++ b/app/src/components/printable/PrintableContainer/styles.module.css
@@ -0,0 +1,17 @@
+.page-break {
+    break-before: page;
+
+    @media screen {
+        margin: var(--go-ui-spacing-lg) 0;
+        border: var(--go-ui-width-separator-thin) dashed var(--go-ui-color-separator);
+    }
+}
+
+.heading:has(+ :empty),
+.heading:has(+ .heading + :empty) {
+    display: none;
+}
+
+.block-spacing:has(+ :empty) {
+    display: none;
+}
diff --git a/app/src/components/printable/PrintableDataDisplay/index.tsx b/app/src/components/printable/PrintableDataDisplay/index.tsx
new file mode 100644
index 0000000000..7d4075356c
--- /dev/null
+++ b/app/src/components/printable/PrintableDataDisplay/index.tsx
@@ -0,0 +1,164 @@
+import { useMemo } from 'react';
+import {
+    BooleanOutput,
+    type BooleanOutputProps,
+    DateOutput,
+    type DateOutputProps,
+    NumberOutput,
+    type NumberOutputProps,
+} from '@ifrc-go/ui';
+import { useSpacingToken } from '@ifrc-go/ui/hooks';
+import {
+    DEFAULT_INVALID_TEXT,
+    DEFAULT_PRINT_DATE_FORMAT,
+    fullSpacings,
+    gapSpacings,
+    paddingSpacings,
+    type SpacingType,
+} from '@ifrc-go/ui/utils';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+interface BaseProps {
+    className?: string;
+    label?: React.ReactNode;
+    strongValue?: boolean;
+    strongLabel?: boolean;
+    withoutLabelColon?: boolean;
+    invalidText?: React.ReactNode;
+    variant?: 'block' | 'inline' | 'contents';
+    withPadding?: boolean;
+    withBackground?: boolean;
+    spacing?: SpacingType;
+}
+
+interface BooleanProps extends BooleanOutputProps {
+    valueType: 'boolean',
+}
+
+interface NumberProps extends NumberOutputProps {
+    valueType: 'number',
+}
+
+interface DateProps extends DateOutputProps {
+    valueType: 'date',
+}
+
+interface TextProps {
+    valueType: 'text',
+    value: string | null | undefined;
+}
+
+interface NodeProps {
+    valueType?: never;
+    value?: React.ReactNode;
+}
+
+type Props = BaseProps & (
+    NodeProps | TextProps | DateProps | NumberProps | BooleanProps
+);
+
+function PrintableDataDisplay(props: Props) {
+    const {
+        className,
+        label,
+        strongLabel,
+        strongValue,
+        withoutLabelColon,
+        invalidText = DEFAULT_INVALID_TEXT,
+        variant = 'inline',
+        withPadding,
+        withBackground,
+        spacing,
+        ...otherProps
+    } = props;
+
+    const valueComponent = useMemo(() => {
+        if (otherProps.valueType === 'number') {
+            return (
+                <NumberOutput
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...otherProps}
+                    invalidText={invalidText}
+                />
+            );
+        }
+
+        if (otherProps.valueType === 'date') {
+            return (
+                <DateOutput
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...otherProps}
+                    invalidText={invalidText}
+                    format={DEFAULT_PRINT_DATE_FORMAT}
+                />
+            );
+        }
+
+        if (otherProps.valueType === 'boolean') {
+            return (
+                <BooleanOutput
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...otherProps}
+                    invalidText={invalidText}
+                />
+            );
+        }
+
+        if (!(otherProps.value instanceof Date)) {
+            return otherProps.value || invalidText;
+        }
+
+        return invalidText;
+    }, [otherProps, invalidText]);
+
+    const spacingClassName = useSpacingToken({
+        spacing,
+        offset: -3,
+        modes: withPadding ? fullSpacings : gapSpacings,
+    });
+
+    const innerPaddingClassName = useSpacingToken({
+        spacing,
+        offset: -3,
+        modes: paddingSpacings,
+    });
+
+    return (
+        <div
+            className={_cs(
+                styles.printableDataDisplay,
+                variant === 'inline' && styles.inlineVariant,
+                variant === 'block' && styles.blockVariant,
+                variant === 'contents' && styles.contentsVariant,
+                withBackground && styles.withBackground,
+                spacingClassName,
+                className,
+            )}
+        >
+            <div
+                className={_cs(
+                    styles.label,
+                    strongLabel && styles.strong,
+                    variant === 'contents' && withPadding && innerPaddingClassName,
+                    !withoutLabelColon && styles.withColon,
+                )}
+            >
+                {label}
+            </div>
+            <div
+                className={_cs(
+                    styles.value,
+                    strongValue && styles.strong,
+                    variant === 'contents' && withPadding && innerPaddingClassName,
+                    otherProps.valueType === 'text' && styles.textType,
+                )}
+            >
+                {valueComponent}
+            </div>
+        </div>
+    );
+}
+
+export default PrintableDataDisplay;
diff --git a/app/src/components/printable/PrintableDataDisplay/styles.module.css b/app/src/components/printable/PrintableDataDisplay/styles.module.css
new file mode 100644
index 0000000000..7add934f47
--- /dev/null
+++ b/app/src/components/printable/PrintableDataDisplay/styles.module.css
@@ -0,0 +1,44 @@
+.printable-data-display {
+    &.inline-variant {
+        display: flex;
+        flex-direction: row;
+    }
+
+    &.block-variant {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &.contents-variant {
+        display: contents;
+    }
+
+    &.with-background {
+        background-color: var(--go-ui-color-background);
+
+        &.contents-variant {
+            .value,
+            .label {
+                background-color: var(--go-ui-color-background);
+            }
+        }
+    }
+
+    .label {
+        &.with-colon::after {
+            content: ':';
+        }
+    }
+
+    .value {
+        &.text-type {
+            text-align: justify;
+            white-space: pre-wrap;
+        }
+    }
+
+    .strong {
+        color: var(--go-ui-color-black);
+        font-weight: var(--go-ui-font-weight-semibold);
+    }
+}
diff --git a/app/src/components/printable/PrintableDescription/index.tsx b/app/src/components/printable/PrintableDescription/index.tsx
new file mode 100644
index 0000000000..1843a9402a
--- /dev/null
+++ b/app/src/components/printable/PrintableDescription/index.tsx
@@ -0,0 +1,88 @@
+import {
+    Fragment,
+    useMemo,
+} from 'react';
+import {
+    _cs,
+    isNotDefined,
+} from '@togglecorp/fujs';
+import { diffSentences } from 'diff';
+
+import styles from './styles.module.css';
+
+interface Props {
+    value?: string | null;
+    className?: string;
+    prevValue?: string | null;
+}
+
+function PrintableDescription(props: Props) {
+    const {
+        className,
+        value,
+        prevValue,
+    } = props;
+
+    const diff = useMemo(() => {
+        if (isNotDefined(value) || isNotDefined(prevValue)) {
+            return undefined;
+        }
+
+        return diffSentences(prevValue, value);
+    }, [value, prevValue]);
+
+    if (isNotDefined(diff)) {
+        return (
+            <div className={_cs(styles.printableDescription, className)}>
+                {value}
+            </div>
+        );
+    }
+
+    return (
+        <div
+            className={_cs(
+                styles.printableDescription,
+                styles.withDiffView,
+                className,
+            )}
+        >
+            {diff.map((part, index) => {
+                const { added, removed, value: partValue } = part;
+
+                if (added) {
+                    return (
+                        <span
+                            className={styles.added}
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={index}
+                        >
+                            {partValue}
+                        </span>
+                    );
+                }
+
+                if (removed) {
+                    return (
+                        <span
+                            className={styles.removed}
+                            // eslint-disable-next-line react/no-array-index-key
+                            key={index}
+                        >
+                            {partValue}
+                        </span>
+                    );
+                }
+
+                return (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <Fragment key={index}>
+                        {partValue}
+                    </Fragment>
+                );
+            })}
+        </div>
+    );
+}
+
+export default PrintableDescription;
diff --git a/app/src/components/printable/PrintableDescription/styles.module.css b/app/src/components/printable/PrintableDescription/styles.module.css
new file mode 100644
index 0000000000..a52f405f09
--- /dev/null
+++ b/app/src/components/printable/PrintableDescription/styles.module.css
@@ -0,0 +1,18 @@
+.printable-description {
+    text-align: justify;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+
+    &.with-diff-view {
+        .added {
+            background-color: color-mix(in srgb, var(--go-ui-color-green) 10%, transparent);
+            color: var(--go-ui-color-green);
+        }
+
+        .removed {
+            background-color: color-mix(in srgb, var(--go-ui-color-red) 10%, transparent);
+            text-decoration: line-through;
+            color: var(--go-ui-color-red);
+        }
+    }
+}
diff --git a/app/src/components/printable/PrintablePage/index.tsx b/app/src/components/printable/PrintablePage/index.tsx
new file mode 100644
index 0000000000..66c9583459
--- /dev/null
+++ b/app/src/components/printable/PrintablePage/index.tsx
@@ -0,0 +1,101 @@
+import React, {
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
+import { Heading } from '@ifrc-go/ui/printable';
+import { _cs } from '@togglecorp/fujs';
+
+import ifrcLogo from '#assets/icons/ifrc-square.png';
+
+import styles from './styles.module.css';
+
+interface Props {
+    className?: string;
+    children: React.ReactNode;
+    heading: React.ReactNode;
+    description: React.ReactNode;
+    dataReady?: boolean;
+}
+
+function PrintablePage(props: Props) {
+    const {
+        className,
+        children,
+        heading,
+        description,
+        dataReady = false,
+    } = props;
+
+    const [previewReady, setPreviewReady] = useState(false);
+
+    const mainRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!dataReady) {
+            return;
+        }
+
+        const mainContainer = mainRef.current;
+
+        async function waitForImages() {
+            if (!mainContainer) {
+                return;
+            }
+
+            const images = mainContainer.querySelectorAll('img');
+
+            if (images.length === 0) {
+                setPreviewReady(true);
+                return;
+            }
+
+            const promises = Array.from(images).map(
+                (image) => {
+                    if (image.complete) {
+                        return undefined;
+                    }
+
+                    return new Promise((accept) => {
+                        image.addEventListener('load', () => {
+                            accept(true);
+                        });
+                    });
+                },
+            );
+
+            await Promise.all(promises);
+            setPreviewReady(true);
+        }
+
+        waitForImages();
+    }, [dataReady]);
+
+    return (
+        <main
+            className={_cs(styles.printablePage, className)}
+            ref={mainRef}
+        >
+            <div className={styles.headerSection}>
+                <img
+                    className={styles.ifrcLogo}
+                    src={ifrcLogo}
+                    alt="IFRC"
+                />
+                <Heading
+                    level={1}
+                    className={styles.heading}
+                >
+                    {heading}
+                </Heading>
+                <div className={styles.description}>
+                    {description}
+                </div>
+            </div>
+            {children}
+            {previewReady && <div id="pdf-preview-ready" />}
+        </main>
+    );
+}
+
+export default PrintablePage;
diff --git a/app/src/components/printable/PrintablePage/styles.module.css b/app/src/components/printable/PrintablePage/styles.module.css
new file mode 100644
index 0000000000..06f063c82c
--- /dev/null
+++ b/app/src/components/printable/PrintablePage/styles.module.css
@@ -0,0 +1,38 @@
+.printable-page {
+    font-family: 'Open Sans', sans-serif;
+    font-size: var(--go-ui-font-size-export);
+
+    @media screen {
+        margin: var(--go-ui-spacing-xl) auto;
+        background-color: var(--go-ui-color-foreground);
+        padding: var(--go-ui-export-page-margin);
+        width: 210mm;
+        min-height: 297mm;
+    }
+
+    .header-section {
+        display: grid;
+        grid-template-areas:
+            "logo heading"
+            "desc desc";
+        margin-block-end: var(--go-ui-spacing-xl);
+
+        .ifrc-logo {
+            width: 6rem;
+            height: 6rem;
+            grid-area: logo;
+        }
+
+        .heading {
+            text-align: end;
+            grid-area: heading;
+        }
+
+        .description {
+            grid-area: desc;
+            text-align: end;
+            color: var(--go-ui-color-primary-blue);
+            font-size: var(--go-ui-font-size-lg);
+        }
+    }
+}
diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
index 8d3ec82ce2..08630617dc 100644
--- a/app/src/utils/constants.ts
+++ b/app/src/utils/constants.ts
@@ -56,8 +56,8 @@ export const CATEGORY_RISK_VERY_HIGH = 5;
 // Colors
 
 export const COLOR_WHITE = '#ffffff';
-// export const COLOR_TEXT = '#313131';
-// export const COLOR_TEXT_ON_DARK = '#ffffff';
+export const COLOR_TEXT = '#313131';
+export const COLOR_TEXT_ON_DARK = '#ffffff';
 export const COLOR_LIGHT_GREY = '#e0e0e0';
 export const COLOR_DARK_GREY = '#a5a5a5';
 export const COLOR_BLACK = '#000000';
@@ -196,6 +196,29 @@ export const multiMonthSelectDefaultValue = listToMap(
     () => false,
 );
 
+// FIXME these need to satisfy some enum
 export const ERU_READINESS_READY = 1;
 export const ERU_READINESS_CAN_CONTRIBUTE = 2;
 export const ERU_READINESS_NO_CAPACITY = 3;
+
+// FIXME these need to satisfy some enum
+export const EAP_TYPE_SIMPLIFIED = 20;
+export const EAP_TYPE_FULL = 10;
+
+// Timeframe
+
+// FIXME these need to satisfy some enum
+export const TIMEFRAME_YEAR = 10;
+// export const TIMEFRAME_MONTHS = 20;
+// export const TIMEFRAME_DAYS = 30;
+// export const TIMEFRAME_HOURS = 40;
+
+type EapStatus = components['schemas']['EapEapStatusEnumKey'];
+
+export const EAP_STATUS_UNDER_DEVELOPMENT = 10 satisfies EapStatus;
+export const EAP_STATUS_UNDER_REVIEW = 20 satisfies EapStatus;
+export const EAP_STATUS_NS_ADDRESSING_COMMENTS = 30 satisfies EapStatus;
+export const EAP_STATUS_TECHNICALLY_VALIDATED = 40 satisfies EapStatus;
+export const EAP_STATUS_APPROVED = 50 satisfies EapStatus;
+export const EAP_STATUS_PFA_SIGNED = 60 satisfies EapStatus;
+export const EAP_STATUS_ACTIVATED = 70 satisfies EapStatus;
diff --git a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
new file mode 100644
index 0000000000..515dedf65d
--- /dev/null
+++ b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
@@ -0,0 +1,193 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import { ArrowRightFillIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    DropdownMenu,
+    Label,
+    ListView,
+    Modal,
+    RawFileInput,
+} from '@ifrc-go/ui';
+import {
+    isDefined,
+    listToMap,
+} from '@togglecorp/fujs';
+
+import DropdownMenuItem from '#components/DropdownMenuItem';
+import { type components } from '#generated/types';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import useAlert from '#hooks/useAlert';
+import {
+    EAP_STATUS_ACTIVATED,
+    EAP_STATUS_APPROVED,
+    EAP_STATUS_NS_ADDRESSING_COMMENTS,
+    EAP_STATUS_PFA_SIGNED,
+    EAP_STATUS_TECHNICALLY_VALIDATED,
+    EAP_STATUS_UNDER_DEVELOPMENT,
+    EAP_STATUS_UNDER_REVIEW,
+} from '#utils/constants';
+import {
+    type GoApiBody,
+    useLazyRequest,
+} from '#utils/restRequest';
+
+type EapStatusBody = GoApiBody<'/api/v2/eap-registration/{id}/status/', 'POST'>;
+type EapStatus = components['schemas']['EapEapStatusEnumKey'];
+
+const validStatusTransition: Record<EapStatus, EapStatus[]> = {
+    [EAP_STATUS_UNDER_DEVELOPMENT]: [EAP_STATUS_UNDER_REVIEW],
+    [EAP_STATUS_UNDER_REVIEW]: [
+        EAP_STATUS_NS_ADDRESSING_COMMENTS,
+        EAP_STATUS_TECHNICALLY_VALIDATED,
+    ],
+    [EAP_STATUS_NS_ADDRESSING_COMMENTS]: [
+        EAP_STATUS_UNDER_REVIEW,
+    ],
+    [EAP_STATUS_TECHNICALLY_VALIDATED]: [
+        EAP_STATUS_UNDER_REVIEW,
+        EAP_STATUS_APPROVED,
+    ],
+    [EAP_STATUS_APPROVED]: [EAP_STATUS_PFA_SIGNED],
+    [EAP_STATUS_PFA_SIGNED]: [EAP_STATUS_ACTIVATED],
+    [EAP_STATUS_ACTIVATED]: [],
+};
+
+export interface Props {
+    eapId: number;
+    status: EapStatus;
+    onStatusUpdate?: () => void;
+}
+
+function EapStatus(props: Props) {
+    const {
+        eapId,
+        status,
+        onStatusUpdate,
+    } = props;
+
+    const alert = useAlert();
+
+    const { eap_eap_status: eapStatusOptions } = useGlobalEnums();
+    const [newStatus, setNewStatus] = useState<EapStatus | undefined>();
+    const [checklistFile, setChecklistFile] = useState<File | undefined>();
+
+    const statusLabelMapping = listToMap(
+        eapStatusOptions,
+        ({ key }) => key,
+        ({ value }) => value,
+    );
+
+    const { trigger: triggerStatusUpdate } = useLazyRequest({
+        method: 'POST',
+        url: '/api/v2/eap-registration/{id}/status/',
+        pathVariables: {
+            id: eapId,
+        },
+        body: (fields: EapStatusBody) => fields,
+        onSuccess: () => {
+            setNewStatus(undefined);
+            if (onStatusUpdate) {
+                onStatusUpdate();
+            }
+
+            alert.show(
+                'Status updated successfully!',
+                { variant: 'success' },
+            );
+        },
+        formData: true,
+        onFailure: () => {
+            alert.show(
+                'Failed to update the status!',
+                { variant: 'danger' },
+            );
+        },
+    });
+
+    // FIXME: fix typings in the server
+    const requestBody = useMemo<EapStatusBody>(
+        () => ({
+            status: newStatus,
+            review_checklist_file: checklistFile,
+        } as EapStatusBody),
+        [newStatus, checklistFile],
+    );
+
+    const handleStatusUpdateCancel = useCallback(() => {
+        setNewStatus(undefined);
+    }, []);
+
+    return (
+        <>
+            <DropdownMenu
+                label={statusLabelMapping?.[status] ?? '--'}
+                labelColorVariant="text"
+                labelStyleVariant="translucent"
+            >
+                {eapStatusOptions?.map((option) => (
+                    <DropdownMenuItem
+                        key={option.key}
+                        type="button"
+                        name={option.key}
+                        disabled={!validStatusTransition[status].includes(option.key)}
+                        onClick={setNewStatus}
+                    >
+                        {option.value}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenu>
+            {isDefined(newStatus) && (
+                <Modal
+                    // FIXME: use strings
+                    heading="Update Status"
+                    onClose={handleStatusUpdateCancel}
+                    footerActions={(
+                        <Button
+                            name={requestBody}
+                            onClick={triggerStatusUpdate}
+                        >
+                            Confirm
+                        </Button>
+                    )}
+                >
+                    <ListView layout="block">
+                        <div>
+                            Are you sure you want to update the status?
+                        </div>
+                        <ListView>
+                            <div>
+                                {statusLabelMapping?.[status]}
+                            </div>
+                            <ArrowRightFillIcon />
+                            <div>
+                                {statusLabelMapping?.[newStatus]}
+                            </div>
+                        </ListView>
+                        {newStatus === EAP_STATUS_NS_ADDRESSING_COMMENTS && (
+                            <ListView
+                                layout="block"
+                                spacing="sm"
+                            >
+                                <RawFileInput
+                                    name="review_checklist_file"
+                                    onChange={setChecklistFile}
+                                >
+                                    Select review checklist file
+                                </RawFileInput>
+                                <Label>
+                                    {isDefined(checklistFile) && checklistFile.name}
+                                </Label>
+                            </ListView>
+                        )}
+                    </ListView>
+                </Modal>
+            )}
+        </>
+    );
+}
+
+export default EapStatus;
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
new file mode 100644
index 0000000000..1404c3e356
--- /dev/null
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
@@ -0,0 +1,9 @@
+{
+    "namespace":"accountMyFormsEap",
+    "strings":{
+        "eapStartFullLink": "Start Full EAP",
+        "eapStartSimplifiedLink": "Start sEAP",
+        "eapEditFullLink": "Edit Full EAP",
+        "eapEditSimplifiedLink": "Edit sEAP"
+    }
+}
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
new file mode 100644
index 0000000000..c4bc42dc5f
--- /dev/null
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
@@ -0,0 +1,171 @@
+import {
+    useCallback,
+    useState,
+} from 'react';
+import {
+    DocumentPdfLineIcon,
+    DownloadTwoLineIcon,
+} from '@ifrc-go/icons';
+import {
+    Button,
+    ListView,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import EapExportModal from '#components/domain/EapExportModal';
+import Link from '#components/Link';
+import {
+    EAP_STATUS_NS_ADDRESSING_COMMENTS,
+    EAP_STATUS_UNDER_DEVELOPMENT,
+    EAP_TYPE_FULL,
+    EAP_TYPE_SIMPLIFIED,
+} from '#utils/constants';
+
+import { type EapExpandedListItem } from '../utils';
+
+import i18n from './i18n.json';
+
+export interface Props {
+    expandedListItem: EapExpandedListItem;
+}
+
+function EapTableActions(props: Props) {
+    const { expandedListItem } = props;
+
+    const {
+        type,
+        eap,
+        details,
+    } = expandedListItem;
+
+    const [exportWithDiffView, setExportWithDiffView] = useState(false);
+    const [showExportModal, setShowExportModal] = useState(false);
+
+    const strings = useTranslation(i18n);
+
+    const setShowExportModalTrue = useCallback((withDiff?: boolean) => {
+        setExportWithDiffView(!!withDiff);
+        setShowExportModal(true);
+    }, []);
+
+    const setShowExportModalFalse = useCallback(() => {
+        setExportWithDiffView(false);
+        setShowExportModal(false);
+    }, []);
+
+    return (
+        <>
+            <ListView layout="block">
+                {type === 'development' && eap.eap_type === EAP_TYPE_SIMPLIFIED && (
+                    <Link
+                        to="simplifiedEapExport"
+                        urlParams={{ eapId: eap.id }}
+                        urlSearch={isDefined(details?.data.version)
+                            ? `version=${details.data.version}`
+                            : undefined}
+                        title="Preview export"
+                        before={<DocumentPdfLineIcon fontSize={18} />}
+                    >
+                        Preview export
+                    </Link>
+                )}
+                {type === 'development' && details?.data.is_locked && isDefined(eap.review_checklist_file) && (
+                    <Link
+                        external
+                        href={eap.review_checklist_file}
+                        before={<DownloadTwoLineIcon />}
+                    >
+                        Review Checklist
+                    </Link>
+                )}
+                {type === 'development' && eap.eap_type === EAP_TYPE_SIMPLIFIED && (
+                    <Button
+                        name={false}
+                        onClick={setShowExportModalTrue}
+                        before={<DownloadTwoLineIcon />}
+                        styleVariant="action"
+                        // FIXME: use strings
+                    >
+                        Export
+                    </Button>
+                )}
+                {type === 'development'
+                    && eap.eap_type === EAP_TYPE_SIMPLIFIED
+                    && isDefined(details?.data.version)
+                    && details.data.version > 1
+                    && (
+                        <Button
+                            name
+                            onClick={setShowExportModalTrue}
+                            before={<DownloadTwoLineIcon />}
+                            styleVariant="action"
+                            // FIXME: use strings
+                        >
+                            Export with changes
+                        </Button>
+                    )}
+                {type === 'registration' && isNotDefined(eap.eap_type) && isNotDefined(details) && (
+                    <ListView>
+                        <Link
+                            to="simplifiedEapForm"
+                            urlParams={{ eapId: eap.id }}
+                            styleVariant="outline"
+                            colorVariant="primary"
+                        >
+                            {strings.eapStartSimplifiedLink}
+                        </Link>
+                        <Link
+                            to="fullEapForm"
+                            urlParams={{ eapId: eap.id }}
+                            styleVariant="outline"
+                            colorVariant="primary"
+                        >
+                            {strings.eapStartFullLink}
+                        </Link>
+                    </ListView>
+                )}
+                {type === 'development'
+                    && !details?.data.is_locked
+                    && eap.eap_type === EAP_TYPE_SIMPLIFIED
+                    && (eap.status === EAP_STATUS_UNDER_DEVELOPMENT
+                        || (eap.status === EAP_STATUS_NS_ADDRESSING_COMMENTS
+                            && eap.latest_simplified_eap === details?.data.id))
+                    && (
+                        <Link
+                            to="simplifiedEapForm"
+                            urlParams={{ eapId: eap.id }}
+                            styleVariant="outline"
+                            colorVariant="primary"
+                        >
+                            {strings.eapEditSimplifiedLink}
+                        </Link>
+                    )}
+                {type === 'development' && !details?.data.is_locked && eap.eap_type === EAP_TYPE_FULL && (
+                    <Link
+                        to="fullEapForm"
+                        urlParams={{ eapId: eap.id }}
+                        styleVariant="outline"
+                        colorVariant="primary"
+                    >
+                        {strings.eapEditFullLink}
+                    </Link>
+                )}
+            </ListView>
+            {showExportModal && isDefined(eap.eap_type) && (
+                <EapExportModal
+                    eapId={eap.id}
+                    eapType={eap.eap_type}
+                    onClose={setShowExportModalFalse}
+                    version={details?.data.version}
+                    diff={exportWithDiffView}
+                />
+            )}
+        </>
+    );
+}
+
+export default EapTableActions;
diff --git a/app/src/views/AccountMyFormsEap/Filters/i18n.json b/app/src/views/AccountMyFormsEap/Filters/i18n.json
new file mode 100644
index 0000000000..9aab9233d2
--- /dev/null
+++ b/app/src/views/AccountMyFormsEap/Filters/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "accountMyFormsEap",
+    "strings": {
+        "filterStatusPlaceholder": "Select Status"
+    }
+}
diff --git a/app/src/views/AccountMyFormsEap/Filters/index.tsx b/app/src/views/AccountMyFormsEap/Filters/index.tsx
new file mode 100644
index 0000000000..8ebee10365
--- /dev/null
+++ b/app/src/views/AccountMyFormsEap/Filters/index.tsx
@@ -0,0 +1,47 @@
+import { SelectInput } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { stringValueSelector } from '@ifrc-go/ui/utils';
+import { type EntriesAsList } from '@togglecorp/toggle-form';
+
+import { type components } from '#generated/types';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+
+import i18n from './i18n.json';
+
+type TypeOfEapStatus = components<'read'>['schemas']['EapEapStatusEnumKey'];
+function typeOfEapStatusKeySelector({ key } : { key: TypeOfEapStatus }) {
+    return key;
+}
+
+export interface FilterValue {
+    status?: TypeOfEapStatus | undefined;
+}
+
+interface Props {
+    value: FilterValue;
+    onChange: (...args: EntriesAsList<FilterValue>) => void;
+}
+
+function Filters(props: Props) {
+    const {
+        value,
+        onChange,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const { eap_eap_status: eapStatusTypeOptions } = useGlobalEnums();
+
+    return (
+        <SelectInput
+            name="status"
+            placeholder={strings.filterStatusPlaceholder}
+            options={eapStatusTypeOptions}
+            keySelector={typeOfEapStatusKeySelector}
+            labelSelector={stringValueSelector}
+            value={value.status}
+            onChange={onChange}
+        />
+    );
+}
+
+export default Filters;
diff --git a/app/src/views/AccountMyFormsEap/i18n.json b/app/src/views/AccountMyFormsEap/i18n.json
new file mode 100644
index 0000000000..4fcb4dcfd7
--- /dev/null
+++ b/app/src/views/AccountMyFormsEap/i18n.json
@@ -0,0 +1,11 @@
+{
+    "namespace": "eapApplication",
+    "strings": {
+        "eapRegistrationLink": "Register Your EAP",
+        "eapApplicationsHeading": "EAP Application",
+        "eapLastUpdated": "Last Updated",
+        "eapName": "Name/Phase",
+        "eapType": "EAP Type",
+        "eapStatus": "Status"
+    }
+}
diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
new file mode 100644
index 0000000000..98c4220421
--- /dev/null
+++ b/app/src/views/AccountMyFormsEap/index.tsx
@@ -0,0 +1,349 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import {
+    Container,
+    Pager,
+    type RowOptions,
+    Table,
+    TableBodyContent,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    createDateColumn,
+    createElementColumn,
+    createEmptyColumn,
+    createExpandColumn,
+    createExpansionIndicatorColumn,
+    createStringColumn,
+    numericIdSelector,
+} from '@ifrc-go/ui/utils';
+import {
+    isDefined,
+    isNotDefined,
+    listToMap,
+} from '@togglecorp/fujs';
+
+import Link from '#components/Link';
+import useFilterState from '#hooks/useFilterState';
+import {
+    EAP_STATUS_APPROVED,
+    EAP_STATUS_PFA_SIGNED,
+    EAP_STATUS_TECHNICALLY_VALIDATED,
+    EAP_TYPE_FULL,
+    EAP_TYPE_SIMPLIFIED,
+} from '#utils/constants';
+import { useRequest } from '#utils/restRequest';
+
+import EapStatus, { type Props as EapStatusProps } from './EapStatus';
+import EapTableActions, { type Props as EapTableActionProps } from './EapTableActions';
+import Filters, { type FilterValue } from './Filters';
+import {
+    type EapExpandedItem,
+    type EapExpandedListItem,
+    type EapListItem,
+} from './utils';
+
+import i18n from './i18n.json';
+
+type Key = EapListItem['id'];
+const ITEM_PER_PAGE = 6;
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    const {
+        filter,
+        offset,
+        limit,
+        rawFilter,
+        filtered,
+        setFilterField,
+        page,
+        setPage,
+    } = useFilterState<FilterValue>({
+        filter: {},
+        pageSize: ITEM_PER_PAGE,
+    });
+
+    const {
+        response: eapListResponse,
+        pending: eapListPending,
+        retrigger: reloadEapList,
+    } = useRequest({
+        url: '/api/v2/eap-registration/',
+        preserveResponse: true,
+        query: {
+            offset,
+            limit,
+            status: filter.status,
+        },
+    });
+
+    const [expandedRow, setExpandedRow] = useState<EapListItem | undefined>();
+    const handleExpandClick = useCallback(
+        (row: EapListItem) => {
+            setExpandedRow(
+                (prevValue) => (prevValue?.id === row.id ? undefined : row),
+            );
+        },
+        [],
+    );
+
+    const aggregatedColumns = useMemo(
+        () => ([
+            createExpansionIndicatorColumn<EapListItem, number>(false),
+            createDateColumn<EapListItem, number>(
+                'created_at',
+                strings.eapLastUpdated,
+                (item) => item.modified_at,
+            ),
+            createStringColumn<EapListItem, number>(
+                'name',
+                strings.eapName,
+                (item) => {
+                    const baseYear = new Date(item.created_at).getFullYear();
+
+                    let addedYear = baseYear;
+
+                    if (item.eap_type === EAP_TYPE_FULL) {
+                        addedYear = baseYear + 5;
+                    } else if (item.eap_type === EAP_TYPE_SIMPLIFIED) {
+                        addedYear = baseYear + 2;
+                    }
+
+                    return `${item.country_details?.name}:
+                        ${item.disaster_type_details?.name}
+                        ${baseYear} - ${addedYear}`;
+                },
+            ),
+            createStringColumn<EapListItem, number>(
+                'eap_type_display',
+                strings.eapType,
+                (item) => item.eap_type_display,
+            ),
+            createElementColumn<EapListItem, number, EapStatusProps>(
+                'status_display',
+                strings.eapStatus,
+                EapStatus,
+                (key, row) => ({
+                    eapId: key,
+                    status: row.status,
+                    onStatusUpdate: reloadEapList,
+                }),
+            ),
+            createExpandColumn<EapListItem, Key>(
+                'expandRow',
+                '',
+                (row) => ({
+                    onClick: handleExpandClick,
+                    expanded: row.id === expandedRow?.id,
+                }),
+            ),
+        ]),
+        [
+            strings.eapLastUpdated,
+            strings.eapName,
+            strings.eapType,
+            strings.eapStatus,
+            expandedRow,
+            handleExpandClick,
+            reloadEapList,
+        ],
+    );
+
+    const eapExpandedItems = useMemo(() => (
+        listToMap(
+            eapListResponse?.results,
+            (eapListItem) => eapListItem.id,
+            (eapListItem) => {
+                const {
+                    simplified_eap_details,
+                    full_eap_details,
+                    modified_at,
+                    eap_type,
+                    status,
+                } = eapListItem;
+
+                const eapStarted = simplified_eap_details.length > 0 || full_eap_details.length > 0;
+
+                const items = [
+                    {
+                        label: 'EAP Development Registration',
+                        lastUpdated: modified_at,
+                        eap: eapListItem,
+                        type: 'registration',
+                        details: undefined,
+                        disabled: false,
+                    } satisfies EapExpandedListItem,
+                    ...(eap_type === EAP_TYPE_SIMPLIFIED
+                        ? simplified_eap_details.map((simplifiedEap) => ({
+                            label: `EAP Application v${simplifiedEap.version}`,
+                            lastUpdated: simplifiedEap.modified_at,
+                            eap: eapListItem,
+                            type: 'development',
+                            details: {
+                                eapType: EAP_TYPE_SIMPLIFIED,
+                                data: simplifiedEap,
+                            },
+                            disabled: false,
+                        } satisfies EapExpandedListItem)).toReversed()
+                        : []
+                    ),
+                    ...(eap_type === EAP_TYPE_FULL
+                        ? full_eap_details.map((fullEap) => ({
+                            label: `EAP Application v${fullEap.version}`,
+                            lastUpdated: fullEap.modified_at,
+                            eap: eapListItem,
+                            type: 'development',
+                            details: {
+                                eapType: EAP_TYPE_FULL,
+                                data: fullEap,
+                            },
+                            disabled: false,
+                        } satisfies EapExpandedListItem)).toReversed()
+                        : []
+                    ),
+                    ((isNotDefined(eap_type) || !eapStarted)
+                        ? ({
+                            label: 'EAP Application v1',
+                            eap: eapListItem,
+                            type: 'development',
+                            details: undefined,
+                            disabled: true,
+                        } satisfies EapExpandedListItem)
+                        : undefined
+                    ),
+                    {
+                        label: 'Technically Validated',
+                        eap: eapListItem,
+                        type: 'validated',
+                        details: undefined,
+                        disabled: status < EAP_STATUS_TECHNICALLY_VALIDATED,
+                    } satisfies EapExpandedListItem,
+                    {
+                        label: 'Approved',
+                        eap: eapListItem,
+                        type: 'approved',
+                        details: undefined,
+                        disabled: status < EAP_STATUS_APPROVED,
+                    } satisfies EapExpandedListItem,
+                    {
+                        label: 'PFA Signed',
+                        eap: eapListItem,
+                        type: 'signed',
+                        details: undefined,
+                        disabled: status < EAP_STATUS_PFA_SIGNED,
+                    } satisfies EapExpandedListItem,
+                ].filter(isDefined).toReversed();
+
+                return {
+                    eap: eapListItem,
+                    expandedItems: items,
+                } satisfies EapExpandedItem;
+            },
+        )
+    ), [eapListResponse]);
+
+    const detailColumns = useMemo(
+        () => ([
+            createExpansionIndicatorColumn<EapExpandedListItem, string | number>(
+                true,
+                (row) => !!row.disabled,
+            ),
+            createDateColumn<EapExpandedListItem, string | number>(
+                'created_at',
+                strings.eapLastUpdated,
+                (row) => row.lastUpdated,
+            ),
+            createStringColumn<EapExpandedListItem, string | number>(
+                'title',
+                '',
+                (row) => row.label,
+                { withLightText: (item) => !!item.disabled },
+            ),
+            createEmptyColumn<EapExpandedListItem, string | number>(),
+            createElementColumn<EapExpandedListItem, string | number, EapTableActionProps>(
+                'actions',
+                '',
+                EapTableActions,
+                (_, row) => ({
+                    expandedListItem: row,
+                }),
+            ),
+            createEmptyColumn<EapExpandedListItem, string | number>(),
+        ]),
+        [strings.eapLastUpdated],
+    );
+
+    const rowModifier = useCallback(
+        ({ row, datum }: RowOptions<EapListItem, number>) => {
+            if (datum.id !== expandedRow?.id) {
+                return row;
+            }
+
+            const subRows = eapExpandedItems?.[expandedRow.id];
+
+            return (
+                <>
+                    {row}
+                    <TableBodyContent
+                        // FIXME: use better key
+                        keySelector={(expandedItem) => expandedItem.label}
+                        data={subRows?.expandedItems}
+                        columns={detailColumns}
+                        expandedContent
+                    />
+                </>
+            );
+        },
+        [
+            expandedRow,
+            detailColumns,
+            eapExpandedItems,
+        ],
+    );
+
+    return (
+        <Container
+            heading={strings.eapApplicationsHeading}
+            withHeaderBorder
+            filters={(
+                <Filters
+                    value={rawFilter}
+                    onChange={setFilterField}
+                />
+            )}
+            headerActions={(
+                <Link
+                    to="newEapDevelopmentRegistration"
+                    styleVariant="outline"
+                    colorVariant="primary"
+                >
+                    {strings.eapRegistrationLink}
+                </Link>
+            )}
+            footerActions={(
+                <Pager
+                    activePage={page}
+                    itemsCount={eapListResponse?.count ?? 0}
+                    maxItemsPerPage={limit}
+                    onActivePageChange={setPage}
+                />
+            )}
+        >
+            <Table
+                data={eapListResponse?.results}
+                columns={aggregatedColumns}
+                rowModifier={rowModifier}
+                keySelector={numericIdSelector}
+                pending={eapListPending}
+                filtered={filtered}
+            />
+        </Container>
+    );
+}
diff --git a/app/src/views/AccountMyFormsEap/utils.ts b/app/src/views/AccountMyFormsEap/utils.ts
new file mode 100644
index 0000000000..4287a54b43
--- /dev/null
+++ b/app/src/views/AccountMyFormsEap/utils.ts
@@ -0,0 +1,34 @@
+import {
+    type EAP_TYPE_FULL,
+    type EAP_TYPE_SIMPLIFIED,
+} from '#utils/constants';
+import { type GoApiResponse } from '#utils/restRequest';
+
+type EapResponse = GoApiResponse<'/api/v2/eap-registration/'>;
+export type EapListItem = NonNullable<EapResponse['results']>[number];
+
+interface SimplifiedEapDetails {
+    eapType: typeof EAP_TYPE_SIMPLIFIED;
+    data: EapListItem['simplified_eap_details'][number];
+}
+
+interface FullEapDetails {
+    eapType: typeof EAP_TYPE_FULL;
+    data: EapListItem['full_eap_details'][number];
+}
+
+export type EapExpandedListItem = {
+    label: string;
+    lastUpdated?: string;
+    eap: EapListItem;
+    type: 'registration' | 'development' | 'review' | 'revision' | 'validated' | 'approved' | 'signed';
+    disabled?: boolean;
+
+    // Only applicable for development type
+    details: SimplifiedEapDetails | FullEapDetails | undefined;
+};
+
+export type EapExpandedItem = {
+    eap: EapListItem;
+    expandedItems: EapExpandedListItem[];
+};
diff --git a/app/src/views/AccountMyFormsLayout/i18n.json b/app/src/views/AccountMyFormsLayout/i18n.json
index 6b70856db7..c23cf7ce5b 100644
--- a/app/src/views/AccountMyFormsLayout/i18n.json
+++ b/app/src/views/AccountMyFormsLayout/i18n.json
@@ -4,6 +4,7 @@
         "fieldReportTabTitle": "Field Report",
         "perTabTitle": "PER",
         "drefTabTitle": "DREF",
-        "threeWTabTitle": "3W"
+        "threeWTabTitle": "3W",
+        "eapApplications": "EAP Applications"
     }
 }
\ No newline at end of file
diff --git a/app/src/views/AccountMyFormsLayout/index.tsx b/app/src/views/AccountMyFormsLayout/index.tsx
index 5364a38441..c7eaac05d2 100644
--- a/app/src/views/AccountMyFormsLayout/index.tsx
+++ b/app/src/views/AccountMyFormsLayout/index.tsx
@@ -35,6 +35,11 @@ export function Component() {
                 >
                     {strings.threeWTabTitle}
                 </NavigationTab>
+                <NavigationTab
+                    to="accountMyFormsEap"
+                >
+                    {strings.eapApplications}
+                </NavigationTab>
             </NavigationTabList>
             <Outlet />
         </TabPage>
diff --git a/app/src/views/DrefApplicationForm/index.tsx b/app/src/views/DrefApplicationForm/index.tsx
index 226d5a1c49..58b95680cd 100644
--- a/app/src/views/DrefApplicationForm/index.tsx
+++ b/app/src/views/DrefApplicationForm/index.tsx
@@ -308,6 +308,7 @@ export function Component() {
 
     const loadResponseToFormValue = useCallback((response: GetDrefResponse) => {
         handleDrefLoad(response);
+
         const {
             planned_interventions,
             proposed_action,
diff --git a/app/src/views/DrefDetail/i18n.json b/app/src/views/DrefDetail/i18n.json
new file mode 100644
index 0000000000..47ce2fe4c4
--- /dev/null
+++ b/app/src/views/DrefDetail/i18n.json
@@ -0,0 +1,15 @@
+{
+    "namespace": "drefDetail",
+    "strings": {
+        "drefIntroHeading": "DREF Intro",
+        "drefIntroDetailOne": "Every year, small and medium-sized disasters occur in silence. Without media attention or international visibility, they can struggle to attract funding—putting affected communities at risk of being completely neglected.",
+        "drefIntroDetailTwo": "To support these smaller disasters, or to provide initial funding before launching an Emergency Appeal, we rapidly channel funding to Red Cross and Red Crescent Societies through the DREF—enabling them to deliver fast and effective local humanitarian action.",
+        "drefProcessHeading": "Dref Process",
+        "drefProcessSubHeading": "We provide funding in two ways:",
+        "drefProcessListOne": "A loan facility: start-up funding for the IFRC and National Societies to respond to large-scale disasters, which will later be reimbursed by donor contributions to an Emergency Appeal.",
+        "drefProcessListTwo": "A grant facility: funding for National Society responses to small- and medium-sized disasters. This is used when no Emergency Appeal will be launched or when support from other actors is not foreseen.",
+        "drefProcessDetailOne": "The fund is demand-driven and locally-owned. It is open to all 191 National Societies that submit funding applications and plans of action reflecting locally identified priorities and needs.",
+        "drefProcessDetailTwo": "On average, the DREF supports more than 100 responses to small and medium-sized disasters every year.",
+        "drefDrefApplication": "DREF Application"
+    }
+}
diff --git a/app/src/views/DrefDetail/index.tsx b/app/src/views/DrefDetail/index.tsx
new file mode 100644
index 0000000000..33869faf08
--- /dev/null
+++ b/app/src/views/DrefDetail/index.tsx
@@ -0,0 +1,58 @@
+import {
+    Container,
+    ListView,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import SurgeContentContainer from '#components/domain/SurgeContentContainer';
+import Link from '#components/Link';
+
+import i18n from './i18n.json';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <Container>
+            <ListView
+                layout="block"
+            >
+                <SurgeContentContainer
+                    heading={strings.drefIntroHeading}
+                >
+                    <div>{strings.drefIntroDetailOne}</div>
+                    <div>{strings.drefIntroDetailTwo}</div>
+                </SurgeContentContainer>
+                <SurgeContentContainer
+                    heading={strings.drefProcessHeading}
+                >
+                    <div>{strings.drefProcessSubHeading}</div>
+                    <ul>
+                        <li>
+                            {strings.drefProcessListOne}
+                        </li>
+                        <li>
+                            {strings.drefProcessListTwo}
+                        </li>
+                    </ul>
+                    <div>
+                        {strings.drefProcessDetailOne}
+                    </div>
+                    <div>
+                        {strings.drefProcessDetailTwo}
+                    </div>
+                </SurgeContentContainer>
+                <Link
+                    to="newDrefApplicationForm"
+                    withUnderline
+                >
+                    {strings.drefDrefApplication}
+                </Link>
+            </ListView>
+        </Container>
+    );
+}
+
+Component.displayName = 'DrefDetail';
diff --git a/app/src/views/DrefProcess/i18n.json b/app/src/views/DrefProcess/i18n.json
new file mode 100644
index 0000000000..01904a6dda
--- /dev/null
+++ b/app/src/views/DrefProcess/i18n.json
@@ -0,0 +1,9 @@
+{
+    "namespace": "drefProcess",
+    "strings": {
+        "eapHeading": "Disaster Response Emergency Fund (DREF)",
+        "eapDescription": "The IFRC's Disaster Emergency Fund (DREF): rapid, reliable funding for life-saving action.",
+        "eapProcessDrefTab": "Response And Imminent Dref",
+        "eapProcessEapTab": "Early Action Protocols (EAP)"
+    }
+}
diff --git a/app/src/views/DrefProcess/index.tsx b/app/src/views/DrefProcess/index.tsx
new file mode 100644
index 0000000000..2ed605891a
--- /dev/null
+++ b/app/src/views/DrefProcess/index.tsx
@@ -0,0 +1,37 @@
+import { Outlet } from 'react-router-dom';
+import { NavigationTabList } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import NavigationTab from '#components/NavigationTab';
+import Page from '#components/Page';
+
+import i18n from './i18n.json';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <Page
+            heading={strings.eapHeading}
+            description={strings.eapDescription}
+        >
+            <NavigationTabList>
+                <NavigationTab
+                    to="drefDetail"
+                >
+                    {strings.eapProcessDrefTab}
+                </NavigationTab>
+                <NavigationTab
+                    to="eapDetail"
+                >
+                    {strings.eapProcessEapTab}
+                </NavigationTab>
+            </NavigationTabList>
+            <Outlet />
+        </Page>
+    );
+}
+
+Component.displayName = 'DrefProcess';
diff --git a/app/src/views/EapFullForm/EAPSourceInformationInput/i18n.json b/app/src/views/EapFullForm/EAPSourceInformationInput/i18n.json
new file mode 100644
index 0000000000..fb51cf85e1
--- /dev/null
+++ b/app/src/views/EapFullForm/EAPSourceInformationInput/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "eapSourceInformationNameLabel": "Name",
+        "eapSourceInformationLinkLabel": "Link",
+        "eapSourceInformationDeleteButton": "Delete Source Information"
+    }
+}
diff --git a/app/src/views/EapFullForm/EAPSourceInformationInput/index.tsx b/app/src/views/EapFullForm/EAPSourceInformationInput/index.tsx
new file mode 100644
index 0000000000..159f2dfd4b
--- /dev/null
+++ b/app/src/views/EapFullForm/EAPSourceInformationInput/index.tsx
@@ -0,0 +1,122 @@
+import { useCallback } from 'react';
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isNotDefined,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type PartialForm,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import NonFieldError from '#components/NonFieldError';
+import { type components } from '#generated/types';
+
+import i18n from './i18n.json';
+
+type EAPSourceInformation = components['schemas']['EAPSourceInformation'] & { client_id: string };
+
+export type SourceInformationFormFields = PartialForm<EAPSourceInformation, 'client_id'>;
+
+interface Props {
+    value: SourceInformationFormFields;
+    error: ArrayError<SourceInformationFormFields> | undefined;
+    onChange: (
+        value: SetValueArg<SourceInformationFormFields>,
+        index: number
+    ) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+
+function EAPSourceInformationInput(props: Props) {
+    const {
+        error: errorFromProps,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+        readOnly,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const onFieldChange = useFormObject(index, onChange, () => ({
+        client_id: randomString(),
+    }));
+
+    const error = value && value.client_id && errorFromProps
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : undefined;
+
+    const handleSourceFieldChange = useCallback(
+        (newValue: string | undefined) => {
+            if (
+                isNotDefined(newValue)
+                || newValue.startsWith('http://')
+                || newValue.startsWith('https://')
+                || newValue === 'h'
+                || newValue === 'ht'
+                || newValue === 'htt'
+                || newValue === 'http'
+                || newValue === 'http:'
+                || newValue === 'http:/'
+                || newValue === 'https'
+                || newValue === 'https:'
+                || newValue === 'https:/'
+            ) {
+                onFieldChange(newValue, 'source_link');
+                return;
+            }
+
+            onFieldChange(`https://${newValue}`, 'source_link');
+        },
+        [onFieldChange],
+    );
+
+    return (
+        <>
+            <NonFieldError error={error} />
+            <TextInput
+                label={strings.eapSourceInformationNameLabel}
+                name="source_name"
+                value={value.source_name}
+                error={error?.source_name}
+                onChange={onFieldChange}
+                readOnly={readOnly}
+                disabled={disabled}
+            />
+            <TextInput
+                label={strings.eapSourceInformationLinkLabel}
+                name="source_link"
+                value={value.source_link}
+                error={error?.source_link}
+                onChange={handleSourceFieldChange}
+                readOnly={readOnly}
+                disabled={disabled}
+            />
+            <Button
+                name={index}
+                onClick={onRemove}
+                styleVariant="action"
+                disabled={disabled || readOnly}
+                title={strings.eapSourceInformationDeleteButton}
+            >
+                <DeleteBinTwoLineIcon />
+            </Button>
+        </>
+    );
+}
+
+export default EAPSourceInformationInput;
diff --git a/app/src/views/EapFullForm/EapActivationProcess/i18n.json b/app/src/views/EapFullForm/EapActivationProcess/i18n.json
new file mode 100644
index 0000000000..b25e56db9a
--- /dev/null
+++ b/app/src/views/EapFullForm/EapActivationProcess/i18n.json
@@ -0,0 +1,44 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "activationProcessHeading": "EAP Activation Process",
+        "activationProcessTooltip": "It is crucial to select early actions that have the most potential to reduce the identified risks(s) and are feasible to implement given the lead time of the forecast.  It is important to describe briefly: Who was involved? What data was consulted? Was research conducted? Were communities involved? For more guidance see FbF Manual, Chapter 4.2 Select Early Actions.",
+        "activationProcessTitle": "Early action implementation process",
+        "activationProcessDescription1": "Include a matrix/flowchart for a quick overview of the early action implementation process.",
+        "activationProcessDescription2": "Early Describe the step-by-step process from Day 1 to Day X for the implementation of the selected early actions. Indicate the day when the Stop Mechanism would occur. Include all critical and support tasks that are necessary for each of the steps. Each task should indicate the position of the person responsible (including when cash-based actions are planned liaison with the financial service provider)... implementation process",
+        "activationProcessDescriptionLabel": "Description",
+        "activationProcessExplanatoryLabel": "Explanatory Note",
+        "activationProcessRequiredPointsLabel": "Required Points",
+        "activationImplementationExplanatoryNote": "As a crucial component of the EAP, once the trigger has been reached, everyone involved should be knowledgeable about what will be done, where, when and by whom. The described implementation process shows that each step of the activation has been thought through and considered and that implementation in the lead time available is possible. The set of tasks described in this section should cover all activities from the moment the trigger is reached (Day 1) to the completion of post-impact surveys (Day X).",
+        "activationImplementationRequiredPoint1": "Include a matrix/flowchart for a quick overview of the early action implementation process.",
+        "activationImplementationRequiredPoint2": "Describe the step-by-step process from Day 1 to Day X for the implementation of the selected early actions. Indicate the day when the Stop Mechanism would occur. Include all critical and support tasks that are necessary for each of the steps. Each task should indicate the position of the person responsible (including when cash-based actions are planned liaison with the financial service provider).",
+        "activationImplementationRequiredPoint3": "For each action, include at which level it will take place (HQ, branch, community).",
+        "activationImplementationRequiredPoint4": "Each NS should have a detailed version of this process, including communication flows, for each task and the name of the person responsible with their contact information. This document should be regularly updated.",
+        "activationProcessUploadLabel": "Upload",
+        "activationTriggerTitle": "Trigger activation system",
+        "activationTriggerDescription1": "Describe the automatic system used to monitor the forecasts, generate the intervention map and send the alert message when the trigger is reached.",
+        "activationTriggerDescription2": "If this automatic system does not yet exist, explain how forecasts will be monitored, intervention maps generated and how the relevant actors will be informed that the trigger has been reached.",
+        "activationTriggerDescription3": "Indicate who gives the signal to start the activation.",
+        "activationTriggerExplanatoryNote": "The activation process starts with the message that the trigger has been reached (on Day 1). Ideally, there is a system in place to automatically monitor the forecasts and send an automatic message of alert to relevant actors as soon as a trigger is reached. It is expected that this will be executed by the national meteorological office and/or national DRM authority. If this automatic system does not exist, a mechanism needs to be in place to monitor the forecasts and alert relevant actors as soon as a trigger is reached to initiate the early actions.",
+        "activationTriggerRequiredPoint1": "Describe the automatic system used to monitor the forecasts, generate the intervention map and send the alert message when the trigger is reached.",
+        "activationTriggerRequiredPoint2": "If this automatic system does not yet exist, explain how forecasts will be monitored, intervention maps generated and how the relevant actors will be informed that the trigger has been reached.",
+        "activationTriggerRequiredPoint3": "Indicate who gives the signal to start the activation.",
+        "activationPeopleTargetedTitle": "People Targeted",
+        "activationPeopleTargetedDescription": "Specify number of people targeted",
+        "activationSelectionPopulationTitle": "Selection of target population",
+        "activationSelectionDescription1": "Provide a short summary of the target population, (the number, location etc.)",
+        "activationSelectionDescription2": "Describe how the target population will be selected, with a special focus on feasibility in the short period of time between forecast and event",
+        "activationSelectionDescription3": "If  the EAP is intending to use Social Protection systems or other government      beneficiary databases, indicate how the potential number of targeted households be selected",
+        "activationSelectionExplanatoryNote": "FbF aims to protect the most vulnerable from the impact of extreme weather events. Based on the analysis on vulnerability and exposure (in section 3) and on the described mechanism for identifying intervention areas/communities (in section 4- Intervention area), it needs to be clear, how vulnerability criteria and impact forecasts will be applied to determine who will be targeted.",
+        "activationStopMechanismTitle": "Stop Mechanism",
+        "activationStopMechanismDescription1": "Indicate on which day of activation the stop mechanism is foreseen, and who is responsible to give the signal to stop.",
+        "activationStopMechanismDescription2": "Describe when the stop mechanism begins and whether in-kind/cash distribution would be stopped or not. For cash actions cancelled, how would this be coordinated with the financial service provider? For in-kind distribution, what would happen with the perishable items?",
+        "activationStopMechanismDescription3": "Explain how it would be communicated to communities and stakeholders that the activities are being stopped.",
+        "activationStopMechanismExplanatoryNote": "For forecast triggers with a lead time of more than three days, the EAP should include the description of a stop mechanism. This means that if a later forecast – prior to the start of activities (related to the early action(s)) shows that the event is no longer likely to occur, the activation of the EAP will be stopped to avoid generating further use of resources. For example, if the 6-day forecast on Day 1 indicates high risk of heavy rainfall and thereby triggers the activation and the new 6-day-forecast released on Day 3 shows that the risk has significantly lowered, the trigger level is no longer reached. If the start of distributions was planned for Day 4, activation should be stopped. Items that have been purchased based on the trigger being reached and are not distributed due to the stop mechanism should be stored in the warehouse for a future activation. For forecast triggers with a lead time of less than 3 days, the EAP should include the description of what the National Society would do if the forecast changes in strength or location within the last three days before the event.",
+        "activationAttachFilesTitle": "Attach Relevant Files",
+        "activationAttachFilesDescription": "Attach any additional maps, documentation, files, images, etc.",
+        "activationSourceOfInformationTitle": "Sources of Information",
+        "activationSourceOfInformationAddNewLabel": "Add New Source of Information",
+        "activationSourceOfInformationDescription": "Add the description of the sources one at a time. If the source has a link, add in the second field."
+    }
+}
diff --git a/app/src/views/EapFullForm/EapActivationProcess/index.tsx b/app/src/views/EapFullForm/EapActivationProcess/index.tsx
new file mode 100644
index 0000000000..67338ab9a6
--- /dev/null
+++ b/app/src/views/EapFullForm/EapActivationProcess/index.tsx
@@ -0,0 +1,338 @@
+import { useCallback } from 'react';
+import {
+    Button,
+    Heading,
+    InfoPopup,
+    InputSection,
+    ListView,
+    NumberInput,
+    TextArea,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { randomString } from '@togglecorp/fujs';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import GoMultiFileInput from '#components/domain/GoMultiFileInput';
+import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput';
+import NonFieldError from '#components/NonFieldError';
+import TabPage from '#components/TabPage';
+
+import EAPSourceInformationInput, { type SourceInformationFormFields } from '../EAPSourceInformationInput';
+import { type PartialEapFullFormType } from '../schema';
+
+import i18n from './i18n.json';
+
+interface Props {
+    value: PartialEapFullFormType;
+    setFieldValue: (...entries: EntriesAsList<PartialEapFullFormType>) => void;
+    error: Error<PartialEapFullFormType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<
+        React.SetStateAction<Record<number, string>>
+    >;
+}
+
+function EapActivationProcess(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const error = getErrorObject(formError);
+
+    const {
+        setValue: onRiskSourceInformationChange,
+        removeValue: onRiskSourceInformationRemove,
+    } = useFormArray<
+        'activation_process_source_of_information',
+        SourceInformationFormFields
+    >('activation_process_source_of_information', setFieldValue);
+
+    const handleSourceInformationAdd = useCallback(() => {
+        const newSourceInformationItem: SourceInformationFormFields = {
+            client_id: randomString(),
+        };
+
+        setFieldValue(
+            (oldValue: SourceInformationFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newSourceInformationItem,
+            ],
+            'activation_process_source_of_information' as const,
+        );
+    }, [setFieldValue]);
+
+    return (
+        <TabPage>
+            <ListView layout="block">
+                <Heading level={4}>
+                    {strings.activationProcessHeading}
+                    <InfoPopup description={strings.activationProcessTooltip} />
+                </Heading>
+                <InputSection
+                    title={strings.activationProcessTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                strongLabel
+                                label={strings.activationProcessExplanatoryLabel}
+                                value={strings.activationImplementationExplanatoryNote}
+                            />
+                            <TextOutput
+                                strongLabel
+                                label={strings.activationProcessRequiredPointsLabel}
+                                value={(
+                                    <ul>
+                                        <li>{strings.activationImplementationRequiredPoint1}</li>
+                                        <li>{strings.activationImplementationRequiredPoint2}</li>
+                                        <li>{strings.activationImplementationRequiredPoint3}</li>
+                                        <li>{strings.activationImplementationRequiredPoint4}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.activationProcessDescription1}</li>
+                            <li>{strings.activationProcessDescription2}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.activationProcessDescriptionLabel}
+                        name="early_action_implementation_process"
+                        onChange={setFieldValue}
+                        value={value?.early_action_implementation_process}
+                        error={error?.early_action_implementation_process}
+                        disabled={disabled}
+                    />
+                    <MultiImageWithCaptionInput
+                        name="early_action_implementation_images"
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.early_action_implementation_images}
+                        onChange={setFieldValue}
+                        error={getErrorObject(error?.early_action_implementation_images)}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        label={strings.activationProcessUploadLabel}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    withAsteriskOnTitle
+                    title={strings.activationTriggerTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                strongLabel
+                                label={strings.activationProcessExplanatoryLabel}
+                                value={strings.activationTriggerExplanatoryNote}
+                            />
+                            <TextOutput
+                                strongLabel
+                                label={strings.activationProcessRequiredPointsLabel}
+                                value={(
+                                    <ul>
+                                        <li>{strings.activationTriggerRequiredPoint1}</li>
+                                        <li>{strings.activationTriggerRequiredPoint2}</li>
+                                        <li>{strings.activationTriggerRequiredPoint3}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.activationTriggerDescription1}</li>
+                            <li>{strings.activationTriggerDescription2}</li>
+                            <li>{strings.activationTriggerDescription3}</li>
+                        </ul>
+                    )}
+                >
+                    <TextArea
+                        label={strings.activationProcessDescriptionLabel}
+                        name="trigger_activation_system"
+                        onChange={setFieldValue}
+                        value={value?.trigger_activation_system}
+                        error={error?.trigger_activation_system}
+                        disabled={disabled}
+                    />
+                    <MultiImageWithCaptionInput
+                        name="trigger_activation_system_images"
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.trigger_activation_system_images}
+                        onChange={setFieldValue}
+                        error={getErrorObject(error?.trigger_activation_system_images)}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        label={strings.activationProcessUploadLabel}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.activationPeopleTargetedTitle}
+                    description={strings.activationPeopleTargetedDescription}
+                    withAsteriskOnTitle
+                >
+                    <NumberInput
+                        name="people_targeted"
+                        onChange={setFieldValue}
+                        value={value?.people_targeted}
+                        error={error?.people_targeted}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    withAsteriskOnTitle
+                    title={strings.activationSelectionPopulationTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                strongLabel
+                                label={strings.activationProcessExplanatoryLabel}
+                                value={strings.activationSelectionExplanatoryNote}
+                            />
+                            <TextOutput
+                                strongLabel
+                                label={strings.activationProcessRequiredPointsLabel}
+                                value={(
+                                    <ul>
+                                        <li>{strings.activationSelectionDescription1}</li>
+                                        <li>{strings.activationSelectionDescription2}</li>
+                                        <li>{strings.activationSelectionDescription3}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.activationSelectionDescription1}</li>
+                            <li>{strings.activationSelectionDescription2}</li>
+                            <li>{strings.activationSelectionDescription3}</li>
+                        </ul>
+                    )}
+                >
+                    <TextArea
+                        label={strings.activationProcessDescriptionLabel}
+                        name="selection_of_target_population"
+                        onChange={setFieldValue}
+                        value={value?.selection_of_target_population}
+                        error={error?.selection_of_target_population}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    withAsteriskOnTitle
+                    title={strings.activationStopMechanismTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                strongLabel
+                                label={strings.activationProcessExplanatoryLabel}
+                                value={strings.activationStopMechanismExplanatoryNote}
+                            />
+                            <TextOutput
+                                strongLabel
+                                label={strings.activationProcessRequiredPointsLabel}
+                                value={(
+                                    <ul>
+                                        <li>{strings.activationStopMechanismDescription1}</li>
+                                        <li>{strings.activationStopMechanismDescription2}</li>
+                                        <li>{strings.activationStopMechanismDescription3}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.activationStopMechanismDescription1}</li>
+                            <li>{strings.activationStopMechanismDescription2}</li>
+                            <li>{strings.activationStopMechanismDescription3}</li>
+                        </ul>
+                    )}
+                >
+                    <TextArea
+                        label={strings.activationProcessDescriptionLabel}
+                        name="stop_mechanism"
+                        onChange={setFieldValue}
+                        value={value?.stop_mechanism}
+                        error={error?.stop_mechanism}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.activationAttachFilesTitle}
+                    description={strings.activationAttachFilesDescription}
+                >
+                    <GoMultiFileInput
+                        name="activation_process_relevant_files"
+                        accept=".pdf, .docx, .pptx"
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        onChange={setFieldValue}
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.activation_process_relevant_files}
+                        error={getErrorString(error?.activation_process_relevant_files)}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        clearable
+                        disabled={disabled}
+                        useCurrentLanguageForMutation
+                    >
+                        {strings.activationProcessUploadLabel}
+                    </GoMultiFileInput>
+                </InputSection>
+                <InputSection
+                    title={strings.activationSourceOfInformationTitle}
+                    description={strings.activationSourceOfInformationDescription}
+                >
+                    <NonFieldError
+                        error={getErrorObject(
+                            error?.activation_process_source_of_information,
+                        )}
+                    />
+                    {value?.activation_process_source_of_information?.map(
+                        (source, index) => (
+                            <EAPSourceInformationInput
+                                key={source.client_id}
+                                index={index}
+                                value={source}
+                                onChange={onRiskSourceInformationChange}
+                                onRemove={onRiskSourceInformationRemove}
+                                error={getErrorObject(
+                                    error?.activation_process_source_of_information,
+                                )}
+                                disabled={disabled}
+                            />
+                        ),
+                    )}
+                    <Button
+                        name={undefined}
+                        onClick={handleSourceInformationAdd}
+                        disabled={disabled}
+                    >
+                        {strings.activationSourceOfInformationAddNewLabel}
+                    </Button>
+                </InputSection>
+            </ListView>
+        </TabPage>
+    );
+}
+
+export default EapActivationProcess;
diff --git a/app/src/views/EapFullForm/FinanceLogistics/i18n.json b/app/src/views/EapFullForm/FinanceLogistics/i18n.json
new file mode 100644
index 0000000000..a4ada3d230
--- /dev/null
+++ b/app/src/views/EapFullForm/FinanceLogistics/i18n.json
@@ -0,0 +1,41 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "financeHeading": "Finance and Logistics",
+        "financeBudgetTitle": "Budget",
+        "financeBudgetDescription1": "Provide the EAP budget as a separate annex using the IFRC standard budgeting template for Early Action Protocol and following the same order (and output codes) as in the operational matrix filled in the EAP activation process section.",
+        "financeBudgetDescription2": "In the budget, make sure to indicate who (Host National Society, PNS, IFRC) will be responsible for each expenditure according to the roles and responsibilities in the EAP.",
+        "financeBudgetDescription3": "The budget groups in the budget template are meant to be a guidance and the most suitable one should be identified and used.",
+        "financeBudgetDescription4": "Avoid using lumpsums as unit measure.",
+        "financeTotalBudgetLabel": "Total Budget",
+        "financeDescriptionLabel": "Description",
+        "financeExplanatoryNoteLabel": "Explanatory Note",
+        "financeRequiredPointsLabel": "Required Points",
+        "financeExplanatoryNote": "The EAP budget consists of all the costs linked to the activation of the EAP as well as readiness and pre-positioning costs. The budget cannot include costs for the development of the EAP and the setting up of the FbF system in a country (e.g. initial trainings of volunteers, etc.). This process should be financed by other sources of longer-term funding. The maximum amount of funding available for each EAP from the DREF is 500,000 Swiss francs. The budget will have to include the IFRC indirect costs of 6,5%. The National Society may include administrative costs as well in the EAP which should not be more than 5% of the early action budget. If the 5% rate is not used the National Society will need to list out the each of the admin cost individually. The M&E budget should be maximum 5% of overall the budget.",
+        "financeUploadButtonLabel": "Upload",
+        "financeDownloadDescription": "Download full budget template",
+        "financeUploadBudgetLabel": "Upload Budget",
+        "financeReadinessCostTitle": "Readiness Cost",
+        "financeReadinessCostExplanatoryNote": "Readiness costs cover those costs related to the upkeep/maintenance of the FbF system in-country, once it has been established and the EAP has been developed. This refers to the required costs to ensure that the NS is “ready” to implement the EAP at any point during the five-year lifecycle of the EAP. These could include, for example, costs for refresher trainings, warehouses, updating data, staff, costs for markets monitoring, costs for updating the cash transfer value etc. Readiness combined with pre-positioning costs are limited to 65% of the total EAP budget over the EAP’s lifecycle and are disbursed by the DREF on an annual basis through the IFRC Operational Plan for that specific country.",
+        "financeReadinessCostDescription1": "For each item of readiness costs in the budget, explain why these are necessary for the upkeep of the EAP and how these were calculated.",
+        "financeReadinessCostDescription2": "Indicate who will manage these funds and describe how it will be ensured that they are only used for the indicated purposes.",
+        "financeReadinessBudgetLabel": "Readiness Budget",
+        "financePrePositioningTitle": "Pre-positioning Cost",
+        "financePrePositioningExplanatoryNote": "In order to ensure the feasibility of the rapid distribution of items in the short timeframe between forecast and event, pre-positioning of goods might be necessary. They should normally have a lifetime of at least the lifecycle of the EAP and should only be replenished after an activation. The DREF covers these costs, combined with readiness, to a maximum amount of 65% of the EAP budget (combined with the readiness activities). Please note that costs that are not for the procurement of the items but related to the maintenance of the stock, such as warehousing, are part of the readiness costs of an EAP (see section 9.2.)",
+        "financePrePositioningDescription1": "If funds for pre-positioning are requested from the DREF, explain for which items and why no other option is possible. Explain why standard response stocks cannot be used.",
+        "financePrePositioningDescription2": "Expiry date of the items should not be prior to the end of the lifecycle of the EAP",
+        "financePrePositioningDescription3": "Provide information about the location of the storage facilities and costs of storage, etc.",
+        "financePrePositioningBudgetLabel": "Pre-Positioning Budget",
+        "financeEarlyActionCostTitle": "Early Action Cost",
+        "financeEarlyActionBudgetLabel": "Early Actions Budget",
+        "financeEarlyActionCostDescription1": "In the budget, list all these costs under the section early action costs.",
+        "financeEarlyActionCostDescription2": "Indicate activation procedures once the trigger is reached, clearly define the funds release procedures including who initiates the funds request, approval chain/procedures and process of disbursement including time frames from the source of funds to HQ and branches.",
+        "financeEarlyActionCostDescription3": "For the items included in the early action budget, indicate how they will be procured in the short activation period (e.g.  Are there pre-disaster agreements made with suppliers? Are items readily available in the needed quantities with the identified suppliers? Are agreements with financial service providers ready for activation?) Or will you use the early action funds to replenish items that are already in stock?",
+        "financeEarlyActionCostDescription4": "Indicate if other sources of funding were used for the initial purchase of relief items for an activation (in this case the DREF could fund the replenishment of stock only if they are used for the early actions).",
+        "financeEarlyActionCostExplanatoryNote": "Early Action costs cover all expenditures that are linked to the activation of the EAP, once the trigger has been reached. This can cover identification of target populations; CVA; distribution of items and/or cash, and provision of services; deployment of volunteers and staff; reporting and M & E, such as implementation monitoring; and impact survey data collection and analysis.",
+        "financeEapEndorsementHeading": "EAP endorsement/Approval",
+        "financeEapEndorsementTitle": "EAP endorsement",
+        "financeEapEndorsementExplanatoryNote": "It should be ensured that at the point of the trigger being reached no further permissions are needed. Thus, the EAP should have prior approval from all relevant stakeholders. The EAP must be endorsed by the leadership of the submitting NS. The EAP should also be endorsed by other key relevant stakeholders, such as the NHMS and the respective DRM authorities. If technical working groups have been created for FbF, their members should also endorse the final version of the EAP before submission.",
+        "financeEapEndorsementDescription": "Describe by whom, how and when the EAP was agreed and endorsed."
+    }
+}
diff --git a/app/src/views/EapFullForm/FinanceLogistics/index.tsx b/app/src/views/EapFullForm/FinanceLogistics/index.tsx
new file mode 100644
index 0000000000..ac4a142d6a
--- /dev/null
+++ b/app/src/views/EapFullForm/FinanceLogistics/index.tsx
@@ -0,0 +1,278 @@
+import {
+    Heading,
+    InputSection,
+    ListView,
+    NumberInput,
+    TextArea,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+} from '@togglecorp/toggle-form';
+
+import GoSingleFileInput from '#components/domain/GoSingleFileInput';
+import TabPage from '#components/TabPage';
+
+import { type PartialEapFullFormType } from '../schema';
+
+import i18n from './i18n.json';
+
+interface Props {
+    value: PartialEapFullFormType;
+    setFieldValue: (...entries: EntriesAsList<PartialEapFullFormType>) => void;
+    error: Error<PartialEapFullFormType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<
+        React.SetStateAction<Record<number, string>>
+    >;
+}
+
+function FinanceLogistics(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+    } = props;
+
+    const error = getErrorObject(formError);
+    const strings = useTranslation(i18n);
+
+    return (
+        <TabPage>
+            <ListView layout="block">
+                <Heading level={4}>{strings.financeHeading}</Heading>
+                <InputSection
+                    title={strings.financeBudgetTitle}
+                    tooltip={(
+                        <TextOutput
+                            strongLabel
+                            label={strings.financeExplanatoryNoteLabel}
+                            value={strings.financeExplanatoryNote}
+                        />
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.financeBudgetDescription1}</li>
+                            <li>{strings.financeBudgetDescription2}</li>
+                            <li>{strings.financeBudgetDescription3}</li>
+                            <li>{strings.financeBudgetDescription4}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <NumberInput
+                        label={strings.financeTotalBudgetLabel}
+                        name="total_budget"
+                        value={value?.total_budget}
+                        error={error?.total_budget}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                    <TextArea
+                        label={strings.financeDescriptionLabel}
+                        name="budget_description"
+                        value={value?.budget_description}
+                        error={error?.budget_description}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection description={strings.financeDownloadDescription}>
+                    <GoSingleFileInput
+                        name="budget_file"
+                        accept=".pdf, .docx, .pptx"
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        onChange={setFieldValue}
+                        url="/api/v2/eap-file/"
+                        value={value?.budget_file}
+                        error={getErrorString(error?.budget_file)}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        required
+                        clearable
+                        disabled={disabled}
+                        useCurrentLanguageForMutation
+                        label={strings.financeUploadBudgetLabel}
+                    >
+                        {strings.financeUploadButtonLabel}
+                    </GoSingleFileInput>
+                </InputSection>
+                <InputSection
+                    title={strings.financeReadinessCostTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                strongLabel
+                                label={strings.financeExplanatoryNoteLabel}
+                                value={strings.financeReadinessCostExplanatoryNote}
+                            />
+                            <TextOutput
+                                strongLabel
+                                label={strings.financeRequiredPointsLabel}
+                                value={(
+                                    <ul>
+                                        <li>{strings.financeReadinessCostDescription1}</li>
+                                        <li>{strings.financeReadinessCostDescription2}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.financeReadinessCostDescription1}</li>
+                            <li>{strings.financeReadinessCostDescription2}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <NumberInput
+                        label={strings.financeReadinessBudgetLabel}
+                        name="readiness_budget"
+                        value={value?.readiness_budget}
+                        error={error?.readiness_budget}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                    <TextArea
+                        label={strings.financeDescriptionLabel}
+                        name="readiness_cost_description"
+                        value={value?.readiness_cost_description}
+                        error={error?.readiness_cost_description}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.financePrePositioningTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                strongLabel
+                                label={strings.financeExplanatoryNoteLabel}
+                                value={strings.financePrePositioningExplanatoryNote}
+                            />
+                            <TextOutput
+                                strongLabel
+                                label={strings.financeRequiredPointsLabel}
+                                value={(
+                                    <ul>
+                                        <li>{strings.financePrePositioningDescription1}</li>
+                                        <li>{strings.financePrePositioningDescription2}</li>
+                                        <li>{strings.financePrePositioningDescription3}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.financePrePositioningDescription1}</li>
+                            <li>{strings.financePrePositioningDescription2}</li>
+                            <li>{strings.financePrePositioningDescription3}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <NumberInput
+                        label={strings.financePrePositioningBudgetLabel}
+                        name="pre_positioning_budget"
+                        value={value?.pre_positioning_budget}
+                        error={error?.pre_positioning_budget}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                    <TextArea
+                        label={strings.financeDescriptionLabel}
+                        name="prepositioning_cost_description"
+                        value={value?.prepositioning_cost_description}
+                        error={error?.prepositioning_cost_description}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.financeEarlyActionCostTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                strongLabel
+                                label={strings.financeExplanatoryNoteLabel}
+                                value={strings.financeEarlyActionCostExplanatoryNote}
+                            />
+                            <TextOutput
+                                strongLabel
+                                label={strings.financeRequiredPointsLabel}
+                                value={(
+                                    <ul>
+                                        <li>{strings.financeEarlyActionCostDescription1}</li>
+                                        <li>{strings.financeEarlyActionCostDescription2}</li>
+                                        <li>{strings.financeEarlyActionCostDescription3}</li>
+                                        <li>{strings.financeEarlyActionCostDescription4}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.financeEarlyActionCostDescription1}</li>
+                            <li>{strings.financeEarlyActionCostDescription2}</li>
+                            <li>{strings.financeEarlyActionCostDescription3}</li>
+                            <li>{strings.financeEarlyActionCostDescription4}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <NumberInput
+                        label={strings.financeEarlyActionBudgetLabel}
+                        name="early_action_budget"
+                        value={value?.early_action_budget}
+                        error={error?.early_action_budget}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                    <TextArea
+                        label={strings.financeDescriptionLabel}
+                        name="early_action_cost_description"
+                        value={value?.early_action_cost_description}
+                        error={error?.early_action_cost_description}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <Heading level={4}>{strings.financeEapEndorsementHeading}</Heading>
+                <InputSection
+                    title={strings.financeEapEndorsementTitle}
+                    tooltip={(
+                        <TextOutput
+                            strongLabel
+                            label={strings.financeExplanatoryNoteLabel}
+                            value={strings.financeEapEndorsementExplanatoryNote}
+                        />
+                    )}
+                    description={strings.financeEapEndorsementDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.financeDescriptionLabel}
+                        name="eap_endorsement"
+                        value={value?.eap_endorsement}
+                        error={error?.eap_endorsement}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+            </ListView>
+        </TabPage>
+    );
+}
+
+export default FinanceLogistics;
diff --git a/app/src/views/EapFullForm/Meal/i18n.json b/app/src/views/EapFullForm/Meal/i18n.json
new file mode 100644
index 0000000000..3a816917eb
--- /dev/null
+++ b/app/src/views/EapFullForm/Meal/i18n.json
@@ -0,0 +1,21 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "mealHeading": "Monitoring, Evaluation, Accountability Learning (Meal)",
+        "mealTitle": "Meal",
+        "mealDescription1": "Following the guidance of the FbF Manual, describe the M&E plan for this EAP. Including:",
+        "mealDescription11": "EAP Monitoring (between the trigger moment and the implementation of the actions)",
+        "mealDescription12": "Impact evaluation plan: how, when and by whom will the robust impact evaluation to assess how early actions reduced the humanitarian impact of the extreme event be conducted. Please note that the IFRC DREF...",
+        "mealDescription13": "Trigger evaluation by whom, when and how the trigger evaluation will be conducted)",
+        "mealDescription14": "Learning (when, who and how the learning will take place. E.g workshop, interviews etc). ",
+        "mealDescription2": "If a more detailed M&E plan is available add it as an annex. ",
+        "mealDescription3": "Describe how the FbF M&E plan is linked to the existing PMER system of the National Society. If the NS does not have a PMER system, explain how the EAP will be used to strengthen this area prior to activation",
+        "mealDescriptionLabel": "Description",
+        "mealExplanatoryNoteLabel": "Explanatory Note",
+        "mealRequiredPointsLabel": "Required Points",
+        "mealExplanatoryNote": "Building evidence about the impact of FbF systems is a priority. Therefore, the EAP should include an M&E plan to 1) assess the impact of the early actions and the extreme event after each activation and 2) identify if all activities were carried out as planned and document how early actions were implemented 3) learn from the process to improve the system in the future. The chapters 4.3 Design M&E plan and 6. Activate, Monitor, Evaluate in the FbF Manual, provide guidance on the set-up and implementation of the monitoring, evaluation, learning tools. Ideally, the M&E system should be set up to allow comparison of impacts between communities that received early actions and those that didn´t (please refer to FbF manual for more information). This M&E plan should be harmonized with the existing IFRC PMER guidance and tools, available on FedNet.",
+        "mealAttachRelevantFilesTitle": "Attach relevant files",
+        "mealAttachRelevantFilesDescription": "Attach any additional maps, documentation, files, images, etc.",
+        "mealAttachRelevantFilesUploadLabel": "Upload"
+    }
+}
diff --git a/app/src/views/EapFullForm/Meal/index.tsx b/app/src/views/EapFullForm/Meal/index.tsx
new file mode 100644
index 0000000000..b2af41547a
--- /dev/null
+++ b/app/src/views/EapFullForm/Meal/index.tsx
@@ -0,0 +1,131 @@
+import {
+    Heading,
+    InputSection,
+    ListView,
+    TextArea,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+} from '@togglecorp/toggle-form';
+
+import GoMultiFileInput from '#components/domain/GoMultiFileInput';
+import TabPage from '#components/TabPage';
+
+import { type PartialEapFullFormType } from '../schema';
+
+import i18n from './i18n.json';
+
+interface Props {
+    value: PartialEapFullFormType;
+    setFieldValue: (...entries: EntriesAsList<PartialEapFullFormType>) => void;
+    error: Error<PartialEapFullFormType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<React.SetStateAction<Record<number, string>>>;
+}
+
+function Meal(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+    } = props;
+
+    const error = getErrorObject(formError);
+    const strings = useTranslation(i18n);
+
+    return (
+        <TabPage>
+            <ListView
+                layout="block"
+            >
+                <Heading level={4}>
+                    {strings.mealHeading}
+                </Heading>
+                <InputSection
+                    title={strings.mealTitle}
+                    tooltip={(
+                        <ListView
+                            layout="block"
+                        >
+                            <TextOutput
+                                strongLabel
+                                label={strings.mealExplanatoryNoteLabel}
+                                value={strings.mealExplanatoryNote}
+                            />
+                            <TextOutput
+                                strongLabel
+                                label={strings.mealRequiredPointsLabel}
+                                value={(
+                                    <ul>
+                                        <li>{strings.mealDescription1}</li>
+                                        <ul>
+                                            <li>{strings.mealDescription11}</li>
+                                            <li>{strings.mealDescription12}</li>
+                                            <li>{strings.mealDescription13}</li>
+                                            <li>{strings.mealDescription14}</li>
+                                        </ul>
+                                        <li>{strings.mealDescription2}</li>
+                                        <li>{strings.mealDescription3}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.mealDescription1}</li>
+                            <ul>
+                                <li>{strings.mealDescription11}</li>
+                                <li>{strings.mealDescription12}</li>
+                                <li>{strings.mealDescription13}</li>
+                            </ul>
+                            <li>{strings.mealDescription2}</li>
+                            <li>{strings.mealDescription3}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.mealDescriptionLabel}
+                        name="meal"
+                        value={value?.meal}
+                        error={error?.meal}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.mealAttachRelevantFilesTitle}
+                    description={strings.mealAttachRelevantFilesDescription}
+                >
+                    <GoMultiFileInput
+                        name="meal_relevant_files"
+                        accept=".pdf, .docx, .pptx"
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        onChange={setFieldValue}
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.meal_relevant_files}
+                        error={getErrorString(error?.meal_relevant_files)}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        clearable
+                        disabled={disabled}
+                        useCurrentLanguageForMutation
+                    >
+                        {strings.mealAttachRelevantFilesUploadLabel}
+                    </GoMultiFileInput>
+                </InputSection>
+            </ListView>
+        </TabPage>
+    );
+}
+
+export default Meal;
diff --git a/app/src/views/EapFullForm/NationalSocietyCapacity/i18n.json b/app/src/views/EapFullForm/NationalSocietyCapacity/i18n.json
new file mode 100644
index 0000000000..ea1798505a
--- /dev/null
+++ b/app/src/views/EapFullForm/NationalSocietyCapacity/i18n.json
@@ -0,0 +1,23 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "capacityHeading": "National Society Capacity",
+        "capacityHeadingTooltip": "Capacity to deliver early action is a key aspect of the FbF system. To have access to the DREF the NS should describe why and how it will be able to implement the early actions proposed in this protocol within the lead time and reaching all of the targeted population. This section could make reference to NS’s experience with previous DREFs (types of disasters, quantity of operations, planned operations implemented, among others). If a National Society has already gone through a Preparedness for Effective Response (PER) assessment process the results of these assessments should be referred to in this section as they provide National Societies with systematic, evidence-based information on their ability to conduct timely early action (looking also at support areas).",
+        "capacityOperationalTitle": "Operational, thematic and administrative capacity",
+        "capacityOperationalDescription1": "Describe how the National Society has operative and administrative capacity to implement the EAPs. Describe the National Society’s experience in the implementation of the selected early actions (Livelihoods, including Cash and Voucher Assistance; WASH: Food Security; Shelter, etc.). If the NS does not have experience in these areas, indicate the steps taken to improve its capacity in the respective sector to implement the EAP effectively and efficiently.",
+        "capacityOperationalDescription2": "If a feasibility study on FbF was conducted, indicate the findings in relation to the capacity of the NS to implement FbF.",
+        "capacityOperationalDescription3": "Indicate the number of staff and volunteers available for a potential activation. Explain how they have been trained on FbF/ activation.",
+        "capacityOperationalDescription4": "Explain if special structures are foreseen for EAP activation, e.g. NDRTs and specially trained volunteers per branch.",
+        "capacityDescriptionLabel": "Description",
+        "capacityRequiredPointsLabel": "Required Points",
+        "capacityExplanatoryNoteLabel": "Explanatory Note",
+        "capacityExplanatoryNote": "While the funds for the readiness and pre-positioning will be transferred as soon as the EAP is approved and the legal agreement has been signed, the funds for the early action activation will only be transferred once the trigger has been met and the trigger notification has been received by IFRC.  Please not that while this allocation is done immediately upon notification it may still take a few days for the funds to arrive in country. Therefore, especially for short lead time EAPs it is crucial for the National Society and their partners to plan accordingly.",
+        "capacityStrategiesPlansTitle": "Strategies and plans",
+        "capacityStrategiesPlansDescription": "Describe how the EAP is aligned with the Disaster Risk Management strategy of the National Society (e.g. in the existing contingency plan, DRR plan etc.).",
+        "capacityFinancialCapacityTitle": "Financial capacity to advance funds",
+        "capacityFinancialCapacityDescription": "Indicate whether the NS (and/or PNS in country) has the capacity to advance funds, to start early actions, in the short duration between trigger and funds from the DREF arriving.",
+        "capacityNationalRelevantFilesTitle": "Attach relevant files",
+        "capacityNationalRelevantFilesDescription": "Attach any additional maps, documentation, files, images, etc.",
+        "capacityNationalRelevantFilesUploadLabel": "Upload"
+    }
+}
diff --git a/app/src/views/EapFullForm/NationalSocietyCapacity/index.tsx b/app/src/views/EapFullForm/NationalSocietyCapacity/index.tsx
new file mode 100644
index 0000000000..6702af1bd2
--- /dev/null
+++ b/app/src/views/EapFullForm/NationalSocietyCapacity/index.tsx
@@ -0,0 +1,146 @@
+import {
+    Heading,
+    InfoPopup,
+    InputSection,
+    ListView,
+    TextArea,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+} from '@togglecorp/toggle-form';
+
+import GoMultiFileInput from '#components/domain/GoMultiFileInput';
+import TabPage from '#components/TabPage';
+
+import { type PartialEapFullFormType } from '../schema';
+
+import i18n from './i18n.json';
+
+interface Props {
+    value: PartialEapFullFormType;
+    setFieldValue: (...entries: EntriesAsList<PartialEapFullFormType>) => void;
+    error: Error<PartialEapFullFormType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<
+        React.SetStateAction<Record<number, string>>
+    >;
+}
+function NationalSocietyCapacity(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+    } = props;
+
+    const error = getErrorObject(formError);
+    const strings = useTranslation(i18n);
+
+    return (
+        <TabPage>
+            <ListView layout="block">
+                <Heading level={4}>
+                    {strings.capacityHeading}
+                    <InfoPopup description={strings.capacityHeadingTooltip} />
+                </Heading>
+                <InputSection
+                    title={strings.capacityOperationalTitle}
+                    description={(
+                        <ul>
+                            <li>{strings.capacityOperationalDescription1}</li>
+                            <li>{strings.capacityOperationalDescription2}</li>
+                            <li>{strings.capacityOperationalDescription3}</li>
+                            <li>{strings.capacityOperationalDescription4}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.capacityDescriptionLabel}
+                        name="operational_administrative_capacity"
+                        value={value?.operational_administrative_capacity}
+                        error={error?.operational_administrative_capacity}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.capacityStrategiesPlansTitle}
+                    description={strings.capacityStrategiesPlansDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.capacityDescriptionLabel}
+                        name="strategies_and_plans"
+                        value={value?.strategies_and_plans}
+                        error={error?.strategies_and_plans}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.capacityFinancialCapacityTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                strongLabel
+                                label={strings.capacityExplanatoryNoteLabel}
+                                value={strings.capacityExplanatoryNote}
+                            />
+                            <TextOutput
+                                strongLabel
+                                label={strings.capacityRequiredPointsLabel}
+                                value={(
+                                    <ul>
+                                        <li>{strings.capacityFinancialCapacityDescription}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={strings.capacityFinancialCapacityDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.capacityDescriptionLabel}
+                        name="advance_financial_capacity"
+                        value={value?.advance_financial_capacity}
+                        error={error?.advance_financial_capacity}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.capacityNationalRelevantFilesTitle}
+                    description={strings.capacityNationalRelevantFilesDescription}
+                >
+                    <GoMultiFileInput
+                        name="capacity_relevant_files"
+                        accept=".pdf, .docx, .pptx"
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        onChange={setFieldValue}
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.capacity_relevant_files}
+                        error={getErrorString(error?.capacity_relevant_files)}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        clearable
+                        disabled={disabled}
+                        useCurrentLanguageForMutation
+                    >
+                        {strings.capacityNationalRelevantFilesUploadLabel}
+                    </GoMultiFileInput>
+                </InputSection>
+            </ListView>
+        </TabPage>
+    );
+}
+
+export default NationalSocietyCapacity;
diff --git a/app/src/views/EapFullForm/Overview/KeyActorsInput/i18n.json b/app/src/views/EapFullForm/Overview/KeyActorsInput/i18n.json
new file mode 100644
index 0000000000..9c62c218c1
--- /dev/null
+++ b/app/src/views/EapFullForm/Overview/KeyActorsInput/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "overviewKeyActorsSelectPartnerLabel": "Select Partner",
+        "overviewKeyActorsDescriptionLabel": "Description",
+        "overviewKeyActorsDeleteButton": "Delete Actor"
+    }
+}
diff --git a/app/src/views/EapFullForm/Overview/KeyActorsInput/index.tsx b/app/src/views/EapFullForm/Overview/KeyActorsInput/index.tsx
new file mode 100644
index 0000000000..a912e659c8
--- /dev/null
+++ b/app/src/views/EapFullForm/Overview/KeyActorsInput/index.tsx
@@ -0,0 +1,88 @@
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    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 NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput';
+import { type PartialEapFullFormType } from '#views/EapFullForm/schema';
+
+import i18n from './i18n.json';
+
+type KeyActorsFormFields = NonNullable<PartialEapFullFormType['key_actors']>[number];
+
+interface Props {
+    value: KeyActorsFormFields;
+    error: ArrayError<KeyActorsFormFields> | undefined;
+    onChange: (value: SetValueArg<KeyActorsFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+
+function KeyActorsInput(props: Props) {
+    const {
+        value,
+        onChange,
+        onRemove,
+        index,
+        disabled,
+        readOnly,
+        error: errorFromProps,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const onFieldChange = useFormObject(
+        index,
+        onChange,
+        () => ({
+            client_id: randomString(),
+        }),
+    );
+
+    const error = (value && value.client_id && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : undefined;
+
+    return (
+        <>
+            <NationalSocietySelectInput
+                label={strings.overviewKeyActorsSelectPartnerLabel}
+                error={error?.national_society}
+                name="national_society"
+                onChange={onFieldChange}
+                value={value?.national_society}
+                disabled={disabled}
+                readOnly={readOnly}
+            />
+            <TextArea
+                required
+                label={strings.overviewKeyActorsDescriptionLabel}
+                name="description"
+                value={value?.description}
+                onChange={onFieldChange}
+            />
+            <Button
+                name={index}
+                onClick={onRemove}
+                styleVariant="action"
+                disabled={disabled || readOnly}
+                title={strings.overviewKeyActorsDeleteButton}
+            >
+                <DeleteBinTwoLineIcon />
+            </Button>
+        </>
+    );
+}
+
+export default KeyActorsInput;
diff --git a/app/src/views/EapFullForm/Overview/i18n.json b/app/src/views/EapFullForm/Overview/i18n.json
new file mode 100644
index 0000000000..04825796f9
--- /dev/null
+++ b/app/src/views/EapFullForm/Overview/i18n.json
@@ -0,0 +1,88 @@
+{
+    "namespace": "form",
+    "strings": {
+        "overviewHeading": "Details",
+        "nationalSociety": "National Society (NS)",
+        "nationalSocietyDescription": "Select National Society that is planning to apply for the EAP",
+        "formCountry": "Country",
+        "formCountryDescription": "The country will be pre-populated based on the NS selection, but can be adapted as needed.",
+        "disasterType": "Disaster Type",
+        "disasterTypeDescription": "Select the disaster type for which the EAP is needed.",
+        "formUploadCoverImage": "Cover Photo",
+        "formUploadCoverImageDescription": "Upload a image for the cover page of the publicly published DREF application.",
+        "formUploadAnImageLabel": "Select an Image",
+        "formExpectedSubmissionTimeTitle": "Expected Time of Submission",
+        "formExpectedSubmissionTimeDescription": "Include the propose time of submission, accounting for the time it will take to deliver the application.",
+        "objectiveTitle": "Objective",
+        "objectiveDescription": "Please provide an objective statement that describes the main goal of the intervention.",
+        "formContacts": "Contacts",
+        "nationalHeader": "National",
+        "delegationHeader": "Delegation",
+        "regionalHeader": "Regional and global",
+        "stakeholderHeader": "Stakeholder",
+        "nSContact": "National Society Contact",
+        "nSContactDescription": "National Society contact responsible for the EAP process",
+        "nSName": "Name",
+        "nSTitle": "Title",
+        "nSEmail": "Email",
+        "nSPhoneNumber": "Phone Number",
+        "partnerNS": "Partner NS",
+        "partnerNSDescription": "Partner National Society contact",
+        "partnerNSName": "Name",
+        "partnerNSTitle": "Title",
+        "partnerNSEmail": "Email",
+        "partnerNSPhoneNumber": "Phone Number",
+        "formFocalPoint": "IFRC Delegation AA Focal Point",
+        "formFocalPointName": "Name",
+        "formFocalPointTitle": "Title",
+        "formFocalPointEmail": "Email",
+        "formFocalPointPhoneNumber": "Phone Number",
+        "delegation": "IFRC Head of Delegation",
+        "delegationName": "Name",
+        "delegationTitle": "Title",
+        "delegationEmail": "Email",
+        "delegationPhoneNumber": "Phone Number",
+        "drefFocalPoint": "DREF Focal Point",
+        "drefFocalPointDescription": "The DREF contact person fro IFRC",
+        "drefFocalPointName": "Name",
+        "drefFocalPointTitle": "Title",
+        "drefFocalPointEmail": "Email",
+        "drefFocalPointPhoneNumber": "Phone Number",
+        "regionalFocalPoint": "IFRC Regional AA Focal Point",
+        "regionalFocalPointName": "Name",
+        "regionalFocalPointTitle": "Title",
+        "regionalFocalPointEmail": "Email",
+        "regionalFocalPointPhoneNumber": "Phone Number",
+        "regionalManager": "IFRC Regional Ops Manager",
+        "regionalManagerName": "Name",
+        "regionalManagerTitle": "Title",
+        "regionalManagerEmail": "Email",
+        "regionalManagerPhoneNumber": "Phone Number",
+        "regionalHead": "IFRC Regional Head of DCC",
+        "regionalHeadName": "Name",
+        "regionalHeadTitle": "Title",
+        "regionalHeadEmail": "Email",
+        "regionalHeadPhoneNumber": "Phone Number",
+        "regionalCoordinator": "IFRC Global Ops Coordinator",
+        "regionalCoordinatorName": "Name",
+        "regionalCoordinatorTitle": "Title",
+        "regionalCoordinatorEmail": "Email",
+        "regionalCoordinatorPhoneNumber": "Phone Number",
+        "keyActorsAddButton": "Add new actor",
+        "workWithGovernmentTitle": "Did you work with the government and other relevant actors in the development of this EAP?",
+        "workWithGovernmentDescription": "Please briefly describe the process",
+        "overviewExplanatoryNoteLabel": "Explanatory Note",
+        "overviewRequiredPointsLabel": "Required Points",
+        "overviewRequiredPoint1": "Name the external actors and Movement components that have been involved in the development of this EAP. Include international, national, regional and local actors, if applicable.",
+        "overviewRequiredPoint2": "In case there are technical working groups for the development of the FbF system in country, indicate which organizations participate in these groups.",
+        "overviewRequiredPoint3": "If stakeholders other than RC are involved in implementation/activation of EAP, indicate in one bullet point per organization, their role and list the formal agreement document.",
+        "workExplanatoryNote": "In order to avoid creating parallel systems and to minimize additional discussions on permissions, etc. when a trigger occurs, all relevant key stakeholders in the country should be involved in the development, and when necessary, the approval, of the EAP. If stakeholders other than the National Society are involved in implementation of the EAP, roles and responsibilities should be determined in MoUs or other appropriate documents. It is key to highlight the importance of involving the IFRC at the country, cluster and/ or regional level early in the EAP development process as these offices can provide technical support.",
+        "actorsExplanatoryNote": "In order to avoid creating parallel systems and to minimize additional discussions on permissions, etc. when a trigger occurs, all relevant key stakeholders in the country should be involved in the development, and when necessary, the approval, of the EAP. If stakeholders other than the National Society are involved in implementation of the EAP, roles and responsibilities should be determined in MoUs or other appropriate documents. It is key to highlight the importance of involving the IFRC at the country, cluster and/ or regional level early in the EAP development process as these offices can provide technical support. ",
+        "workWithGovernmentDescriptionLabel": "Description",
+        "keyActorsTitle": "Key actors",
+        "keyActorsDescription": "Name the external actors and Movement components that have been involved in the development of this EAP. Include international, national, regional and local actors, if applicable.",
+        "technicalWorkingGroupsTitle": "Technical working groups in place?",
+        "technicalWorkingGroupDescription": "In case there are technical working groups for the development of the FbF system in country, indicate which organizations participate in these groups. Use the \"Add another actor\" button to list all the actors involved and explain their role.",
+        "technicalWorkingGroupsTitleLabel": "Title"
+    }
+}
diff --git a/app/src/views/EapFullForm/Overview/index.tsx b/app/src/views/EapFullForm/Overview/index.tsx
new file mode 100644
index 0000000000..8d7a01814e
--- /dev/null
+++ b/app/src/views/EapFullForm/Overview/index.tsx
@@ -0,0 +1,698 @@
+import { useCallback } from 'react';
+import {
+    BooleanInput,
+    Button,
+    Heading,
+    InputSection,
+    ListView,
+    TextArea,
+    TextInput,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { randomString } from '@togglecorp/fujs';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    type PartialForm,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import CountrySelectInput from '#components/domain/CountrySelectInput';
+import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput';
+import ImageWithCaptionInput from '#components/domain/ImageWithCaptionInput';
+import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput';
+import TabPage from '#components/TabPage';
+import { type GoApiBody } from '#utils/restRequest';
+
+import { type PartialEapFullFormType } from '../schema';
+import KeyActorsInput from './KeyActorsInput';
+
+import i18n from './i18n.json';
+
+type EapRegisterRequestBody = GoApiBody<'/api/v2/eap-registration/', 'POST'>;
+type RegistrationFormFields = PartialForm<EapRegisterRequestBody>;
+type KeyActorsFormFields = NonNullable<
+    PartialEapFullFormType['key_actors']
+>[number];
+
+interface Props {
+    value: PartialEapFullFormType;
+    setFieldValue: (...entries: EntriesAsList<PartialEapFullFormType>) => void;
+    error: Error<PartialEapFullFormType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<
+        React.SetStateAction<Record<number, string>>
+    >;
+    eapRegistrationDetail?: RegistrationFormFields;
+}
+
+function Overview(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+        eapRegistrationDetail,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const error = getErrorObject(formError);
+    const noop = () => { };
+
+    const { setValue: onKeyActorsChange, removeValue: onKeyActorsRemove } = useFormArray<'key_actors', KeyActorsFormFields>(
+        'key_actors',
+        setFieldValue,
+    );
+
+    const handleKeyActorsAdd = useCallback(() => {
+        const newKeyActorsItem: KeyActorsFormFields = {
+            client_id: randomString(),
+        };
+
+        setFieldValue(
+            (oldValue: KeyActorsFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newKeyActorsItem,
+            ],
+            'key_actors' as const,
+        );
+    }, [setFieldValue]);
+
+    return (
+        <TabPage>
+            <ListView layout="block">
+                <Heading level={4}>
+                    {strings.overviewHeading}
+                </Heading>
+                <InputSection
+                    title={strings.nationalSociety}
+                    description={strings.nationalSocietyDescription}
+                    withAsteriskOnTitle
+                >
+                    <NationalSocietySelectInput
+                        name="national_society"
+                        onChange={noop}
+                        value={eapRegistrationDetail?.national_society}
+                        disabled={disabled}
+                        readOnly
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.formCountry}
+                    description={strings.formCountryDescription}
+                    withAsteriskOnTitle
+                >
+                    <CountrySelectInput
+                        name="country"
+                        value={eapRegistrationDetail?.country}
+                        onChange={noop}
+                        disabled={disabled}
+                        readOnly
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.disasterType}
+                    description={strings.disasterTypeDescription}
+                    withAsteriskOnTitle
+                >
+                    <DisasterTypeSelectInput
+                        name="disaster_type"
+                        value={eapRegistrationDetail?.disaster_type}
+                        onChange={noop}
+                        disabled={disabled}
+                        readOnly
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.formUploadCoverImage}
+                    description={strings.formUploadCoverImageDescription}
+                    withAsteriskOnTitle
+                >
+                    <ImageWithCaptionInput
+                        name="cover_image_file"
+                        url="/api/v2/eap-file/"
+                        value={value?.cover_image_file}
+                        onChange={setFieldValue}
+                        error={getErrorObject(error?.cover_image_file)}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        label={strings.formUploadAnImageLabel}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.formExpectedSubmissionTimeTitle}
+                    description={strings.formExpectedSubmissionTimeDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextInput
+                        name="expected_submission_time"
+                        value={value?.expected_submission_time}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.objectiveTitle}
+                    description={strings.objectiveDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.workWithGovernmentDescriptionLabel}
+                        name="objective"
+                        value={value?.objective}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+            </ListView>
+            <Heading>
+                {strings.formContacts}
+            </Heading>
+            <ListView layout="block">
+                <Heading level={4}>{strings.nationalHeader}</Heading>
+                <InputSection
+                    title={strings.nSContact}
+                    description={strings.nSContactDescription}
+                    numPreferredColumns={2}
+                >
+                    <TextInput
+                        label={strings.nSName}
+                        name="national_society_contact_name"
+                        value={
+                            eapRegistrationDetail?.national_society_contact_name
+                                ?? value?.national_society_contact_name
+                        }
+                        onChange={
+                            eapRegistrationDetail?.national_society_contact_name
+                                ? noop
+                                : setFieldValue
+                        }
+                        readOnly={Boolean(
+                            eapRegistrationDetail?.national_society_contact_name,
+                        )}
+                        error={error?.national_society_contact_name}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.nSTitle}
+                        name="national_society_contact_title"
+                        value={
+                            eapRegistrationDetail?.national_society_contact_title
+                                ?? value?.national_society_contact_title
+                        }
+                        onChange={
+                            eapRegistrationDetail?.national_society_contact_title
+                                ? noop
+                                : setFieldValue
+                        }
+                        readOnly={Boolean(
+                            eapRegistrationDetail?.national_society_contact_title,
+                        )}
+                        error={error?.national_society_contact_title}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.nSEmail}
+                        name="national_society_contact_email"
+                        value={
+                            eapRegistrationDetail?.national_society_contact_email
+                                ?? value?.national_society_contact_email
+                        }
+                        onChange={
+                            eapRegistrationDetail?.national_society_contact_email
+                                ? noop
+                                : setFieldValue
+                        }
+                        readOnly={Boolean(
+                            eapRegistrationDetail?.national_society_contact_email,
+                        )}
+                        error={error?.national_society_contact_email}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.nSPhoneNumber}
+                        name="national_society_contact_phone_number"
+                        value={
+                            eapRegistrationDetail?.national_society_contact_phone_number
+                                ?? value?.national_society_contact_phone_number
+                        }
+                        onChange={
+                            eapRegistrationDetail?.national_society_contact_phone_number
+                                ? noop
+                                : setFieldValue
+                        }
+                        readOnly={Boolean(
+                            eapRegistrationDetail?.national_society_contact_phone_number,
+                        )}
+                        error={error?.national_society_contact_phone_number}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.partnerNS}
+                    description={strings.partnerNSDescription}
+                    numPreferredColumns={2}
+                >
+                    <TextInput
+                        label={strings.partnerNSName}
+                        name="partner_ns_name"
+                        value={value?.partner_ns_name}
+                        onChange={setFieldValue}
+                        error={error?.partner_ns_name}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.partnerNSTitle}
+                        name="partner_ns_title"
+                        value={value?.partner_ns_title}
+                        onChange={setFieldValue}
+                        error={error?.partner_ns_title}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.partnerNSEmail}
+                        name="partner_ns_email"
+                        value={value?.partner_ns_email}
+                        onChange={setFieldValue}
+                        error={error?.partner_ns_email}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.partnerNSPhoneNumber}
+                        name="partner_ns_phone_number"
+                        value={value?.partner_ns_phone_number}
+                        onChange={setFieldValue}
+                        error={error?.partner_ns_phone_number}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <Heading level={4}>{strings.delegationHeader}</Heading>
+                <InputSection
+                    title={strings.formFocalPoint}
+                    numPreferredColumns={2}
+                >
+                    <TextInput
+                        label={strings.formFocalPointName}
+                        name="ifrc_delegation_focal_point_name"
+                        value={value?.ifrc_delegation_focal_point_name}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_delegation_focal_point_name}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.formFocalPointTitle}
+                        name="ifrc_delegation_focal_point_title"
+                        value={value?.ifrc_delegation_focal_point_title}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_delegation_focal_point_title}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.formFocalPointEmail}
+                        name="ifrc_delegation_focal_point_email"
+                        value={value?.ifrc_delegation_focal_point_email}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_delegation_focal_point_email}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.formFocalPointPhoneNumber}
+                        name="ifrc_delegation_focal_point_phone_number"
+                        value={value?.ifrc_delegation_focal_point_phone_number}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_delegation_focal_point_phone_number}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.delegation}
+                    numPreferredColumns={2}
+                >
+                    <TextInput
+                        label={strings.delegationName}
+                        name="ifrc_head_of_delegation_name"
+                        value={value?.ifrc_head_of_delegation_name}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_head_of_delegation_name}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.delegationTitle}
+                        name="ifrc_head_of_delegation_title"
+                        value={value?.ifrc_head_of_delegation_title}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_head_of_delegation_title}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.delegationEmail}
+                        name="ifrc_head_of_delegation_email"
+                        value={value?.ifrc_head_of_delegation_email}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_head_of_delegation_email}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.delegationPhoneNumber}
+                        name="ifrc_head_of_delegation_phone_number"
+                        value={value?.ifrc_head_of_delegation_phone_number}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_head_of_delegation_phone_number}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <Heading level={4}>{strings.regionalHeader}</Heading>
+                <InputSection
+                    title={strings.drefFocalPoint}
+                    description={strings.drefFocalPointDescription}
+                    numPreferredColumns={2}
+                >
+                    <TextInput
+                        label={strings.drefFocalPointName}
+                        name="dref_focal_point_name"
+                        value={
+                            eapRegistrationDetail?.dref_focal_point_name
+                                ?? value?.dref_focal_point_name
+                        }
+                        onChange={
+                            eapRegistrationDetail?.dref_focal_point_name
+                                ? noop
+                                : setFieldValue
+                        }
+                        readOnly={Boolean(eapRegistrationDetail?.dref_focal_point_name)}
+                        error={error?.dref_focal_point_name}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.drefFocalPointTitle}
+                        name="dref_focal_point_title"
+                        value={
+                            eapRegistrationDetail?.dref_focal_point_title
+                                ?? value?.dref_focal_point_title
+                        }
+                        onChange={
+                            eapRegistrationDetail?.dref_focal_point_title
+                                ? noop
+                                : setFieldValue
+                        }
+                        readOnly={Boolean(eapRegistrationDetail?.dref_focal_point_title)}
+                        error={error?.dref_focal_point_title}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.drefFocalPointEmail}
+                        name="dref_focal_point_email"
+                        value={
+                            eapRegistrationDetail?.dref_focal_point_email
+                                ?? value?.dref_focal_point_email
+                        }
+                        onChange={
+                            eapRegistrationDetail?.dref_focal_point_email
+                                ? noop
+                                : setFieldValue
+                        }
+                        readOnly={Boolean(eapRegistrationDetail?.dref_focal_point_email)}
+                        error={error?.dref_focal_point_email}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.drefFocalPointPhoneNumber}
+                        name="dref_focal_point_phone_number"
+                        value={
+                            eapRegistrationDetail?.dref_focal_point_phone_number
+                                ?? value?.dref_focal_point_phone_number
+                        }
+                        onChange={
+                            eapRegistrationDetail?.dref_focal_point_phone_number
+                                ? noop
+                                : setFieldValue
+                        }
+                        readOnly={Boolean(
+                            eapRegistrationDetail?.dref_focal_point_phone_number,
+                        )}
+                        error={error?.dref_focal_point_phone_number}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.regionalFocalPoint}
+                    numPreferredColumns={2}
+                >
+                    <TextInput
+                        label={strings.regionalFocalPointName}
+                        name="ifrc_regional_focal_point_name"
+                        value={value?.ifrc_regional_focal_point_name}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_focal_point_name}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalFocalPointTitle}
+                        name="ifrc_regional_focal_point_title"
+                        value={value?.ifrc_regional_focal_point_title}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_focal_point_title}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalFocalPointEmail}
+                        name="ifrc_regional_focal_point_email"
+                        value={value?.ifrc_regional_focal_point_email}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_focal_point_email}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalFocalPointPhoneNumber}
+                        name="ifrc_regional_focal_point_phone_number"
+                        value={value?.ifrc_regional_focal_point_phone_number}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_focal_point_phone_number}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.regionalManager}
+                    numPreferredColumns={2}
+                >
+                    <TextInput
+                        label={strings.regionalManagerName}
+                        name="ifrc_regional_ops_manager_name"
+                        value={value?.ifrc_regional_ops_manager_name}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_ops_manager_name}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalManagerTitle}
+                        name="ifrc_regional_ops_manager_title"
+                        value={value?.ifrc_regional_ops_manager_title}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_ops_manager_title}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalManagerEmail}
+                        name="ifrc_regional_ops_manager_email"
+                        value={value?.ifrc_regional_ops_manager_email}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_ops_manager_email}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalManagerPhoneNumber}
+                        name="ifrc_regional_ops_manager_phone_number"
+                        value={value?.ifrc_regional_ops_manager_phone_number}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_ops_manager_phone_number}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.regionalHead}
+                    numPreferredColumns={2}
+                >
+                    <TextInput
+                        label={strings.regionalHeadName}
+                        name="ifrc_regional_head_dcc_name"
+                        value={value?.ifrc_regional_head_dcc_name}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_head_dcc_name}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalHeadTitle}
+                        name="ifrc_regional_head_dcc_title"
+                        value={value?.ifrc_regional_head_dcc_title}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_head_dcc_title}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalHeadEmail}
+                        name="ifrc_regional_head_dcc_email"
+                        value={value?.ifrc_regional_head_dcc_email}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_head_dcc_email}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalHeadPhoneNumber}
+                        name="ifrc_regional_head_dcc_phone_number"
+                        value={value?.ifrc_regional_head_dcc_phone_number}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_regional_head_dcc_phone_number}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.regionalCoordinator}
+                    numPreferredColumns={2}
+                >
+                    <TextInput
+                        label={strings.regionalCoordinatorName}
+                        name="ifrc_global_ops_coordinator_name"
+                        value={value?.ifrc_global_ops_coordinator_name}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_global_ops_coordinator_name}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalCoordinatorTitle}
+                        name="ifrc_global_ops_coordinator_title"
+                        value={value?.ifrc_global_ops_coordinator_title}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_global_ops_coordinator_title}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalCoordinatorEmail}
+                        name="ifrc_global_ops_coordinator_email"
+                        value={value?.ifrc_global_ops_coordinator_email}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_global_ops_coordinator_email}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.regionalCoordinatorPhoneNumber}
+                        name="ifrc_global_ops_coordinator_phone_number"
+                        value={value?.ifrc_global_ops_coordinator_phone_number}
+                        onChange={setFieldValue}
+                        error={error?.ifrc_global_ops_coordinator_phone_number}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <Heading level={4}>{strings.stakeholderHeader}</Heading>
+                <InputSection
+                    title={strings.workWithGovernmentTitle}
+                    tooltip={(
+                        <TextOutput
+                            label={strings.overviewExplanatoryNoteLabel}
+                            strongLabel
+                            value={strings.workExplanatoryNote}
+                        />
+                    )}
+                    description={strings.workWithGovernmentDescription}
+                    withAsteriskOnTitle
+                >
+                    <BooleanInput
+                        name="is_worked_with_government"
+                        value={value?.is_worked_with_government}
+                        onChange={setFieldValue}
+                        error={error?.is_worked_with_government}
+                        disabled={disabled}
+                    />
+                    <TextArea
+                        label={strings.workWithGovernmentDescriptionLabel}
+                        name="worked_with_government_description"
+                        value={value?.worked_with_government_description}
+                        onChange={setFieldValue}
+                        error={error?.worked_with_government_description}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.keyActorsTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                label={strings.overviewExplanatoryNoteLabel}
+                                strongLabel
+                                value={strings.actorsExplanatoryNote}
+                            />
+                            <TextOutput
+                                label={strings.overviewRequiredPointsLabel}
+                                strongLabel
+                                value={(
+                                    <ul>
+                                        <li>{strings.overviewRequiredPoint1}</li>
+                                        <li>{strings.overviewRequiredPoint2}</li>
+                                        <li>{strings.overviewRequiredPoint3}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={strings.keyActorsDescription}
+                    withAsteriskOnTitle
+                >
+                    {value.key_actors?.map((actor, index) => (
+                        <KeyActorsInput
+                            key={actor.client_id}
+                            index={index}
+                            value={actor}
+                            onChange={onKeyActorsChange}
+                            onRemove={onKeyActorsRemove}
+                            error={getErrorObject(error?.key_actors)}
+                            disabled={disabled}
+                        />
+                    ))}
+                    <Button
+                        name={undefined}
+                        onClick={handleKeyActorsAdd}
+                        disabled={disabled}
+                    >
+                        {strings.keyActorsAddButton}
+                    </Button>
+                </InputSection>
+                <InputSection
+                    title={strings.technicalWorkingGroupsTitle}
+                    description={strings.technicalWorkingGroupDescription}
+                    withAsteriskOnTitle
+                >
+                    <BooleanInput
+                        name="is_technical_working_groups"
+                        value={value?.is_technical_working_groups}
+                        onChange={setFieldValue}
+                        error={error?.is_technical_working_groups}
+                        disabled={disabled}
+                    />
+                    <TextInput
+                        label={strings.technicalWorkingGroupsTitleLabel}
+                        name="technically_working_group_title"
+                        value={value?.technically_working_group_title}
+                        onChange={setFieldValue}
+                        error={error?.technically_working_group_title}
+                        disabled={disabled}
+                    />
+                    <TextArea
+                        label={strings.workWithGovernmentDescriptionLabel}
+                        name="technical_working_groups_in_place_description"
+                        value={value?.technical_working_groups_in_place_description}
+                        onChange={setFieldValue}
+                        error={error?.technical_working_groups_in_place_description}
+                        disabled={disabled}
+                    />
+                </InputSection>
+            </ListView>
+        </TabPage>
+    );
+}
+
+export default Overview;
diff --git a/app/src/views/EapFullForm/RiskAnalysis/PrioritisedImpactInput/index.tsx b/app/src/views/EapFullForm/RiskAnalysis/PrioritisedImpactInput/index.tsx
new file mode 100644
index 0000000000..d75b758f95
--- /dev/null
+++ b/app/src/views/EapFullForm/RiskAnalysis/PrioritisedImpactInput/index.tsx
@@ -0,0 +1,78 @@
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    ListView,
+    TextInput,
+} from '@ifrc-go/ui';
+import { randomString } from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import NonFieldError from '#components/NonFieldError';
+import { type PartialEapFullFormType } from '#views/EapFullForm/schema';
+
+type PrioritisedImpactFormFields = NonNullable<
+    PartialEapFullFormType['prioritized_impacts']
+>[number];
+
+interface Props {
+    value: PrioritisedImpactFormFields;
+    error: ArrayError<PrioritisedImpactFormFields> | undefined;
+    onChange: (value: SetValueArg<PrioritisedImpactFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+
+function PrioritisedImpactInput(props: Props) {
+    const {
+        error: errorFromProps,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+        readOnly,
+    } = props;
+
+    const onFieldChange = useFormObject(index, onChange, () => ({
+        client_id: randomString(),
+    }));
+
+    const error = value && value.client_id && errorFromProps
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : undefined;
+
+    return (
+        <>
+            <NonFieldError error={error} />
+            <ListView withFullWidth>
+                <TextInput
+                    name="impact"
+                    value={value.impact}
+                    onChange={onFieldChange}
+                    readOnly={readOnly}
+                    disabled={disabled}
+                    error={error?.impact}
+                />
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="action"
+                    disabled={disabled || readOnly}
+                    // FIXME use translation strings
+                    title="Remove prioritized impact"
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            </ListView>
+        </>
+    );
+}
+
+export default PrioritisedImpactInput;
diff --git a/app/src/views/EapFullForm/RiskAnalysis/i18n.json b/app/src/views/EapFullForm/RiskAnalysis/i18n.json
new file mode 100644
index 0000000000..1671b74330
--- /dev/null
+++ b/app/src/views/EapFullForm/RiskAnalysis/i18n.json
@@ -0,0 +1,44 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "eapFullFormRiskAnalysisHeading": "Risk Analysis",
+        "eapFullFormHazardSelectionTitle": "Hazard selection",
+        "eapFullFormRiskDescriptionLabel": "Description",
+        "eapFullFormHazardSelectionDescription1": "Provide a brief rationale about the selection of the hazard for the FbF system.",
+        "eapFullFormHazardSelectionDescription2": "Explain the selection of the hazard based on an analysis of historical disaster impacts (using the events registered in the below-mentioned table).",
+        "eapFullFormHazardSelectionDescription3": "Describe the extent to which this hazard has produced and will produce negative impacts on lives, livelihoods, well-being and other developmental aspects.",
+        "eapFullFormHazardSelectionDescription4": "Ensure to address these key questions: What are the impacts of this hazard? How are people most affected? What are the largest daily challenges related to this disaster that will jeopardize their well-being and development? What are the most affected sectors?",
+        "eapFullFormHazardSelectionExplanatoryNote": "Which hazard needs to be addressed by FbF in the country as a priority? Provide an explanation on the reasons that the selected hazard was chosen for this EAP and why it is a major problem in the country.The DREF allocates funding for EAPs to reduce the impacts of extreme events of a strength or magnitude that in the past have required humanitarian assistance. In order to demonstrate that the selected hazard has caused extreme humanitarian impacts in the past, information on the previous impacts of the selected hazard in the country should be provided. This can be gathered from interviews with RC or DRM authorities, archives, records, etc. Other potential sources of information could be National disaster registries, Post Disaster Needs Assessment databases, Desinventar, EMDat, PreventionWeb, etc. For more guidance see the FbF Manual (Chapter 4.1 Set the Trigger)",
+        "eapFullFormHazardSelectionRequiredPoint1": "Provide a brief rationale about the selection of the hazard for the FbF system.",
+        "eapFullFormHazardSelectionRequiredPoint2": "Explain the selection of the hazard based on an analysis of historical disaster impacts (using the events registered in the below-mentioned table).",
+        "eapFullFormHazardSelectionRequiredPoint3": "Include a table with the most severe disasters caused by the selected hazard over the past 50 years ",
+        "eapFullFormHazardSelectionRequiredPoint31": "Consider the following columns: a) Year and Date b) type of disaster with name (if applicable); c) Strength of event if available (e.g. windspeed on landfall); d) potential cascading hazards (e.g floods induced by hurricanes, landslides induced by extreme rainfall) e) Regions affected; f) Number of people affected; g) Most affected sectors; h) Most severe impacts in key words (e.g. 10000 houses destroyed, cholera epidemic with 2000 confirmed cases etc.)",
+        "eapFullFormHazardSelectionRequiredPoint4": "Describe the extent to which this hazard has produced and will produce negative impacts on lives, livelihoods, well-being and other developmental aspects. Ensure to address these key questions: What are the impacts of this hazard? How are people most affected? What are the largest daily challenges related to this disaster that will jeopardize their well-being and development? What are the most affected sectors?",
+        "eapFullFormExposeElementTitle": "Exposed elements and their vulnerability factors",
+        "eapFullFormExposeElementDescription1": "Explain which people are most likely to experience the impacts of this hazard? Where do they live, and why are they vulnerable? Note: This will inform the early action selection.",
+        "eapFullFormExposeElementDescription2": "Based on the analysis of past impacts, provide a brief overview which population, infrastructure, natural resources, markets, assets (others) were and/or are likely to be exposed to the selected hazard and where they are located.",
+        "eapFullFormExposeElementDescription3": "Based on past impact and exposure, describe the key factors of vulnerability of the specific population, infrastructure, natural resources, assets (others) that are likely to be impacted.",
+        "eapFullFormExposeElementDescription4": "Please explain how specific population groups (e.g elderly, children, people with disabilities, IDPs, Refugees, etc.) are most likely to be affected.",
+        "eapFullFormExposeElementDescription5": "Note: this exposure and vulnerability analysis will be the basis for the selection of indicators used for the trigger model (section 4.4).",
+        "eapFullFormExposeElementExplanatoryNote": "An analysis of exposure is required to determine who and what is located in the area where the hazard might occur. This will help to determine who and what is likely to be impacted. In line with the impact-based forecasting logic, it is important to identify the main exposed elements on which the FbF intervention will focus. For example, if the prioritized impact of floods is the mortality of children under 5 due to water-borne diseases, then the exposed element will be the population of children under 5: or if the most frequently recurring and largest impact due to tropical storms is the damage to houses built with light materials, then the exposed element will be houses built with light materials. A thorough understanding of the levels of vulnerability (of the exposed elements) will help identify the main risks and ensure that Forecast-based actions are well suited. For instance, if children under 5 are susceptible to death or sickness due to floods, describe the underlying causes of the problem. For more guidance see the FbF Manual (Chapter 4.1 Set the Trigger)",
+        "eapFullFormExposeElementRequiredPoint1": "Explain which people are most likely to experience the impacts of this hazard? Where do they live, and why are they vulnerable? Note: This will inform the early action selection.",
+        "eapFullFormExposeElementRequiredPoint2": "Based on the analysis of past impacts, provide a brief overview which population, infrastructure, natural resources, markets, assets (others) were and/or are likely to be exposed to the selected hazard and where are they located.",
+        "eapFullFormExposeElementRequiredPoint3": "Based on past impact and exposure, describe the key factors of vulnerability of the specific population, infrastructure, natural resources, assets (others) that are likely to be impacted.",
+        "eapFullFormExposeElementRequiredPoint4": "Please explain how specific population groups (e.g elderly, children, people with disabilities, IDPs, Refugees, etc.) are most likely to be affected.",
+        "eapFullFormExposeElementRequiredPoint5": "Note: this exposure and vulnerability analysis will be the basis for the selection of indicators used for the trigger model (section 4.4).",
+        "eapFullFormPrioritisedImpactTitle": "Prioritised impact",
+        "eapFullFormPrioritisedImpactsLabel": "Prioritised impacts",
+        "eapFullFormPrioritisedImpactDescription": "Add the list of prioritised impacts. Explain which priority impacts the EAP will address and why (e.g mortality of alpacas due to cold waves, Internal Displacement due to floods, malnutrition of children under 5 due to drought etc.).",
+        "eapFullFormPrioritisedImpactExplanatoryNote": "Recognizing that an FbF system will not be able to address all risks and potential impacts, based on the analysis of past impact, exposure and vulnerability (sections 3.1. to 3.2) and the results of the joint identification conducted with key stakeholders, indicate which disaster impacts were prioritized, explaining how and why they were prioritized. For more guidance see the FbF Manual (Chapters 4.1 Set the Trigger and 4.2 Select Early Actions)",
+        "eapFullFormAttachFilesTitle": "Attach relevant files",
+        "eapFullFormAttachFilesDescription": "Attach any additional documentation, files, images, etc.",
+        "eapFullFormAttachFilesSelectImagesLabel": "Select Images",
+        "eapFullFormAttachFilesUploadLabel": "Upload",
+        "eapFullFormImpactAddButtonLabel": "Add",
+        "eapFullFormSourceOfInformationTitle": "Sources of information",
+        "eapFullFormSourceOfInformationDescription": "Add the description of the sources one at a time. If the source has a link, add in the second field.",
+        "eapFullFormSourceOfInformationAddNewLabel": "Add New Source Information",
+        "eapFullFormRiskExplanatoryNoteLabel": "Explanatory Note",
+        "eapFullFormRiskRequiredPointsLabel": "Required Points"
+    }
+}
diff --git a/app/src/views/EapFullForm/RiskAnalysis/index.tsx b/app/src/views/EapFullForm/RiskAnalysis/index.tsx
new file mode 100644
index 0000000000..62994faace
--- /dev/null
+++ b/app/src/views/EapFullForm/RiskAnalysis/index.tsx
@@ -0,0 +1,343 @@
+import { useCallback } from 'react';
+import {
+    Button,
+    Heading,
+    InputSection,
+    ListView,
+    TextArea,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { randomString } from '@togglecorp/fujs';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import GoMultiFileInput from '#components/domain/GoMultiFileInput';
+import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput';
+import NonFieldError from '#components/NonFieldError';
+import TabPage from '#components/TabPage';
+
+import EAPSourceInformationInput, { type SourceInformationFormFields } from '../EAPSourceInformationInput';
+import { type PartialEapFullFormType } from '../schema';
+import PrioritisedImpactInput from './PrioritisedImpactInput';
+
+import i18n from './i18n.json';
+
+type PrioritisedImpactsFormFields = NonNullable<
+    PartialEapFullFormType['prioritized_impacts']
+>[number];
+
+interface Props {
+    value: PartialEapFullFormType;
+    setFieldValue: (...entries: EntriesAsList<PartialEapFullFormType>) => void;
+    error: Error<PartialEapFullFormType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<
+        React.SetStateAction<Record<number, string>>
+    >;
+}
+
+function RiskAnalysis(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const error = getErrorObject(formError);
+    const {
+        setValue: onRiskSourceInformationChange,
+        removeValue: onRiskSourceInformationRemove,
+    } = useFormArray<
+        'risk_analysis_source_of_information',
+        SourceInformationFormFields
+    >('risk_analysis_source_of_information', setFieldValue);
+
+    const { setValue: onPrioritizedChange, removeValue: onPrioritizedRemove } = useFormArray<'prioritized_impacts', PrioritisedImpactsFormFields>(
+        'prioritized_impacts',
+        setFieldValue,
+    );
+
+    const handleSourceInformationAdd = useCallback(() => {
+        const newSourceInformationItem: SourceInformationFormFields = {
+            client_id: randomString(),
+        };
+
+        setFieldValue(
+            (oldValue: SourceInformationFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newSourceInformationItem,
+            ],
+            'risk_analysis_source_of_information' as const,
+        );
+    }, [setFieldValue]);
+
+    const handlePrioritizedImpactAdd = useCallback(() => {
+        const newPrioritizedImpactItem: PrioritisedImpactsFormFields = {
+            client_id: randomString(),
+        };
+
+        setFieldValue(
+            (oldValue: PrioritisedImpactsFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newPrioritizedImpactItem,
+            ],
+            'prioritized_impacts' as const,
+        );
+    }, [setFieldValue]);
+
+    return (
+        <TabPage>
+            <ListView layout="block">
+                <Heading level={4}>
+                    {strings.eapFullFormRiskAnalysisHeading}
+                </Heading>
+                <InputSection
+                    title={strings.eapFullFormHazardSelectionTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                label={strings.eapFullFormRiskExplanatoryNoteLabel}
+                                strongLabel
+                                value={strings.eapFullFormHazardSelectionExplanatoryNote}
+                            />
+                            <TextOutput
+                                label={strings.eapFullFormRiskRequiredPointsLabel}
+                                strongLabel
+                                value={(
+                                    <ul>
+                                        <li>
+                                            {strings.eapFullFormHazardSelectionRequiredPoint1}
+                                        </li>
+                                        <li>
+                                            {strings.eapFullFormHazardSelectionRequiredPoint2}
+                                        </li>
+                                        <li>
+                                            {strings.eapFullFormHazardSelectionRequiredPoint3}
+                                            <ul>
+                                                <li>
+                                                    {/* eslint-disable-next-line max-len */}
+                                                    {strings.eapFullFormHazardSelectionRequiredPoint31}
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li>
+                                            {strings.eapFullFormHazardSelectionRequiredPoint4}
+                                        </li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.eapFullFormHazardSelectionDescription1}</li>
+                            <li>{strings.eapFullFormHazardSelectionDescription2}</li>
+                            <li>{strings.eapFullFormHazardSelectionDescription3}</li>
+                            <li>{strings.eapFullFormHazardSelectionDescription4}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.eapFullFormRiskDescriptionLabel}
+                        name="hazard_selection"
+                        onChange={setFieldValue}
+                        value={value?.hazard_selection}
+                        error={error?.hazard_selection}
+                        disabled={disabled}
+                    />
+                    <MultiImageWithCaptionInput
+                        name="hazard_selection_images"
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.hazard_selection_images}
+                        onChange={setFieldValue}
+                        error={getErrorObject(error?.hazard_selection_images)}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        label="Upload"
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.eapFullFormExposeElementTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                label={strings.eapFullFormRiskExplanatoryNoteLabel}
+                                strongLabel
+                                value={strings.eapFullFormExposeElementExplanatoryNote}
+                            />
+                            <TextOutput
+                                label={strings.eapFullFormRiskRequiredPointsLabel}
+                                strongLabel
+                                value={(
+                                    <ul>
+                                        <li>
+                                            {strings.eapFullFormExposeElementRequiredPoint1}
+                                        </li>
+                                        <li>
+                                            {strings.eapFullFormExposeElementRequiredPoint2}
+                                        </li>
+                                        <li>
+                                            {strings.eapFullFormExposeElementRequiredPoint3}
+                                        </li>
+                                        <li>
+                                            {strings.eapFullFormExposeElementRequiredPoint4}
+                                        </li>
+                                        <li>
+                                            {strings.eapFullFormExposeElementRequiredPoint5}
+                                        </li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.eapFullFormExposeElementDescription1}</li>
+                            <li>{strings.eapFullFormExposeElementDescription2}</li>
+                            <li>{strings.eapFullFormExposeElementDescription3}</li>
+                            <li>{strings.eapFullFormExposeElementDescription4}</li>
+                            <li>{strings.eapFullFormExposeElementDescription5}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.eapFullFormRiskDescriptionLabel}
+                        name="exposed_element_and_vulnerability_factor"
+                        onChange={setFieldValue}
+                        value={value?.exposed_element_and_vulnerability_factor}
+                        disabled={disabled}
+                    />
+                    <MultiImageWithCaptionInput
+                        name="exposed_element_and_vulnerability_factor_images"
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.exposed_element_and_vulnerability_factor_images}
+                        onChange={setFieldValue}
+                        error={getErrorObject(error?.hazard_selection_images)}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        label={strings.eapFullFormAttachFilesSelectImagesLabel}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.eapFullFormPrioritisedImpactTitle}
+                    tooltip={(
+                        <TextOutput
+                            label={strings.eapFullFormRiskExplanatoryNoteLabel}
+                            strongLabel
+                            value={strings.eapFullFormPrioritisedImpactExplanatoryNote}
+                        />
+                    )}
+                    description={strings.eapFullFormPrioritisedImpactDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextOutput
+                        withLightText
+                        value={strings.eapFullFormPrioritisedImpactsLabel}
+                    />
+                    {value?.prioritized_impacts?.map((impact, index) => (
+                        <PrioritisedImpactInput
+                            key={impact.client_id}
+                            index={index}
+                            value={impact}
+                            onChange={onPrioritizedChange}
+                            onRemove={onPrioritizedRemove}
+                            error={getErrorObject(error?.early_actions)}
+                            disabled={disabled}
+                        />
+                    ))}
+                    <Button
+                        name={undefined}
+                        onClick={handlePrioritizedImpactAdd}
+                        disabled={disabled}
+                    >
+                        {strings.eapFullFormImpactAddButtonLabel}
+                    </Button>
+                    <TextArea
+                        label={strings.eapFullFormRiskDescriptionLabel}
+                        name="prioritized_impact"
+                        onChange={setFieldValue}
+                        value={value?.prioritized_impact}
+                        disabled={disabled}
+                    />
+                    <MultiImageWithCaptionInput
+                        name="prioritized_impact_images"
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.prioritized_impact_images}
+                        onChange={setFieldValue}
+                        error={getErrorObject(error?.hazard_selection_images)}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        label={strings.eapFullFormAttachFilesSelectImagesLabel}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.eapFullFormAttachFilesTitle}
+                    description={strings.eapFullFormAttachFilesDescription}
+                >
+                    <GoMultiFileInput
+                        name="risk_analysis_relevant_files"
+                        accept=".pdf, .docx, .pptx"
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        onChange={setFieldValue}
+                        url="/api/v2/eap-file/multiple/"
+                        value={value.risk_analysis_relevant_files}
+                        error={getErrorString(error?.risk_analysis_relevant_files)}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        clearable
+                        disabled={disabled}
+                        useCurrentLanguageForMutation
+                    >
+                        {strings.eapFullFormAttachFilesUploadLabel}
+                    </GoMultiFileInput>
+                </InputSection>
+                <InputSection
+                    title={strings.eapFullFormSourceOfInformationTitle}
+                    description={strings.eapFullFormSourceOfInformationDescription}
+                >
+                    <NonFieldError
+                        error={getErrorObject(error?.risk_analysis_source_of_information)}
+                    />
+                    {value.risk_analysis_source_of_information?.map((source, index) => (
+                        <EAPSourceInformationInput
+                            key={source.client_id}
+                            index={index}
+                            value={source}
+                            onChange={onRiskSourceInformationChange}
+                            onRemove={onRiskSourceInformationRemove}
+                            error={getErrorObject(
+                                error?.risk_analysis_source_of_information,
+                            )}
+                            disabled={disabled}
+                        />
+                    ))}
+                    <Button
+                        name={undefined}
+                        onClick={handleSourceInformationAdd}
+                        disabled={disabled}
+                    >
+                        {strings.eapFullFormSourceOfInformationAddNewLabel}
+                    </Button>
+                </InputSection>
+            </ListView>
+        </TabPage>
+    );
+}
+
+export default RiskAnalysis;
diff --git a/app/src/views/EapFullForm/SelectionActions/ApproachesInput/i18n.json b/app/src/views/EapFullForm/SelectionActions/ApproachesInput/i18n.json
new file mode 100644
index 0000000000..284b6e8347
--- /dev/null
+++ b/app/src/views/EapFullForm/SelectionActions/ApproachesInput/i18n.json
@@ -0,0 +1,19 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "approachBudget": "Budget",
+        "approachApCode": "AP Code",
+        "approachRemoveButton": "Remove",
+        "approachAddActivityButton": "Add Activity",
+        "approachIndicators": "Indicators",
+        "approachAddIndicatorsButtonLabel": "Add Indicators",
+        "approachNoIndicatorsMessage": "No indicators yet",
+        "approachReadinessActivities": "Readiness Activities",
+        "approachReadinessActivitiesDescription": "Readiness activities are done year on year to ensure that the National Society is ready to conduct the early actions. These are activities that will happen irrespective of an activation. Readiness activities may include refresher training, coordination meetings with government, readiness meetings, simulations, etc. Under readiness they can include any ongoing costs and services (human resources and logistics) that are deemed indispensable for subsequent trigger-based early action activities. If, during the simplified EAP development process the National Society finds some areas for improvement to deliver on their selected early actions, these could be addressed with activities included under readiness.",
+        "approachPrepositioningActivities": "Pre-positioning Activities",
+        "approachPrepositioningActivitiesDescription": "The National Society should preposition the materials needed to undertake the early action, especially those that may require a longer procurement process.  For example, prepositioned stocks could include shelter kits (for house reinforcement), sandbags (for protecting infrastructure), or tarpaulins (for protecting water sources), etc. Food, medicine and other items with a shelf life of less than two years are not eligible as pre-positioning, they will have to be procured as part of the early actions. Pre-positioning activities are one-off and done in the first year following approval of the simplified EAP.",
+        "approachEarlyActionActivities": "Early Action Activities",
+        "approachEarlyActionActivitiesDescription": "Early action activities are implemented once a trigger is reached and before the impact of the hazard. Early actions seek to reduce or mitigate the impact of the hazard. Consider selecting only a few early actions, especially for sudden onset events, as they will have to be implemented within a short timeframe. The early actions will be unique to each hazard and context, but may be activities such as evacuation of at-risk communities and/or livestock, early harvest of crops, cash transfer, shelter strengthening, provision of water treatment, hygiene kits or mosquito nets, etc. For more examples of early action activities, visit the early action database on the Anticipation Hub.",
+        "approachNoActivitiesMessage": "No activities added yet"
+    }
+}
diff --git a/app/src/views/EapFullForm/SelectionActions/ApproachesInput/index.tsx b/app/src/views/EapFullForm/SelectionActions/ApproachesInput/index.tsx
new file mode 100644
index 0000000000..5685d945cc
--- /dev/null
+++ b/app/src/views/EapFullForm/SelectionActions/ApproachesInput/index.tsx
@@ -0,0 +1,408 @@
+import { useCallback } from 'react';
+import {
+    AddLineIcon,
+    DeleteBinTwoLineIcon,
+} from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    ExpandableContainer,
+    InfoPopup,
+    ListView,
+    NumberInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isNotDefined,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type SetValueArg,
+    useFormArray,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import OperationActivityInput from '#components/domain/OperationActivityInput';
+import NonFieldError from '#components/NonFieldError';
+
+import { type PartialEapFullFormType } from '../../schema';
+import IndicatorInput from '../IndicatorInput';
+
+import i18n from './i18n.json';
+
+type EnableApproachesFormFields = NonNullable<PartialEapFullFormType['enable_approaches']>[number];
+type EarlyActionFormFields = NonNullable<EnableApproachesFormFields['early_action_activities']>[number];
+type PrepositioningFormFields = NonNullable<EnableApproachesFormFields['prepositioning_activities']>[number];
+type ReadinessFormFields = NonNullable<EnableApproachesFormFields['readiness_activities']>[number];
+type IndicatorFormFields = NonNullable<EnableApproachesFormFields['indicators']>[number];
+
+const defaultApproachValue: EnableApproachesFormFields = {
+    approach: 10,
+};
+
+interface Props {
+    value: EnableApproachesFormFields;
+    error: ArrayError<EnableApproachesFormFields> | undefined;
+    onChange: (value: SetValueArg<EnableApproachesFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    approachTitle?: React.ReactNode;
+}
+
+function ApproachesInput(props: Props) {
+    const {
+        error: errorFromProps,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+        approachTitle,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const onFieldChange = useFormObject(index, onChange, defaultApproachValue);
+
+    const error = (value && value.approach && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.approach])
+        : undefined;
+
+    const {
+        setValue: onEarlyActionChange,
+        removeValue: onEarlyActionRemove,
+    } = useFormArray<'early_action_activities', EarlyActionFormFields>(
+        'early_action_activities' as const,
+        onFieldChange,
+    );
+    const {
+        setValue: onPrepositioningChange,
+        removeValue: onPrepositioningRemove,
+    } = useFormArray<'prepositioning_activities', PrepositioningFormFields>(
+        'prepositioning_activities' as const,
+        onFieldChange,
+    );
+    const {
+        setValue: onReadinessChange,
+        removeValue: onReadinessRemove,
+    } = useFormArray<'readiness_activities', ReadinessFormFields>(
+        'readiness_activities' as const,
+        onFieldChange,
+    );
+
+    const {
+        setValue: onIndicatorChange,
+        removeValue: onIndicatorRemove,
+    } = useFormArray<'indicators', IndicatorFormFields>(
+        'indicators' as const,
+        onFieldChange,
+    );
+
+    const handleEarlyActionAddButtonClick = useCallback(
+        () => {
+            const newActionItem: EarlyActionFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: EarlyActionFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newActionItem]
+                ),
+                'early_action_activities' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    const handlePrepositioningAddButtonClick = useCallback(
+        () => {
+            const newActionItem: PrepositioningFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: PrepositioningFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newActionItem]
+                ),
+                'prepositioning_activities' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    const handleReadinessAddButtonClick = useCallback(
+        () => {
+            const newActionItem: ReadinessFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: ReadinessFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newActionItem]
+                ),
+                'readiness_activities' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    const handleIndicatorAddButtonClick = useCallback(
+        () => {
+            const newIndicator: IndicatorFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: IndicatorFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newIndicator]
+                ),
+                'indicators' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    return (
+        <ExpandableContainer
+            heading={approachTitle ?? '--'}
+            headerActions={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="action"
+                    title={strings.approachRemoveButton}
+                    disabled={disabled}
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            )}
+            withPadding
+            withBackground
+            initiallyExpanded
+        >
+            <ListView layout="block">
+                <ListView
+                    layout="grid"
+                    numPreferredGridColumns={3}
+                >
+                    <NumberInput
+                        label={strings.approachBudget}
+                        name="budget_per_approach"
+                        value={value?.budget_per_approach}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.budget_per_approach}
+                    />
+                    <NumberInput
+                        label={strings.approachApCode}
+                        name="ap_code"
+                        value={value?.ap_code}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.ap_code}
+                    />
+                </ListView>
+                <ListView
+                    layout="block"
+                    spacing="2xs"
+                >
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        withCompactMessage
+                        headingLevel={6}
+                        heading={strings.approachIndicators}
+                        footerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handleIndicatorAddButtonClick}
+                                spacing="sm"
+                                disabled={disabled}
+                                before={<AddLineIcon />}
+                            >
+                                {strings.approachAddIndicatorsButtonLabel}
+                            </Button>
+                        )}
+                        empty={isNotDefined(value.indicators) || value.indicators.length === 0}
+                        emptyMessage={strings.approachNoIndicatorsMessage}
+                    >
+                        <ListView layout="block">
+                            {value.indicators?.map((indicator, i) => (
+                                <IndicatorInput
+                                    key={indicator.client_id}
+                                    index={i}
+                                    value={indicator}
+                                    onChange={onIndicatorChange}
+                                    onRemove={onIndicatorRemove}
+                                    error={getErrorObject(error?.indicators)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={(
+                            <>
+                                {strings.approachReadinessActivities}
+                                <InfoPopup
+                                    description={strings.approachReadinessActivitiesDescription}
+                                />
+                            </>
+                        )}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handleReadinessAddButtonClick}
+                                disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
+                            >
+                                {strings.approachAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.readiness_activities)
+                            || value.readiness_activities.length === 0}
+                        emptyMessage={strings.approachNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.readiness_activities)
+                            }
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.readiness_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onReadinessChange}
+                                    onRemove={onReadinessRemove}
+                                    error={getErrorObject(error?.readiness_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={(
+                            <>
+                                {strings.approachPrepositioningActivities}
+                                <InfoPopup
+                                    description={
+                                        strings.approachPrepositioningActivitiesDescription
+                                    }
+                                />
+                            </>
+                        )}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handlePrepositioningAddButtonClick}
+                                disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
+                            >
+                                {strings.approachAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.prepositioning_activities)
+                            || value.prepositioning_activities.length === 0}
+                        emptyMessage={strings.approachNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.prepositioning_activities)
+                            }
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.prepositioning_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onPrepositioningChange}
+                                    onRemove={onPrepositioningRemove}
+                                    error={getErrorObject(error?.prepositioning_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={(
+                            <>
+                                {strings.approachEarlyActionActivities}
+                                <InfoPopup
+                                    description={strings.approachEarlyActionActivitiesDescription}
+                                />
+                            </>
+                        )}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handleEarlyActionAddButtonClick}
+                                disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
+                            >
+                                {strings.approachAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.early_action_activities)
+                            || value.early_action_activities.length === 0}
+                        emptyMessage={strings.approachNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.early_action_activities)
+                            }
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.early_action_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onEarlyActionChange}
+                                    onRemove={onEarlyActionRemove}
+                                    error={getErrorObject(error?.early_action_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                </ListView>
+            </ListView>
+        </ExpandableContainer>
+    );
+}
+
+export default ApproachesInput;
diff --git a/app/src/views/EapFullForm/SelectionActions/EarlyActionsInput/index.tsx b/app/src/views/EapFullForm/SelectionActions/EarlyActionsInput/index.tsx
new file mode 100644
index 0000000000..738a37c913
--- /dev/null
+++ b/app/src/views/EapFullForm/SelectionActions/EarlyActionsInput/index.tsx
@@ -0,0 +1,78 @@
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    ListView,
+    TextInput,
+} from '@ifrc-go/ui';
+import { randomString } from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import NonFieldError from '#components/NonFieldError';
+import { type PartialEapFullFormType } from '#views/EapFullForm/schema';
+
+type EarlyActionsFormFields = NonNullable<
+    PartialEapFullFormType['early_actions']
+>[number];
+
+interface Props {
+    value: EarlyActionsFormFields;
+    error: ArrayError<EarlyActionsFormFields> | undefined;
+    onChange: (value: SetValueArg<EarlyActionsFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+
+function EarlyActionsInput(props: Props) {
+    const {
+        error: errorFromProps,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+        readOnly,
+    } = props;
+
+    const onFieldChange = useFormObject(index, onChange, () => ({
+        client_id: randomString(),
+    }));
+
+    const error = value && value.client_id && errorFromProps
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : undefined;
+
+    return (
+        <>
+            <NonFieldError error={error} />
+            <ListView withFullWidth>
+                <TextInput
+                    name="action"
+                    value={value.action}
+                    onChange={onFieldChange}
+                    readOnly={readOnly}
+                    disabled={disabled}
+                    error={error?.action}
+                />
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="action"
+                    disabled={disabled || readOnly}
+                    // FIXME use translation strings
+                    title="Remove early action"
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            </ListView>
+        </>
+    );
+}
+
+export default EarlyActionsInput;
diff --git a/app/src/views/EapFullForm/SelectionActions/IndicatorInput/i18n.json b/app/src/views/EapFullForm/SelectionActions/IndicatorInput/i18n.json
new file mode 100644
index 0000000000..00573e5d72
--- /dev/null
+++ b/app/src/views/EapFullForm/SelectionActions/IndicatorInput/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "eapFullIndicatorRemoveTitle": "Remove",
+        "eapFullIndicatorTitleLabel": "Title",
+        "eapFullIndicatorTargetLabel": "Target"
+    }
+}
diff --git a/app/src/views/EapFullForm/SelectionActions/IndicatorInput/index.tsx b/app/src/views/EapFullForm/SelectionActions/IndicatorInput/index.tsx
new file mode 100644
index 0000000000..7295b6e68c
--- /dev/null
+++ b/app/src/views/EapFullForm/SelectionActions/IndicatorInput/index.tsx
@@ -0,0 +1,97 @@
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    InlineLayout,
+    ListView,
+    NumberInput,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    type ArrayError,
+    getErrorObject,
+    type PartialForm,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import { type components } from '#generated/types';
+
+import i18n from './i18n.json';
+
+type Indicator = components['schemas']['Indicator'] & { client_id: string };
+type IndicatorFormFields = PartialForm<Indicator, 'client_id'>;
+
+const defaultIndicatorValue: IndicatorFormFields = {
+    client_id: '-1',
+};
+
+interface Props {
+    value: IndicatorFormFields;
+    error: ArrayError<IndicatorFormFields> | undefined;
+    onChange: (value: SetValueArg<IndicatorFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+
+function IndicatorInput(props: Props) {
+    const {
+        error: errorFromProps,
+        readOnly,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const onFieldChange = useFormObject(index, onChange, defaultIndicatorValue);
+
+    const error = value && value.client_id && errorFromProps
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : undefined;
+
+    return (
+        <InlineLayout
+            after={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="action"
+                    title={strings.eapFullIndicatorRemoveTitle}
+                    disabled={disabled || readOnly}
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            )}
+            spacing="sm"
+        >
+            <ListView layout="grid" spacing="sm">
+                <TextInput
+                    label={strings.eapFullIndicatorTitleLabel}
+                    name="title"
+                    value={value.title}
+                    onChange={onFieldChange}
+                    error={error?.title}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                />
+                <NumberInput
+                    label={strings.eapFullIndicatorTargetLabel}
+                    name="target"
+                    value={value.target}
+                    onChange={onFieldChange}
+                    error={error?.target}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                />
+            </ListView>
+        </InlineLayout>
+    );
+}
+
+export default IndicatorInput;
diff --git a/app/src/views/EapFullForm/SelectionActions/OperationInput/i18n.json b/app/src/views/EapFullForm/SelectionActions/OperationInput/i18n.json
new file mode 100644
index 0000000000..719cf05937
--- /dev/null
+++ b/app/src/views/EapFullForm/SelectionActions/OperationInput/i18n.json
@@ -0,0 +1,20 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "selectionActionsPlannedOperationPeopleTargeted": "People Targeted",
+        "selectionActionsPlannedOperationBudget": "Budget",
+        "selectionActionsPlannedOperationApCode": "AP Code",
+        "selectionActionsPlannedOperationRemoveButton": "Remove",
+        "selectionActionsPlannedOperationAddActivityButton": "Add activity",
+        "selectionActionsPlannedOperationIndicators": "Indicators",
+        "addIndicatorsButtonLabel": "Add Indicators",
+        "noIndicatorsMessage": "No indicators yet",
+        "selectionActionsReadinessActivities": "Readiness Activities",
+        "selectionActionsReadinessActivitiesDescription": "Readiness activities are done year on year to ensure that the National Society is ready to conduct the early actions. These are activities that will happen irrespective of an activation. Readiness activities may include refresher training, coordination meetings with government, readiness meetings, simulations, etc. Under readiness they can include any ongoing costs and services (human resources and logistics) that are deemed indispensable for subsequent trigger-based early action activities. If, during the simplified EAP development process the National Society finds some areas for improvement to deliver on their selected early actions, these could be addressed with activities included under readiness.",
+        "selectionActionsPrepositioningActivities": "Pre-positioning Activities",
+        "selectionActionsPrepositioningActivitiesDescription": "The National Society should preposition the materials needed to undertake the early action, especially those that may require a longer procurement process.  For example, prepositioned stocks could include shelter kits (for house reinforcement), sandbags (for protecting infrastructure), or tarpaulins (for protecting water sources), etc. Food, medicine and other items with a shelf life of less than two years are not eligible as pre-positioning, they will have to be procured as part of the early actions. Pre-positioning activities are one-off and done in the first year following approval of the simplified EAP.",
+        "selectionActionsEarlyActionActivities": "Early Action Activities",
+        "selectionActionsEarlyActionActivitiesDescription": "Early action activities are implemented once a trigger is reached and before the impact of the hazard. Early actions seek to reduce or mitigate the impact of the hazard. Consider selecting only a few early actions, especially for sudden onset events, as they will have to be implemented within a short timeframe. The early actions will be unique to each hazard and context, but may be activities such as evacuation of at-risk communities and/or livestock, early harvest of crops, cash transfer, shelter strengthening, provision of water treatment, hygiene kits or mosquito nets, etc. For more examples of early action activities, visit the early action database on the Anticipation Hub.",
+        "selectionActionsNoActivitiesMessage": "No activities added yet"
+    }
+}
diff --git a/app/src/views/EapFullForm/SelectionActions/OperationInput/index.tsx b/app/src/views/EapFullForm/SelectionActions/OperationInput/index.tsx
new file mode 100644
index 0000000000..41c553ab6f
--- /dev/null
+++ b/app/src/views/EapFullForm/SelectionActions/OperationInput/index.tsx
@@ -0,0 +1,421 @@
+import { useCallback } from 'react';
+import {
+    AddLineIcon,
+    DeleteBinTwoLineIcon,
+} from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    ExpandableContainer,
+    InfoPopup,
+    ListView,
+    NumberInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isNotDefined,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type SetValueArg,
+    useFormArray,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import OperationActivityInput from '#components/domain/OperationActivityInput';
+import NonFieldError from '#components/NonFieldError';
+
+import { type PartialEapFullFormType } from '../../schema';
+import IndicatorInput from '../IndicatorInput';
+
+import i18n from './i18n.json';
+
+type PlannedOperationFormFields = NonNullable<
+    PartialEapFullFormType['planned_operations']
+>[number];
+type EarlyActionFormFields = NonNullable<
+    PlannedOperationFormFields['early_action_activities']
+>[number];
+type PrepositioningFormFields = NonNullable<
+    PlannedOperationFormFields['prepositioning_activities']
+>[number];
+type ReadinessFormFields = NonNullable<
+    PlannedOperationFormFields['readiness_activities']
+>[number];
+type IndicatorFormFields = NonNullable<
+    PlannedOperationFormFields['indicators']
+>[number];
+
+const defaultOperationValue: PlannedOperationFormFields = {
+    sector: 101,
+};
+
+interface Props {
+    value: PlannedOperationFormFields;
+    error: ArrayError<PlannedOperationFormFields> | undefined;
+    onChange: (
+        value: SetValueArg<PlannedOperationFormFields>,
+        index: number
+    ) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    operationTitle?: React.ReactNode;
+}
+
+function OperationsInput(props: Props) {
+    const {
+        error: errorFromProps,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+        operationTitle,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const onFieldChange = useFormObject(index, onChange, defaultOperationValue);
+
+    const error = value && value.sector && errorFromProps
+        ? getErrorObject(errorFromProps?.[value.sector])
+        : undefined;
+
+    const { setValue: onEarlyActionChange, removeValue: onEarlyActionRemove } = useFormArray<'early_action_activities', EarlyActionFormFields>(
+        'early_action_activities' as const,
+        onFieldChange,
+    );
+    const {
+        setValue: onPrepositioningChange,
+        removeValue: onPrepositioningRemove,
+    } = useFormArray<'prepositioning_activities', PrepositioningFormFields>(
+        'prepositioning_activities' as const,
+        onFieldChange,
+    );
+    const { setValue: onReadinessChange, removeValue: onReadinessRemove } = useFormArray<'readiness_activities', ReadinessFormFields>(
+        'readiness_activities' as const,
+        onFieldChange,
+    );
+
+    const { setValue: onIndicatorChange, removeValue: onIndicatorRemove } = useFormArray<'indicators', IndicatorFormFields>(
+        'indicators' as const,
+        onFieldChange,
+    );
+
+    const handleEarlyActionAddButtonClick = useCallback(() => {
+        const newActionItem: EarlyActionFormFields = {
+            client_id: randomString(),
+        };
+
+        onFieldChange(
+            (oldValue: EarlyActionFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newActionItem,
+            ],
+            'early_action_activities' as const,
+        );
+    }, [onFieldChange]);
+
+    const handlePrepositioningAddButtonClick = useCallback(() => {
+        const newActionItem: PrepositioningFormFields = {
+            client_id: randomString(),
+        };
+
+        onFieldChange(
+            (oldValue: PrepositioningFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newActionItem,
+            ],
+            'prepositioning_activities' as const,
+        );
+    }, [onFieldChange]);
+
+    const handleReadinessAddButtonClick = useCallback(() => {
+        const newActionItem: ReadinessFormFields = {
+            client_id: randomString(),
+        };
+
+        onFieldChange(
+            (oldValue: ReadinessFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newActionItem,
+            ],
+            'readiness_activities' as const,
+        );
+    }, [onFieldChange]);
+
+    const handleIndicatorAddButtonClick = useCallback(() => {
+        const newIndicator: IndicatorFormFields = {
+            client_id: randomString(),
+        };
+
+        onFieldChange(
+            (oldValue: IndicatorFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newIndicator,
+            ],
+            'indicators' as const,
+        );
+    }, [onFieldChange]);
+
+    return (
+        <ExpandableContainer
+            heading={operationTitle ?? '--'}
+            headerActions={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="action"
+                    disabled={disabled}
+                    title={strings.selectionActionsPlannedOperationRemoveButton}
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            )}
+            withPadding
+            withBackground
+            initiallyExpanded
+            withHeaderBorder
+        // FIXME: add non field error and error indicator
+        >
+            <ListView layout="block">
+                <ListView layout="grid" numPreferredGridColumns={3}>
+                    <NumberInput
+                        label={strings.selectionActionsPlannedOperationPeopleTargeted}
+                        name="people_targeted"
+                        value={value?.people_targeted}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.people_targeted}
+                    />
+                    <NumberInput
+                        label={strings.selectionActionsPlannedOperationBudget}
+                        name="budget_per_sector"
+                        value={value?.budget_per_sector}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.budget_per_sector}
+                    />
+                    <NumberInput
+                        label={strings.selectionActionsPlannedOperationApCode}
+                        name="ap_code"
+                        value={value?.ap_code}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.ap_code}
+                    />
+                </ListView>
+                <ListView
+                    layout="block"
+                    spacing="2xs"
+                // FIXME: following can be converted into a component and reused
+                >
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        withCompactMessage
+                        headingLevel={6}
+                        heading={strings.selectionActionsPlannedOperationIndicators}
+                        footerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handleIndicatorAddButtonClick}
+                                spacing="sm"
+                                disabled={disabled}
+                                before={<AddLineIcon />}
+                            >
+                                {strings.addIndicatorsButtonLabel}
+                            </Button>
+                        )}
+                        empty={
+                            isNotDefined(value.indicators) || value.indicators.length === 0
+                        }
+                        emptyMessage={strings.noIndicatorsMessage}
+                    >
+                        <ListView layout="block">
+                            {value.indicators?.map((indicator, i) => (
+                                <IndicatorInput
+                                    key={indicator.client_id}
+                                    index={i}
+                                    value={indicator}
+                                    onChange={onIndicatorChange}
+                                    onRemove={onIndicatorRemove}
+                                    error={getErrorObject(error?.indicators)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={(
+                            <>
+                                {strings.selectionActionsReadinessActivities}
+                                <InfoPopup
+                                    description={
+                                        strings.selectionActionsReadinessActivitiesDescription
+                                    }
+                                />
+                            </>
+                        )}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handleReadinessAddButtonClick}
+                                spacing="sm"
+                                disabled={disabled}
+                                before={<AddLineIcon />}
+                            >
+                                {strings.selectionActionsPlannedOperationAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={
+                            isNotDefined(value.readiness_activities)
+                            || value.readiness_activities.length === 0
+                        }
+                        emptyMessage={strings.selectionActionsNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError
+                                error={getErrorObject(error?.readiness_activities)}
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.readiness_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onReadinessChange}
+                                    onRemove={onReadinessRemove}
+                                    error={getErrorObject(error?.readiness_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={(
+                            <>
+                                {strings.selectionActionsPrepositioningActivities}
+                                <InfoPopup
+                                    description={
+                                        strings.selectionActionsPrepositioningActivitiesDescription
+                                    }
+                                />
+                            </>
+                        )}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handlePrepositioningAddButtonClick}
+                                disabled={disabled}
+                                styleVariant="outline"
+                                spacing="sm"
+                                before={<AddLineIcon />}
+                            >
+                                {strings.selectionActionsPlannedOperationAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={
+                            isNotDefined(value.prepositioning_activities)
+                            || value.prepositioning_activities.length === 0
+                        }
+                        emptyMessage={strings.selectionActionsNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError
+                                error={getErrorObject(error?.prepositioning_activities)}
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.prepositioning_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onPrepositioningChange}
+                                    onRemove={onPrepositioningRemove}
+                                    error={getErrorObject(error?.prepositioning_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={(
+                            <>
+                                {strings.selectionActionsEarlyActionActivities}
+                                <InfoPopup
+                                    description={
+                                        strings.selectionActionsEarlyActionActivitiesDescription
+                                    }
+                                />
+                            </>
+                        )}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handleEarlyActionAddButtonClick}
+                                disabled={disabled}
+                                styleVariant="outline"
+                                spacing="sm"
+                                before={<AddLineIcon />}
+                            >
+                                {strings.selectionActionsPlannedOperationAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={
+                            isNotDefined(value.early_action_activities)
+                            || value.early_action_activities.length === 0
+                        }
+                        emptyMessage={strings.selectionActionsNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError
+                                error={getErrorObject(error?.early_action_activities)}
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.early_action_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onEarlyActionChange}
+                                    onRemove={onEarlyActionRemove}
+                                    error={getErrorObject(error?.early_action_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                </ListView>
+            </ListView>
+        </ExpandableContainer>
+    );
+}
+
+export default OperationsInput;
diff --git a/app/src/views/EapFullForm/SelectionActions/i18n.json b/app/src/views/EapFullForm/SelectionActions/i18n.json
new file mode 100644
index 0000000000..9559759233
--- /dev/null
+++ b/app/src/views/EapFullForm/SelectionActions/i18n.json
@@ -0,0 +1,48 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "selectionActionsHeading": "Selection of actions section",
+        "selectionActionsTooltipDescription": "It is crucial to select early actions that have the most potential to reduce the identified risks(s) and are feasible to implement given the lead time of the forecast.  It is important to describe briefly: Who was involved? What data was consulted? Was research conducted? Were communities involved? For more guidance see FbF Manual, Chapter 4.2 Select Early Actions.",
+        "selectionProcessTitle": "Early action selection process",
+        "selectionProcessDescription1": "Add the list of early actions",
+        "selectionProcessDescription2": "Based on the prioritized impacts/risks of section 3, provide a brief rationale (e.g. your criteria) for the selection of action(s), also indicating which actions were considered but not chosen.",
+        "selectionProcessDescription3": "Describe the process used to select the actions: Who was consulted? Which assessments/research were carried out?",
+        "selectionProcessDescription4": "Does the FbF activation intend to use government social protection systems? Other State institutions’ databases and/or sources? Provide an explanation of potential number of target population to be selected.",
+        "selectionProcessDescription5": "If CVA is included, has a cash feasibility assessment been conducted (including needs and affected population preference, markets, financial service providers and National Society capacity assessments)?",
+        "selectionProcessExplanatoryNote": "It is crucial to select early actions that have the most potential to reduce the identified risks(s) and are feasible to implement given the lead time of the forecast.  It is important to describe briefly: Who was involved? What data was consulted? Was research conducted? Were communities involved? For more guidance see FbF Manual, Chapter 4.2 Select Early Actions.",
+        "selectionProcessRequiredPoint1": "Based on the prioritized impacts/risks, provide a brief rationale (e.g. your criteria) for the selection of action(s), also indicating which actions were considered but not chosen (max. 1000 words)",
+        "selectionProcessRequiredPoint2": "Describe the process used to select the actions: Who was consulted? Which assessments/research were carried out? (max 1000 words)",
+        "selectionProcessRequiredPoint3": "Show how the selected action aims to reduce the expected humanitarian impact, by filling out the Theory of Change (ToC) table.",
+        "selectionProcessRequiredPoint4": "Does the activation intend to use government social protection systems? Other State institutions’ databases and/or sources? Provide an explanation of potential number of target population to be selected.",
+        "selectionProcessRequiredPoint5": "If CVA is included, has a cash feasibility assessment been conducted (including needs and affected population preference, markets, financial service providers and National Society capacity assessments)?",
+        "selectionActionDescriptionLabel": "Description",
+        "selectionActionExplanatoryNoteLabel": "Explanatory Note",
+        "selectionActionRequiredPointsLabel": "Required Points",
+        "earlyActionsOutputValue": "Early Actions",
+        "earlyActionsAddButtonLabel": "Add",
+        "selectionActionUploadLabel": "Upload",
+        "selectionActionUploadTableLabel": "Upload Table",
+        "evidenceBaseTitle": "Evidence Base",
+        "evidenceBaseDescription": "Explain how the selected actions will reduce the expected disaster impacts with a reference to academic research, empirical studies, interviews with key informants/experts, among other sources of evidence.",
+        "evidenceBaseExplanatoryNote": "It is important to provide evidence-based information showing that the early action(s) selected are likely to reduce the humanitarian impact of the event.",
+        "selectionActionPlannedOperationHeading": "IFRC Planned Operations",
+        "selectionActionPlannedOperationHeadingDescription": "Organize the actions according to the IFRC Plan and Budget, 2021 - 2025 sets out objectives for the IFRC Secretariat in support of National Societies and will guide the IFRC in the implementation Strategy 2030 and the Agenda for Renewal. These indicate the thematic areas in which the IFRC provides support to National Societies and where consolidated results are measured. Support on the IFRC programming and budgeting structure can be obtained from the IFRC focal point for Anticipation at country or regional level, regional disaster manager, Finance unit and/or Planning, Monitoring, Evaluation and Reporting (PMER) unit.",
+        "plannedOperationTitle": "Planned Operation",
+        "plannedOperationDescription": "Select sectors which are used in this Early Action Protocol.",
+        "enablingApproachesTitle": "Enabling Approaches",
+        "enablingApproachesDescription": "Select approaches which are used in this Early Action Protocol.",
+        "selectionAttachFilesTitle": "Attach relevant files",
+        "selectionAttachFilesDescription": "Attach any additional documentation, files, images, etc.",
+        "selectionSourceOfInformationTitle": "Sources of information",
+        "selectionSourceOfInformationDescription": "Add the description of the sources one at a time. If the source has a link, add in the second field.",
+        "selectionSourceOfInformationAddNewLabel": "Add New Source Information",
+        "feasibilityTitle": "Feasibility",
+        "feasibilityDescription": "Indicate how feasible it is to implement the proposed early actions in the planned timeframe. Has it been tested?  Have similar actions been carried out by the NS in past operations and/or in as short a time with similar resources? If not, was a simulation conducted? If Cash and Voucher Assistance (CVA) is chosen as an early action, describe how necessary information for disbursement is collected in the short period of time and how national legislative requirements are met.",
+        "feasibilityExplanatoryNote": "In this section please describe why it is feasible to implement the selected actions, based on: time to implement the action, capacity of the National Society to implement, available resources (human, logistics, materials, etc.) and access considerations (see FbF Manual Chapter 4.2 Select Early Actions on criteria.)",
+        "feasibilityRequiredPoint1": "Indicate how feasible it is to implement the proposed early actions in the planned timeframe. Has it been tested?  Have similar actions been carried out by the NS in past operations and/or in as short a time with similar resources? If not, was a simulation conducted?",
+        "feasibilityRequiredPoint2": "If Cash and Voucher Assistance (CVA) is chosen as an early action, describe how necessary information for disbursement is collected in the short period of time and how national legislative requirements are met.",
+        "useFullnessActionsTitle": "Usefulness of actions in case of non-occurring event",
+        "useFullnessActionsDescription": "Describe how your selected actions will contribute to the well-being of the population even if the expected event does not materialize. Include a description of the measures taken to ensure that the actions taken will be of maximum use for the targeted population in a future event.",
+        "useFullnessActionsExplanatoryNote": "In cases where the expected event does not materialize, the early actions implemented by the National Society (funded by the DREF) should still contribute to risk reduction and resiliency building."
+    }
+}
diff --git a/app/src/views/EapFullForm/SelectionActions/index.tsx b/app/src/views/EapFullForm/SelectionActions/index.tsx
new file mode 100644
index 0000000000..e53357c19f
--- /dev/null
+++ b/app/src/views/EapFullForm/SelectionActions/index.tsx
@@ -0,0 +1,546 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import {
+    Button,
+    Checklist,
+    Container,
+    Heading,
+    InfoPopup,
+    InputSection,
+    ListView,
+    TextArea,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { stringValueSelector } from '@ifrc-go/ui/utils';
+import {
+    listToMap,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import GoMultiFileInput from '#components/domain/GoMultiFileInput';
+import GoSingleFileInput from '#components/domain/GoSingleFileInput';
+import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput';
+import NonFieldError from '#components/NonFieldError';
+import TabPage from '#components/TabPage';
+import { type components } from '#generated/types';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+
+import EAPSourceInformationInput, { type SourceInformationFormFields } from '../EAPSourceInformationInput';
+import { type PartialEapFullFormType } from '../schema';
+import ApproachesInput from './ApproachesInput';
+import EarlyActionsInput from './EarlyActionsInput';
+import OperationsInput from './OperationInput';
+
+import i18n from './i18n.json';
+
+type EapSector = components['schemas']['EapSectorEnumKey'];
+type EapSectorOption = components['schemas']['EapSectorEnum'];
+
+type EapApproach = components['schemas']['EapApproachEnumKey'];
+type EapApproachOption = components['schemas']['EapApproachEnum'];
+
+type EnablingApproachesFormFields = NonNullable<
+    PartialEapFullFormType['enable_approaches']
+>[number];
+
+type PlannedOperationFormFields = NonNullable<
+    PartialEapFullFormType['planned_operations']
+>[number];
+
+type EarlyActionsFormFields = NonNullable<
+    PartialEapFullFormType['early_actions']
+>[number];
+
+function sectorKeySelector(option: EapSectorOption) {
+    return option.key;
+}
+
+function approachesKeySelector(option: EapApproachOption) {
+    return option.key;
+}
+
+interface Props {
+    value: PartialEapFullFormType;
+    setFieldValue: (...entries: EntriesAsList<PartialEapFullFormType>) => void;
+    error: Error<PartialEapFullFormType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<
+        React.SetStateAction<Record<number, string>>
+    >;
+}
+
+function SelectionActions(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+    } = props;
+
+    const error = getErrorObject(formError);
+    const strings = useTranslation(i18n);
+    const { eap_sector: eapSectorOptions, eap_approach: eapApproachOptions } = useGlobalEnums();
+
+    const eapSectorLabelMapping = useMemo(
+        () => listToMap(
+            eapSectorOptions,
+            ({ key }) => key,
+            ({ value: label }) => label,
+        ),
+        [eapSectorOptions],
+    );
+
+    const { setValue: onOperationChange, removeValue: onOperationRemove } = useFormArray<'planned_operations', PlannedOperationFormFields>(
+        'planned_operations',
+        setFieldValue,
+    );
+
+    const handleOperationChecklistChange = useCallback(
+        (sectors: EapSector[] | undefined) => {
+            setFieldValue(
+                (previousValue: PlannedOperationFormFields[] | undefined) => {
+                    const previousValueMapping = listToMap(
+                        previousValue,
+                        ({ sector }) => sector,
+                    );
+
+                    return sectors?.map((sector) => {
+                        const prevSectorValue = previousValueMapping?.[sector];
+
+                        if (prevSectorValue) {
+                            return prevSectorValue;
+                        }
+
+                        return {
+                            sector,
+                        } satisfies PlannedOperationFormFields;
+                    });
+                },
+                'planned_operations',
+            );
+        },
+        [setFieldValue],
+    );
+
+    const selectedSectors = value?.planned_operations?.map(
+        ({ sector }) => sector,
+    );
+
+    const eapApproachLabelMapping = useMemo(
+        () => listToMap(
+            eapApproachOptions,
+            ({ key }) => key,
+            ({ value: label }) => label,
+        ),
+        [eapApproachOptions],
+    );
+
+    const { setValue: onApproachChange, removeValue: onApproachRemove } = useFormArray<'enable_approaches', EnablingApproachesFormFields>(
+        'enable_approaches',
+        setFieldValue,
+    );
+
+    const handleApproachChecklistChange = useCallback(
+        (approaches: EapApproach[] | undefined) => {
+            setFieldValue(
+                (previousValue: EnablingApproachesFormFields[] | undefined) => {
+                    const previousValueMapping = listToMap(
+                        previousValue,
+                        ({ approach }) => approach,
+                    );
+
+                    return approaches?.map((approach) => {
+                        const prevApproachValue = previousValueMapping?.[approach];
+
+                        if (prevApproachValue) {
+                            return prevApproachValue;
+                        }
+
+                        return {
+                            approach,
+                        } satisfies EnablingApproachesFormFields;
+                    });
+                },
+                'enable_approaches',
+            );
+        },
+        [setFieldValue],
+    );
+
+    const selectedApproaches = value?.enable_approaches?.map(
+        ({ approach }) => approach,
+    );
+
+    const {
+        setValue: onSourceInformationChange,
+        removeValue: onSourceInformationRemove,
+    } = useFormArray<
+        'evidence_base_source_of_information',
+        SourceInformationFormFields
+    >('evidence_base_source_of_information', setFieldValue);
+
+    const handleSourceInformationAdd = useCallback(() => {
+        const newSourceInformationItem: SourceInformationFormFields = {
+            client_id: randomString(),
+        };
+
+        setFieldValue(
+            (oldValue: SourceInformationFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newSourceInformationItem,
+            ],
+            'evidence_base_source_of_information' as const,
+        );
+    }, [setFieldValue]);
+
+    const { setValue: onEarlyActionsChange, removeValue: onEarlyActionsRemove } = useFormArray<'early_actions', EarlyActionsFormFields>(
+        'early_actions',
+        setFieldValue,
+    );
+
+    const handleEarlyActionsAdd = useCallback(() => {
+        const newEarlyActionsItem: EarlyActionsFormFields = {
+            client_id: randomString(),
+        };
+
+        setFieldValue(
+            (oldValue: EarlyActionsFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newEarlyActionsItem,
+            ],
+            'early_actions' as const,
+        );
+    }, [setFieldValue]);
+
+    return (
+        <TabPage>
+            <ListView layout="block">
+                <Heading level={4}>
+                    {strings.selectionActionsHeading}
+                    <InfoPopup
+                        description={strings.selectionActionsTooltipDescription}
+                    />
+                </Heading>
+                <InputSection
+                    title={strings.selectionProcessTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                label={strings.selectionActionExplanatoryNoteLabel}
+                                strongLabel
+                                value={strings.selectionProcessExplanatoryNote}
+                            />
+                            <TextOutput
+                                label={strings.selectionActionRequiredPointsLabel}
+                                strongLabel
+                                value={(
+                                    <ul>
+                                        <li>
+                                            {strings.selectionProcessRequiredPoint1}
+                                        </li>
+                                        <li>
+                                            {strings.selectionProcessRequiredPoint2}
+                                        </li>
+                                        <li>
+                                            {strings.selectionProcessRequiredPoint3}
+                                        </li>
+                                        <li>
+                                            {strings.selectionProcessRequiredPoint4}
+                                        </li>
+                                        <li>
+                                            {strings.selectionProcessRequiredPoint5}
+                                        </li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.selectionProcessDescription1}</li>
+                            <li>{strings.selectionProcessDescription2}</li>
+                            <li>{strings.selectionProcessDescription3}</li>
+                            <li>{strings.selectionProcessDescription4}</li>
+                            <li>{strings.selectionProcessDescription5}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <TextOutput
+                        withLightText
+                        value={strings.earlyActionsOutputValue}
+                    />
+                    {value?.early_actions?.map((action, index) => (
+                        <EarlyActionsInput
+                            key={action.client_id}
+                            index={index}
+                            value={action}
+                            onChange={onEarlyActionsChange}
+                            onRemove={onEarlyActionsRemove}
+                            error={getErrorObject(error?.early_actions)}
+                            disabled={disabled}
+                        />
+                    ))}
+                    <Button
+                        name={undefined}
+                        onClick={handleEarlyActionsAdd}
+                        disabled={disabled}
+                    >
+                        {strings.earlyActionsAddButtonLabel}
+                    </Button>
+                    <TextArea
+                        label={strings.selectionActionDescriptionLabel}
+                        name="early_action_selection_process"
+                        value={value?.early_action_selection_process}
+                        onChange={setFieldValue}
+                        error={error?.early_action_selection_process}
+                        disabled={disabled}
+                    />
+                    <MultiImageWithCaptionInput
+                        name="early_action_selection_process_images"
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.early_action_selection_process_images}
+                        onChange={setFieldValue}
+                        error={getErrorObject(
+                            error?.early_action_selection_process_images,
+                        )}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        label={strings.selectionActionUploadLabel}
+                        disabled={disabled}
+                    />
+                    <GoSingleFileInput
+                        accept=".pdf"
+                        required
+                        name="theory_of_change_table_file"
+                        value={value.theory_of_change_table_file}
+                        url="/api/v2/eap-file/"
+                        error={error?.theory_of_change_table_file}
+                        disabled={disabled}
+                        label={strings.selectionActionUploadTableLabel}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        onChange={setFieldValue}
+                    >
+                        {strings.selectionActionUploadLabel}
+                    </GoSingleFileInput>
+                </InputSection>
+                <InputSection
+                    title={strings.evidenceBaseTitle}
+                    tooltip={(
+                        <TextOutput
+                            label={strings.selectionActionExplanatoryNoteLabel}
+                            strongLabel
+                            value={strings.evidenceBaseExplanatoryNote}
+                        />
+                    )}
+                    description={strings.evidenceBaseDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.selectionActionDescriptionLabel}
+                        name="evidence_base"
+                        value={value?.evidence_base}
+                        onChange={setFieldValue}
+                        error={error?.evidence_base}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.selectionAttachFilesTitle}
+                    description={strings.selectionAttachFilesDescription}
+                >
+                    <GoMultiFileInput
+                        name="evidence_base_relevant_files"
+                        accept=".pdf, .docx, .pptx"
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        onChange={setFieldValue}
+                        url="/api/v2/eap-file/multiple/"
+                        value={value.evidence_base_relevant_files}
+                        error={getErrorString(error?.evidence_base_relevant_files)}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        clearable
+                        disabled={disabled}
+                        useCurrentLanguageForMutation
+                    >
+                        {strings.selectionActionUploadLabel}
+                    </GoMultiFileInput>
+                </InputSection>
+                <InputSection
+                    title={strings.selectionSourceOfInformationTitle}
+                    description={
+                        strings.selectionSourceOfInformationDescription
+                    }
+                >
+                    <NonFieldError
+                        error={getErrorObject(error?.evidence_base_source_of_information)}
+                    />
+                    {value.evidence_base_source_of_information?.map((source, index) => (
+                        <EAPSourceInformationInput
+                            key={source.client_id}
+                            index={index}
+                            value={source}
+                            onChange={onSourceInformationChange}
+                            onRemove={onSourceInformationRemove}
+                            error={getErrorObject(
+                                error?.evidence_base_source_of_information,
+                            )}
+                            disabled={disabled}
+                        />
+                    ))}
+                    <Button
+                        name={undefined}
+                        onClick={handleSourceInformationAdd}
+                        disabled={disabled}
+                    >
+                        {strings.selectionSourceOfInformationAddNewLabel}
+                    </Button>
+                </InputSection>
+            </ListView>
+            <Container
+                withHeaderBorder
+                heading={strings.selectionActionPlannedOperationHeading}
+                headerDescription={
+                    strings.selectionActionPlannedOperationHeadingDescription
+                }
+            >
+                <ListView layout="block">
+                    <InputSection
+                        title={strings.plannedOperationTitle}
+                        description={strings.plannedOperationDescription}
+                    >
+                        <NonFieldError error={getErrorObject(error?.planned_operations)} />
+                        <Checklist
+                            name={undefined}
+                            options={eapSectorOptions}
+                            value={selectedSectors}
+                            onChange={handleOperationChecklistChange}
+                            disabled={disabled}
+                            keySelector={sectorKeySelector}
+                            labelSelector={stringValueSelector}
+                            checkListLayout="grid"
+                            checkListLayoutPreferredGridColumns={3}
+                        />
+                    </InputSection>
+                    {value?.planned_operations?.map((operation, index) => (
+                        <OperationsInput
+                            operationTitle={eapSectorLabelMapping?.[operation.sector]}
+                            key={operation.sector}
+                            index={index}
+                            value={operation}
+                            onChange={onOperationChange}
+                            onRemove={onOperationRemove}
+                            error={getErrorObject(error?.planned_operations)}
+                            disabled={disabled}
+                        />
+                    ))}
+                    <InputSection
+                        title={strings.enablingApproachesTitle}
+                        description={strings.enablingApproachesDescription}
+                    >
+                        <NonFieldError error={getErrorObject(error?.planned_operations)} />
+                        <Checklist
+                            name={undefined}
+                            options={eapApproachOptions}
+                            onChange={handleApproachChecklistChange}
+                            value={selectedApproaches}
+                            disabled={disabled}
+                            keySelector={approachesKeySelector}
+                            labelSelector={stringValueSelector}
+                            checkListLayout="grid"
+                            checkListLayoutPreferredGridColumns={3}
+                        />
+                    </InputSection>
+                    {value?.enable_approaches
+                        ?.map((approach, index) => (
+                            <ApproachesInput
+                                approachTitle={eapApproachLabelMapping?.[approach.approach]}
+                                key={approach.approach}
+                                index={index}
+                                value={approach}
+                                onChange={onApproachChange}
+                                onRemove={onApproachRemove}
+                                error={getErrorObject(error?.enable_approaches)}
+                                disabled={disabled}
+                            />
+                        ))}
+                    <InputSection
+                        title={strings.useFullnessActionsTitle}
+                        description={strings.useFullnessActionsDescription}
+                        tooltip={(
+                            <ListView layout="block">
+                                <TextOutput
+                                    strongLabel
+                                    label={strings.selectionActionExplanatoryNoteLabel}
+                                    value={strings.useFullnessActionsExplanatoryNote}
+                                />
+                            </ListView>
+                        )}
+                        withAsteriskOnTitle
+                    >
+                        <TextArea
+                            label={strings.selectionActionDescriptionLabel}
+                            name="usefulness_of_actions"
+                            value={value?.usefulness_of_actions}
+                            onChange={setFieldValue}
+                            error={error?.usefulness_of_actions}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.feasibilityTitle}
+                        description={strings.feasibilityDescription}
+                        tooltip={(
+                            <ListView layout="block">
+                                <TextOutput
+                                    strongLabel
+                                    label={strings.selectionActionExplanatoryNoteLabel}
+                                    value={strings.feasibilityExplanatoryNote}
+                                />
+                                <TextOutput
+                                    label={strings.selectionActionRequiredPointsLabel}
+                                    strongLabel
+                                    value={(
+                                        <ul>
+                                            <li>
+                                                {strings.feasibilityRequiredPoint1}
+                                            </li>
+                                            <li>
+                                                {strings.feasibilityRequiredPoint2}
+                                            </li>
+                                        </ul>
+                                    )}
+                                />
+                            </ListView>
+                        )}
+                        withAsteriskOnTitle
+                    >
+                        <TextArea
+                            label={strings.selectionActionDescriptionLabel}
+                            name="feasibility"
+                            value={value?.feasibility}
+                            onChange={setFieldValue}
+                            error={error?.feasibility}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                </ListView>
+            </Container>
+        </TabPage>
+    );
+}
+
+export default SelectionActions;
diff --git a/app/src/views/EapFullForm/TriggerModel/i18n.json b/app/src/views/EapFullForm/TriggerModel/i18n.json
new file mode 100644
index 0000000000..14515b7366
--- /dev/null
+++ b/app/src/views/EapFullForm/TriggerModel/i18n.json
@@ -0,0 +1,52 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "triggerModelHeading": "Trigger Model",
+        "triggerModelTooltipDescription": "The work for the identification of triggers can be very technical and require expert resources. For this process, the National Society can get help from technical experts, Hydro-met services or specialist institutions. The chapter 4.1 Set the Trigger in the FbF Manual can be used for guidance.",
+        "triggerExplanatoryNoteLabel": "Explanatory Note",
+        "triggerRequiredPointsLabel": "Required Points",
+        "triggerStatementTitle": "Trigger Statement",
+        "triggerStatementDescription": "State in one sentence what exactly the trigger of your EAP will be, for example: When [source] issues a forecast of at least [probability of magnitude of event or impact], then we will act. We expect the lead-time to be [xxx].",
+        "triggerStatementExplanatoryNote": "The work for the identification of triggers can be very technical and require expert resources. For this process, the National Society can get help from technical experts, Hydro-met services or specialist institutions. The chapter 4.1 Set the Trigger in the FbF Manual can be used for guidance.",
+        "triggerModelDescriptionLabel": "Description",
+        "triggerLeadTimeTitle": "Lead Time",
+        "sourcesForecastTitle": "Sources of forecast",
+        "addNewSourcesForecastLabel": "Add New Source of Forecast",
+        "sourcesForecastDescription": "Add respective source(s) for the forecast and the link to the website, if applicable.",
+        "forecastExplanatoryNote": "In order for the DREF to approve funding when a trigger occurs, there must be a certain probability the extreme event will take place. To safeguard this, it is crucial to select those forecasts that have a certain “skill” level (certain level of confidence). If observations are used, these can also be included in the table. Note that this information does not need to be calculated by the National Society but can be obtained by working with hydro-meteorological services, research institutions, experts etc.",
+        "forecastSelectionTitle": "Forecast selection",
+        "forecastTableLabel": "Forecast Table",
+        "forecastRequiredPoint1": "State clearly which forecast(s) and observations will be used and why they were chosen.",
+        "forecastRequiredPoint2": "Include a table with all available forecasts for your hazard. The table must include: Name of forecast, Lead time, Source, False Alarm Ratio, Number of times the forecast has been issued for this hazard in the last 10 years ",
+        "forecastSelectionDescription": "State clearly which forecast(s) and observations will be used and why they were chosen. Include a table with all available forecasts for your hazard. The table must include: Name of forecast, Lead time, Source, False Alarm Ratio, Number of times the forecast has been issued for this hazard in the last 10 years.",
+        "definitionJustificationTitle": "Definition and justification of impact level",
+        "definitionJustificationDescription1": "Why did you select a certain magnitude of event?",
+        "definitionJustificationDescription2": "Explain how your impact level was defined.",
+        "definitionJustificationDescription3": "Explain how much impact can be expected based on the strength of the event.",
+        "definitionJustificationDescription4": "Indicate to which return period the selected impact-level corresponds (minimum: 1-in-5 years.)",
+        "definitionJustificationDescription5": "Explain how the return period was calculated",
+        "definitionJustificationExplanatoryNote": "The DREF provides funding for early action for events of a strength that has caused significant humanitarian impact in the past. Explain how a certain magnitude was selected and how the impact level was defined (see guidance in the FbF manual chapter 4.1 Set the Trigger (particularly Steps 6-8)). Define the relationship between impact (utilizing the prioritized impact/s section 3.3) and hazard magnitude to establish which impact can be expected given specific hazard magnitudes.",
+        "definitionJustificationRequiredPoint1": "Why did you select a certain magnitude of event?",
+        "definitionJustificationRequiredPoint2": "Explain how your impact level was defined. Explain how much impact can be expected based on the strength of the event.",
+        "definitionJustificationRequiredPoint3": "Indicate to which return period the selected impact-level corresponds (minimum: 1-in-5 years.)",
+        "definitionJustificationRequiredPoint4": "Explain how the return period was calculated",
+        "identificationInterventionTitle": "Identification of the intervention area",
+        "identificationInterventionDescription1": "Building on the analysis in Prioritised impact (in the previous section), list the vulnerability and exposure indicators/maps that will be used to identify which are the areas likely to be most impacted. Indicate data source and administrative level for each indicator, as well as state how you will update the data.",
+        "identificationInterventionDescription2": "Describe how you will combine the forecast maps with vulnerability/exposure indicators.",
+        "identificationInterventionDescription3": "Provide an example using a past event (it could be using a sample intervention map).",
+        "identificationInterventionExplanatoryNote": "When an impact level is reached, vulnerability and exposure information is combined with the real-time forecast to identify which areas are likely to be most impacted. In the most advanced form, the forecast would be digitally combined with vulnerability and exposure information, to show which areas are predicted to be most severely impacted. This will provide a map-based tool or a list of prioritized districts villages, municipalities or other geographical areas where the early actions will be activated. Where no digital system is available, the combination of forecast and vulnerability/exposure indicators could also be done manually, e.g. if flooding is forecasted for a certain area, the most vulnerable and exposed communities in that area are selected (for example the poorest if that indicator is used). If different weighted indicators are used to calculate a vulnerability index, check on the index which of the communities in the area for which the event is forecasted scores highest. Ultimately the objective is to know which areas are likely to be impacted and how you will determine which will be targeted.",
+        "identificationInterventionRequiredPoint1": "Building on the analysis in 3.3. list the vulnerability and exposure indicators/maps that will be used to identify which are the areas likely to be most impacted. Indicate data source and administrative level for each indicator, as well as state how you will update the data.",
+        "identificationInterventionRequiredPoint2": "Describe how you will combine the forecast maps with vulnerability/exposure indicators.",
+        "identificationInterventionRequiredPoint3": "Provide an example using past event (it could be using a sample intervention map).",
+        "attachRelevantFilesTitle": "Attach relevant files",
+        "attachRelevantFilesDescription": "Attach any additional maps, documentation, files, images, etc.",
+        "attachRelevantFilesUploadLabel": "Upload",
+        "triggerUploadTableLabel": "Upload Table",
+        "triggerSelectImagesLabel": "Select Images",
+        "sourceInformationTitle": "Sources of Information",
+        "selectRegionTitle": "Select region on a map",
+        "selectRegionDescription": "Select the respective regions on a map by clicking the link to the right",
+        "sourceInformationDescription": "Add the description of the sources one at a time. If the source has a link, add in the second field.",
+        "addNewSourceInformationLabel": "Add New Source of Information"
+    }
+}
diff --git a/app/src/views/EapFullForm/TriggerModel/index.tsx b/app/src/views/EapFullForm/TriggerModel/index.tsx
new file mode 100644
index 0000000000..804d5fdf5e
--- /dev/null
+++ b/app/src/views/EapFullForm/TriggerModel/index.tsx
@@ -0,0 +1,415 @@
+import { useCallback } from 'react';
+import {
+    Button,
+    Heading,
+    InfoPopup,
+    InputSection,
+    ListView,
+    NumberInput,
+    TextArea,
+    TextOutput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import Admin2Input from '#components/domain/Admin2Input';
+import GoMultiFileInput from '#components/domain/GoMultiFileInput';
+import GoSingleFileInput from '#components/domain/GoSingleFileInput';
+import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput';
+import NonFieldError from '#components/NonFieldError';
+import TabPage from '#components/TabPage';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import EAPSourceInformationInput, { type SourceInformationFormFields } from '../EAPSourceInformationInput';
+import { type PartialEapFullFormType } from '../schema';
+
+import i18n from './i18n.json';
+
+interface Props {
+    value: PartialEapFullFormType;
+    setFieldValue: (...entries: EntriesAsList<PartialEapFullFormType>) => void;
+    error: Error<PartialEapFullFormType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<
+        React.SetStateAction<Record<number, string>>
+    >;
+    eapRegistrationDetail?: GoApiResponse<'/api/v2/eap-registration/{id}/'>;
+}
+
+function TriggerModel(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+        eapRegistrationDetail,
+    } = props;
+
+    const error = getErrorObject(formError);
+    const strings = useTranslation(i18n);
+
+    const {
+        setValue: onSourcesForecastChange,
+        removeValue: onSourcesForecastRemove,
+    } = useFormArray<
+        'trigger_statement_source_of_information',
+        SourceInformationFormFields
+    >('trigger_statement_source_of_information', setFieldValue);
+
+    const handleSourcesForecastAdd = useCallback(() => {
+        const newSourceInformationItem: SourceInformationFormFields = {
+            client_id: randomString(),
+        };
+
+        setFieldValue(
+            (oldValue: SourceInformationFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newSourceInformationItem,
+            ],
+            'trigger_statement_source_of_information' as const,
+        );
+    }, [setFieldValue]);
+
+    const {
+        setValue: onSourceInformationChange,
+        removeValue: onSourceInformationRemove,
+    } = useFormArray<
+        'trigger_model_source_of_information',
+        SourceInformationFormFields
+    >('trigger_model_source_of_information', setFieldValue);
+
+    const handleSourceInformationAdd = useCallback(() => {
+        const newSourceInformationItem: SourceInformationFormFields = {
+            client_id: randomString(),
+        };
+
+        setFieldValue(
+            (oldValue: SourceInformationFormFields[] | undefined) => [
+                ...(oldValue ?? []),
+                newSourceInformationItem,
+            ],
+            'trigger_model_source_of_information' as const,
+        );
+    }, [setFieldValue]);
+
+    return (
+        <TabPage>
+            <ListView layout="block">
+                <Heading level={4}>
+                    {strings.triggerModelHeading}
+                    <InfoPopup description={strings.triggerModelTooltipDescription} />
+                </Heading>
+                <InputSection
+                    title={strings.triggerStatementTitle}
+                    tooltip={(
+                        <TextOutput
+                            label={strings.triggerExplanatoryNoteLabel}
+                            strongLabel
+                            value={strings.triggerStatementExplanatoryNote}
+                        />
+                    )}
+                    description={strings.triggerStatementDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.triggerModelDescriptionLabel}
+                        name="trigger_statement"
+                        value={value?.trigger_statement}
+                        error={error?.trigger_statement}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.triggerLeadTimeTitle}
+                    withAsteriskOnTitle
+                >
+                    <NumberInput
+                        name="lead_time"
+                        value={value?.lead_time}
+                        error={error?.lead_time}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.sourcesForecastTitle}
+                    description={strings.sourcesForecastDescription}
+                >
+                    <NonFieldError
+                        error={getErrorObject(
+                            error?.trigger_statement_source_of_information,
+                        )}
+                    />
+                    {value?.trigger_statement_source_of_information?.map(
+                        (source, index) => (
+                            <EAPSourceInformationInput
+                                key={source.client_id}
+                                index={index}
+                                value={source}
+                                onChange={onSourcesForecastChange}
+                                onRemove={onSourcesForecastRemove}
+                                error={getErrorObject(
+                                    error?.risk_analysis_source_of_information,
+                                )}
+                                disabled={disabled}
+                            />
+                        ),
+                    )}
+                    <Button
+                        name={undefined}
+                        onClick={handleSourcesForecastAdd}
+                        disabled={disabled}
+                    >
+                        {strings.addNewSourcesForecastLabel}
+                    </Button>
+                </InputSection>
+                <InputSection
+                    title={strings.forecastSelectionTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                label={strings.triggerExplanatoryNoteLabel}
+                                strongLabel
+                                value={strings.forecastExplanatoryNote}
+                            />
+                            <TextOutput
+                                label={strings.triggerRequiredPointsLabel}
+                                strongLabel
+                                value={(
+                                    <ul>
+                                        <li>{strings.forecastRequiredPoint1}</li>
+                                        <li>{strings.forecastRequiredPoint2}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={strings.forecastSelectionDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.triggerModelDescriptionLabel}
+                        name="forecast_selection"
+                        value={value?.forecast_selection}
+                        error={error?.forecast_selection}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                    <MultiImageWithCaptionInput
+                        name="forecast_selection_images"
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.forecast_selection_images}
+                        onChange={setFieldValue}
+                        error={getErrorObject(error?.forecast_selection_images)}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        label={strings.triggerSelectImagesLabel}
+                        disabled={disabled}
+                    />
+                    <TextOutput withLightText value={strings.forecastTableLabel} />
+                    <GoSingleFileInput
+                        accept=".pdf"
+                        name="forecast_table_file"
+                        value={value.forecast_table_file}
+                        url="/api/v2/eap-file/"
+                        error={error?.forecast_table_file}
+                        disabled={disabled}
+                        label={strings.attachRelevantFilesUploadLabel}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        onChange={setFieldValue}
+                    >
+                        {strings.triggerUploadTableLabel}
+                    </GoSingleFileInput>
+                </InputSection>
+                <InputSection
+                    title={strings.definitionJustificationTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                label={strings.triggerExplanatoryNoteLabel}
+                                strongLabel
+                                value={strings.definitionJustificationExplanatoryNote}
+                            />
+                            <TextOutput
+                                label={strings.triggerRequiredPointsLabel}
+                                strongLabel
+                                value={(
+                                    <ul>
+                                        <li>{strings.definitionJustificationRequiredPoint1}</li>
+                                        <li>{strings.definitionJustificationRequiredPoint2}</li>
+                                        <li>{strings.definitionJustificationRequiredPoint3}</li>
+                                        <li>{strings.definitionJustificationRequiredPoint4}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.definitionJustificationDescription1}</li>
+                            <li>{strings.definitionJustificationDescription2}</li>
+                            <li>{strings.definitionJustificationDescription3}</li>
+                            <li>{strings.definitionJustificationDescription4}</li>
+                            <li>{strings.definitionJustificationDescription5}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.triggerModelDescriptionLabel}
+                        name="definition_and_justification_impact_level"
+                        value={value?.definition_and_justification_impact_level}
+                        error={error?.definition_and_justification_impact_level}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                    <MultiImageWithCaptionInput
+                        name="definition_and_justification_impact_level_images"
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.definition_and_justification_impact_level_images}
+                        onChange={setFieldValue}
+                        error={getErrorObject(
+                            error?.definition_and_justification_impact_level_images,
+                        )}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        label={strings.triggerSelectImagesLabel}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.identificationInterventionTitle}
+                    tooltip={(
+                        <ListView layout="block">
+                            <TextOutput
+                                label={strings.triggerExplanatoryNoteLabel}
+                                strongLabel
+                                value={strings.identificationInterventionExplanatoryNote}
+                            />
+                            <TextOutput
+                                label={strings.triggerRequiredPointsLabel}
+                                strongLabel
+                                value={(
+                                    <ul>
+                                        <li>{strings.identificationInterventionRequiredPoint1}</li>
+                                        <li>{strings.identificationInterventionRequiredPoint2}</li>
+                                        <li>{strings.identificationInterventionRequiredPoint3}</li>
+                                    </ul>
+                                )}
+                            />
+                        </ListView>
+                    )}
+                    description={(
+                        <ul>
+                            <li>{strings.identificationInterventionDescription1}</li>
+                            <li>{strings.identificationInterventionDescription2}</li>
+                            <li>{strings.identificationInterventionDescription3}</li>
+                        </ul>
+                    )}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.triggerModelDescriptionLabel}
+                        name="identification_of_the_intervention_area"
+                        value={value?.identification_of_the_intervention_area}
+                        error={error?.identification_of_the_intervention_area}
+                        onChange={setFieldValue}
+                        disabled={disabled}
+                    />
+                    <MultiImageWithCaptionInput
+                        name="identification_of_the_intervention_area_images"
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.identification_of_the_intervention_area_images}
+                        onChange={setFieldValue}
+                        error={getErrorObject(
+                            error?.identification_of_the_intervention_area_images,
+                        )}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        label={strings.triggerSelectImagesLabel}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.selectRegionTitle}
+                    description={strings.selectRegionDescription}
+                    withAsteriskOnTitle
+                >
+                    {isDefined(eapRegistrationDetail?.country) && (
+                        <Admin2Input
+                            name="admin2"
+                            onChange={setFieldValue}
+                            value={value?.admin2}
+                            countryId={eapRegistrationDetail.country}
+                            error={getErrorString(error?.admin2)}
+                        />
+                    )}
+                </InputSection>
+                <InputSection
+                    title={strings.attachRelevantFilesTitle}
+                    description={strings.attachRelevantFilesDescription}
+                    withAsteriskOnTitle
+                >
+                    <GoMultiFileInput
+                        name="trigger_model_relevant_files"
+                        accept=".pdf, .docx, .pptx"
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        onChange={setFieldValue}
+                        url="/api/v2/eap-file/multiple/"
+                        value={value?.trigger_model_relevant_files}
+                        error={getErrorString(error?.trigger_model_relevant_files)}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        clearable
+                        disabled={disabled}
+                        useCurrentLanguageForMutation
+                    >
+                        {strings.attachRelevantFilesUploadLabel}
+                    </GoMultiFileInput>
+                </InputSection>
+                <InputSection
+                    title={strings.sourceInformationTitle}
+                    description={strings.sourceInformationDescription}
+                >
+                    <NonFieldError
+                        error={getErrorObject(error?.trigger_model_source_of_information)}
+                    />
+                    {value?.trigger_model_source_of_information?.map((source, index) => (
+                        <EAPSourceInformationInput
+                            key={source.client_id}
+                            index={index}
+                            value={source}
+                            onChange={onSourceInformationChange}
+                            onRemove={onSourceInformationRemove}
+                            error={getErrorObject(error?.trigger_model_source_of_information)}
+                            disabled={disabled}
+                        />
+                    ))}
+                    <Button
+                        name={undefined}
+                        onClick={handleSourceInformationAdd}
+                        disabled={disabled}
+                    >
+                        {strings.addNewSourceInformationLabel}
+                    </Button>
+                </InputSection>
+            </ListView>
+        </TabPage>
+    );
+}
+
+export default TriggerModel;
diff --git a/app/src/views/EapFullForm/common.tsx b/app/src/views/EapFullForm/common.tsx
new file mode 100644
index 0000000000..1b1a1cb4ad
--- /dev/null
+++ b/app/src/views/EapFullForm/common.tsx
@@ -0,0 +1,174 @@
+import { isNotDefined } from '@togglecorp/fujs';
+import {
+    analyzeErrors,
+    type Error,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+
+import { type PartialEapFullFormType } from './schema';
+
+export type TabKeys =
+    | 'overview'
+    | 'riskAnalysis'
+    | 'triggerModel'
+    | 'selectionActions'
+    | 'eapActivation'
+    | 'meal'
+    | 'nationalSocietyCapacity'
+    | 'financeLogistics';
+
+const overviewTabFields: (keyof PartialEapFullFormType)[] = [
+    'expected_submission_time',
+    'objective',
+    'cover_image_file',
+    'national_society_contact_name',
+    'national_society_contact_title',
+    'national_society_contact_email',
+    'national_society_contact_phone_number',
+    'partner_ns_name',
+    'partner_ns_title',
+    'partner_ns_email',
+    'partner_ns_phone_number',
+    'dref_focal_point_name',
+    'dref_focal_point_email',
+    'dref_focal_point_phone_number',
+    'ifrc_delegation_focal_point_name',
+    'ifrc_delegation_focal_point_title',
+    'ifrc_delegation_focal_point_email',
+    'ifrc_delegation_focal_point_phone_number',
+    'dref_focal_point_name',
+    'dref_focal_point_title',
+    'dref_focal_point_email',
+    'dref_focal_point_phone_number',
+    'ifrc_regional_focal_point_name',
+    'ifrc_regional_focal_point_title',
+    'ifrc_regional_focal_point_email',
+    'ifrc_regional_focal_point_phone_number',
+    'ifrc_regional_ops_manager_name',
+    'ifrc_regional_ops_manager_title',
+    'ifrc_regional_ops_manager_email',
+    'ifrc_regional_ops_manager_phone_number',
+    'ifrc_regional_head_dcc_name',
+    'ifrc_regional_head_dcc_title',
+    'ifrc_regional_head_dcc_email',
+    'ifrc_regional_head_dcc_phone_number',
+    'ifrc_global_ops_coordinator_name',
+    'ifrc_global_ops_coordinator_title',
+    'ifrc_global_ops_coordinator_email',
+    'ifrc_global_ops_coordinator_phone_number',
+    'is_worked_with_government',
+    'worked_with_government_description',
+    'key_actors',
+    'is_technical_working_groups',
+    'technically_working_group_title',
+    'technical_working_groups_in_place_description',
+];
+
+const riskAnalysisTabFields: (keyof PartialEapFullFormType)[] = [
+    'hazard_selection_images',
+    'hazard_selection',
+    'exposed_element_and_vulnerability_factor',
+    'exposed_element_and_vulnerability_factor_images',
+    'prioritized_impacts',
+    'prioritized_impact_images',
+    'risk_analysis_relevant_files',
+    'risk_analysis_source_of_information',
+];
+
+const triggerModelTabFields: (keyof PartialEapFullFormType)[] = [
+    'trigger_statement',
+    'lead_time',
+    'trigger_statement_source_of_information',
+    'forecast_selection',
+    'forecast_selection_images',
+    'forecast_table_file',
+    'definition_and_justification_impact_level',
+    'definition_and_justification_impact_level_images',
+    'identification_of_the_intervention_area',
+    'identification_of_the_intervention_area_images',
+    'admin2',
+    'trigger_model_source_of_information',
+    'trigger_model_relevant_files',
+];
+
+const selectionActionsTabFields: (keyof PartialEapFullFormType)[] = [
+    'early_actions',
+    'early_action_selection_process',
+    'early_action_selection_process_images',
+    'theory_of_change_table_file',
+    'evidence_base',
+    'evidence_base_source_of_information',
+    'evidence_base_relevant_files',
+    'planned_operations',
+    'enable_approaches',
+    'usefulness_of_actions',
+    'feasibility',
+];
+
+const eapActivationTabFields: (keyof PartialEapFullFormType)[] = [
+    'early_action_implementation_process',
+    'early_action_implementation_images',
+    'trigger_activation_system_images',
+    'trigger_activation_system',
+    'people_targeted',
+    'selection_of_target_population',
+    'stop_mechanism',
+    'activation_process_relevant_files',
+    'activation_process_source_of_information',
+];
+
+const mealTabFields: (keyof PartialEapFullFormType)[] = [
+    'meal',
+    'meal_relevant_files',
+];
+
+const nationalSocietyTabFields: (keyof PartialEapFullFormType)[] = [
+    'operational_administrative_capacity',
+    'strategies_and_plans',
+    'advance_financial_capacity',
+    'capacity_relevant_files',
+];
+
+const financeLogisticsTabFields: (keyof PartialEapFullFormType)[] = [
+    'total_budget',
+    'budget_file',
+    'budget_description',
+    'readiness_budget',
+    'readiness_cost_description',
+    'pre_positioning_budget',
+    'prepositioning_cost_description',
+    'early_action_budget',
+    'early_action_cost_description',
+    'eap_endorsement',
+];
+
+const tabToFieldsMap: Record<TabKeys, (keyof PartialEapFullFormType)[]> = {
+    overview: overviewTabFields,
+    riskAnalysis: riskAnalysisTabFields,
+    triggerModel: triggerModelTabFields,
+    selectionActions: selectionActionsTabFields,
+    eapActivation: eapActivationTabFields,
+    meal: mealTabFields,
+    nationalSocietyCapacity: nationalSocietyTabFields,
+    financeLogistics: financeLogisticsTabFields,
+};
+
+export function checkTabErrors(
+    error: Error<PartialEapFullFormType> | undefined,
+    tabKey: TabKeys,
+) {
+    if (isNotDefined(analyzeErrors(error))) {
+        return false;
+    }
+
+    const fields = tabToFieldsMap[tabKey];
+    const fieldErrors = getErrorObject(error);
+
+    const hasErrorOnAnyField = fields.some((field) => {
+        const fieldError = fieldErrors?.[field];
+        const isErrored = analyzeErrors<PartialEapFullFormType>(fieldError);
+        return isErrored;
+    });
+
+    return hasErrorOnAnyField;
+}
diff --git a/app/src/views/EapFullForm/i18n.json b/app/src/views/EapFullForm/i18n.json
new file mode 100644
index 0000000000..1dfff8c184
--- /dev/null
+++ b/app/src/views/EapFullForm/i18n.json
@@ -0,0 +1,23 @@
+{
+    "namespace": "eapFullForm",
+    "strings": {
+        "fullEapHeading": "Full EAP form",
+        "fullEapDescription": "Use the following form to submit the details of your Early Action Protocols (EAP) submission. This is the Full EAP form. If you are instead looking for the Simplified EAP.",
+        "fullEapOverview": "Overview",
+        "fullEapRiskAnalysis": "Risk Analysis",
+        "fullEapTriggerModel": "Trigger Model",
+        "fullEapSelectionActions": "Selection of Actions",
+        "fullEapActivationProcess": "EAP Activation Process",
+        "fullEapMeal": "Meal",
+        "fullEapNationalSocietyCapacity": "National Society Capacity",
+        "fullEapFinanceLogistics": "Finance and Logistics",
+        "fullEapBackButton": "Back",
+        "fullEapNextButton": "Next",
+        "fullEapSaveButton": "Save",
+        "fullEapCancelButton": "Cancel",
+        "fullEapFailure": "Sorry could not create a new Full EAP right now!",
+        "fullEapSuccess": "Successfully created a new Full EAP!",
+        "fullEapUpdateFailure": "Sorry could not update Full EAP right now!",
+        "fullEapUpdateSuccess": "Successfully updated a new Full EAP!"
+    }
+}
diff --git a/app/src/views/EapFullForm/index.tsx b/app/src/views/EapFullForm/index.tsx
new file mode 100644
index 0000000000..531be9434c
--- /dev/null
+++ b/app/src/views/EapFullForm/index.tsx
@@ -0,0 +1,805 @@
+import {
+    type ElementRef,
+    useCallback,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { useParams } from 'react-router-dom';
+import {
+    Button,
+    ListView,
+    Tab,
+    TabList,
+    TabPanel,
+    Tabs,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { injectClientId } from '@ifrc-go/ui/utils';
+import {
+    compareNumber,
+    isDefined,
+    isNotDefined,
+    isTruthyString,
+    listToMap,
+} from '@togglecorp/fujs';
+import {
+    createSubmitHandler,
+    removeNull,
+    useForm,
+} from '@togglecorp/toggle-form';
+
+import Link from '#components/Link';
+import Page from '#components/Page';
+import useAlert from '#hooks/useAlert';
+import useRouting from '#hooks/useRouting';
+import {
+    type GoApiBody,
+    type GoApiResponse,
+    useLazyRequest,
+    useRequest,
+} from '#utils/restRequest';
+import {
+    matchArray,
+    NUM,
+    type ResponseObjectError,
+    transformObjectError,
+} from '#utils/restRequest/error';
+
+import {
+    checkTabErrors,
+    type TabKeys,
+} from './common';
+import EapActivationProcess from './EapActivationProcess';
+import FinanceLogistics from './FinanceLogistics';
+import Meal from './Meal';
+import NationalSocietyCapacity from './NationalSocietyCapacity';
+import Overview from './Overview';
+import RiskAnalysis from './RiskAnalysis';
+import {
+    formSchema,
+    type PartialEapFullFormType,
+} from './schema';
+import SelectionActions from './SelectionActions';
+import TriggerModel from './TriggerModel';
+
+import i18n from './i18n.json';
+
+type EapFullRequestBody = GoApiBody<'/api/v2/full-eap/', 'POST'>;
+type GetFullEapResponse = GoApiResponse<'/api/v2/full-eap/{id}/'>;
+
+function getNextStep(current: TabKeys, direction: 1 | -1) {
+    const tabKeyList: TabKeys[] = [
+        'overview',
+        'riskAnalysis',
+        'triggerModel',
+        'selectionActions',
+        'eapActivation',
+        'meal',
+        'nationalSocietyCapacity',
+    ];
+    const currentIndex = tabKeyList.findIndex((key) => key === current);
+
+    return tabKeyList[currentIndex + direction];
+}
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const [activeTab, setActiveTab] = useState<TabKeys>('overview');
+    const [fileIdToUrlMap, setFileIdToUrlMap] = useState<Record<number, string>>(
+        {},
+    );
+    const { eapId } = useParams<{ eapId: string }>();
+    const formContentRef = useRef<ElementRef<'div'>>(null);
+    const strings = useTranslation(i18n);
+    const { navigate } = useRouting();
+
+    const alert = useAlert();
+
+    const {
+        value,
+        setFieldValue,
+        setValue,
+        error: formError,
+        validate,
+        setError,
+    } = useForm(formSchema, {
+        value: {},
+    });
+
+    const updateFileUrlMapping = useCallback((response: GetFullEapResponse) => {
+        setFileIdToUrlMap((prevMap) => {
+            const {
+                cover_image_file,
+                hazard_selection_images,
+                forecast_selection_images,
+                trigger_activation_system_images,
+                early_action_selection_process_images,
+                exposed_element_and_vulnerability_factor_images,
+                identification_of_the_intervention_area_images,
+                definition_and_justification_impact_level_images,
+                prioritized_impact_images,
+                early_action_implementation_images,
+                budget_file_details,
+            } = response;
+            return {
+                ...prevMap,
+                ...listToMap(
+                    [
+                        cover_image_file,
+                        ...(hazard_selection_images ?? []),
+                        ...(forecast_selection_images ?? []),
+                        ...(trigger_activation_system_images ?? []),
+                        ...(early_action_selection_process_images ?? []),
+                        ...(exposed_element_and_vulnerability_factor_images ?? []),
+                        ...(identification_of_the_intervention_area_images ?? []),
+                        ...(definition_and_justification_impact_level_images ?? []),
+                        ...(prioritized_impact_images ?? []),
+                        ...(early_action_implementation_images ?? []),
+                        budget_file_details,
+                    ]
+                        .map((eapFile) => {
+                            if (isNotDefined(eapFile)) {
+                                return undefined;
+                            }
+
+                            const { id, file } = eapFile;
+
+                            if (isNotDefined(id) || isNotDefined(file)) {
+                                return undefined;
+                            }
+
+                            return {
+                                id,
+                                file,
+                            };
+                        })
+                        .filter(isDefined),
+                    (file) => file.id,
+                    (file) => file.file,
+                ),
+            };
+        });
+    }, []);
+
+    const loadResponseToFormValue = useCallback(
+        (response: GetFullEapResponse) => {
+            updateFileUrlMapping(response);
+
+            const {
+                planned_operations,
+                enable_approaches,
+                cover_image_file,
+                hazard_selection_images,
+                forecast_selection_images,
+                trigger_activation_system_images,
+                early_action_selection_process_images,
+                early_action_implementation_images,
+                exposed_element_and_vulnerability_factor_images,
+                identification_of_the_intervention_area_images,
+                definition_and_justification_impact_level_images,
+                prioritized_impact_images,
+                activation_process_source_of_information,
+                evidence_base_source_of_information,
+                early_actions,
+                risk_analysis_source_of_information,
+                trigger_model_source_of_information,
+                trigger_statement_source_of_information,
+                key_actors,
+                prioritized_impacts,
+                ...otherValues
+            } = removeNull(response);
+
+            setValue({
+                ...otherValues,
+
+                activation_process_source_of_information:
+                    activation_process_source_of_information?.map(injectClientId),
+                risk_analysis_source_of_information:
+                    risk_analysis_source_of_information?.map(injectClientId),
+                evidence_base_source_of_information:
+                    evidence_base_source_of_information?.map(injectClientId),
+                trigger_model_source_of_information:
+                    trigger_model_source_of_information?.map(injectClientId),
+                trigger_statement_source_of_information:
+                    trigger_statement_source_of_information?.map(injectClientId),
+                early_actions: early_actions?.map(injectClientId),
+                key_actors: key_actors?.map(injectClientId),
+                prioritized_impacts: prioritized_impacts?.map(injectClientId),
+
+                cover_image_file: isDefined(cover_image_file)
+                    ? injectClientId(cover_image_file)
+                    : undefined,
+
+                early_action_implementation_images:
+                    early_action_implementation_images?.map(injectClientId),
+                hazard_selection_images: hazard_selection_images?.map(injectClientId),
+                forecast_selection_images:
+                    forecast_selection_images?.map(injectClientId),
+                trigger_activation_system_images:
+                    trigger_activation_system_images?.map(injectClientId),
+                early_action_selection_process_images:
+                    early_action_selection_process_images?.map(injectClientId),
+                exposed_element_and_vulnerability_factor_images:
+                    exposed_element_and_vulnerability_factor_images?.map(injectClientId),
+                identification_of_the_intervention_area_images:
+                    identification_of_the_intervention_area_images?.map(injectClientId),
+                definition_and_justification_impact_level_images:
+                    definition_and_justification_impact_level_images?.map(injectClientId),
+                prioritized_impact_images:
+                    prioritized_impact_images?.map(injectClientId),
+
+                planned_operations: planned_operations?.map((intervention) => ({
+                    ...intervention,
+                    indicators: intervention.indicators?.map(injectClientId),
+                    early_action_activities:
+                        intervention.early_action_activities?.map(injectClientId),
+                    readiness_activities:
+                        intervention.readiness_activities?.map(injectClientId),
+                    prepositioning_activities:
+                        intervention.prepositioning_activities?.map(injectClientId),
+                })),
+                enable_approaches: enable_approaches?.map((approach) => ({
+                    ...approach,
+                    indicators: approach.indicators?.map(injectClientId),
+                    early_action_activities:
+                        approach.early_action_activities?.map(injectClientId),
+                    readiness_activities:
+                        approach.readiness_activities?.map(injectClientId),
+                    prepositioning_activities:
+                        approach.prepositioning_activities?.map(injectClientId),
+                })),
+            });
+        },
+        [updateFileUrlMapping, setValue],
+    );
+
+    const processServerErrors = useCallback(
+        (errors: ResponseObjectError) => {
+            setError(
+                transformObjectError(errors, (locations) => {
+                    let match = matchArray(locations, ['cover_image_file', NUM]);
+                    if (isDefined(match)) {
+                        return value?.cover_image_file?.client_id;
+                    }
+
+                    match = matchArray(locations, ['hazard_selection_images', NUM]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.hazard_selection_images?.[index!]?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'exposed_element_and_vulnerability_factor_images',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.exposed_element_and_vulnerability_factor_images?.[
+                            index!
+                        ]?.client_id;
+                    }
+
+                    match = matchArray(locations, ['prioritized_impact_images', NUM]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.prioritized_impact_images?.[index!]?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'risk_analysis_source_of_information',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.risk_analysis_source_of_information?.[index!]
+                            ?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'trigger_statement_source_of_information',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.trigger_statement_source_of_information?.[index!]
+                            ?.client_id;
+                    }
+
+                    match = matchArray(locations, ['forecast_selection_images', NUM]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.forecast_selection_images?.[index!]?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'definition_and_justification_impact_level_images',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.definition_and_justification_impact_level_images?.[
+                            index!
+                        ]?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'identification_of_the_intervention_area_images',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.identification_of_the_intervention_area_images?.[
+                            index!
+                        ]?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'trigger_model_source_of_information',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.trigger_model_source_of_information?.[index!]
+                            ?.client_id;
+                    }
+
+                    match = matchArray(locations, ['early_actions', NUM]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.early_actions?.[index!]?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'early_action_selection_process_images',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.early_action_selection_process_images?.[index!]
+                            ?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'early_action_selection_process_images',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.early_action_selection_process_images?.[index!]
+                            ?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'evidence_base_source_of_information',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.evidence_base_source_of_information?.[index!]
+                            ?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'early_action_implementation_images',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.early_action_implementation_images?.[index!]
+                            ?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'trigger_activation_system_images',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.trigger_activation_system_images?.[index!]?.client_id;
+                    }
+
+                    match = matchArray(locations, [
+                        'activation_process_source_of_information',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [index] = match;
+                        return value?.trigger_activation_system_images?.[index!]?.client_id;
+                    }
+                    match = matchArray(locations, [
+                        'planned_operations',
+                        NUM,
+                        'early_action_activities',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [poIndex, index] = match;
+                        return value?.planned_operations?.[poIndex!]
+                            ?.early_action_activities?.[index!]?.client_id;
+                    }
+                    match = matchArray(locations, [
+                        'planned_operations',
+                        NUM,
+                        'readiness_activities',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [poIndex, index] = match;
+                        return value?.planned_operations?.[poIndex!]
+                            ?.readiness_activities?.[index!]?.client_id;
+                    }
+                    match = matchArray(locations, [
+                        'planned_operations',
+                        NUM,
+                        'prepositioning_activities',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [poIndex, index] = match;
+                        return value?.planned_operations?.[poIndex!]
+                            ?.prepositioning_activities?.[index!]?.client_id;
+                    }
+                    match = matchArray(locations, ['planned_operations', NUM]);
+                    if (isDefined(match)) {
+                        const [poIndex] = match;
+                        return value?.planned_operations?.[poIndex!]?.sector;
+                    }
+                    match = matchArray(locations, [
+                        'enable_approaches',
+                        NUM,
+                        'early_action_activities',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [eaIndex, index] = match;
+                        return value?.enable_approaches?.[eaIndex!]
+                            ?.early_action_activities?.[index!]?.client_id;
+                    }
+                    match = matchArray(locations, [
+                        'enable_approaches',
+                        NUM,
+                        'readiness_activities',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [eaIndex, index] = match;
+                        return value?.enable_approaches?.[eaIndex!]?.readiness_activities?.[
+                            index!
+                        ]?.client_id;
+                    }
+                    match = matchArray(locations, [
+                        'enable_approaches',
+                        NUM,
+                        'prepositioning_activities',
+                        NUM,
+                    ]);
+                    if (isDefined(match)) {
+                        const [eaIndex, index] = match;
+                        return value?.enable_approaches?.[eaIndex!]
+                            ?.prepositioning_activities?.[index!]?.client_id;
+                    }
+                    match = matchArray(locations, ['enable_approaches', NUM]);
+                    if (isDefined(match)) {
+                        const [eaIndex] = match;
+                        return value?.enable_approaches?.[eaIndex!]?.approach;
+                    }
+
+                    return undefined;
+                }),
+            );
+        },
+        [value, setError],
+    );
+
+    const { pending: fetchingEap, response: eapDetailResponse } = useRequest({
+        skip: isNotDefined(eapId),
+        url: '/api/v2/eap-registration/{id}/',
+        pathVariables: isTruthyString(eapId)
+            ? {
+                id: Number(eapId),
+            }
+            : undefined,
+        onSuccess: (response) => {
+            if (isDefined(response.expected_submission_time)) {
+                setFieldValue(
+                    response?.expected_submission_time,
+                    'expected_submission_time' as const,
+                );
+            }
+        },
+    });
+
+    const latestFullEapId = eapDetailResponse?.full_eap_details?.toSorted(
+        (a, b) => compareNumber(a.version, b.version, -1),
+    )?.[0]?.id;
+
+    useRequest({
+        skip: isNotDefined(latestFullEapId),
+        url: '/api/v2/full-eap/{id}/',
+        pathVariables: isDefined(latestFullEapId)
+            ? {
+                id: latestFullEapId,
+            }
+            : undefined,
+        onSuccess: (response) => loadResponseToFormValue(response),
+    });
+
+    const { pending: eapFullPending, trigger: createFullEap } = useLazyRequest({
+        method: 'POST',
+        url: '/api/v2/full-eap/',
+        body: (body: EapFullRequestBody) => body,
+        onSuccess: () => {
+            const message = strings.fullEapSuccess;
+            alert.show(message, { variant: 'success' });
+            navigate('accountMyFormsEap');
+        },
+        onFailure: (err) => {
+            const {
+                value: { formErrors, messageForNotification },
+            } = err;
+
+            processServerErrors(formErrors);
+
+            alert.show(strings.fullEapFailure, {
+                variant: 'danger',
+                description: messageForNotification,
+            });
+        },
+    });
+
+    const { pending: updateFullFormPending, trigger: updateFullEap } = useLazyRequest({
+        url: '/api/v2/full-eap/{id}/',
+        method: 'PATCH',
+        pathVariables: {
+            id: Number(latestFullEapId),
+        },
+        body: (formFields: EapFullRequestBody) => formFields,
+        onSuccess: (response) => {
+            alert.show(strings.fullEapUpdateSuccess, { variant: 'success' });
+
+            // FIXME: only navigate to accounts page for the submit action
+            navigate('accountMyFormsEap', { params: { eapId: response.id } });
+        },
+        onFailure: (err) => {
+            const {
+                value: { formErrors, messageForNotification },
+            } = err;
+
+            processServerErrors(formErrors);
+
+            alert.show(strings.fullEapUpdateFailure, {
+                variant: 'danger',
+                description: messageForNotification,
+            });
+        },
+    });
+    const disabled = eapFullPending || updateFullFormPending || fetchingEap;
+
+    const nextStep = getNextStep(activeTab, 1);
+    const prevStep = getNextStep(activeTab, -1);
+
+    const handleValidationSuccess = useCallback(
+        (validatedFormValue: PartialEapFullFormType) => {
+            if (isNotDefined(latestFullEapId)) {
+                createFullEap({
+                    ...(validatedFormValue as EapFullRequestBody),
+                    eap_registration: Number(eapId),
+                });
+            } else {
+                updateFullEap({
+                    ...validatedFormValue,
+                    id: latestFullEapId,
+                } as EapFullRequestBody);
+            }
+        },
+        [eapId, createFullEap, latestFullEapId, updateFullEap],
+    );
+
+    const handleTabChange = useCallback((newTab: TabKeys) => {
+        formContentRef.current?.scrollIntoView();
+        setActiveTab(newTab);
+    }, []);
+
+    const handleFormError = useCallback(() => {
+        setTimeout(() => formContentRef.current?.scrollIntoView(), 200);
+    }, []);
+
+    const handleSave = useMemo(
+        () => createSubmitHandler(
+            validate,
+            setError,
+            handleValidationSuccess,
+            handleFormError,
+        ),
+        [handleFormError, handleValidationSuccess, validate, setError],
+    );
+
+    return (
+        <Tabs value={activeTab} onChange={setActiveTab} styleVariant="step">
+            <Page
+                heading={strings.fullEapHeading}
+                description={strings.fullEapDescription}
+                withBackgroundColorInMainSection
+                actions={(
+                    <>
+                        <Link
+                            to="accountMyFormsEap"
+                            styleVariant="outline"
+                            colorVariant="primary"
+                        >
+                            {strings.fullEapCancelButton}
+                        </Link>
+                        <Button name={undefined} onClick={handleSave}>
+                            {strings.fullEapSaveButton}
+                        </Button>
+                    </>
+                )}
+                info={(
+                    <TabList>
+                        <Tab
+                            name="overview"
+                            step={1}
+                            errored={checkTabErrors(formError, 'overview')}
+                        >
+                            {strings.fullEapOverview}
+                        </Tab>
+                        <Tab
+                            name="riskAnalysis"
+                            step={2}
+                            errored={checkTabErrors(formError, 'riskAnalysis')}
+                        >
+                            {strings.fullEapRiskAnalysis}
+                        </Tab>
+                        <Tab
+                            name="triggerModel"
+                            step={3}
+                            errored={checkTabErrors(formError, 'triggerModel')}
+                        >
+                            {strings.fullEapTriggerModel}
+                        </Tab>
+                        <Tab
+                            name="selectionActions"
+                            step={4}
+                            errored={checkTabErrors(formError, 'selectionActions')}
+                        >
+                            {strings.fullEapSelectionActions}
+                        </Tab>
+                        <Tab
+                            name="eapActivation"
+                            step={5}
+                            errored={checkTabErrors(formError, 'eapActivation')}
+                        >
+                            {strings.fullEapActivationProcess}
+                        </Tab>
+                        <Tab
+                            name="meal"
+                            step={6}
+                            errored={checkTabErrors(formError, 'meal')}
+                        >
+                            {strings.fullEapMeal}
+                        </Tab>
+                        <Tab
+                            name="nationalSocietyCapacity"
+                            step={7}
+                            errored={checkTabErrors(formError, 'nationalSocietyCapacity')}
+                        >
+                            {strings.fullEapNationalSocietyCapacity}
+                        </Tab>
+                        <Tab
+                            name="financeLogistics"
+                            step={8}
+                            errored={checkTabErrors(formError, 'financeLogistics')}
+                        >
+                            {strings.fullEapFinanceLogistics}
+                        </Tab>
+                    </TabList>
+                )}
+            >
+                <TabPanel name="overview">
+                    <Overview
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        eapRegistrationDetail={eapDetailResponse}
+                    />
+                </TabPanel>
+                <TabPanel name="riskAnalysis">
+                    <RiskAnalysis
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                    />
+                </TabPanel>
+                <TabPanel name="triggerModel">
+                    <TriggerModel
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        eapRegistrationDetail={eapDetailResponse}
+                    />
+                </TabPanel>
+                <TabPanel name="selectionActions">
+                    <SelectionActions
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                    />
+                </TabPanel>
+                <TabPanel name="eapActivation">
+                    <EapActivationProcess
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                    />
+                </TabPanel>
+                <TabPanel name="meal">
+                    <Meal
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                    />
+                </TabPanel>
+                <TabPanel name="nationalSocietyCapacity">
+                    <NationalSocietyCapacity
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                    />
+                </TabPanel>
+                <TabPanel name="financeLogistics">
+                    <FinanceLogistics
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                    />
+                </TabPanel>
+                <ListView
+                    withCenteredContents
+                >
+                    <Button
+                        name={prevStep ?? activeTab}
+                        onClick={handleTabChange}
+                        disabled={isNotDefined(prevStep)}
+                    >
+                        {strings.fullEapBackButton}
+                    </Button>
+                    {isDefined(nextStep) ? (
+                        <Button name={nextStep ?? activeTab} onClick={handleTabChange}>
+                            {strings.fullEapNextButton}
+                        </Button>
+                    ) : (
+                        <Button name={undefined} onClick={handleSave}>
+                            {strings.fullEapSaveButton}
+                        </Button>
+                    )}
+                </ListView>
+            </Page>
+        </Tabs>
+    );
+}
diff --git a/app/src/views/EapFullForm/schema.ts b/app/src/views/EapFullForm/schema.ts
new file mode 100644
index 0000000000..e6dcd7671d
--- /dev/null
+++ b/app/src/views/EapFullForm/schema.ts
@@ -0,0 +1,894 @@
+import { type DeepReplace } from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
+import {
+    emailCondition,
+    type LiteralSchema,
+    type ObjectSchema,
+    type PartialForm,
+    type PurgeNull,
+    requiredStringCondition,
+    undefinedValue,
+    urlCondition,
+} from '@togglecorp/toggle-form';
+
+import operationActivitySchema from '#components/domain/OperationActivityInput/schema';
+import { positiveNumberCondition } from '#utils/form';
+import { type GoApiBody } from '#utils/restRequest';
+
+function lessThanEqualToFiveImagesCondition<T>(value: T[] | undefined) {
+    return isDefined(value) && Array.isArray(value) && value.length > 5
+        ? 'Maximum five images are allowed'
+        : undefined;
+}
+
+type EapFullRequestBody = PurgeNull<GoApiBody<'/api/v2/full-eap/', 'POST'>>;
+
+type KeyActorsResponse = NonNullable<EapFullRequestBody['key_actors']>[number];
+type KeyActorsFields = KeyActorsResponse & { client_id: string };
+
+type CoverImageFileResponse = NonNullable<
+    EapFullRequestBody['cover_image_file']
+>;
+type CoverImageFileFields = CoverImageFileResponse & { client_id: string };
+
+type HazardSelectionImagesResponse = NonNullable<
+    EapFullRequestBody['hazard_selection_images']
+>[number];
+type HazardSelectionImagesFields = HazardSelectionImagesResponse & {
+    client_id: string;
+};
+
+type ExposedElementAndVulnerabilityImagesResponse = NonNullable<
+    EapFullRequestBody['exposed_element_and_vulnerability_factor_images']
+>[number];
+type ExposedElementAndVulnerabilityFields =
+    ExposedElementAndVulnerabilityImagesResponse & { client_id: string };
+
+type PrioritizedImpactImagesResponse = NonNullable<
+    EapFullRequestBody['prioritized_impact_images']
+>[number];
+type PrioritizedImpactImagesFields = PrioritizedImpactImagesResponse & {
+    client_id: string;
+};
+
+type RiskAnalysisSourceOfInformationResponse = NonNullable<
+    EapFullRequestBody['risk_analysis_source_of_information']
+>[number];
+type RiskAnalysisSourceOfInformationFields =
+    RiskAnalysisSourceOfInformationResponse & { client_id: string };
+
+type TriggerStatementSourceOfInformationResponse = NonNullable<
+    EapFullRequestBody['trigger_statement_source_of_information']
+>[number];
+type TriggerStatementSourceOfInformationFields =
+    TriggerStatementSourceOfInformationResponse & { client_id: string };
+
+type ForecastSelectionImagesResponse = NonNullable<
+    EapFullRequestBody['forecast_selection_images']
+>[number];
+type ForecastSelectionImagesResponseFields = ForecastSelectionImagesResponse & {
+    client_id: string;
+};
+
+type DefinitionAndJustificationImagesResponse = NonNullable<
+    EapFullRequestBody['definition_and_justification_impact_level_images']
+>[number];
+type DefinitionAndJustificationImagesResponseFields =
+    DefinitionAndJustificationImagesResponse & { client_id: string };
+
+type IdentificationInterventionImagesResponse = NonNullable<
+    EapFullRequestBody['identification_of_the_intervention_area_images']
+>[number];
+type IdentificationInterventionImagesResponseFields =
+    IdentificationInterventionImagesResponse & { client_id: string };
+
+type TriggerModelSourceOfInformationResponse = NonNullable<
+    EapFullRequestBody['trigger_model_source_of_information']
+>[number];
+type TriggerModelSourceOfInformationResponseFields =
+    TriggerModelSourceOfInformationResponse & { client_id: string };
+
+type EarlyActionImplementationImagesResponse = NonNullable<
+    EapFullRequestBody['early_action_implementation_images']
+>[number];
+type EarlyActionImplementationImagesResponseFields =
+    EarlyActionImplementationImagesResponse & { client_id: string };
+
+type TriggerActivationSystemImagesResponse = NonNullable<
+    EapFullRequestBody['trigger_activation_system_images']
+>[number];
+type TriggerActivationSystemImagesResponseFields =
+    TriggerActivationSystemImagesResponse & { client_id: string };
+
+type ActivationProcessSourceInformationResponse = NonNullable<
+    EapFullRequestBody['activation_process_source_of_information']
+>[number];
+type ActivationProcessSourceInformationResponseFields =
+    ActivationProcessSourceInformationResponse & { client_id: string };
+
+type EarlyActionsSelectionImagesResponse = NonNullable<
+    EapFullRequestBody['early_action_selection_process_images']
+>[number];
+type EarlyActionsSelectionImagesResponseFields =
+    EarlyActionsSelectionImagesResponse & { client_id: string };
+
+type EvidenceBaseSourceInformationResponse = NonNullable<
+    EapFullRequestBody['evidence_base_source_of_information']
+>[number];
+type EvidenceBaseSourceInformationResponseFields =
+    EvidenceBaseSourceInformationResponse & { client_id: string };
+
+type PlannedOperationsResponse = NonNullable<
+    EapFullRequestBody['planned_operations']
+>[number];
+
+type EarlyActionResponse = NonNullable<
+    PlannedOperationsResponse['early_action_activities']
+>[number];
+type EarlyActionFormFields = EarlyActionResponse & { client_id: string };
+
+type PrepositioningResponse = NonNullable<
+    PlannedOperationsResponse['prepositioning_activities']
+>[number];
+type PrepositioningFormFields = PrepositioningResponse & { client_id: string };
+
+type ReadinessResponse = NonNullable<
+    PlannedOperationsResponse['readiness_activities']
+>[number];
+type ReadinessFormFields = ReadinessResponse & { client_id: string };
+
+type IndicatorResponse = NonNullable<
+    PlannedOperationsResponse['indicators']
+>[number];
+type IndicatorFormFields = IndicatorResponse & { client_id: string };
+
+type EarlyActionSelectionResponse = NonNullable<
+    EapFullRequestBody['early_actions']
+>[number];
+type EarlyActionSelectionFormFields = EarlyActionSelectionResponse & {
+    client_id: string;
+};
+
+type PrioritizedImpactResponse = NonNullable<
+    EapFullRequestBody['prioritized_impacts']
+>[number];
+type PrioritizedImpactFormFields = PrioritizedImpactResponse & {
+    client_id: string;
+};
+
+type PlannedOperationsResponseFields = DeepReplace<
+    DeepReplace<
+        DeepReplace<
+            DeepReplace<
+                PlannedOperationsResponse,
+                EarlyActionResponse,
+                EarlyActionFormFields
+            >,
+            PrepositioningResponse,
+            PrepositioningFormFields
+        >,
+        ReadinessResponse,
+        ReadinessFormFields
+    >,
+    IndicatorResponse,
+    IndicatorFormFields
+>;
+
+type EnableApproachesResponse = NonNullable<
+    EapFullRequestBody['enable_approaches']
+>[number];
+
+type EarlyActionApproachesResponse = NonNullable<
+    EnableApproachesResponse['early_action_activities']
+>[number];
+type EarlyActionApproachesFormFields = EarlyActionApproachesResponse & {
+    client_id: string;
+};
+
+type PrepositioningApproachesResponse = NonNullable<
+    EnableApproachesResponse['prepositioning_activities']
+>[number];
+type PrepositioningApproachesFormFields = PrepositioningApproachesResponse & {
+    client_id: string;
+};
+
+type ReadinessApproachesResponse = NonNullable<
+    EnableApproachesResponse['readiness_activities']
+>[number];
+type ReadinessApproachesFormFields = ReadinessApproachesResponse & {
+    client_id: string;
+};
+
+type IndicatorApproachesResponse = NonNullable<
+    EnableApproachesResponse['indicators']
+>[number];
+type IndicatorApproachesFormFields = IndicatorApproachesResponse & {
+    client_id: string;
+};
+
+type EnableApproachesResponseFields = DeepReplace<
+    DeepReplace<
+        DeepReplace<
+            DeepReplace<
+                EnableApproachesResponse,
+                EarlyActionApproachesResponse,
+                EarlyActionApproachesFormFields
+            >,
+            PrepositioningApproachesResponse,
+            PrepositioningApproachesFormFields
+        >,
+        ReadinessApproachesResponse,
+        ReadinessApproachesFormFields
+    >,
+    IndicatorApproachesResponse,
+    IndicatorApproachesFormFields
+>;
+
+type FormFields = DeepReplace<
+    DeepReplace<
+        DeepReplace<
+            DeepReplace<
+                DeepReplace<
+                    DeepReplace<
+                        DeepReplace<
+                            DeepReplace<
+                                DeepReplace<
+                                    DeepReplace<
+                                        DeepReplace<
+                                            DeepReplace<
+                                                DeepReplace<
+                                                    DeepReplace<
+                                                        DeepReplace<
+                                                            DeepReplace<
+                                                                DeepReplace<
+                                                                    DeepReplace<
+                                                                        DeepReplace<
+                                                                            DeepReplace<
+                                                                                EapFullRequestBody,
+                                                                                KeyActorsResponse,
+                                                                                KeyActorsFields
+                                                                            >,
+                                                                            CoverImageFileResponse,
+                                                                            CoverImageFileFields
+                                                                        >,
+                                                                // eslint-disable-next-line max-len
+                                                                        HazardSelectionImagesResponse,
+                                                                        HazardSelectionImagesFields
+                                                                    >,
+                                                                // eslint-disable-next-line max-len
+                                                                    ExposedElementAndVulnerabilityImagesResponse,
+                                                                // eslint-disable-next-line max-len
+                                                                    ExposedElementAndVulnerabilityFields
+                                                                >,
+                                                                PrioritizedImpactImagesResponse,
+                                                                PrioritizedImpactImagesFields
+                                                            >,
+                                                            RiskAnalysisSourceOfInformationResponse,
+                                                            RiskAnalysisSourceOfInformationFields
+                                                        >,
+                                                        TriggerStatementSourceOfInformationResponse,
+                                                        TriggerStatementSourceOfInformationFields
+                                                    >,
+                                                    ForecastSelectionImagesResponse,
+                                                    ForecastSelectionImagesResponseFields
+                                                >,
+                                                DefinitionAndJustificationImagesResponse,
+                                                DefinitionAndJustificationImagesResponseFields
+                                            >,
+                                            IdentificationInterventionImagesResponse,
+                                            IdentificationInterventionImagesResponseFields
+                                        >,
+                                        TriggerModelSourceOfInformationResponse,
+                                        TriggerModelSourceOfInformationResponseFields
+                                    >,
+                                    EarlyActionImplementationImagesResponse,
+                                    EarlyActionImplementationImagesResponseFields
+                                >,
+                                TriggerActivationSystemImagesResponse,
+                                TriggerActivationSystemImagesResponseFields
+                            >,
+                            ActivationProcessSourceInformationResponse,
+                            ActivationProcessSourceInformationResponseFields
+                        >,
+                        EarlyActionsSelectionImagesResponse,
+                        EarlyActionsSelectionImagesResponseFields
+                    >,
+                    EvidenceBaseSourceInformationResponse,
+                    EvidenceBaseSourceInformationResponseFields
+                >,
+                PlannedOperationsResponse,
+                PlannedOperationsResponseFields
+            >,
+            EnableApproachesResponse,
+            EnableApproachesResponseFields
+        >,
+        EarlyActionSelectionResponse,
+        EarlyActionSelectionFormFields
+    >,
+    PrioritizedImpactResponse,
+    PrioritizedImpactFormFields
+>;
+
+export type PartialEapFullFormType = PartialForm<
+    FormFields,
+    'client_id' | 'sector' | 'approach'
+>;
+
+type CoverImageFileFormFields = ReturnType<
+    ObjectSchema<
+        PartialEapFullFormType['cover_image_file'],
+        PartialEapFullFormType
+    >['fields']
+>;
+type KeyActorsFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<PartialEapFullFormType['key_actors']>[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type HazardSelectionImagesFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<PartialEapFullFormType['hazard_selection_images']>[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type ExposedElementAndVulnerabilityImagesFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            PartialEapFullFormType['exposed_element_and_vulnerability_factor_images']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type PrioritizedImpactImagesFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<PartialEapFullFormType['prioritized_impact_images']>[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type RiskAnalysisSourceOfInformationFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            PartialEapFullFormType['risk_analysis_source_of_information']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type TriggerStatementSourceOfInformationFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            PartialEapFullFormType['trigger_statement_source_of_information']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type ForecastSelectionImagesResponseFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<PartialEapFullFormType['forecast_selection_images']>[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type DefinitionAndJustificationImagesResponseFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            PartialEapFullFormType['definition_and_justification_impact_level_images']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type IdentificationInterventionImagesResponseFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            PartialEapFullFormType['identification_of_the_intervention_area_images']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type TriggerModelSourceOfInformationResponseFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            PartialEapFullFormType['trigger_model_source_of_information']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type EarlyActionImagesResponseFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            PartialEapFullFormType['early_action_implementation_images']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type EarlyActionsSelectionResponseFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<PartialEapFullFormType['early_actions']>[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type TriggerActivationImagesResponseFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            PartialEapFullFormType['early_action_implementation_images']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type ActivationProcessSourceOfInformationResponseFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            PartialEapFullFormType['activation_process_source_of_information']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type PlannedOperationalFields = ReturnType<
+    ObjectSchema<
+        NonNullable<PartialEapFullFormType['planned_operations']>[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type EnableApproachesFields = ReturnType<
+    ObjectSchema<
+        NonNullable<PartialEapFullFormType['enable_approaches']>[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type EvidenceBaseSourceOfInformationResponseFormFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            PartialEapFullFormType['evidence_base_source_of_information']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type IndicatorFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            NonNullable<
+                PartialEapFullFormType['planned_operations']
+            >[number]['indicators']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+type ApproachIndicatorFields = ReturnType<
+    ObjectSchema<
+        NonNullable<
+            NonNullable<
+                PartialEapFullFormType['enable_approaches']
+            >[number]['indicators']
+        >[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+
+type PrioritizedImpactsFields = ReturnType<
+    ObjectSchema<
+        NonNullable<PartialEapFullFormType['prioritized_impacts']>[number],
+        PartialEapFullFormType
+    >['fields']
+>;
+
+type EapFullFormSchema = ObjectSchema<PartialEapFullFormType>;
+type EapFullFormSchemaFields = ReturnType<EapFullFormSchema['fields']>;
+
+type FieldKeys = keyof EapFullRequestBody;
+
+type ContactFieldSuffix = 'name' | 'title' | 'email' | 'phone_number';
+type ExtractContactPrefix<KEY extends FieldKeys> = KEY extends `${infer PREFIX}_name`
+    ? `${PREFIX}_title` extends FieldKeys
+        ? `${PREFIX}_email` extends FieldKeys
+            ? `${PREFIX}_phone_number` extends FieldKeys
+                ? PREFIX
+                : never
+            : never
+        : never
+    : never
+
+export type ValidContactFieldPrefixes = ExtractContactPrefix<FieldKeys>;
+
+function getContactSchema<KEY extends ValidContactFieldPrefixes>(key: KEY) {
+    type ContactSchema = {
+        [K in `${KEY}_${ContactFieldSuffix}`]: LiteralSchema<
+            string | undefined,
+            PartialEapFullFormType
+        >;
+    };
+
+    return {
+        [`${key}_name`]: {},
+        [`${key}_title`]: {},
+        [`${key}_email`]: { validations: [emailCondition] },
+        [`${key}_phone_number`]: {},
+    } as ContactSchema;
+}
+
+export const formSchema: EapFullFormSchema = {
+    fields: (): EapFullFormSchemaFields => ({
+        // ------------Overview-----------------
+        expected_submission_time: { required: true },
+        objective: { required: true },
+        cover_image_file: {
+            fields: (): CoverImageFileFormFields => ({
+                client_id: {},
+                caption: {},
+                id: { defaultValue: undefinedValue },
+            }),
+        },
+
+        ...getContactSchema('national_society_contact'),
+        ...getContactSchema('partner_ns'),
+        ...getContactSchema('ifrc_delegation_focal_point'),
+        ...getContactSchema('ifrc_head_of_delegation'),
+        ...getContactSchema('dref_focal_point'),
+        ...getContactSchema('ifrc_regional_focal_point'),
+        ...getContactSchema('ifrc_regional_ops_manager'),
+        ...getContactSchema('ifrc_regional_head_dcc'),
+        ...getContactSchema('ifrc_global_ops_coordinator'),
+
+        // Stakeholders
+        is_worked_with_government: { required: true },
+        worked_with_government_description: {},
+
+        key_actors: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): KeyActorsFormFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    description: { required: true },
+                    national_society: { required: true },
+                }),
+            }),
+        },
+
+        is_technical_working_groups: { required: true },
+        technically_working_group_title: {},
+        technical_working_groups_in_place_description: {},
+
+        // ------------Risk Analysis-----------------
+        hazard_selection: { required: true },
+        hazard_selection_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): HazardSelectionImagesFormFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: {},
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+
+        exposed_element_and_vulnerability_factor: { required: true },
+        exposed_element_and_vulnerability_factor_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): ExposedElementAndVulnerabilityImagesFormFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+
+        prioritized_impact: { required: true },
+        prioritized_impact_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): PrioritizedImpactImagesFormFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+        prioritized_impacts: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): PrioritizedImpactsFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    impact: { required: true },
+                }),
+            }),
+        },
+
+        risk_analysis_relevant_files: { defaultValue: [] },
+        risk_analysis_source_of_information: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): RiskAnalysisSourceOfInformationFormFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    source_name: {
+                        required: true,
+                        requiredValidation: requiredStringCondition,
+                    },
+                    source_link: {
+                        required: true,
+                        validations: [urlCondition],
+                    },
+                }),
+            }),
+        },
+
+        // -------------Trigger Model--------------------
+        trigger_statement: { required: true },
+        trigger_statement_source_of_information: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): TriggerStatementSourceOfInformationFormFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    source_name: {
+                        required: true,
+                        requiredValidation: requiredStringCondition,
+                    },
+                    source_link: {
+                        required: true,
+                        validations: [urlCondition],
+                    },
+                }),
+            }),
+        },
+        lead_time: { required: true },
+
+        forecast_selection: { required: true },
+        forecast_selection_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): ForecastSelectionImagesResponseFormFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+        forecast_table_file: { required: true },
+
+        definition_and_justification_impact_level: { required: true },
+        definition_and_justification_impact_level_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): DefinitionAndJustificationImagesResponseFormFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+
+        identification_of_the_intervention_area: { required: true },
+        identification_of_the_intervention_area_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): IdentificationInterventionImagesResponseFormFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+        admin2: {
+            defaultValue: [],
+        },
+
+        trigger_model_relevant_files: { defaultValue: [] },
+        trigger_model_source_of_information: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): TriggerModelSourceOfInformationResponseFormFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    source_name: {
+                        required: true,
+                        requiredValidation: requiredStringCondition,
+                    },
+                    source_link: {
+                        required: true,
+                        validations: [urlCondition],
+                    },
+                }),
+            }),
+        },
+
+        // ---------Selection Of Actions
+        early_actions: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): EarlyActionsSelectionResponseFormFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    action: { required: true },
+                }),
+            }),
+        },
+        early_action_selection_process: { required: true },
+        early_action_selection_process_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): IdentificationInterventionImagesResponseFormFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+        theory_of_change_table_file: { required: true },
+
+        evidence_base: { required: true },
+        evidence_base_source_of_information: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): EvidenceBaseSourceOfInformationResponseFormFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    source_name: {
+                        required: true,
+                        requiredValidation: requiredStringCondition,
+                    },
+                    source_link: {
+                        required: true,
+                        validations: [urlCondition],
+                    },
+                }),
+            }),
+        },
+
+        // Planned Operations
+        planned_operations: {
+            keySelector: (item) => item.sector,
+            member: () => ({
+                fields: (): PlannedOperationalFields => ({
+                    id: { defaultValue: undefinedValue },
+                    sector: {},
+                    budget_per_sector: {},
+                    ap_code: {},
+                    indicators: {
+                        keySelector: (indicator) => indicator.client_id,
+                        member: () => ({
+                            fields: (): IndicatorFields => ({
+                                client_id: {},
+                                id: { defaultValue: undefinedValue },
+                                title: {},
+                                target: { validations: [positiveNumberCondition] },
+                            }),
+                        }),
+                    },
+                    people_targeted: {},
+                    early_action_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                    readiness_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                    prepositioning_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                }),
+            }),
+        },
+
+        // Enabling Approaches
+        enable_approaches: {
+            keySelector: (item) => item.approach,
+            member: () => ({
+                fields: (): EnableApproachesFields => ({
+                    id: { defaultValue: undefinedValue },
+                    approach: {},
+                    budget_per_approach: {},
+                    ap_code: {},
+                    indicators: {
+                        keySelector: (indicator) => indicator.client_id,
+                        member: () => ({
+                            fields: (): ApproachIndicatorFields => ({
+                                client_id: {},
+                                id: { defaultValue: undefinedValue },
+                                title: {},
+                                target: { validations: [positiveNumberCondition] },
+                            }),
+                        }),
+                    },
+                    early_action_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                    readiness_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                    prepositioning_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                }),
+            }),
+        },
+
+        usefulness_of_actions: { required: true },
+        feasibility: { required: true },
+
+        // ----------EAP Activation Process---------
+        early_action_implementation_process: { required: true },
+        early_action_implementation_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): EarlyActionImagesResponseFormFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+
+        trigger_activation_system: { required: true },
+        trigger_activation_system_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): TriggerActivationImagesResponseFormFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+
+        people_targeted: { required: true },
+        selection_of_target_population: { required: true },
+        stop_mechanism: { required: true },
+
+        activation_process_relevant_files: { defaultValue: [] },
+        activation_process_source_of_information: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): ActivationProcessSourceOfInformationResponseFormFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    source_name: {
+                        required: true,
+                        requiredValidation: requiredStringCondition,
+                    },
+                    source_link: {
+                        required: true,
+                        validations: [urlCondition],
+                    },
+                }),
+            }),
+        },
+
+        // --------------Meal-------------
+        meal: { required: true },
+        meal_relevant_files: { defaultValue: [] },
+
+        // -----------National Society Capacity-----------
+        operational_administrative_capacity: { required: true },
+        strategies_and_plans: { required: true },
+        advance_financial_capacity: { required: true },
+        capacity_relevant_files: { defaultValue: [] },
+
+        // ------------Finance and Logistics----------------
+        total_budget: { required: true },
+        budget_description: {},
+        budget_file: { required: true },
+        readiness_budget: { required: true },
+        readiness_cost_description: {},
+        pre_positioning_budget: { required: true },
+        prepositioning_cost_description: {},
+        early_action_budget: { required: true },
+        early_action_cost_description: {},
+        eap_endorsement: { required: true },
+    }),
+};
diff --git a/app/src/views/EapRegistration/i18n.json b/app/src/views/EapRegistration/i18n.json
new file mode 100644
index 0000000000..9a8304afc0
--- /dev/null
+++ b/app/src/views/EapRegistration/i18n.json
@@ -0,0 +1,51 @@
+{
+    "namespace": "eapRegistration",
+    "strings": {
+        "eapRegistrationHeading": "EAP Development Registration",
+        "eapRegistrationDescription": "Use the following page to submit your National Society's interest in following the Early Action Protocol (EAP) application process. Once you submit this form, the EAP team members will contact you to start the procedure. You can find more information on the process and different ways to apply {link}",
+        "eapRegistrationLink": "on this page.",
+        "eapApplicationDetails": "Application Details",
+        "eapNationalSociety": "National Society (NS)",
+        "eapNationalSocietyDescription": "Select National Society that is planning to apply for the EAP",
+        "eapCountry": "Country",
+        "eapCountryDescription": "The country will be pre-populated based on the NS selection, but can be adapted as needed.",
+        "eapDisasterType": "Disaster Type",
+        "eapDisasterTypeDescription": "Select the disaster type for which the EAP is needed.",
+        "eapType": "EAP Type",
+        "eapTypeDescription": "Select the EAP type. Find details of both under this link.",
+        "eapSubmission": "Expected Time of Submission",
+        "eapSubmissionDescription": "Include the proposed time of submission, accounting for the time it will take to deliver the application.",
+        "eapPartnersInvolved": "Partners Involved",
+        "eapPartnersInvolvedDescription": "Select from the list the partners involved in this process. Add as many as needed or select not applicable if no partners involved.",
+        "eapContacts": "Contacts",
+        "eapNSContact": "National Society Contact",
+        "eapNSContactDescription": "National Society contact responsible for the EAP process",
+        "eapNSName": "Name",
+        "eapNSTitle": "Title",
+        "eapNSEmail": "Email",
+        "eapNSPhoneNumber": "Phone Number",
+        "eapIFRCContact": "IFRC Contact",
+        "eapIFRCContactDescription": "The most senior staff in the National Society responsible and knowledgable about the disaster event.",
+        "eapIFRCName": "Name",
+        "eapIFRCTitle": "Title",
+        "eapIFRCEmail": "Email",
+        "eapIFRCPhoneNumber": "Phone Number",
+        "eapFocalPoint": "DREF Focal Point",
+        "eapFocalPointDescription": "The DREF contact person form IFRC",
+        "eapFocalPointName": "Name",
+        "eapFocalPointTitle": "Title",
+        "eapFocalPointEmail": "Email",
+        "eapFocalPointPhoneNumber": "Phone Number",
+        "eapSubmitButton": "Submit",
+        "eapBackButton": "Back",
+        "eapCancelButton": "Cancel",
+        "eapRegistrationFailure": "Sorry could not register new EAP right now!",
+        "eapRegistrationSuccess": "Successfully created a new EAP!",
+        "eapNotSure": "Not Sure",
+        "eapDevelopmentRegistrationHeading": "EAP Development Registration",
+        "eapDevelopmentRegistrationDescription": "Thank you for notifying us about the start of your EAP process. We look forward to your completed application.",
+        "eapFailedToLoad": "Failed to Load",
+        "eapRegistrationUpdateMessage": "EAP Registration updated Successfully.",
+        "eapRegistrationFailureMessage": "Failed to update EAP Registration"
+    }
+}
diff --git a/app/src/views/EapRegistration/index.tsx b/app/src/views/EapRegistration/index.tsx
new file mode 100644
index 0000000000..698e6a4c90
--- /dev/null
+++ b/app/src/views/EapRegistration/index.tsx
@@ -0,0 +1,555 @@
+import {
+    type ElementRef,
+    useCallback,
+    useRef,
+} from 'react';
+import {
+    useLocation,
+    useParams,
+} from 'react-router-dom';
+import {
+    ConfirmButton,
+    Container,
+    DateInput,
+    InputSection,
+    ListView,
+    Radio,
+    RadioInput,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    resolveToComponent,
+    stringValueSelector,
+} from '@ifrc-go/ui/utils';
+import {
+    isDefined,
+    isNotDefined,
+    isTruthyString,
+} from '@togglecorp/fujs';
+import {
+    createSubmitHandler,
+    getErrorObject,
+    getErrorString,
+    useForm,
+} from '@togglecorp/toggle-form';
+
+import CountrySelectInput from '#components/domain/CountrySelectInput';
+import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput';
+import FormFailedToLoadMessage from '#components/domain/FormFailedToLoadMessage';
+import NationalSocietyMultiSelectInput from '#components/domain/NationalSocietyMultiSelectInput';
+import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput';
+import Link from '#components/Link';
+import Page from '#components/Page';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import useAlert from '#hooks/useAlert';
+import useRouting from '#hooks/useRouting';
+import {
+    type GoApiBody,
+    type GoApiResponse,
+    useLazyRequest,
+    useRequest,
+} from '#utils/restRequest';
+import { transformObjectError } from '#utils/restRequest/error';
+
+import {
+    defaultFormValue,
+    formSchema,
+} from './schema';
+
+import i18n from './i18n.json';
+
+type EapRegisterRequestBody = GoApiBody<'/api/v2/eap-registration/', 'POST'>;
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+type EapTypeOption = NonNullable<GlobalEnumsResponse['eap_eap_type']>[number];
+
+function eapTypeKeySelector(option: EapTypeOption) {
+    return option.key;
+}
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+    const alert = useAlert();
+    const { navigate } = useRouting();
+    const { eapId: eapIdFromParams } = useParams<{ eapId: string }>();
+
+    const { state } = useLocation();
+    const eapId = eapIdFromParams ?? state?.eapId as string | undefined;
+    const isReadOnly = state?.mode === 'view';
+
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        setError,
+        setValue,
+        validate,
+    } = useForm(formSchema, { value: defaultFormValue });
+
+    const {
+        eap_eap_type: eapFormOptions,
+    } = useGlobalEnums();
+
+    const error = getErrorObject(formError);
+    const formContentRef = useRef<ElementRef<'div'>>(null);
+
+    const {
+        pending: fetchingEap,
+        error: eapError,
+    } = useRequest({
+        skip: isNotDefined(eapId),
+        url: '/api/v2/eap-registration/{id}/',
+        pathVariables: isTruthyString(eapId) ? {
+            id: Number(eapId),
+        } : undefined,
+        onSuccess: (response) => {
+            const {
+                ...formValues
+            } = response;
+            setValue(formValues);
+        },
+    });
+
+    const {
+        pending: eapRegistrationPending,
+        trigger: eapRegister,
+    } = useLazyRequest({
+        method: 'POST',
+        url: '/api/v2/eap-registration/',
+        body: (body: EapRegisterRequestBody) => body,
+        onSuccess: () => {
+            const message = strings.eapRegistrationSuccess;
+            alert.show(
+                message,
+                { variant: 'success' },
+            );
+            navigate('accountMyFormsEap');
+        },
+        onFailure: (err) => {
+            const {
+                value: {
+                    formErrors,
+                },
+            } = err;
+
+            setError(transformObjectError(formErrors, () => undefined));
+
+            alert.show(
+                strings.eapRegistrationFailure,
+                { variant: 'danger' },
+            );
+        },
+    });
+
+    const {
+        pending: updateEapRegistrationPending,
+        trigger: updateEapRegistration,
+    } = useLazyRequest({
+        url: '/api/v2/eap-registration/{id}/',
+        method: 'PATCH',
+        pathVariables: {
+            id: Number(eapId),
+        },
+        body: (formFields: EapRegisterRequestBody) => formFields,
+        onSuccess: (response) => {
+            alert.show(
+                strings.eapRegistrationUpdateMessage,
+                { variant: 'success' },
+            );
+            navigate(
+                'accountMyFormsEap',
+                { params: { eapId: response.id } },
+            );
+        },
+        onFailure: (err) => {
+            const {
+                value: {
+                    formErrors,
+                    messageForNotification,
+                },
+            } = err;
+
+            setError(transformObjectError(
+                formErrors,
+                () => undefined,
+            ));
+
+            alert.show(
+                strings.eapRegistrationFailureMessage,
+                {
+                    variant: 'danger',
+                    description: messageForNotification,
+                },
+            );
+        },
+    });
+
+    const handleCountryChange = useCallback(
+        (val: number | undefined, name: 'country') => {
+            setFieldValue(val, name);
+        },
+        [setFieldValue],
+    );
+
+    const handleEapTypeClick = useCallback(() => {
+        if (isReadOnly) {
+            return;
+        }
+        setFieldValue(null, 'eap_type');
+    }, [isReadOnly, setFieldValue]);
+
+    const handleSubmissionTimeClick = useCallback(() => {
+        if (isReadOnly) {
+            return;
+        }
+        setFieldValue(null, 'expected_submission_time');
+    }, [isReadOnly, setFieldValue]);
+
+    const eapRegistration = useCallback(() => {
+        const handler = createSubmitHandler(
+            validate,
+            setError,
+            (formValues) => {
+                if (isNotDefined(eapId)) {
+                    eapRegister(formValues as EapRegisterRequestBody);
+                } else {
+                    updateEapRegistration({
+                        ...formValues,
+                        id: eapId,
+                    } as EapRegisterRequestBody);
+                }
+            },
+        );
+        handler();
+    }, [
+        setError,
+        validate,
+        eapRegister,
+        updateEapRegistration,
+        eapId,
+    ]);
+
+    const handleFormError = useCallback(() => {
+        setTimeout(() => formContentRef.current?.scrollIntoView(), 200);
+    }, []);
+
+    const handleEapRegistration = useCallback(() => {
+        const handler = createSubmitHandler(
+            validate,
+            setError,
+            eapRegistration,
+            handleFormError,
+        );
+        handler();
+    }, [
+        handleFormError,
+        eapRegistration,
+        validate,
+        setError,
+    ]);
+
+    const disabled = eapRegistrationPending || fetchingEap || updateEapRegistrationPending;
+
+    const handleNationalSocietyInputChange = useCallback((newValue: number | undefined) => {
+        setFieldValue(newValue, 'national_society');
+        setFieldValue(newValue, 'country');
+    }, [setFieldValue]);
+
+    if (isDefined(eapError)) {
+        return (
+            <FormFailedToLoadMessage
+                description={strings.eapFailedToLoad}
+            />
+        );
+    }
+
+    return (
+        <Page
+            heading={strings.eapRegistrationHeading}
+            description={resolveToComponent(
+                strings.eapRegistrationDescription,
+                {
+                    link: (
+                        <Link
+                            to="eapDetail"
+                        >
+                            {strings.eapRegistrationLink}
+                        </Link>
+                    ),
+                },
+            )}
+            actions={(
+                <Link
+                    to="accountMyFormsEap"
+                    styleVariant="outline"
+                    colorVariant="primary"
+                >
+                    {eapId ? strings.eapBackButton : strings.eapCancelButton}
+                </Link>
+            )}
+            elementRef={formContentRef}
+            withBackgroundColorInMainSection
+        >
+            <Container heading={strings.eapApplicationDetails}>
+                <ListView layout="block">
+                    <InputSection
+                        title={strings.eapNationalSociety}
+                        description={strings.eapNationalSocietyDescription}
+                        withAsteriskOnTitle
+                        numPreferredColumns={2}
+                    >
+                        <NationalSocietySelectInput
+                            error={error?.national_society}
+                            name="national_society"
+                            onChange={handleNationalSocietyInputChange}
+                            value={value?.national_society}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapCountry}
+                        description={strings.eapCountryDescription}
+                        withAsteriskOnTitle
+                        numPreferredColumns={2}
+                    >
+                        <CountrySelectInput
+                            error={error?.country}
+                            name="country"
+                            onChange={handleCountryChange}
+                            value={value?.country}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapDisasterType}
+                        description={strings.eapDisasterTypeDescription}
+                        withAsteriskOnTitle
+                        numPreferredColumns={2}
+                    >
+                        <DisasterTypeSelectInput
+                            name="disaster_type"
+                            value={value?.disaster_type}
+                            onChange={setFieldValue}
+                            error={error?.disaster_type}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapType}
+                        // TODO: Add link here
+                        description={strings.eapTypeDescription}
+                        withAsteriskOnTitle
+                    >
+                        <ListView>
+                            <RadioInput
+                                name="eap_type"
+                                value={value?.eap_type ?? undefined}
+                                onChange={setFieldValue}
+                                options={eapFormOptions}
+                                keySelector={eapTypeKeySelector}
+                                labelSelector={stringValueSelector}
+                                error={error?.eap_type}
+                                readOnly={isReadOnly}
+                            />
+                            <Radio
+                                name="eap_type"
+                                value={isNotDefined(value?.eap_type)}
+                                onClick={handleEapTypeClick}
+                                readOnly={isReadOnly}
+                            >
+                                {strings.eapNotSure}
+                            </Radio>
+                        </ListView>
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapSubmission}
+                        description={strings.eapSubmissionDescription}
+                        withAsteriskOnTitle
+                        numPreferredColumns={2}
+                    >
+                        <DateInput
+                            name="expected_submission_time"
+                            onChange={setFieldValue}
+                            value={value?.expected_submission_time}
+                            error={error?.expected_submission_time}
+                            readOnly={isReadOnly}
+                        />
+                        <Radio
+                            name="expected_submission_time"
+                            value={isNotDefined(value?.expected_submission_time)}
+                            onClick={handleSubmissionTimeClick}
+                            readOnly={isReadOnly}
+                        >
+                            {strings.eapNotSure}
+                        </Radio>
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapPartnersInvolved}
+                        description={strings.eapPartnersInvolvedDescription}
+                        withAsteriskOnTitle
+                    >
+                        <NationalSocietyMultiSelectInput
+                            name="partners"
+                            value={value.partners}
+                            error={getErrorString(error?.partners)}
+                            onChange={setFieldValue}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                    </InputSection>
+                </ListView>
+            </Container>
+            <Container
+                heading={strings.eapContacts}
+                spacing="md"
+            >
+                <ListView
+                    layout="block"
+                >
+                    <InputSection
+                        title={strings.eapNSContact}
+                        description={strings.eapNSContactDescription}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.eapNSName}
+                            name="national_society_contact_name"
+                            value={value?.national_society_contact_name}
+                            onChange={setFieldValue}
+                            error={error?.national_society_contact_name}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                        <TextInput
+                            label={strings.eapNSTitle}
+                            name="national_society_contact_title"
+                            value={value?.national_society_contact_title}
+                            onChange={setFieldValue}
+                            error={error?.national_society_contact_title}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                        <TextInput
+                            label={strings.eapNSEmail}
+                            name="national_society_contact_email"
+                            value={value?.national_society_contact_email}
+                            onChange={setFieldValue}
+                            error={error?.national_society_contact_email}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                        <TextInput
+                            label={strings.eapNSPhoneNumber}
+                            name="national_society_contact_phone_number"
+                            value={value?.national_society_contact_phone_number}
+                            onChange={setFieldValue}
+                            error={error?.national_society_contact_phone_number}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapIFRCContact}
+                        description={strings.eapIFRCContactDescription}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.eapIFRCName}
+                            name="ifrc_contact_name"
+                            value={value?.ifrc_contact_name}
+                            onChange={setFieldValue}
+                            error={error?.ifrc_contact_name}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                        <TextInput
+                            label={strings.eapIFRCTitle}
+                            name="ifrc_contact_title"
+                            value={value?.ifrc_contact_title}
+                            onChange={setFieldValue}
+                            error={error?.ifrc_contact_title}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                        <TextInput
+                            label={strings.eapIFRCEmail}
+                            name="ifrc_contact_email"
+                            value={value?.ifrc_contact_email}
+                            onChange={setFieldValue}
+                            error={error?.ifrc_contact_email}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                        <TextInput
+                            label={strings.eapIFRCPhoneNumber}
+                            name="ifrc_contact_phone_number"
+                            value={value?.ifrc_contact_phone_number}
+                            onChange={setFieldValue}
+                            error={error?.ifrc_contact_phone_number}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapFocalPoint}
+                        description={strings.eapFocalPointDescription}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.eapFocalPointName}
+                            name="dref_focal_point_name"
+                            value={value?.dref_focal_point_name}
+                            onChange={setFieldValue}
+                            error={error?.dref_focal_point_name}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                        <TextInput
+                            label={strings.eapFocalPointTitle}
+                            name="dref_focal_point_title"
+                            value={value?.dref_focal_point_title}
+                            onChange={setFieldValue}
+                            error={error?.dref_focal_point_title}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                        <TextInput
+                            label={strings.eapFocalPointEmail}
+                            name="dref_focal_point_email"
+                            value={value?.dref_focal_point_email}
+                            onChange={setFieldValue}
+                            error={error?.dref_focal_point_email}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                        <TextInput
+                            label={strings.eapFocalPointPhoneNumber}
+                            name="dref_focal_point_phone_number"
+                            value={value?.dref_focal_point_phone_number}
+                            onChange={setFieldValue}
+                            error={error?.dref_focal_point_phone_number}
+                            disabled={disabled}
+                            readOnly={isReadOnly}
+                        />
+                    </InputSection>
+                </ListView>
+            </Container>
+            <ListView withCenteredContents>
+                <ConfirmButton
+                    name={undefined}
+                    confirmHeading={strings.eapDevelopmentRegistrationHeading}
+                    confirmMessage={strings.eapDevelopmentRegistrationDescription}
+                    onConfirm={handleEapRegistration}
+                    disabled={disabled || isReadOnly}
+                >
+                    {strings.eapSubmitButton}
+                </ConfirmButton>
+            </ListView>
+        </Page>
+    );
+}
diff --git a/app/src/views/EapRegistration/schema.ts b/app/src/views/EapRegistration/schema.ts
new file mode 100644
index 0000000000..17dca9c0b7
--- /dev/null
+++ b/app/src/views/EapRegistration/schema.ts
@@ -0,0 +1,56 @@
+import {
+    emailCondition,
+    type ObjectSchema,
+    type PartialForm,
+} from '@togglecorp/toggle-form';
+
+import { type GoApiBody } from '#utils/restRequest';
+
+type EapRegisterRequestBody = GoApiBody<'/api/v2/eap-registration/', 'POST'>;
+
+export const defaultFormValue: FormFields = {
+    eap_type: undefined,
+    expected_submission_time: undefined,
+};
+
+type FormFields = PartialForm<EapRegisterRequestBody>;
+
+type FormSchema = ObjectSchema<FormFields>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>
+
+export const formSchema: FormSchema = {
+    fields: (): FormSchemaFields => ({
+        national_society: {
+            required: true,
+        },
+        country: {
+            required: true,
+        },
+        disaster_type: {
+            required: true,
+        },
+        eap_type: {},
+        expected_submission_time: {},
+        partners: {
+            required: true,
+        },
+        national_society_contact_name: {},
+        national_society_contact_title: {},
+        national_society_contact_email: {
+            validations: [emailCondition],
+        },
+        national_society_contact_phone_number: {},
+        ifrc_contact_name: {},
+        ifrc_contact_title: {},
+        ifrc_contact_email: {
+            validations: [emailCondition],
+        },
+        ifrc_contact_phone_number: {},
+        dref_focal_point_name: {},
+        dref_focal_point_title: {},
+        dref_focal_point_email: {
+            validations: [emailCondition],
+        },
+        dref_focal_point_phone_number: {},
+    }),
+};
diff --git a/app/src/views/EarlyActionProtocols/i18n.json b/app/src/views/EarlyActionProtocols/i18n.json
new file mode 100644
index 0000000000..9472e2952a
--- /dev/null
+++ b/app/src/views/EarlyActionProtocols/i18n.json
@@ -0,0 +1,14 @@
+{
+    "namespace": "earlyActionProtocols",
+    "strings": {
+        "eapRegistrationLink": "Register your EAP",
+        "eapContent": "What is an EAP?",
+        "eapContentHeading": "Early Action Protocols (EAPs) are a core mechanism of the IFRC's Forecast-based Financing (FbF) approach, designed to ensure that humanitarian action happens before a disaster strikes, rather than only responding afterwards.",
+        "eapContentSubHeadingOne": "An EAP is a pre-agreed plan developed by a Nation Society together with partners, which outlines:",
+        "eapDescriptionOne": "The triggers (based on scientific forecasts and risk analysis) that indicate when a hazard is likely to impact communities.",
+        "eapDescriptionTwo": "The early actions to be implemented once those triggers are met - practical, life-saving measures that reduce the impacts of the forecasted disaster.",
+        "eapDescriptionThree": "The roles, responsibilities, and budget required to carry out these actions quickly and effectively.",
+        "eapContentSubHeadingTwo": "Why are the EAPs Important?",
+        "eapContentSubHeadingThree": "What is the EAP Application Process?"
+    }
+}
diff --git a/app/src/views/EarlyActionProtocols/index.tsx b/app/src/views/EarlyActionProtocols/index.tsx
new file mode 100644
index 0000000000..98ac8ff321
--- /dev/null
+++ b/app/src/views/EarlyActionProtocols/index.tsx
@@ -0,0 +1,71 @@
+import {
+    Container,
+    ExpandableContainer,
+    ListView,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Link from '#components/Link';
+
+import i18n from './i18n.json';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <Container
+            headerActions={(
+                <Link
+                    to="newEapDevelopmentRegistration"
+                    styleVariant="outline"
+                    colorVariant="primary"
+                >
+                    {strings.eapRegistrationLink}
+                </Link>
+            )}
+        >
+            <ListView
+                layout="block"
+            >
+                <ExpandableContainer
+                    heading={strings.eapContent}
+                >
+                    <p>
+                        {strings.eapContentHeading}
+                    </p>
+                    <p>
+                        {strings.eapContentSubHeadingOne}
+                        <ul>
+                            <li>
+                                {strings.eapDescriptionOne}
+                            </li>
+                            <li>
+                                {strings.eapDescriptionTwo}
+                            </li>
+                            <li>
+                                {strings.eapDescriptionThree}
+                            </li>
+                        </ul>
+                    </p>
+                </ExpandableContainer>
+                {/* TODO: Add remaining content */}
+                <ExpandableContainer
+                    heading={strings.eapContentSubHeadingTwo}
+                >
+                    {/* TODO: Add real content and replace with strings */}
+                    EAP content sub heading description two
+                </ExpandableContainer>
+                <ExpandableContainer
+                    heading={strings.eapContentSubHeadingThree}
+                >
+                    {/* TODO: Add real content and replace with strings */}
+                    EAP content sub heading description three
+                </ExpandableContainer>
+            </ListView>
+        </Container>
+    );
+}
+
+Component.displayName = 'EarlyActionProtocols';
diff --git a/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx b/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx
index 3a496a9b05..2a2835e370 100644
--- a/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx
+++ b/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx
@@ -208,9 +208,8 @@ function ComponentInput(props: Props) {
                                 {answerStats.map((answerStat) => (
                                     <ButtonLayout
                                         key={answerStat.answer}
-                                        spacing="sm"
+                                        spacing="xs"
                                         readOnly
-                                        styleVariant="translucent"
                                         // FIXME: use tag component
                                     >
                                         <TextOutput
diff --git a/app/src/views/SimplifiedEapExport/i18n.json b/app/src/views/SimplifiedEapExport/i18n.json
new file mode 100644
index 0000000000..ab310c14a1
--- /dev/null
+++ b/app/src/views/SimplifiedEapExport/i18n.json
@@ -0,0 +1,41 @@
+{
+    "namespace": "simplifiedEapExport",
+    "strings": {
+        "pageTitleSimplifiedText": "Simplified",
+        "pageTitleEapText": "Early Action Protocol",
+        "sEapNoLabel": "sEAP No",
+        "totalBudgetLabel": "Total Budget",
+        "readinessLabel": "Readiness",
+        "prepositioningLabel": "Prepositioning",
+        "earlyActionLabel": "Early Action",
+        "peopleTargetedLabel": "People to be assisted",
+        "sEapTimeframeLabel": "sEAP timframe",
+        "sEapLeadTimeLabel": "sEAP lead time",
+        "operationalTimeframeLabel": "Operational timeframe",
+        "riskAnalysisHeading": "Risk Analysis and Early Action selection",
+        "prioritizedHazardAndImpactHeading": "Prioritized hazard and its historical impact",
+        "riskSelectedProtocolsHeading": "Explain which risks have been selected for this protocol and why",
+        "earlyActionInterventionHeading": "Early Action Intervention",
+        "overallObjectiveInterventionHeading": "Overall objective of the intervention",
+        "potentialGeographicalHighRiskAreasHeading": "Potential geographical high-risk areas that the simplified EAP would target",
+        "assistedThroughOperationHeading": "Who will be assisted through this operation and what criteria will be used for their selection?",
+        "triggerStatementHeading": "Trigger(s) statement",
+        "triggerThresholdJustificationHeading": "Trigger threshold justification",
+        "nextStepsTowardsFullEapHeading": "Next steps – For National Societies that intend to develop a full EAP",
+        "plannedOperationsHeading": "Planned Operations",
+        "operationBudgetLabel": "Budget",
+        "operationPeopleTargetedLabel": "No. people targeted",
+        "indicatorsHeading": "Indicators",
+        "indicatorTitleLabel": "Title",
+        "indicatorTargetLabel": "Target",
+        "readinessActivitiesHeading": "Readiness activities",
+        "prepositioningActivitiesHeading": "Prepositioning activities",
+        "earlyActionActivitiesHeading": "Prioritized early actions",
+        "enablingApproachesLabel": "Enabling Approaches",
+        "conditionsToDeliverHeading": "Conditions to deliver the Early Action",
+        "earlyActionCapacityHeading": "Experience and/or capacity to implement the early actions",
+        "rcrcMovementInvolvementHeading": "RCRC Movement partners, Governmental/other agencies consulted/involved",
+        "contactInformationHeading": "Contact information",
+        "contactInformationDescription": "For further information, specifically related to this simplified EAP please contact:"
+    }
+}
diff --git a/app/src/views/SimplifiedEapExport/index.tsx b/app/src/views/SimplifiedEapExport/index.tsx
new file mode 100644
index 0000000000..a8cd4afb28
--- /dev/null
+++ b/app/src/views/SimplifiedEapExport/index.tsx
@@ -0,0 +1,605 @@
+import {
+    useParams,
+    useSearchParams,
+} from 'react-router-dom';
+import { Label } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { Image } from '@ifrc-go/ui/printable';
+import {
+    isDefined,
+    isFalsyString,
+    isNotDefined,
+    isTruthyString,
+    listToMap,
+} from '@togglecorp/fujs';
+
+import PrintableContainer from '#components/printable/PrintableContainer';
+import PrintableDataDisplay from '#components/printable/PrintableDataDisplay';
+import PrintableDescription from '#components/printable/PrintableDescription';
+import PrintablePage from '#components/printable/PrintablePage';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { useRequest } from '#utils/restRequest';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const { eapId } = useParams<{ eapId: string }>();
+    const [searchParams] = useSearchParams();
+
+    const version = searchParams.get('version') ?? undefined;
+    const showDiff = searchParams.get('diff') ?? undefined;
+
+    const strings = useTranslation(i18n);
+
+    const {
+        pending: eapRegistrationPending,
+        response: eapRegistrationResponse,
+    } = useRequest({
+        skip: isFalsyString(eapId),
+        url: '/api/v2/eap-registration/{id}/',
+        pathVariables: isTruthyString(eapId) ? {
+            id: Number(eapId),
+        } : undefined,
+    });
+
+    const selectedSimplifiedEap = eapRegistrationResponse?.simplified_eap_details?.find(
+        (simplifiedEap) => String(simplifiedEap.version) === String(version),
+    );
+
+    const latestSimplifiedEapVersion = eapRegistrationResponse?.latest_simplified_eap;
+    const latestSimplifiedEap = eapRegistrationResponse?.simplified_eap_details?.find(
+        (simplifiedEap) => simplifiedEap.version === latestSimplifiedEapVersion,
+    );
+
+    const currentSimplifiedEap = selectedSimplifiedEap ?? latestSimplifiedEap;
+    const currentSimplifiedEapId = currentSimplifiedEap?.id;
+
+    const prevSimplifiedEapVersion = isDefined(currentSimplifiedEap?.version)
+        && currentSimplifiedEap.version > 1
+        ? currentSimplifiedEap.version - 1
+        : undefined;
+    const prevSimplifiedEap = eapRegistrationResponse?.simplified_eap_details.find(
+        (simplifiedEap) => simplifiedEap.version === prevSimplifiedEapVersion,
+    );
+
+    const {
+        pending: simplifiedEapPending,
+        response: simplifiedEapResponse,
+    } = useRequest({
+        skip: isNotDefined(currentSimplifiedEapId),
+        url: '/api/v2/simplified-eap/{id}/',
+        pathVariables: isDefined(currentSimplifiedEapId) ? {
+            id: Number(currentSimplifiedEapId),
+        } : undefined,
+    });
+
+    const {
+        pending: prevSimplifiedEapPending,
+        response: prevSimplifiedEapResponse,
+    } = useRequest({
+        skip: isNotDefined(prevSimplifiedEap) || showDiff?.toLowerCase() !== 'true',
+        url: '/api/v2/simplified-eap/{id}/',
+        pathVariables: isDefined(prevSimplifiedEap) ? {
+            id: Number(prevSimplifiedEap.id),
+        } : undefined,
+    });
+
+    const { eap_sector, eap_approach } = useGlobalEnums();
+
+    const eapSectorTitleMap = listToMap(
+        eap_sector,
+        ({ key }) => key,
+        ({ value }) => value,
+    );
+
+    const eapApproachTitleMap = listToMap(
+        eap_approach,
+        ({ key }) => key,
+        ({ value }) => value,
+    );
+
+    const {
+        disaster_type_details,
+        country_details,
+    } = eapRegistrationResponse ?? {};
+
+    const {
+        cover_image_file,
+        admin2_details,
+
+        total_budget,
+        readiness_budget,
+        pre_positioning_budget,
+        early_action_budget,
+        people_targeted,
+        seap_timeframe,
+        seap_lead_time,
+        operational_timeframe,
+
+        prioritized_hazard_and_impact,
+        risks_selected_protocols,
+
+        overall_objective_intervention,
+        potential_geographical_high_risk_areas,
+        assisted_through_operation,
+        trigger_statement,
+        trigger_threshold_justification,
+        next_step_towards_full_eap,
+        planned_operations,
+        enable_approaches,
+
+        early_action_capability,
+        rcrc_movement_involvement,
+
+        national_society_contact_name,
+        national_society_contact_email,
+        national_society_contact_title,
+        national_society_contact_phone_number,
+    } = simplifiedEapResponse ?? {};
+
+    const {
+        prioritized_hazard_and_impact: prev_prioritized_hazard_and_impact,
+        risks_selected_protocols: prev_risks_selected_protocols,
+        overall_objective_intervention: prev_overall_objective_intervention,
+        potential_geographical_high_risk_areas: prev_potential_geographical_high_risk_areas,
+        assisted_through_operation: prev_assisted_through_operation,
+        trigger_statement: prev_trigger_statement,
+        trigger_threshold_justification: prev_trigger_threshold_justification,
+        next_step_towards_full_eap: prev_next_step_towards_full_eap,
+        early_action_capability: prev_early_action_capability,
+        rcrc_movement_involvement: prev_rcrc_movement_involvement,
+    } = prevSimplifiedEapResponse ?? {};
+
+    const eapTitle = [
+        country_details?.name,
+        admin2_details?.map(({ name }) => name).join(', '),
+        disaster_type_details?.name,
+    ].filter(isTruthyString).join(' | ');
+
+    const previewReady = !eapRegistrationPending
+        && !simplifiedEapPending
+        && !prevSimplifiedEapPending;
+
+    return (
+        <PrintablePage
+            heading={(
+                <>
+                    {strings.pageTitleSimplifiedText}
+                    <br />
+                    {strings.pageTitleEapText}
+                </>
+            )}
+            description={eapTitle ?? '--'}
+            dataReady={previewReady}
+        >
+            {isDefined(cover_image_file?.file) && (
+                <PrintableContainer>
+                    <Image
+                        src={cover_image_file.file}
+                        alt=""
+                        caption={cover_image_file.caption}
+                    />
+                </PrintableContainer>
+            )}
+            <PrintableContainer>
+                <div className={styles.metaItems}>
+                    <PrintableDataDisplay
+                        label={strings.sEapNoLabel}
+                        value="--"
+                        strongValue
+                        variant="block"
+                        withPadding
+                        withBackground
+                    />
+                    <PrintableDataDisplay
+                        label={strings.totalBudgetLabel}
+                        value={total_budget}
+                        valueType="number"
+                        strongValue
+                        variant="block"
+                        withPadding
+                        withBackground
+                    />
+                    <PrintableDataDisplay
+                        label={strings.readinessLabel}
+                        value={readiness_budget}
+                        valueType="number"
+                        strongValue
+                        variant="block"
+                        withPadding
+                        withBackground
+                    />
+                    <PrintableDataDisplay
+                        label={strings.prepositioningLabel}
+                        value={pre_positioning_budget}
+                        valueType="number"
+                        strongValue
+                        variant="block"
+                        withPadding
+                        withBackground
+                    />
+                    <PrintableDataDisplay
+                        label={strings.earlyActionLabel}
+                        value={early_action_budget}
+                        valueType="number"
+                        strongValue
+                        variant="block"
+                        withPadding
+                        withBackground
+                    />
+                    <PrintableDataDisplay
+                        label={strings.peopleTargetedLabel}
+                        value={people_targeted}
+                        valueType="number"
+                        strongValue
+                        variant="block"
+                        withPadding
+                        withBackground
+                    />
+                    <PrintableDataDisplay
+                        label={strings.sEapTimeframeLabel}
+                        value={seap_timeframe}
+                        valueType="number"
+                        strongValue
+                        variant="block"
+                        withPadding
+                        withBackground
+                    />
+                    <PrintableDataDisplay
+                        label={strings.sEapLeadTimeLabel}
+                        value={seap_lead_time}
+                        valueType="number"
+                        strongValue
+                        variant="block"
+                        withPadding
+                        withBackground
+                    />
+                    <PrintableDataDisplay
+                        label={strings.operationalTimeframeLabel}
+                        value={operational_timeframe}
+                        valueType="number"
+                        strongValue
+                        variant="block"
+                        withPadding
+                        withBackground
+                    />
+                </div>
+            </PrintableContainer>
+            <PrintableContainer
+                heading={strings.riskAnalysisHeading}
+                headingLevel={2}
+                breakBefore
+            >
+                <PrintableContainer
+                    heading={strings.prioritizedHazardAndImpactHeading}
+                    headingLevel={3}
+                >
+                    <PrintableDescription
+                        value={prioritized_hazard_and_impact}
+                        prevValue={prev_prioritized_hazard_and_impact}
+                    />
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.riskSelectedProtocolsHeading}
+                    headingLevel={3}
+                >
+                    <PrintableDescription
+                        value={risks_selected_protocols}
+                        prevValue={prev_risks_selected_protocols}
+                    />
+                </PrintableContainer>
+            </PrintableContainer>
+            <PrintableContainer
+                heading={strings.earlyActionInterventionHeading}
+                headingLevel={2}
+            >
+                <PrintableContainer
+                    heading={strings.overallObjectiveInterventionHeading}
+                    headingLevel={3}
+                >
+                    <PrintableDescription
+                        value={overall_objective_intervention}
+                        prevValue={prev_overall_objective_intervention}
+                    />
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.potentialGeographicalHighRiskAreasHeading}
+                    headingLevel={3}
+                >
+                    <PrintableDescription
+                        value={potential_geographical_high_risk_areas}
+                        prevValue={prev_potential_geographical_high_risk_areas}
+                    />
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.assistedThroughOperationHeading}
+                    headingLevel={3}
+                >
+                    <PrintableDescription
+                        value={assisted_through_operation}
+                        prevValue={prev_assisted_through_operation}
+                    />
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.triggerStatementHeading}
+                    headingLevel={3}
+                >
+                    <PrintableDescription
+                        value={trigger_statement}
+                        prevValue={prev_trigger_statement}
+                    />
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.triggerThresholdJustificationHeading}
+                    headingLevel={3}
+                >
+                    <PrintableDescription
+                        value={trigger_threshold_justification}
+                        prevValue={prev_trigger_threshold_justification}
+                    />
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.nextStepsTowardsFullEapHeading}
+                    headingLevel={3}
+                >
+                    <PrintableDescription
+                        value={next_step_towards_full_eap}
+                        prevValue={prev_next_step_towards_full_eap}
+                    />
+                </PrintableContainer>
+            </PrintableContainer>
+            <PrintableContainer
+                heading={strings.plannedOperationsHeading}
+                headingLevel={2}
+            >
+                {planned_operations?.map((operation) => (
+                    <PrintableContainer
+                        key={operation.id}
+                        heading={eapSectorTitleMap?.[operation.sector]}
+                        headingLevel={3}
+                    >
+                        <PrintableContainer headingLevel={4}>
+                            <PrintableDataDisplay
+                                label={strings.operationBudgetLabel}
+                                value={operation.budget_per_sector}
+                                valueType="number"
+                                prefix="CHF "
+                                strongLabel
+                            />
+                            <PrintableDataDisplay
+                                label={strings.operationPeopleTargetedLabel}
+                                value={operation.people_targeted}
+                                valueType="number"
+                                strongLabel
+                            />
+                        </PrintableContainer>
+                        <PrintableContainer
+                            heading={strings.indicatorsHeading}
+                            headingLevel={4}
+                        >
+                            <div className={styles.indicatorItems}>
+                                <Label
+                                    // FIXME: create and use printable labels
+                                    textSize="sm"
+                                    strong
+                                >
+                                    {strings.indicatorTitleLabel}
+                                </Label>
+                                <Label
+                                    textSize="sm"
+                                    strong
+                                >
+                                    {strings.indicatorTargetLabel}
+                                </Label>
+                                {operation.indicators.map((indicator) => (
+                                    <PrintableDataDisplay
+                                        key={indicator.id}
+                                        label={indicator.title}
+                                        value={indicator.target}
+                                        valueType="number"
+                                        variant="contents"
+                                        withBackground
+                                        withPadding
+                                        withoutLabelColon
+                                    />
+                                ))}
+                            </div>
+                        </PrintableContainer>
+                        <PrintableContainer
+                            heading={strings.readinessActivitiesHeading}
+                            headingLevel={4}
+                        >
+                            <ol>
+                                {operation.readiness_activities.map((activity) => (
+                                    <li key={activity.id}>
+                                        {activity.activity}
+                                    </li>
+                                ))}
+                            </ol>
+                        </PrintableContainer>
+                        <PrintableContainer
+                            heading={strings.prepositioningActivitiesHeading}
+                            headingLevel={4}
+                        >
+                            <ol>
+                                {operation.prepositioning_activities.map((activity) => (
+                                    <li key={activity.id}>
+                                        {activity.activity}
+                                    </li>
+                                ))}
+                            </ol>
+                        </PrintableContainer>
+                        <PrintableContainer
+                            heading={strings.earlyActionActivitiesHeading}
+                            headingLevel={4}
+                        >
+                            <ol>
+                                {operation.early_action_activities.map((activity) => (
+                                    <li key={activity.id}>
+                                        {activity.activity}
+                                    </li>
+                                ))}
+                            </ol>
+                        </PrintableContainer>
+                    </PrintableContainer>
+                ))}
+            </PrintableContainer>
+            <PrintableContainer
+                heading={strings.enablingApproachesLabel}
+                headingLevel={2}
+            >
+                {enable_approaches?.map((approach) => (
+                    <PrintableContainer
+                        key={approach.id}
+                        heading={eapApproachTitleMap?.[approach.approach]}
+                        headingLevel={3}
+                    >
+                        <PrintableContainer>
+                            <PrintableDataDisplay
+                                label={strings.operationBudgetLabel}
+                                value={approach.budget_per_approach}
+                                valueType="number"
+                                prefix="CHF "
+                                strongLabel
+                            />
+                        </PrintableContainer>
+                        <PrintableContainer
+                            heading={strings.indicatorsHeading}
+                            headingLevel={4}
+                        >
+                            <div className={styles.indicatorItems}>
+                                <Label
+                                    // FIXME: create and use printable labels
+                                    textSize="sm"
+                                    strong
+                                >
+                                    {strings.indicatorTitleLabel}
+                                </Label>
+                                <Label
+                                    textSize="sm"
+                                    strong
+                                >
+                                    {strings.indicatorTargetLabel}
+                                </Label>
+                                {approach.indicators.map((indicator) => (
+                                    <PrintableDataDisplay
+                                        key={indicator.id}
+                                        label={indicator.title}
+                                        value={indicator.target}
+                                        valueType="number"
+                                        variant="contents"
+                                        withBackground
+                                        withPadding
+                                        withoutLabelColon
+                                    />
+                                ))}
+                            </div>
+                        </PrintableContainer>
+                        <PrintableContainer
+                            heading={strings.readinessActivitiesHeading}
+                            headingLevel={4}
+                        >
+                            <ol>
+                                {approach.readiness_activities.map((activity) => (
+                                    <li key={activity.id}>
+                                        {activity.activity}
+                                    </li>
+                                ))}
+                            </ol>
+                        </PrintableContainer>
+                        <PrintableContainer
+                            heading={strings.prepositioningActivitiesHeading}
+                            headingLevel={4}
+                        >
+                            <ol>
+                                {approach.prepositioning_activities.map((activity) => (
+                                    <li key={activity.id}>
+                                        {activity.activity}
+                                    </li>
+                                ))}
+                            </ol>
+                        </PrintableContainer>
+                        <PrintableContainer
+                            heading={strings.earlyActionActivitiesHeading}
+                            headingLevel={4}
+                        >
+                            <ol>
+                                {approach.early_action_activities.map((activity) => (
+                                    <li key={activity.id}>
+                                        {activity.activity}
+                                    </li>
+                                ))}
+                            </ol>
+                        </PrintableContainer>
+                    </PrintableContainer>
+                ))}
+            </PrintableContainer>
+            <PrintableContainer
+                heading={strings.conditionsToDeliverHeading}
+                headingLevel={2}
+            >
+                <PrintableContainer
+                    heading={strings.earlyActionCapacityHeading}
+                    headingLevel={3}
+                >
+                    <PrintableDescription
+                        value={early_action_capability}
+                        prevValue={prev_early_action_capability}
+                    />
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.rcrcMovementInvolvementHeading}
+                    headingLevel={3}
+                >
+                    <PrintableDescription
+                        value={rcrc_movement_involvement}
+                        prevValue={prev_rcrc_movement_involvement}
+                    />
+                </PrintableContainer>
+            </PrintableContainer>
+            {/*
+            <PrintableContainer
+                heading={strings.budgetHeading}
+                headingLevel={2}
+                // FIXME: add budget details
+            >
+                <PrintableDescription
+                    value="Budget details"
+                />
+            </PrintableContainer>
+            */}
+            <PrintableContainer
+                heading={strings.contactInformationHeading}
+                headingLevel={2}
+                // FIXME: add proper contact information
+            >
+                <PrintableContainer headingLevel={5}>
+                    <Label
+                        strong
+                        textSize="sm"
+                    >
+                        {strings.contactInformationDescription}
+                    </Label>
+                </PrintableContainer>
+                <PrintableContainer>
+                    <PrintableDataDisplay
+                        label="National Society Contact"
+                        value={[
+                            national_society_contact_name,
+                            national_society_contact_title,
+                            national_society_contact_email,
+                            national_society_contact_phone_number,
+                        ].filter(isTruthyString).join(', ')}
+                        variant="block"
+                        strongLabel
+                    />
+                </PrintableContainer>
+            </PrintableContainer>
+        </PrintablePage>
+    );
+}
+
+Component.displayName = 'SimplifiedEapExport';
diff --git a/app/src/views/SimplifiedEapExport/styles.module.css b/app/src/views/SimplifiedEapExport/styles.module.css
new file mode 100644
index 0000000000..c9628d6851
--- /dev/null
+++ b/app/src/views/SimplifiedEapExport/styles.module.css
@@ -0,0 +1,11 @@
+.meta-items {
+    display: grid;
+    grid-gap: var(--go-ui-width-separator-md);
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+}
+
+.indicator-items {
+    display: grid;
+    grid-gap: var(--go-ui-width-separator-md);
+    grid-template-columns: 2fr 1fr;
+}
diff --git a/app/src/views/SimplifiedEapForm/ContactInputsSection/index.tsx b/app/src/views/SimplifiedEapForm/ContactInputsSection/index.tsx
new file mode 100644
index 0000000000..4f49a02336
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/ContactInputsSection/index.tsx
@@ -0,0 +1,86 @@
+import {
+    InputSection,
+    TextInput,
+} from '@ifrc-go/ui';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+
+import {
+    type PartialSimplifiedEapType,
+    type ValidContactFieldPrefixes,
+} from '../schema';
+
+interface Props {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    namePrefix: ValidContactFieldPrefixes;
+    value: PartialSimplifiedEapType;
+    setFieldValue: (...entries: EntriesAsList<PartialSimplifiedEapType>) => void;
+    error: Error<PartialSimplifiedEapType> | undefined;
+    disabled?: boolean;
+}
+
+function ContactInputsSection(props: Props) {
+    const {
+        title: sectionTitle,
+        description,
+        namePrefix,
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+    } = props;
+
+    const error = getErrorObject(formError);
+
+    const name = `${namePrefix}_name` satisfies keyof PartialSimplifiedEapType;
+    const title = `${namePrefix}_title` satisfies keyof PartialSimplifiedEapType;
+    const email = `${namePrefix}_email` satisfies keyof PartialSimplifiedEapType;
+    const phoneNumber = `${namePrefix}_phone_number` satisfies keyof PartialSimplifiedEapType;
+
+    return (
+        <InputSection
+            title={sectionTitle}
+            description={description}
+            numPreferredColumns={2}
+        >
+            <TextInput
+                label="Name"
+                name={name}
+                value={value?.[name]}
+                onChange={setFieldValue}
+                error={error?.[name]}
+                disabled={disabled}
+            />
+            <TextInput
+                label="Title"
+                name={title}
+                value={value?.[title]}
+                onChange={setFieldValue}
+                error={error?.[title]}
+                disabled={disabled}
+            />
+            <TextInput
+                label="Email"
+                name={email}
+                value={value?.[email]}
+                onChange={setFieldValue}
+                error={error?.[email]}
+                disabled={disabled}
+            />
+            <TextInput
+                label="Phone number"
+                name={phoneNumber}
+                value={value?.[phoneNumber]}
+                onChange={setFieldValue}
+                error={error?.[phoneNumber]}
+                disabled={disabled}
+            />
+        </InputSection>
+    );
+}
+
+export default ContactInputsSection;
diff --git a/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json
new file mode 100644
index 0000000000..7117ff40f4
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json
@@ -0,0 +1,21 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "deliverHeading": "Conditions to deliver the Early Action",
+        "deliverEarlyActions": "Experience and/or capacity to implement the early actions",
+        "deliverEarlyActionsDescription": "Assumptions or minimum conditions needed to deliver on the early actions (including issues to be resolved.) Explain how the National Society will be able to delive on the early actions, what experiences and/or capacities they have related to be intervention. Are there issues to be addressed in order for the Naional Society to deliver on these actions? How will these issues be resolved?",
+        "deliverDescription": "Description",
+        "deliverInvolved": "RCRC Movement partners, Governmental/other agencies consulted/involved",
+        "deliverInvolvedDescription": "Explain who was part of the development of this plan, how were they involved and if they have any role on the implementation of the actions. Add any relevant information of the National Society's role on the National Disaster Response System.",
+        "budgetHeading": "Budget",
+        "deliverTotalBudget": "Total budget",
+        "deliverTotalBudgetDescription": "Add the expected budget amount",
+        "deliverBudgetLabel": "Budget",
+        "deliverReadinessLabel": "Readiness",
+        "deliverPrepositioning": "Prepositioning",
+        "deliverBudgetDetails": "Budget details",
+        "deliverBudgetDetailsDescription": "Add here the page from the budget template called EAP for publication.",
+        "earlyAction": "Early Action",
+        "upload": "Upload"
+    }
+}
diff --git a/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx
new file mode 100644
index 0000000000..7e8eb9ed1a
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx
@@ -0,0 +1,155 @@
+import {
+    Container,
+    InputSection,
+    ListView,
+    NumberInput,
+    TextArea,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+} from '@togglecorp/toggle-form';
+
+import GoSingleFileInput from '#components/domain/GoSingleFileInput';
+import TabPage from '#components/TabPage';
+
+import { type PartialSimplifiedEapType } from '../schema';
+
+import i18n from './i18n.json';
+
+interface Props {
+    value: PartialSimplifiedEapType;
+    setFieldValue: (...entries: EntriesAsList<PartialSimplifiedEapType>) => void;
+    error: Error<PartialSimplifiedEapType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<React.SetStateAction<Record<number, string>>>;
+}
+
+function DeliveryAndBudget(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const error = getErrorObject(formError);
+
+    return (
+        <TabPage>
+            <Container heading={strings.deliverHeading}>
+                <ListView
+                    layout="block"
+                    spacing="sm"
+                >
+                    <InputSection
+                        title={strings.deliverEarlyActions}
+                        description={strings.deliverEarlyActionsDescription}
+                        withAsteriskOnTitle
+                    >
+                        <TextArea
+                            label={strings.deliverDescription}
+                            name="early_action_capability"
+                            value={value?.early_action_capability}
+                            onChange={setFieldValue}
+                            error={error?.early_action_capability}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.deliverInvolved}
+                        description={strings.deliverInvolvedDescription}
+                        withAsteriskOnTitle
+                    >
+                        <TextArea
+                            label={strings.deliverDescription}
+                            name="rcrc_movement_involvement"
+                            value={value?.rcrc_movement_involvement}
+                            onChange={setFieldValue}
+                            error={error?.rcrc_movement_involvement}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                </ListView>
+            </Container>
+            <Container heading={strings.budgetHeading}>
+                <ListView
+                    layout="block"
+                    spacing="sm"
+                >
+                    <InputSection
+                        title={strings.deliverTotalBudget}
+                        description={strings.deliverTotalBudgetDescription}
+                        withAsteriskOnTitle
+                    >
+                        <ListView
+                            layout="grid"
+                            numPreferredGridColumns={4}
+                        >
+                            <NumberInput
+                                // FIXME: total budget should be automatically calculated
+                                name="total_budget"
+                                value={value?.total_budget}
+                                onChange={setFieldValue}
+                                error={error?.total_budget}
+                                disabled={disabled}
+                                label={strings.deliverBudgetLabel}
+                            />
+                            <NumberInput
+                                label={strings.deliverReadinessLabel}
+                                name="readiness_budget"
+                                value={value?.readiness_budget}
+                                onChange={setFieldValue}
+                                error={error?.readiness_budget}
+                                disabled={disabled}
+                            />
+                            <NumberInput
+                                label={strings.deliverPrepositioning}
+                                name="pre_positioning_budget"
+                                value={value?.pre_positioning_budget}
+                                onChange={setFieldValue}
+                                error={error?.pre_positioning_budget}
+                                disabled={disabled}
+                            />
+                            <NumberInput
+                                label={strings.earlyAction}
+                                name="early_action_budget"
+                                value={value?.early_action_budget}
+                                onChange={setFieldValue}
+                                error={error?.early_action_budget}
+                                disabled={disabled}
+                            />
+                        </ListView>
+                    </InputSection>
+                    <InputSection
+                        title={strings.deliverBudgetDetails}
+                        description={strings.deliverBudgetDetailsDescription}
+                        withAsteriskOnTitle
+                    >
+                        <GoSingleFileInput
+                            name="budget_file"
+                            url="/api/v2/eap-file/"
+                            value={value?.budget_file}
+                            onChange={setFieldValue}
+                            error={getErrorString(error?.budget_file)}
+                            fileIdToUrlMap={fileIdToUrlMap}
+                            setFileIdToUrlMap={setFileIdToUrlMap}
+                            disabled={disabled}
+                        >
+                            {strings.upload}
+                        </GoSingleFileInput>
+                    </InputSection>
+                </ListView>
+            </Container>
+        </TabPage>
+    );
+}
+
+export default DeliveryAndBudget;
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/i18n.json
new file mode 100644
index 0000000000..f2bd8dbe50
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/i18n.json
@@ -0,0 +1,28 @@
+{
+    "namespace": "form",
+    "strings": {
+        "actionHeading": "Early Action Intervention",
+        "intervention": "Overall objective of the intervention",
+        "interventionDescription": "Provide an objective statement that describes the main goal of the intervention.",
+        "geographicalRiskArea": "Potential geographical high-risk areas that the simplified EAP would target",
+        "geographicalRiskAreaDescription": "Which high risk regions have been selected for this intervention and why?",
+        "actionDescription": "Description",
+        "actionValue": "Value",
+        "actionPeopleTargeted": "People targeted",
+        "actionPeopleTargetedDescription": "Add the number of people targeted for the event.",
+        "actionOperation": "Assisted through the operation",
+        "actionOperationDescription": "List who will be targeted by the early actions in this simplified EAP (these should be groups of people who are most exposed combined with those moose vulnerable to the impacts of the hazard)",
+        "actionCriteria": "Explain your selection criteria for who will be targeted.",
+        "actionsStatement": "Trigger(s) statement",
+        "actionsStatementDescription": "State clear and precise criteria that will have to be met for the simplified EAP to be activated. If multiple triggers are used, indicate which trigger is linked to which early action.",
+        "actionsLeadTime": "sEAP Lead Time",
+        "actionsLeadTimeDescription": "This is the time between the trigger being met and the impact of the hazard, when the early actions are undertaken.",
+        "actionsOperational": "Operational Timeframe",
+        "actionsOperationalDescription": "The operational timeframe starts from the trigger date and includes the time it takes to implement the early action activities plus the time it takes to finalize the operation, including time to settle the finances, facilities the lessons learned workshop and prepare the final report.",
+        "justification": "Trigger threshold justification",
+        "justificationDescription": "Explain how the triggers(s) were set and provide information showing that the level chosen has caused humanitarian impact in the past.",
+        "fullEap": "Next step towards full EAP",
+        "fullEapDescription": "For National Societies that intend to develop a full EAP, outline the next steps you will be taking to continue developing this simplified EAP into a full EAP.",
+        "operationTimeFrame": "Time Frame"
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/index.tsx b/app/src/views/SimplifiedEapForm/EarlyAction/index.tsx
new file mode 100644
index 0000000000..f38ac699a6
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/index.tsx
@@ -0,0 +1,248 @@
+import {
+    Container,
+    InputSection,
+    ListView,
+    NumberInput,
+    SelectInput,
+    TextArea,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { stringValueSelector } from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+} from '@togglecorp/toggle-form';
+
+import Admin2Input from '#components/domain/Admin2Input';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { TIMEFRAME_YEAR } from '#utils/constants';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import { type PartialSimplifiedEapType } from '../schema';
+
+import i18n from './i18n.json';
+
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+
+type TimeframeOption = NonNullable<GlobalEnumsResponse['eap_timeframe']>[number];
+
+function timeframeKeySelector(option: TimeframeOption) {
+    return option.key;
+}
+
+interface Props {
+    value: NonNullable<PartialSimplifiedEapType>;
+    setFieldValue: (...entries: EntriesAsList<PartialSimplifiedEapType>) => void;
+    error: Error<PartialSimplifiedEapType> | undefined;
+    disabled?: boolean;
+    eapRegistrationDetail?: GoApiResponse<'/api/v2/eap-registration/{id}/'>;
+}
+
+function EarlyAction(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        eapRegistrationDetail,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const error = getErrorObject(formError);
+
+    const {
+        eap_timeframe,
+    } = useGlobalEnums();
+
+    const eapTimeframeOption = eap_timeframe?.filter(
+        (item) => item.key !== TIMEFRAME_YEAR,
+    );
+
+    return (
+        <Container heading={strings.actionHeading}>
+            <ListView
+                layout="block"
+                spacing="sm"
+            >
+                <InputSection
+                    title={strings.intervention}
+                    description={strings.interventionDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.actionDescription}
+                        name="overall_objective_intervention"
+                        value={value?.overall_objective_intervention}
+                        onChange={setFieldValue}
+                        error={error?.overall_objective_intervention}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.geographicalRiskArea}
+                    description={strings.geographicalRiskAreaDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.actionDescription}
+                        name="potential_geographical_high_risk_areas"
+                        value={value?.potential_geographical_high_risk_areas}
+                        onChange={setFieldValue}
+                        error={error?.potential_geographical_high_risk_areas}
+                        disabled={disabled}
+                    />
+                    {isDefined(eapRegistrationDetail?.country) && (
+                        <Admin2Input
+                            name="admin2"
+                            onChange={setFieldValue}
+                            value={value?.admin2}
+                            countryId={eapRegistrationDetail.country}
+                            error={getErrorString(error?.admin2)}
+                        />
+                    )}
+                </InputSection>
+                <InputSection
+                    title={strings.actionPeopleTargeted}
+                    description={strings.actionPeopleTargetedDescription}
+                    withAsteriskOnTitle
+                    numPreferredColumns={2}
+                >
+                    <NumberInput
+                        label={strings.actionDescription}
+                        name="people_targeted"
+                        value={value?.people_targeted}
+                        onChange={setFieldValue}
+                        error={error?.people_targeted}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.actionOperation}
+                    description={strings.actionOperationDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.actionDescription}
+                        name="assisted_through_operation"
+                        value={value?.assisted_through_operation}
+                        onChange={setFieldValue}
+                        error={error?.assisted_through_operation}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    description={strings.actionCriteria}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.actionDescription}
+                        name="selection_criteria"
+                        value={value?.selection_criteria}
+                        onChange={setFieldValue}
+                        error={error?.selection_criteria}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.actionsStatement}
+                    description={strings.actionsStatementDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.actionDescription}
+                        name="trigger_statement"
+                        value={value?.trigger_statement}
+                        onChange={setFieldValue}
+                        error={error?.trigger_statement}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.actionsLeadTime}
+                    description={strings.actionsLeadTimeDescription}
+                    withAsteriskOnTitle
+                    numPreferredColumns={2}
+                >
+                    <NumberInput
+                        label={strings.actionValue}
+                        name="seap_lead_time"
+                        value={value?.seap_lead_time}
+                        onChange={setFieldValue}
+                        error={error?.seap_lead_time}
+                        disabled={disabled}
+                    />
+                    <SelectInput
+                        label={strings.operationTimeFrame}
+                        name="seap_lead_timeframe_unit"
+                        value={value.seap_lead_timeframe_unit}
+                        onChange={setFieldValue}
+                        keySelector={timeframeKeySelector}
+                        labelSelector={stringValueSelector}
+                        options={eapTimeframeOption}
+                        disabled={disabled}
+                        error={error?.seap_lead_timeframe_unit}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.actionsOperational}
+                    description={strings.actionsOperationalDescription}
+                    withAsteriskOnTitle
+                    numPreferredColumns={2}
+                >
+                    <NumberInput
+                        label={strings.actionValue}
+                        name="operational_timeframe"
+                        value={value?.operational_timeframe}
+                        onChange={setFieldValue}
+                        error={error?.operational_timeframe}
+                        disabled={disabled}
+                    />
+                    <SelectInput
+                        label={strings.operationTimeFrame}
+                        name="operational_timeframe_unit"
+                        value={value.operational_timeframe_unit}
+                        onChange={setFieldValue}
+                        keySelector={timeframeKeySelector}
+                        labelSelector={stringValueSelector}
+                        options={eapTimeframeOption}
+                        disabled={disabled}
+                        error={error?.operational_timeframe_unit}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.justification}
+                    description={strings.justificationDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.actionDescription}
+                        name="trigger_threshold_justification"
+                        value={value?.trigger_threshold_justification}
+                        onChange={setFieldValue}
+                        error={error?.trigger_threshold_justification}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.fullEap}
+                    description={strings.fullEapDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.actionDescription}
+                        name="next_step_towards_full_eap"
+                        value={value?.next_step_towards_full_eap}
+                        onChange={setFieldValue}
+                        error={error?.next_step_towards_full_eap}
+                        disabled={disabled}
+                    />
+                </InputSection>
+            </ListView>
+        </Container>
+    );
+}
+
+export default EarlyAction;
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
new file mode 100644
index 0000000000..bbf24b60e2
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
@@ -0,0 +1,13 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "approachBudget": "Budget",
+        "approachApCode": "AP Code",
+        "approachRemoveButton": "Remove",
+        "approachAddActivityButton": "Add Activity",
+        "approachReadinessActivities": "Readiness Activities",
+        "approachPrepositioningActivities": "Pre-positioning Activities",
+        "approachEarlyActionActivities": "Early Action Activities",
+        "approachNoActivitiesMessage": "No activities added yet"
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
new file mode 100644
index 0000000000..dfc63cdc36
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
@@ -0,0 +1,386 @@
+import { useCallback } from 'react';
+import {
+    AddLineIcon,
+    DeleteBinTwoLineIcon,
+} from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    ExpandableContainer,
+    ListView,
+    NumberInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isNotDefined,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type SetValueArg,
+    useFormArray,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import OperationActivityInput from '#components/domain/OperationActivityInput';
+import NonFieldError from '#components/NonFieldError';
+
+import IndicatorInput from '../../IndicatorInput';
+import { type PartialSimplifiedEapType } from '../../schema';
+
+import i18n from './i18n.json';
+
+type EnableApproachesFormFields = NonNullable<PartialSimplifiedEapType['enable_approaches']>[number];
+type EarlyActionFormFields = NonNullable<EnableApproachesFormFields['early_action_activities']>[number];
+type PrepositioningFormFields = NonNullable<EnableApproachesFormFields['prepositioning_activities']>[number];
+type ReadinessFormFields = NonNullable<EnableApproachesFormFields['readiness_activities']>[number];
+type IndicatorFormFields = NonNullable<EnableApproachesFormFields['indicators']>[number];
+
+const defaultApproachValue: EnableApproachesFormFields = {
+    approach: 10,
+};
+
+interface Props {
+    value: EnableApproachesFormFields;
+    error: ArrayError<EnableApproachesFormFields> | undefined;
+    onChange: (value: SetValueArg<EnableApproachesFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    approachTitle?: React.ReactNode;
+}
+
+function OperationsBySectorInput(props: Props) {
+    const {
+        error: errorFromProps,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+        approachTitle,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const onFieldChange = useFormObject(index, onChange, defaultApproachValue);
+
+    const error = (value && value.approach && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.approach])
+        : undefined;
+
+    const {
+        setValue: onEarlyActionChange,
+        removeValue: onEarlyActionRemove,
+    } = useFormArray<'early_action_activities', EarlyActionFormFields>(
+        'early_action_activities' as const,
+        onFieldChange,
+    );
+    const {
+        setValue: onPrepositioningChange,
+        removeValue: onPrepositioningRemove,
+    } = useFormArray<'prepositioning_activities', PrepositioningFormFields>(
+        'prepositioning_activities' as const,
+        onFieldChange,
+    );
+    const {
+        setValue: onReadinessChange,
+        removeValue: onReadinessRemove,
+    } = useFormArray<'readiness_activities', ReadinessFormFields>(
+        'readiness_activities' as const,
+        onFieldChange,
+    );
+    const {
+        setValue: onIndicatorChange,
+        removeValue: onIndicatorRemove,
+    } = useFormArray<'indicators', IndicatorFormFields>(
+        'indicators' as const,
+        onFieldChange,
+    );
+
+    const handleEarlyActionAddButtonClick = useCallback(
+        () => {
+            const newActionItem: EarlyActionFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: EarlyActionFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newActionItem]
+                ),
+                'early_action_activities' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    const handlePrepositioningAddButtonClick = useCallback(
+        () => {
+            const newActionItem: PrepositioningFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: PrepositioningFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newActionItem]
+                ),
+                'prepositioning_activities' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    const handleReadinessAddButtonClick = useCallback(
+        () => {
+            const newActionItem: ReadinessFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: ReadinessFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newActionItem]
+                ),
+                'readiness_activities' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    const handleIndicatorAddButtonClick = useCallback(
+        () => {
+            const newIndicator: IndicatorFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: IndicatorFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newIndicator]
+                ),
+                'indicators' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    return (
+        <ExpandableContainer
+            heading={approachTitle ?? '--'}
+            headerActions={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="action"
+                    title={strings.approachRemoveButton}
+                    disabled={disabled}
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            )}
+            withPadding
+            withBackground
+            initiallyExpanded
+        >
+            <ListView layout="block">
+                <ListView
+                    layout="grid"
+                    numPreferredGridColumns={3}
+                >
+                    <NumberInput
+                        label={strings.approachBudget}
+                        name="budget_per_approach"
+                        value={value?.budget_per_approach}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.budget_per_approach}
+                    />
+                    <NumberInput
+                        label={strings.approachApCode}
+                        name="ap_code"
+                        value={value?.ap_code}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.ap_code}
+                    />
+                </ListView>
+                <ListView
+                    layout="block"
+                    spacing="2xs"
+                >
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        withCompactMessage
+                        headingLevel={6}
+                        // FIXME: use strings
+                        heading="Indicators"
+                        footerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handleIndicatorAddButtonClick}
+                                spacing="sm"
+                                disabled={disabled}
+                                before={<AddLineIcon />}
+                                // FIXME: use strings
+                            >
+                                Add Indicator
+                            </Button>
+                        )}
+                        empty={isNotDefined(value.indicators) || value.indicators.length === 0}
+                        // FIXME: use strings
+                        emptyMessage="No indicators yet"
+                    >
+                        <ListView layout="block">
+                            {value.indicators?.map((indicator, i) => (
+                                <IndicatorInput
+                                    key={indicator.client_id}
+                                    index={i}
+                                    value={indicator}
+                                    onChange={onIndicatorChange}
+                                    onRemove={onIndicatorRemove}
+                                    error={getErrorObject(error?.indicators)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.approachReadinessActivities}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handleReadinessAddButtonClick}
+                                disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
+                            >
+                                {strings.approachAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.readiness_activities)
+                            || value.readiness_activities.length === 0}
+                        emptyMessage={strings.approachNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.readiness_activities)
+                            }
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.readiness_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onReadinessChange}
+                                    onRemove={onReadinessRemove}
+                                    error={getErrorObject(error?.readiness_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.approachPrepositioningActivities}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handlePrepositioningAddButtonClick}
+                                disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
+                            >
+                                {strings.approachAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.prepositioning_activities)
+                            || value.prepositioning_activities.length === 0}
+                        emptyMessage={strings.approachNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.prepositioning_activities)
+                            }
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.prepositioning_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onPrepositioningChange}
+                                    onRemove={onPrepositioningRemove}
+                                    error={getErrorObject(error?.prepositioning_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.approachEarlyActionActivities}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handleEarlyActionAddButtonClick}
+                                disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
+                            >
+                                {strings.approachAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.early_action_activities)
+                            || value.early_action_activities.length === 0}
+                        emptyMessage={strings.approachNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.early_action_activities)
+                            }
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.early_action_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onEarlyActionChange}
+                                    onRemove={onEarlyActionRemove}
+                                    error={getErrorObject(error?.early_action_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                </ListView>
+            </ListView>
+        </ExpandableContainer>
+    );
+}
+
+export default OperationsBySectorInput;
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/i18n.json b/app/src/views/SimplifiedEapForm/EnablingApproaches/i18n.json
new file mode 100644
index 0000000000..b2fc7004f4
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/i18n.json
@@ -0,0 +1,7 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "enablingApproachesTitle": "Enabling Approaches",
+        "enablingApproachesDescription": "Select approaches which are used in this Early Action Protocol."
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx b/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx
new file mode 100644
index 0000000000..81d001755c
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx
@@ -0,0 +1,138 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import {
+    Checklist,
+    Container,
+    InputSection,
+    ListView,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { stringValueSelector } from '@ifrc-go/ui/utils';
+import { listToMap } from '@togglecorp/fujs';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import NonFieldError from '#components/NonFieldError';
+import { type components } from '#generated/types';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+
+import { type PartialSimplifiedEapType } from '../schema';
+import ApproachesInput from './ApproachesInput';
+
+import i18n from './i18n.json';
+
+type EapApproach = components['schemas']['EapApproachEnumKey'];
+type EapApproachOption = components['schemas']['EapApproachEnum'];
+
+type EnablingApproachesFormFields = NonNullable<PartialSimplifiedEapType['enable_approaches']>[number];
+
+interface Props {
+    value: PartialSimplifiedEapType;
+    error: Error<PartialSimplifiedEapType> | undefined;
+    disabled?: boolean;
+    setFieldValue: (...entries: EntriesAsList<PartialSimplifiedEapType>) => void;
+}
+
+function approachesKeySelector(option: EapApproachOption) {
+    return option.key;
+}
+
+function EnablingApproaches(props: Props) {
+    const {
+        value,
+        error: formError,
+        disabled,
+        setFieldValue,
+    } = props;
+
+    const error = getErrorObject(formError);
+    const strings = useTranslation(i18n);
+
+    const { eap_approach: eapApproachOptions } = useGlobalEnums();
+
+    const eapApproachLabelMapping = useMemo(() => (
+        listToMap(
+            eapApproachOptions,
+            ({ key }) => key,
+            ({ value: label }) => label,
+        )
+    ), [eapApproachOptions]);
+
+    const {
+        setValue: onApproachChange,
+        removeValue: onApproachRemove,
+    } = useFormArray<'enable_approaches', EnablingApproachesFormFields>(
+        'enable_approaches',
+        setFieldValue,
+    );
+
+    const handleApproachChecklistChange = useCallback((approaches: EapApproach[] | undefined) => {
+        setFieldValue((previousValue: EnablingApproachesFormFields[] | undefined) => {
+            const previousValueMapping = listToMap(
+                previousValue,
+                ({ approach }) => approach,
+            );
+
+            return approaches?.map((approach) => {
+                const prevapproachValue = previousValueMapping?.[approach];
+
+                if (prevapproachValue) {
+                    return prevapproachValue;
+                }
+
+                return {
+                    approach,
+                } satisfies EnablingApproachesFormFields;
+            });
+        }, 'enable_approaches');
+    }, [setFieldValue]);
+
+    const selectedApproaches = value?.enable_approaches?.map(({ approach }) => approach);
+
+    return (
+        <Container heading={strings.enablingApproachesTitle}>
+            <ListView
+                layout="block"
+                spacing="sm"
+            >
+                <InputSection
+                    title={strings.enablingApproachesTitle}
+                    description={strings.enablingApproachesDescription}
+                >
+                    <NonFieldError error={getErrorObject(error?.enable_approaches)} />
+                    <Checklist
+                        name={undefined}
+                        options={eapApproachOptions}
+                        onChange={handleApproachChecklistChange}
+                        value={selectedApproaches}
+                        disabled={disabled}
+                        keySelector={approachesKeySelector}
+                        labelSelector={stringValueSelector}
+                        checkListLayout="grid"
+                        checkListLayoutPreferredGridColumns={3}
+                    />
+                </InputSection>
+                {value?.enable_approaches?.map((approach, index) => (
+                    <ApproachesInput
+                        approachTitle={eapApproachLabelMapping?.[approach.approach]}
+                        key={approach.approach}
+                        index={index}
+                        value={approach}
+                        onChange={onApproachChange}
+                        onRemove={onApproachRemove}
+                        error={getErrorObject(error?.enable_approaches)}
+                        disabled={disabled}
+                    />
+                ))}
+            </ListView>
+        </Container>
+    );
+}
+
+export default EnablingApproaches;
diff --git a/app/src/views/SimplifiedEapForm/IndicatorInput/index.tsx b/app/src/views/SimplifiedEapForm/IndicatorInput/index.tsx
new file mode 100644
index 0000000000..a0b49bb9db
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/IndicatorInput/index.tsx
@@ -0,0 +1,98 @@
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    InlineLayout,
+    ListView,
+    NumberInput,
+    TextInput,
+} from '@ifrc-go/ui';
+import {
+    type ArrayError,
+    getErrorObject,
+    type PartialForm,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import { type components } from '#generated/types';
+
+type Indicator = components['schemas']['Indicator'] & { client_id: string };
+type IndicatorFormFields = PartialForm<Indicator, 'client_id'>
+
+const defaultIndicatorValue: IndicatorFormFields = {
+    client_id: '-1',
+};
+
+interface Props {
+    value: IndicatorFormFields;
+    error: ArrayError<IndicatorFormFields> | undefined;
+    onChange: (value: SetValueArg<IndicatorFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+
+function IndicatorInput(props: Props) {
+    const {
+        error: errorFromProps,
+        readOnly,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+    } = props;
+
+    const onFieldChange = useFormObject(index, onChange, defaultIndicatorValue);
+
+    const error = (value && value.client_id && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : undefined;
+
+    return (
+        <InlineLayout
+            after={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="action"
+                    // FIXME: use translation
+                    title="Remove"
+                    disabled={disabled || readOnly}
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            )}
+            spacing="sm"
+        >
+            <ListView
+                layout="grid"
+                spacing="sm"
+            >
+                <TextInput
+                    // FIXME: use strings
+                    label="Title"
+                    name="title"
+                    value={value.title}
+                    onChange={onFieldChange}
+                    error={error?.title}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                />
+                <NumberInput
+                    // FIXME: use strings
+                    label="Target"
+                    name="target"
+                    value={value.target}
+                    onChange={onFieldChange}
+                    error={error?.target}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                />
+            </ListView>
+        </InlineLayout>
+    );
+}
+
+export default IndicatorInput;
diff --git a/app/src/views/SimplifiedEapForm/Overview/i18n.json b/app/src/views/SimplifiedEapForm/Overview/i18n.json
new file mode 100644
index 0000000000..2b71f756ef
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/Overview/i18n.json
@@ -0,0 +1,32 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "detailsHeading": "Details",
+        "nationalSociety": "National Society (NS)",
+        "nationalSocietyDescription": "Select National Society that is planning to apply for the EAP",
+        "country": "Country",
+        "countryDescription": "The country will be pre-populated based on the NS selection, but can be adapted as needed.",
+        "disasterType": "Disaster Type",
+        "disasterTypeDescription": "Select the disaster type for which the EAP is needed.",
+        "uploadCoverImage": "Cover Photo",
+        "uploadCoverImageDescription": "Upload a image for the cover page of the publicly published DREF application.",
+        "timeframe": "sEAP Timeframe",
+        "timeframeDescription": "A simplified EAP has a timeframe of two years (unless the early actions are activiated)",
+        "contacts": "Contacts",
+        "nationalHeader": "National",
+        "delegationHeader": "Delegation",
+        "regionalHeader": "Regional and global",
+        "nSContact": "National Society Contact",
+        "nSContactDescription": "National Society contact responsible for the EAP process",
+        "partnerNS": "Partner NS",
+        "partnerNSDescription": "partner National Society contact",
+        "focalPoint": "IFRC Delegation AA Focal Point",
+        "delegation": "IFRC Head of Delegation",
+        "drefFocalPoint": "DREF Focal Point",
+        "drefFocalPointDescription": "The DREF contact person fro IFRC",
+        "regionalFocalPoint": "IFRC Regional AA Focal Point",
+        "regionalManager": "IFRC Regional Ops Manager",
+        "regionalHead": "IFRC Regional Head of DCC",
+        "regionalCoordinator": "IFRC Global Ops Coordinator"
+    }
+}
diff --git a/app/src/views/SimplifiedEapForm/Overview/index.tsx b/app/src/views/SimplifiedEapForm/Overview/index.tsx
new file mode 100644
index 0000000000..b4ce61e0a5
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/Overview/index.tsx
@@ -0,0 +1,259 @@
+import {
+    Container,
+    InputSection,
+    ListView,
+    NumberInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    type PartialForm,
+} from '@togglecorp/toggle-form';
+
+import CountrySelectInput from '#components/domain/CountrySelectInput';
+import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput';
+import ImageWithCaptionInput from '#components/domain/ImageWithCaptionInput';
+import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput';
+import TabPage from '#components/TabPage';
+import { type GoApiBody } from '#utils/restRequest';
+
+import ContactInputsSection from '../ContactInputsSection';
+import { type PartialSimplifiedEapType } from '../schema';
+
+import i18n from './i18n.json';
+
+type EapRegisterRequestBody = GoApiBody<'/api/v2/eap-registration/', 'POST'>;
+type FormFields = PartialForm<EapRegisterRequestBody>;
+
+interface Props {
+    value: PartialSimplifiedEapType;
+    setFieldValue: (...entries: EntriesAsList<PartialSimplifiedEapType>) => void;
+    error: Error<PartialSimplifiedEapType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<React.SetStateAction<Record<number, string>>>;
+    eapRegistrationDetail?: FormFields;
+}
+
+function Overview(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+        eapRegistrationDetail,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const error = getErrorObject(formError);
+
+    const noop = () => {};
+
+    return (
+        <TabPage>
+            <Container
+                heading={strings.detailsHeading}
+                spacing="lg"
+            >
+                <ListView
+                    layout="block"
+                    spacing="sm"
+                >
+                    <InputSection
+                        title={strings.nationalSociety}
+                        description={strings.nationalSocietyDescription}
+                        withAsteriskOnTitle
+                        numPreferredColumns={2}
+                    >
+                        <NationalSocietySelectInput
+                            name="national_society"
+                            onChange={noop}
+                            value={eapRegistrationDetail?.national_society}
+                            disabled={disabled}
+                            readOnly
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.country}
+                        description={strings.countryDescription}
+                        withAsteriskOnTitle
+                        numPreferredColumns={2}
+                    >
+                        <CountrySelectInput
+                            name="country"
+                            value={eapRegistrationDetail?.country}
+                            onChange={noop}
+                            disabled={disabled}
+                            readOnly
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.disasterType}
+                        description={strings.disasterTypeDescription}
+                        withAsteriskOnTitle
+                        numPreferredColumns={2}
+                    >
+                        <DisasterTypeSelectInput
+                            name="disaster_type"
+                            value={eapRegistrationDetail?.disaster_type}
+                            onChange={noop}
+                            disabled={disabled}
+                            readOnly
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.uploadCoverImage}
+                        description={strings.uploadCoverImageDescription}
+                        withAsteriskOnTitle
+                    >
+                        <ImageWithCaptionInput
+                            name="cover_image_file"
+                            url="/api/v2/eap-file/"
+                            value={value?.cover_image_file}
+                            onChange={setFieldValue}
+                            error={getErrorObject(error?.cover_image_file)}
+                            fileIdToUrlMap={fileIdToUrlMap}
+                            setFileIdToUrlMap={setFileIdToUrlMap}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.timeframe}
+                        description={strings.timeframeDescription}
+                        withAsteriskOnTitle
+                        numPreferredColumns={2}
+                    >
+                        <NumberInput
+                            name="seap_timeframe"
+                            value={value?.seap_timeframe}
+                            onChange={setFieldValue}
+                            error={error?.seap_timeframe}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                </ListView>
+            </Container>
+            <Container
+                heading={strings.contacts}
+                spacing="lg"
+            >
+                <ListView
+                    layout="block"
+                    spacing="lg"
+                >
+                    <Container
+                        heading={strings.nationalHeader}
+                        headingLevel={4}
+                    >
+                        <ListView
+                            layout="block"
+                            spacing="sm"
+                        >
+                            <ContactInputsSection
+                                title={strings.nSContact}
+                                description={strings.nSContactDescription}
+                                namePrefix="national_society_contact"
+                                value={value}
+                                setFieldValue={setFieldValue}
+                                error={error}
+                                disabled={disabled}
+                            />
+                            <ContactInputsSection
+                                title={strings.partnerNS}
+                                description={strings.partnerNSDescription}
+                                namePrefix="partner_ns"
+                                value={value}
+                                setFieldValue={setFieldValue}
+                                error={error}
+                                disabled={disabled}
+                            />
+                        </ListView>
+                    </Container>
+                    <Container
+                        heading={strings.delegationHeader}
+                        headingLevel={4}
+                    >
+                        <ListView
+                            layout="block"
+                            spacing="sm"
+                        >
+                            <ContactInputsSection
+                                title={strings.focalPoint}
+                                namePrefix="ifrc_delegation_focal_point"
+                                value={value}
+                                setFieldValue={setFieldValue}
+                                error={error}
+                                disabled={disabled}
+                            />
+                            <ContactInputsSection
+                                title={strings.delegation}
+                                namePrefix="ifrc_head_of_delegation"
+                                value={value}
+                                setFieldValue={setFieldValue}
+                                error={error}
+                                disabled={disabled}
+                            />
+                        </ListView>
+                    </Container>
+                    <Container
+                        heading={strings.regionalHeader}
+                        headingLevel={4}
+                    >
+                        <ListView
+                            layout="block"
+                            spacing="sm"
+                        >
+                            <ContactInputsSection
+                                title={strings.drefFocalPoint}
+                                description={strings.drefFocalPointDescription}
+                                namePrefix="dref_focal_point"
+                                value={value}
+                                setFieldValue={setFieldValue}
+                                error={error}
+                                disabled={disabled}
+                            />
+                            <ContactInputsSection
+                                title={strings.regionalFocalPoint}
+                                namePrefix="ifrc_regional_focal_point"
+                                value={value}
+                                setFieldValue={setFieldValue}
+                                error={error}
+                                disabled={disabled}
+                            />
+                            <ContactInputsSection
+                                title={strings.regionalManager}
+                                namePrefix="ifrc_regional_ops_manager"
+                                value={value}
+                                setFieldValue={setFieldValue}
+                                error={error}
+                                disabled={disabled}
+                            />
+                            <ContactInputsSection
+                                title={strings.regionalHead}
+                                namePrefix="ifrc_regional_head_dcc"
+                                value={value}
+                                setFieldValue={setFieldValue}
+                                error={error}
+                                disabled={disabled}
+                            />
+                            <ContactInputsSection
+                                title={strings.regionalCoordinator}
+                                namePrefix="ifrc_global_ops_coordinator"
+                                value={value}
+                                setFieldValue={setFieldValue}
+                                error={error}
+                                disabled={disabled}
+                            />
+                        </ListView>
+                    </Container>
+                </ListView>
+            </Container>
+        </TabPage>
+    );
+}
+
+export default Overview;
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/i18n.json b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/i18n.json
new file mode 100644
index 0000000000..6ffc1a9a75
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/i18n.json
@@ -0,0 +1,14 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "operationPeopleTargeted": "People Targeted",
+        "operationBudget": "Budget",
+        "operationApCode": "AP Code",
+        "operationRemoveButton": "Remove",
+        "operationAddActivityButton": "Add activity",
+        "operationReadinessActivities": "Readiness Activities",
+        "operationPrepositioningActivities": "Pre-positioning Activities",
+        "operationEarlyActionActivities": "Early Action Activities",
+        "operationNoActivitiesMessage": "No activities added yet"
+    }
+}
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
new file mode 100644
index 0000000000..626edc7580
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
@@ -0,0 +1,391 @@
+import { useCallback } from 'react';
+import {
+    AddLineIcon,
+    DeleteBinTwoLineIcon,
+} from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    ExpandableContainer,
+    ListView,
+    NumberInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isNotDefined,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type SetValueArg,
+    useFormArray,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import OperationActivityInput from '#components/domain/OperationActivityInput';
+import NonFieldError from '#components/NonFieldError';
+
+import IndicatorInput from '../../IndicatorInput';
+import { type PartialSimplifiedEapType } from '../../schema';
+
+import i18n from './i18n.json';
+
+type PlannedOperationFormFields = NonNullable<PartialSimplifiedEapType['planned_operations']>[number];
+type EarlyActionFormFields = NonNullable<PlannedOperationFormFields['early_action_activities']>[number];
+type PrepositioningFormFields = NonNullable<PlannedOperationFormFields['prepositioning_activities']>[number];
+type ReadinessFormFields = NonNullable<PlannedOperationFormFields['readiness_activities']>[number];
+type IndicatorFormFields = NonNullable<PlannedOperationFormFields['indicators']>[number];
+
+const defaultOperationValue: PlannedOperationFormFields = {
+    sector: 101,
+};
+
+interface Props {
+    value: PlannedOperationFormFields;
+    error: ArrayError<PlannedOperationFormFields> | undefined;
+    onChange: (value: SetValueArg<PlannedOperationFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    operationTitle?: React.ReactNode;
+}
+
+function OperationsBySectorInput(props: Props) {
+    const {
+        error: errorFromProps,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+        operationTitle,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const onFieldChange = useFormObject(index, onChange, defaultOperationValue);
+
+    const error = (value && value.sector && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.sector])
+        : undefined;
+
+    const {
+        setValue: onEarlyActionChange,
+        removeValue: onEarlyActionRemove,
+    } = useFormArray<'early_action_activities', EarlyActionFormFields>(
+        'early_action_activities' as const,
+        onFieldChange,
+    );
+    const {
+        setValue: onPrepositioningChange,
+        removeValue: onPrepositioningRemove,
+    } = useFormArray<'prepositioning_activities', PrepositioningFormFields>(
+        'prepositioning_activities' as const,
+        onFieldChange,
+    );
+    const {
+        setValue: onReadinessChange,
+        removeValue: onReadinessRemove,
+    } = useFormArray<'readiness_activities', ReadinessFormFields>(
+        'readiness_activities' as const,
+        onFieldChange,
+    );
+    const {
+        setValue: onIndicatorChange,
+        removeValue: onIndicatorRemove,
+    } = useFormArray<'indicators', IndicatorFormFields>(
+        'indicators' as const,
+        onFieldChange,
+    );
+
+    const handleEarlyActionAddButtonClick = useCallback(
+        () => {
+            const newActionItem: EarlyActionFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: EarlyActionFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newActionItem]
+                ),
+                'early_action_activities' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    const handlePrepositioningAddButtonClick = useCallback(
+        () => {
+            const newActionItem: PrepositioningFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: PrepositioningFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newActionItem]
+                ),
+                'prepositioning_activities' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    const handleReadinessAddButtonClick = useCallback(
+        () => {
+            const newActionItem: ReadinessFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: ReadinessFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newActionItem]
+                ),
+                'readiness_activities' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    const handleIndicatorAddButtonClick = useCallback(
+        () => {
+            const newIndicator: IndicatorFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: IndicatorFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newIndicator]
+                ),
+                'indicators' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
+    return (
+        <ExpandableContainer
+            heading={operationTitle ?? '--'}
+            headerActions={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="action"
+                    disabled={disabled}
+                    title={strings.operationRemoveButton}
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            )}
+            withPadding
+            withBackground
+            initiallyExpanded
+            withHeaderBorder
+            // FIXME: add non field error and error indicator
+        >
+            <ListView layout="block">
+                <ListView
+                    layout="grid"
+                    numPreferredGridColumns={3}
+                >
+                    <NumberInput
+                        label={strings.operationPeopleTargeted}
+                        name="people_targeted"
+                        value={value?.people_targeted}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.people_targeted}
+                    />
+                    <NumberInput
+                        label={strings.operationBudget}
+                        name="budget_per_sector"
+                        value={value?.budget_per_sector}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.budget_per_sector}
+                    />
+                    <NumberInput
+                        label={strings.operationApCode}
+                        name="ap_code"
+                        value={value?.ap_code}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.ap_code}
+                    />
+                </ListView>
+                <ListView
+                    layout="block"
+                    spacing="2xs"
+                    // FIXME: following can be converted into a component and reused
+                >
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        withCompactMessage
+                        headingLevel={6}
+                        // FIXME: use strings
+                        heading="Indicators"
+                        footerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handleIndicatorAddButtonClick}
+                                spacing="sm"
+                                disabled={disabled}
+                                before={<AddLineIcon />}
+                                // FIXME: use strings
+                            >
+                                Add Indicator
+                            </Button>
+                        )}
+                        empty={isNotDefined(value.indicators) || value.indicators.length === 0}
+                        // FIXME: use strings
+                        emptyMessage="No indicators yet"
+                    >
+                        <ListView layout="block">
+                            {value.indicators?.map((indicator, i) => (
+                                <IndicatorInput
+                                    key={indicator.client_id}
+                                    index={i}
+                                    value={indicator}
+                                    onChange={onIndicatorChange}
+                                    onRemove={onIndicatorRemove}
+                                    error={getErrorObject(error?.indicators)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.operationReadinessActivities}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handleReadinessAddButtonClick}
+                                spacing="sm"
+                                disabled={disabled}
+                                before={<AddLineIcon />}
+                            >
+                                {strings.operationAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.readiness_activities)
+                            || value.readiness_activities.length === 0}
+                        emptyMessage={strings.operationNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.readiness_activities)
+                            }
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.readiness_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onReadinessChange}
+                                    onRemove={onReadinessRemove}
+                                    error={getErrorObject(error?.readiness_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.operationPrepositioningActivities}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handlePrepositioningAddButtonClick}
+                                disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
+                            >
+                                {strings.operationAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.prepositioning_activities)
+                            || value.prepositioning_activities.length === 0}
+                        emptyMessage={strings.operationNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.prepositioning_activities)
+                            }
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.prepositioning_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onPrepositioningChange}
+                                    onRemove={onPrepositioningRemove}
+                                    error={getErrorObject(error?.prepositioning_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        spacing="sm"
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.operationEarlyActionActivities}
+                        headingLevel={5}
+                        footerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handleEarlyActionAddButtonClick}
+                                disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
+                            >
+                                {strings.operationAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.early_action_activities)
+                            || value.early_action_activities.length === 0}
+                        emptyMessage={strings.operationNoActivitiesMessage}
+                        headerDescription={(
+                            <NonFieldError error={getErrorObject(error?.early_action_activities)} />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.early_action_activities?.map((activity, i) => (
+                                <OperationActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onEarlyActionChange}
+                                    onRemove={onEarlyActionRemove}
+                                    error={getErrorObject(error?.early_action_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                </ListView>
+            </ListView>
+        </ExpandableContainer>
+    );
+}
+
+export default OperationsBySectorInput;
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/i18n.json b/app/src/views/SimplifiedEapForm/PlannedOperations/i18n.json
new file mode 100644
index 0000000000..fe89c1f8e0
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/i18n.json
@@ -0,0 +1,7 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "plannedOperationsTitle": "Planned Operations",
+        "plannedOperationsDescription": "Select sectors which are used in this Early Action Protocol."
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx b/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
new file mode 100644
index 0000000000..436bdd6d2a
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
@@ -0,0 +1,140 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import {
+    Checklist,
+    Container,
+    InputSection,
+    ListView,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { stringValueSelector } from '@ifrc-go/ui/utils';
+import { listToMap } from '@togglecorp/fujs';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import NonFieldError from '#components/NonFieldError';
+import TabPage from '#components/TabPage';
+import { type components } from '#generated/types';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+
+import { type PartialSimplifiedEapType } from '../schema';
+import OperationInput from './OperationsInput';
+
+import i18n from './i18n.json';
+
+type EapSector = components['schemas']['EapSectorEnumKey'];
+type EapSectorOption = components['schemas']['EapSectorEnum'];
+
+type PlannedOperationFormFields = NonNullable<PartialSimplifiedEapType['planned_operations']>[number];
+function sectorKeySelector(option: EapSectorOption) {
+    return option.key;
+}
+
+interface Props {
+    value: PartialSimplifiedEapType;
+    error: Error<PartialSimplifiedEapType> | undefined;
+    disabled?: boolean;
+    setFieldValue: (...entries: EntriesAsList<PartialSimplifiedEapType>) => void;
+}
+
+function PlannedOperations(props: Props) {
+    const {
+        value,
+        error: formError,
+        disabled,
+        setFieldValue,
+    } = props;
+
+    const error = getErrorObject(formError);
+    const strings = useTranslation(i18n);
+    const { eap_sector: eapSectorOptions } = useGlobalEnums();
+
+    const eapSectorLabelMapping = useMemo(() => (
+        listToMap(
+            eapSectorOptions,
+            ({ key }) => key,
+            ({ value: label }) => label,
+        )
+    ), [eapSectorOptions]);
+
+    const {
+        setValue: onOperationChange,
+        removeValue: onOperationRemove,
+    } = useFormArray<'planned_operations', PlannedOperationFormFields>(
+        'planned_operations',
+        setFieldValue,
+    );
+
+    const handleOperationChecklistChange = useCallback((sectors: EapSector[] | undefined) => {
+        setFieldValue((previousValue: PlannedOperationFormFields[] | undefined) => {
+            const previousValueMapping = listToMap(
+                previousValue,
+                ({ sector }) => sector,
+            );
+
+            return sectors?.map((sector) => {
+                const prevSectorValue = previousValueMapping?.[sector];
+
+                if (prevSectorValue) {
+                    return prevSectorValue;
+                }
+
+                return {
+                    sector,
+                } satisfies PlannedOperationFormFields;
+            });
+        }, 'planned_operations');
+    }, [setFieldValue]);
+
+    const selectedSectors = value?.planned_operations?.map(({ sector }) => sector);
+
+    return (
+        <TabPage>
+            <Container heading={strings.plannedOperationsTitle}>
+                <ListView
+                    layout="block"
+                    spacing="sm"
+                >
+                    <InputSection
+                        title={strings.plannedOperationsTitle}
+                        description={strings.plannedOperationsDescription}
+                    >
+                        <NonFieldError error={getErrorObject(error?.planned_operations)} />
+                        <Checklist
+                            name={undefined}
+                            options={eapSectorOptions}
+                            value={selectedSectors}
+                            onChange={handleOperationChecklistChange}
+                            disabled={disabled}
+                            keySelector={sectorKeySelector}
+                            labelSelector={stringValueSelector}
+                            checkListLayout="grid"
+                            checkListLayoutPreferredGridColumns={3}
+                        />
+
+                    </InputSection>
+                    {value?.planned_operations?.map((operation, index) => (
+                        <OperationInput
+                            operationTitle={eapSectorLabelMapping?.[operation.sector]}
+                            key={operation.sector}
+                            index={index}
+                            value={operation}
+                            onChange={onOperationChange}
+                            onRemove={onOperationRemove}
+                            error={getErrorObject(error?.planned_operations)}
+                            disabled={disabled}
+                        />
+                    ))}
+                </ListView>
+            </Container>
+        </TabPage>
+    );
+}
+
+export default PlannedOperations;
diff --git a/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json b/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
new file mode 100644
index 0000000000..ae276f6add
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
@@ -0,0 +1,14 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "simplifiedEapRiskHeading": "Risk Analysis",
+        "simplifiedEapRiskDescription": "Which hazard needs to be addressed by aniticipatory actions in the country as a priority? Provide an explanation on the reasons that the selected hazard was chosen for this simplified Eap, why it is a major problem in the country and the humanitarian impacts it has caused in the past. Describe the extent to which this hazard has produced and/or will produce negative impacts on lives, livelihoods, well-being and other development aspects.",
+        "simplifiedHistoricalImpact": "Prioritized hazard and its historical Impact",
+        "simplifiedFormDescriptionLabel": "Description",
+        "simplifiedFormRiskProtocol": "Risk selected for the protocol",
+        "simplifiedFormRiskProtocolDescription": "Recognizing that the simplified EAP will not be able to addredd all potential risks and based on the analysis of past impacts, what are the main risks that the National Society has decided to focus on for this plan.",
+        "simplifiedFormEarlyActionSelection": "Early Action Selection",
+        "simplifiedFormSelectedEarlyAction": "Selected early actions",
+        "simplifiedFormSelectedEarlyActionDescription": "Describe the selected early actions and explain how they will address the risks and lead to the intended outcome. Explain how earlyactions were selecred and how they will mitigate the prioritized risk and being about the intended outcome for the most vulnerable, at-risk individuals and communities."
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx b/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx
new file mode 100644
index 0000000000..58e1c7ab94
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx
@@ -0,0 +1,135 @@
+import {
+    Container,
+    InputSection,
+    ListView,
+    TextArea,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+
+import MultiImageWithCaptionInput from '#components/domain/MultiImageWithCaptionInput';
+import TabPage from '#components/TabPage';
+
+import { type PartialSimplifiedEapType } from '../schema';
+
+import i18n from './i18n.json';
+
+interface Props {
+    value: PartialSimplifiedEapType;
+    setFieldValue: (...entries: EntriesAsList<PartialSimplifiedEapType>) => void;
+    error: Error<PartialSimplifiedEapType> | undefined;
+    disabled?: boolean;
+    fileIdToUrlMap: Record<number, string>;
+    setFileIdToUrlMap?: React.Dispatch<React.SetStateAction<Record<number, string>>>;
+}
+
+function RiskAnalysis(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        fileIdToUrlMap,
+        setFileIdToUrlMap,
+    } = props;
+
+    const error = getErrorObject(formError);
+    const strings = useTranslation(i18n);
+
+    return (
+        <TabPage>
+            <Container heading={strings.simplifiedEapRiskHeading}>
+                <ListView
+                    layout="block"
+                    spacing="sm"
+                >
+                    <InputSection
+                        title={strings.simplifiedHistoricalImpact}
+                        description={strings.simplifiedEapRiskDescription}
+                        withAsteriskOnTitle
+                    >
+                        <TextArea
+                            label={strings.simplifiedFormDescriptionLabel}
+                            name="prioritized_hazard_and_impact"
+                            value={value?.prioritized_hazard_and_impact}
+                            onChange={setFieldValue}
+                            error={error?.prioritized_hazard_and_impact}
+                            disabled={disabled}
+                        />
+                        <MultiImageWithCaptionInput
+                            name="hazard_impact_images"
+                            url="/api/v2/eap-file/multiple/"
+                            value={value?.hazard_impact_images}
+                            onChange={setFieldValue}
+                            error={getErrorObject(error?.hazard_impact_images)}
+                            fileIdToUrlMap={fileIdToUrlMap}
+                            setFileIdToUrlMap={setFileIdToUrlMap}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.simplifiedFormRiskProtocol}
+                        description={strings.simplifiedFormRiskProtocolDescription}
+                        withAsteriskOnTitle
+                    >
+                        <TextArea
+                            label={strings.simplifiedFormDescriptionLabel}
+                            name="risks_selected_protocols"
+                            value={value?.risks_selected_protocols}
+                            onChange={setFieldValue}
+                            error={error?.risks_selected_protocols}
+                            disabled={disabled}
+                        />
+                        <MultiImageWithCaptionInput
+                            name="risk_selected_protocols_images"
+                            url="/api/v2/eap-file/multiple/"
+                            value={value?.risk_selected_protocols_images}
+                            onChange={setFieldValue}
+                            error={getErrorObject(error?.risk_selected_protocols_images)}
+                            fileIdToUrlMap={fileIdToUrlMap}
+                            setFileIdToUrlMap={setFileIdToUrlMap}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                </ListView>
+            </Container>
+            <Container heading={strings.simplifiedFormEarlyActionSelection}>
+                <ListView
+                    layout="block"
+                    spacing="sm"
+                >
+                    <InputSection
+                        title={strings.simplifiedFormSelectedEarlyAction}
+                        description={strings.simplifiedFormSelectedEarlyActionDescription}
+                        withAsteriskOnTitle
+                    >
+                        <TextArea
+                            label={strings.simplifiedFormDescriptionLabel}
+                            name="selected_early_actions"
+                            value={value?.selected_early_actions}
+                            onChange={setFieldValue}
+                            error={error?.selected_early_actions}
+                            disabled={disabled}
+                        />
+                        <MultiImageWithCaptionInput
+                            name="selected_early_actions_images"
+                            url="/api/v2/eap-file/multiple/"
+                            value={value?.selected_early_actions_images}
+                            onChange={setFieldValue}
+                            error={getErrorObject(error?.selected_early_actions_images)}
+                            fileIdToUrlMap={fileIdToUrlMap}
+                            setFileIdToUrlMap={setFileIdToUrlMap}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                </ListView>
+            </Container>
+        </TabPage>
+    );
+}
+
+export default RiskAnalysis;
diff --git a/app/src/views/SimplifiedEapForm/common.tsx b/app/src/views/SimplifiedEapForm/common.tsx
new file mode 100644
index 0000000000..b1acd48662
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/common.tsx
@@ -0,0 +1,124 @@
+import { isNotDefined } from '@togglecorp/fujs';
+import {
+    analyzeErrors,
+    type Error,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+
+import { type PartialSimplifiedEapType } from './schema';
+
+export type TabKeys = 'overview' | 'riskAnalysis' | 'earlyAction' | 'plannedOperations' | 'enablingApproaches' | 'deliveryAndBudget';
+
+const overviewTabFields: (keyof PartialSimplifiedEapType)[] = [
+    'cover_image_file',
+    'seap_timeframe',
+    'national_society_contact_name',
+    'national_society_contact_title',
+    'national_society_contact_email',
+    'national_society_contact_phone_number',
+    'partner_ns_name',
+    'partner_ns_title',
+    'partner_ns_email',
+    'partner_ns_phone_number',
+    'dref_focal_point_name',
+    'dref_focal_point_email',
+    'dref_focal_point_phone_number',
+    'ifrc_delegation_focal_point_name',
+    'ifrc_delegation_focal_point_title',
+    'ifrc_delegation_focal_point_email',
+    'ifrc_delegation_focal_point_phone_number',
+    'dref_focal_point_name',
+    'dref_focal_point_title',
+    'dref_focal_point_email',
+    'dref_focal_point_phone_number',
+    'ifrc_regional_focal_point_name',
+    'ifrc_regional_focal_point_title',
+    'ifrc_regional_focal_point_email',
+    'ifrc_regional_focal_point_phone_number',
+    'ifrc_regional_ops_manager_name',
+    'ifrc_regional_ops_manager_title',
+    'ifrc_regional_ops_manager_email',
+    'ifrc_regional_ops_manager_phone_number',
+    'ifrc_regional_head_dcc_name',
+    'ifrc_regional_head_dcc_title',
+    'ifrc_regional_head_dcc_email',
+    'ifrc_regional_head_dcc_phone_number',
+    'ifrc_global_ops_coordinator_name',
+    'ifrc_global_ops_coordinator_title',
+    'ifrc_global_ops_coordinator_email',
+    'ifrc_global_ops_coordinator_phone_number',
+] satisfies (keyof PartialSimplifiedEapType)[];
+
+const riskAnalysisTabFields: (keyof PartialSimplifiedEapType)[] = [
+    'prioritized_hazard_and_impact',
+    'hazard_impact_images',
+    'risks_selected_protocols',
+    'risk_selected_protocols_images',
+    'selected_early_actions',
+    'selected_early_actions_images',
+] satisfies (keyof PartialSimplifiedEapType)[];
+
+const earlyActionTabFields: (keyof PartialSimplifiedEapType)[] = [
+    'overall_objective_intervention',
+    'potential_geographical_high_risk_areas',
+    'admin2',
+    'people_targeted',
+    'assisted_through_operation',
+    'selection_criteria',
+    'trigger_statement',
+    'seap_lead_time',
+    'seap_lead_timeframe_unit',
+    'operational_timeframe',
+    'operational_timeframe_unit',
+    'trigger_threshold_justification',
+    'next_step_towards_full_eap',
+] satisfies (keyof PartialSimplifiedEapType)[];
+
+const plannedOperationsTabFields: (keyof PartialSimplifiedEapType)[] = [
+    'planned_operations',
+] satisfies (keyof PartialSimplifiedEapType)[];
+
+const enablingApproachesTabFields: (keyof PartialSimplifiedEapType)[] = [
+    'enable_approaches',
+] satisfies (keyof PartialSimplifiedEapType)[];
+
+const deliveryAndBudgetTabFields: (keyof PartialSimplifiedEapType)[] = [
+    'early_action_capability',
+    'rcrc_movement_involvement',
+    'total_budget',
+    'readiness_budget',
+    'pre_positioning_budget',
+    'early_action_budget',
+    'budget_file',
+] satisfies (keyof PartialSimplifiedEapType)[];
+
+const tabToFieldsMap: Record<TabKeys, (keyof PartialSimplifiedEapType)[]> = {
+    overview: overviewTabFields,
+    riskAnalysis: riskAnalysisTabFields,
+    earlyAction: earlyActionTabFields,
+    plannedOperations: plannedOperationsTabFields,
+    enablingApproaches: enablingApproachesTabFields,
+    deliveryAndBudget: deliveryAndBudgetTabFields,
+};
+
+export function checkTabErrors(
+    error: Error<PartialSimplifiedEapType> | undefined,
+    tabKey: TabKeys,
+) {
+    if (isNotDefined(analyzeErrors(error))) {
+        return false;
+    }
+
+    const fields = tabToFieldsMap[tabKey];
+    const fieldErrors = getErrorObject(error);
+
+    const hasErrorOnAnyField = fields.some(
+        (field) => {
+            const fieldError = fieldErrors?.[field];
+            const isErrored = analyzeErrors<PartialSimplifiedEapType>(fieldError);
+            return isErrored;
+        },
+    );
+
+    return hasErrorOnAnyField;
+}
diff --git a/app/src/views/SimplifiedEapForm/i18n.json b/app/src/views/SimplifiedEapForm/i18n.json
new file mode 100644
index 0000000000..a895aa311e
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/i18n.json
@@ -0,0 +1,20 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "simplifiedEapHeading": "Simplified EAP form",
+        "simplifiedEapDescription": "Use the following form to submit the details of your Simplified Early Action Protocols (sEAP) submission",
+        "simplifiedEapOverview": "Overview",
+        "simplifiedEapRiskAnalysis": "Risk Analysis & Early Action Selection",
+        "simplifiedEapEarlyAction": "Early Action Intervention",
+        "simplifiedPlannedOperations": "Planned Operations",
+        "simplifiedEnablingApproaches": "Enabling Approaches",
+        "simplifiedDeliverAndBudget": "Conditions to deliver & budgets",
+        "simplifiedCancelButton": "Cancel",
+        "simplifiedBackButton": "Back",
+        "simplifiedNextButton": "Next",
+        "simplifiedSaveButton": "Save",
+        "eapSimplifiedFailure": "Sorry could not create a new Simplified EAP right now!",
+        "eapSimplifiedSuccess": "Successfully created a new Simplified EAP!",
+        "eapSimplifiedUpdateMessage": "Simplified EAP Form updated Successfully."
+    }
+}
diff --git a/app/src/views/SimplifiedEapForm/index.tsx b/app/src/views/SimplifiedEapForm/index.tsx
new file mode 100644
index 0000000000..a217f57e32
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/index.tsx
@@ -0,0 +1,586 @@
+import {
+    type ElementRef,
+    useCallback,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { useParams } from 'react-router-dom';
+import {
+    Button,
+    ListView,
+    Tab,
+    TabList,
+    TabPanel,
+    Tabs,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { injectClientId } from '@ifrc-go/ui/utils';
+import {
+    compareNumber,
+    isDefined,
+    isNotDefined,
+    isTruthyString,
+    listToMap,
+} from '@togglecorp/fujs';
+import {
+    createSubmitHandler,
+    removeNull,
+    useForm,
+} from '@togglecorp/toggle-form';
+
+import Link from '#components/Link';
+import Page from '#components/Page';
+import useAlert from '#hooks/useAlert';
+import useRouting from '#hooks/useRouting';
+import {
+    type GoApiBody,
+    type GoApiResponse,
+    useLazyRequest,
+    useRequest,
+} from '#utils/restRequest';
+import {
+    matchArray,
+    NUM,
+    type ResponseObjectError,
+    transformObjectError,
+} from '#utils/restRequest/error';
+
+import {
+    checkTabErrors,
+    type TabKeys,
+} from './common';
+import DeliveryAndBudget from './DeliveryAndBudget';
+import EarlyAction from './EarlyAction';
+import EnablingApproaches from './EnablingApproaches';
+import Overview from './Overview';
+import PlannedOperations from './PlannedOperations';
+import RiskAnalysis from './RiskAnalysis';
+import {
+    formSchema,
+    type PartialSimplifiedEapType,
+} from './schema';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type EapSimplifiedRequestBody = GoApiBody<'/api/v2/simplified-eap/', 'POST'>;
+type GetSimplifiedResponse = GoApiResponse<'/api/v2/simplified-eap/{id}/'>;
+
+function getNextStep(current: TabKeys, direction: 1 | -1) {
+    const tabKeyList: TabKeys[] = [
+        'overview',
+        'riskAnalysis',
+        'earlyAction',
+        'plannedOperations',
+        'enablingApproaches',
+        'deliveryAndBudget',
+    ];
+
+    const currentIndex = tabKeyList.findIndex((key) => key === current);
+
+    return tabKeyList[currentIndex + direction];
+}
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+    const { navigate } = useRouting();
+
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        setError,
+        validate,
+        setValue,
+    } = useForm(formSchema, { value: {} });
+
+    const alert = useAlert();
+    const [fileIdToUrlMap, setFileIdToUrlMap] = useState<Record<number, string>>({});
+    const { eapId } = useParams<{ eapId: string }>();
+
+    const updateFileUrlMapping = useCallback((response: GetSimplifiedResponse) => {
+        setFileIdToUrlMap((prevMap) => {
+            const {
+                cover_image_file,
+
+                hazard_impact_images,
+                risk_selected_protocols_images,
+                selected_early_actions_images,
+
+                budget_file_details,
+            } = response;
+
+            return {
+                ...prevMap,
+                ...listToMap(
+                    [
+                        cover_image_file,
+                        ...hazard_impact_images ?? [],
+                        ...risk_selected_protocols_images ?? [],
+                        ...selected_early_actions_images ?? [],
+                        budget_file_details,
+                    ].map(
+                        (eapFile) => {
+                            if (isNotDefined(eapFile)) {
+                                return undefined;
+                            }
+
+                            const {
+                                id,
+                                file,
+                            } = eapFile;
+
+                            if (isNotDefined(id) || isNotDefined(file)) {
+                                return undefined;
+                            }
+
+                            return {
+                                id,
+                                file,
+                            };
+                        },
+                    ).filter(isDefined),
+                    (file) => file.id,
+                    (file) => file.file,
+                ),
+            };
+        });
+    }, []);
+
+    const loadResponseToFormValue = useCallback((response: GetSimplifiedResponse) => {
+        updateFileUrlMapping(response);
+
+        const {
+            planned_operations,
+            enable_approaches,
+            cover_image_file,
+            hazard_impact_images,
+            selected_early_actions_images,
+            risk_selected_protocols_images,
+            ...otherValues
+        } = removeNull(response);
+
+        setValue({
+            ...otherValues,
+
+            cover_image_file: isDefined(cover_image_file)
+                ? injectClientId(cover_image_file)
+                : undefined,
+
+            hazard_impact_images: hazard_impact_images?.map(injectClientId),
+            selected_early_actions_images: selected_early_actions_images?.map(injectClientId),
+            risk_selected_protocols_images: risk_selected_protocols_images?.map(injectClientId),
+
+            planned_operations: planned_operations?.map((intervention) => ({
+                ...intervention,
+                indicators: intervention.indicators?.map(injectClientId),
+                early_action_activities: intervention.early_action_activities?.map(injectClientId),
+                readiness_activities: intervention.readiness_activities?.map(injectClientId),
+                prepositioning_activities: intervention.prepositioning_activities
+                    ?.map(injectClientId),
+            })),
+            enable_approaches: enable_approaches?.map((approach) => ({
+                ...approach,
+                indicators: approach.indicators?.map(injectClientId),
+                early_action_activities: approach.early_action_activities?.map(injectClientId),
+                readiness_activities: approach.readiness_activities?.map(injectClientId),
+                prepositioning_activities: approach.prepositioning_activities?.map(injectClientId),
+            })),
+        });
+    }, [updateFileUrlMapping, setValue]);
+
+    const processServerErrors = useCallback((errors: ResponseObjectError) => {
+        setError(transformObjectError(
+            errors,
+            (locations) => {
+                let match = matchArray(locations, ['cover_image_file', NUM]);
+                if (isDefined(match)) {
+                    return value?.cover_image_file?.client_id;
+                }
+
+                match = matchArray(locations, ['hazard_impact_images', NUM]);
+                if (isDefined(match)) {
+                    const [index] = match;
+                    return value?.hazard_impact_images?.[index!]?.client_id;
+                }
+
+                match = matchArray(locations, ['risk_selected_protocols_images', NUM]);
+                if (isDefined(match)) {
+                    const [index] = match;
+                    return value?.risk_selected_protocols_images?.[index!]?.client_id;
+                }
+
+                match = matchArray(locations, ['selected_early_actions_images', NUM]);
+                if (isDefined(match)) {
+                    const [index] = match;
+                    return value?.selected_early_actions_images?.[index!]?.client_id;
+                }
+
+                match = matchArray(locations, ['planned_operations', NUM, 'early_action_activities', NUM]);
+                if (isDefined(match)) {
+                    const [poIndex, index] = match;
+                    return value?.planned_operations?.[poIndex!]
+                        ?.early_action_activities?.[index!]?.client_id;
+                }
+                match = matchArray(locations, ['planned_operations', NUM, 'readiness_activities', NUM]);
+                if (isDefined(match)) {
+                    const [poIndex, index] = match;
+                    return value?.planned_operations?.[poIndex!]
+                        ?.readiness_activities?.[index!]?.client_id;
+                }
+                match = matchArray(locations, ['planned_operations', NUM, 'prepositioning_activities', NUM]);
+                if (isDefined(match)) {
+                    const [poIndex, index] = match;
+                    return value?.planned_operations?.[poIndex!]
+                        ?.prepositioning_activities?.[index!]?.client_id;
+                }
+                match = matchArray(locations, ['planned_operations', NUM]);
+                if (isDefined(match)) {
+                    const [poIndex] = match;
+                    return value?.planned_operations?.[poIndex!]?.sector;
+                }
+                match = matchArray(locations, ['enable_approaches', NUM, 'early_action_activities', NUM]);
+                if (isDefined(match)) {
+                    const [eaIndex, index] = match;
+                    return value?.enable_approaches?.[eaIndex!]
+                        ?.early_action_activities?.[index!]?.client_id;
+                }
+                match = matchArray(locations, ['enable_approaches', NUM, 'readiness_activities', NUM]);
+                if (isDefined(match)) {
+                    const [eaIndex, index] = match;
+                    return value?.enable_approaches?.[eaIndex!]
+                        ?.readiness_activities?.[index!]?.client_id;
+                }
+                match = matchArray(locations, ['enable_approaches', NUM, 'prepositioning_activities', NUM]);
+                if (isDefined(match)) {
+                    const [eaIndex, index] = match;
+                    return value?.enable_approaches?.[eaIndex!]
+                        ?.prepositioning_activities?.[index!]?.client_id;
+                }
+                match = matchArray(locations, ['enable_approaches', NUM]);
+                if (isDefined(match)) {
+                    const [eaIndex] = match;
+                    return value?.enable_approaches?.[eaIndex!]?.approach;
+                }
+
+                return undefined;
+            },
+        ));
+    }, [value, setError]);
+
+    const {
+        pending: fetchingEap,
+        response: eapDetailResponse,
+    } = useRequest({
+        skip: isNotDefined(eapId),
+        url: '/api/v2/eap-registration/{id}/',
+        pathVariables: isTruthyString(eapId) ? {
+            id: Number(eapId),
+        } : undefined,
+    });
+
+    // FIXME: get the latest simplified properly
+    const latestSimplifiedEapId = eapDetailResponse?.simplified_eap_details?.toSorted(
+        (a, b) => compareNumber(a.version, b.version, -1),
+    )?.[0]?.id;
+
+    // FIXME: handle errors
+    useRequest({
+        skip: isNotDefined(latestSimplifiedEapId),
+        url: '/api/v2/simplified-eap/{id}/',
+        pathVariables: isDefined(latestSimplifiedEapId) ? ({
+            id: latestSimplifiedEapId,
+        }) : undefined,
+        onSuccess: (simplifiedEapResponse) => loadResponseToFormValue(simplifiedEapResponse),
+    });
+
+    const {
+        pending: eapSimplifiedPending,
+        trigger: createSimplifiedEap,
+    } = useLazyRequest({
+        method: 'POST',
+        url: '/api/v2/simplified-eap/',
+        body: (body: EapSimplifiedRequestBody) => body,
+        onSuccess: () => {
+            const message = strings.eapSimplifiedSuccess;
+            alert.show(
+                message,
+                { variant: 'success' },
+            );
+            navigate('accountMyFormsEap');
+        },
+        onFailure: (err) => {
+            const {
+                value: {
+                    formErrors,
+                    messageForNotification,
+                },
+            } = err;
+
+            processServerErrors(formErrors);
+
+            alert.show(
+                strings.eapSimplifiedFailure,
+                {
+                    variant: 'danger',
+                    description: messageForNotification,
+                },
+            );
+        },
+    });
+
+    const {
+        pending: updateSimplifiedFormPending,
+        trigger: updateSimplifiedEap,
+    } = useLazyRequest({
+        url: '/api/v2/simplified-eap/{id}/',
+        method: 'PATCH',
+        pathVariables: {
+            id: Number(latestSimplifiedEapId),
+        },
+        body: (formFields: EapSimplifiedRequestBody) => formFields,
+        onSuccess: (response) => {
+            alert.show(
+                strings.eapSimplifiedUpdateMessage,
+                { variant: 'success' },
+            );
+
+            // FIXME: only navigate to accounts page for the submit action
+            navigate(
+                'accountMyFormsEap',
+                { params: { eapId: response.id } },
+            );
+        },
+        onFailure: (err) => {
+            const {
+                value: {
+                    formErrors,
+                    messageForNotification,
+                },
+            } = err;
+
+            processServerErrors(formErrors);
+
+            alert.show(
+                strings.eapSimplifiedFailure,
+                {
+                    variant: 'danger',
+                    description: messageForNotification,
+                },
+            );
+        },
+    });
+
+    const disabled = eapSimplifiedPending || fetchingEap || updateSimplifiedFormPending;
+
+    const handleValidationSuccess = useCallback((validatedFormValue: PartialSimplifiedEapType) => {
+        if (isNotDefined(latestSimplifiedEapId)) {
+            createSimplifiedEap({
+                ...validatedFormValue as EapSimplifiedRequestBody,
+                eap_registration: Number(eapId),
+            });
+        } else {
+            updateSimplifiedEap({
+                ...validatedFormValue,
+                id: latestSimplifiedEapId,
+            } as EapSimplifiedRequestBody);
+        }
+    }, [
+        eapId,
+        createSimplifiedEap,
+        updateSimplifiedEap,
+        latestSimplifiedEapId,
+    ]);
+
+    const [activeTab, setActiveTab] = useState<TabKeys>('overview');
+    const formContentRef = useRef<ElementRef<'div'>>(null);
+
+    const handleFormError = useCallback(() => {
+        setTimeout(() => formContentRef.current?.scrollIntoView(), 200);
+    }, []);
+
+    const handleSave = useMemo(() => (
+        createSubmitHandler(
+            validate,
+            setError,
+            handleValidationSuccess,
+            handleFormError,
+        )
+    ), [
+        handleFormError,
+        handleValidationSuccess,
+        validate,
+        setError,
+    ]);
+
+    const nextStep = getNextStep(activeTab, 1);
+    const prevStep = getNextStep(activeTab, -1);
+
+    const handleTabChange = useCallback((newTab: TabKeys) => {
+        formContentRef.current?.scrollIntoView();
+        setActiveTab(newTab);
+    }, []);
+
+    return (
+        <Tabs
+            value={activeTab}
+            onChange={setActiveTab}
+            styleVariant="step"
+        >
+            <Page
+                className={styles.simplifiedEapForm}
+                heading={strings.simplifiedEapHeading}
+                description={strings.simplifiedEapDescription}
+                actions={(
+                    <>
+                        <Link
+                            to="accountMyFormsEap"
+                            styleVariant="outline"
+                            colorVariant="primary"
+                        >
+                            {strings.simplifiedCancelButton}
+                        </Link>
+                        <Button
+                            name={undefined}
+                            onClick={handleSave}
+                        >
+                            {strings.simplifiedSaveButton}
+                        </Button>
+                    </>
+                )}
+                info={(
+                    <TabList>
+                        <Tab
+                            name="overview"
+                            step={1}
+                            errored={checkTabErrors(formError, 'overview')}
+                        >
+                            {strings.simplifiedEapOverview}
+                        </Tab>
+                        <Tab
+                            name="riskAnalysis"
+                            step={2}
+                            errored={checkTabErrors(formError, 'riskAnalysis')}
+                        >
+                            {strings.simplifiedEapRiskAnalysis}
+                        </Tab>
+                        <Tab
+                            name="earlyAction"
+                            step={3}
+                            errored={checkTabErrors(formError, 'earlyAction')}
+                        >
+                            {strings.simplifiedEapEarlyAction}
+                        </Tab>
+                        <Tab
+                            name="plannedOperations"
+                            step={4}
+                            errored={checkTabErrors(formError, 'plannedOperations')}
+                        >
+                            {strings.simplifiedPlannedOperations}
+                        </Tab>
+                        <Tab
+                            name="enablingApproaches"
+                            step={5}
+                            errored={checkTabErrors(formError, 'enablingApproaches')}
+                        >
+                            {strings.simplifiedEnablingApproaches}
+                        </Tab>
+                        <Tab
+                            name="deliveryAndBudget"
+                            step={6}
+                            errored={checkTabErrors(formError, 'deliveryAndBudget')}
+                        >
+                            {strings.simplifiedDeliverAndBudget}
+                        </Tab>
+                    </TabList>
+                )}
+                withBackgroundColorInMainSection
+                mainSectionClassName={styles.content}
+            >
+                <TabPanel name="overview">
+                    <Overview
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                        eapRegistrationDetail={eapDetailResponse}
+                    />
+                </TabPanel>
+                <TabPanel name="riskAnalysis">
+                    <RiskAnalysis
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                    />
+                </TabPanel>
+                <TabPanel name="earlyAction">
+                    <EarlyAction
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        eapRegistrationDetail={eapDetailResponse}
+                    />
+                </TabPanel>
+                <TabPanel name="plannedOperations">
+                    <PlannedOperations
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                    />
+                </TabPanel>
+                <TabPanel name="enablingApproaches">
+                    <EnablingApproaches
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                    />
+                </TabPanel>
+                <TabPanel name="deliveryAndBudget">
+                    <DeliveryAndBudget
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                    />
+                </TabPanel>
+                <ListView withCenteredContents>
+                    <Button
+                        name={prevStep ?? activeTab}
+                        onClick={handleTabChange}
+                        disabled={isNotDefined(prevStep)}
+                    >
+                        {strings.simplifiedBackButton}
+                    </Button>
+                    {isDefined(nextStep) ? (
+                        <Button
+                            name={nextStep ?? activeTab}
+                            onClick={handleTabChange}
+                        >
+                            {strings.simplifiedNextButton}
+                        </Button>
+                    ) : (
+                        <Button
+                            name={undefined}
+                            onClick={handleSave}
+                        >
+                            {strings.simplifiedSaveButton}
+                        </Button>
+                    )}
+                </ListView>
+            </Page>
+        </Tabs>
+    );
+}
diff --git a/app/src/views/SimplifiedEapForm/schema.ts b/app/src/views/SimplifiedEapForm/schema.ts
new file mode 100644
index 0000000000..123477db9e
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/schema.ts
@@ -0,0 +1,356 @@
+import { type DeepReplace } from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
+import {
+    emailCondition,
+    type LiteralSchema,
+    type ObjectSchema,
+    type PartialForm,
+    type PurgeNull,
+    undefinedValue,
+} from '@togglecorp/toggle-form';
+
+import operationActivitySchema from '#components/domain/OperationActivityInput/schema';
+import { positiveNumberCondition } from '#utils/form';
+import { type GoApiBody } from '#utils/restRequest';
+
+function lessThanEqualToFiveImagesCondition<T>(value: T[] | undefined) {
+    return isDefined(value) && Array.isArray(value) && value.length > 5
+        ? 'Maximum five images are allowed'
+        : undefined;
+}
+
+function maxOperationalTimeframeCondition(value: number | undefined) {
+    return typeof value === 'number' && value > 12
+        ? 'Timeframe cannot be more than 12 months'
+        : undefined;
+}
+
+type EapSimplifiedRequestBody = PurgeNull<GoApiBody<'/api/v2/simplified-eap/', 'POST'>>;
+
+type EnableApproachesResponse = NonNullable<EapSimplifiedRequestBody['enable_approaches']>[number];
+type ApproachEarlyActionResponse = NonNullable<EnableApproachesResponse['early_action_activities']>[number];
+type ApproachPrepositioningResponse = NonNullable<EnableApproachesResponse['prepositioning_activities']>[number];
+type ApproachReadinessResponse = NonNullable<EnableApproachesResponse['readiness_activities']>[number];
+type ApproachIndicatorResponse = NonNullable<EnableApproachesResponse['indicators']>[number];
+
+type PlannedOperationsResponse = NonNullable<EapSimplifiedRequestBody['planned_operations']>[number];
+type EarlyActionResponse = NonNullable<PlannedOperationsResponse['early_action_activities']>[number];
+type PrepositioningResponse = NonNullable<PlannedOperationsResponse['prepositioning_activities']>[number];
+type ReadinessResponse = NonNullable<PlannedOperationsResponse['readiness_activities']>[number];
+type IndicatorResponse = NonNullable<PlannedOperationsResponse['indicators']>[number];
+
+type CoverImageFileResponse = NonNullable<EapSimplifiedRequestBody['cover_image_file']>;
+
+type HazardImagesResponse = NonNullable<EapSimplifiedRequestBody['hazard_impact_images']>[number];
+type RiskImagesResponse = NonNullable<EapSimplifiedRequestBody['risk_selected_protocols_images']>[number];
+type EarlyActionImagesResponse = NonNullable<EapSimplifiedRequestBody['selected_early_actions_images']>[number];
+
+type ApproachEarlyActionFormFields = ApproachEarlyActionResponse & { client_id: string };
+type ApproachPrepositioningFormFields = ApproachPrepositioningResponse & { client_id: string };
+type ApproachReadinessFormFields = ApproachReadinessResponse & { client_id: string };
+type ApproachIndicatorFormFields = ApproachIndicatorResponse & { client_id: string };
+
+type CoverImageFileFields = CoverImageFileResponse & { client_id: string };
+
+type EarlyActionFormFields = EarlyActionResponse & { client_id: string };
+type PrepositioningFormFields = PrepositioningResponse & { client_id: string };
+type ReadinessFormFields = ReadinessResponse & { client_id: string };
+type IndicatorFormFields = IndicatorResponse & { client_id: string };
+
+type HazardImagesFormFields = HazardImagesResponse & { client_id: string };
+type RiskImagesFormFields = RiskImagesResponse & { client_id: string };
+type EarlyActionImagesFormFields = EarlyActionImagesResponse & { client_id: string };
+
+type EnableApproachesResponseFormFields = (
+    DeepReplace<
+        DeepReplace<
+            DeepReplace<
+                DeepReplace<
+                    EnableApproachesResponse,
+                    ApproachEarlyActionResponse,
+                    ApproachEarlyActionFormFields
+                >,
+                ApproachPrepositioningResponse,
+                ApproachPrepositioningFormFields
+            >,
+            ApproachReadinessResponse,
+            ApproachReadinessFormFields
+        >,
+        ApproachIndicatorResponse,
+        ApproachIndicatorFormFields
+    >
+);
+
+type OperationsResponseFormFields = (
+    DeepReplace<
+        DeepReplace<
+            DeepReplace<
+                DeepReplace<
+                    PlannedOperationsResponse,
+                    EarlyActionResponse,
+                    EarlyActionFormFields
+                >,
+                PrepositioningResponse,
+                PrepositioningFormFields
+            >,
+            ReadinessResponse,
+            ReadinessFormFields
+        >,
+        IndicatorResponse,
+        IndicatorFormFields
+    >
+);
+
+type FormFields = (
+    DeepReplace<
+        DeepReplace<
+            DeepReplace<
+                DeepReplace<
+                    DeepReplace<
+                        DeepReplace<
+                            EapSimplifiedRequestBody,
+                            PlannedOperationsResponse,
+                            OperationsResponseFormFields
+                        >,
+                        EnableApproachesResponse,
+                        EnableApproachesResponseFormFields
+                    >,
+                    CoverImageFileResponse,
+                    CoverImageFileFields
+                >,
+                HazardImagesResponse,
+                HazardImagesFormFields
+            >,
+            RiskImagesResponse,
+            RiskImagesFormFields
+        >,
+        EarlyActionImagesResponse,
+        EarlyActionImagesFormFields
+    >
+);
+
+export type PartialSimplifiedEapType = PartialForm<FormFields, 'client_id' | 'sector' | 'approach'>;
+type PlannedOperationalFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifiedEapType['planned_operations']>[number], PartialSimplifiedEapType>['fields']>;
+type EnableApproachesFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifiedEapType['enable_approaches']>[number], PartialSimplifiedEapType>['fields']>;
+type CoverImageFileFormFields = ReturnType<ObjectSchema<PartialSimplifiedEapType['cover_image_file'], PartialSimplifiedEapType>['fields']>;
+type IndicatorFields = ReturnType<
+    ObjectSchema<
+        NonNullable<NonNullable<PartialSimplifiedEapType['planned_operations']>[number]['indicators']>[number],
+        PartialSimplifiedEapType
+    >['fields']
+>;
+type ApproachIndicatorFields = ReturnType<
+    ObjectSchema<
+        NonNullable<NonNullable<PartialSimplifiedEapType['enable_approaches']>[number]['indicators']>[number],
+        PartialSimplifiedEapType
+    >['fields']
+>;
+
+type RiskProtocolsFileFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifiedEapType['risk_selected_protocols_images']>[number], PartialSimplifiedEapType>['fields']>;
+type HazardImpactFileFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifiedEapType['hazard_impact_images']>[number], PartialSimplifiedEapType>['fields']>;
+type EarlyActionFileFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifiedEapType['selected_early_actions_images']>[number], PartialSimplifiedEapType>['fields']>;
+
+type FormSchema = ObjectSchema<PartialSimplifiedEapType>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>;
+
+type FieldKeys = keyof EapSimplifiedRequestBody;
+
+type ContactFieldSuffix = 'name' | 'title' | 'email' | 'phone_number';
+type ExtractContactPrefix<KEY extends FieldKeys> = KEY extends `${infer PREFIX}_name`
+    ? `${PREFIX}_title` extends FieldKeys
+        ? `${PREFIX}_email` extends FieldKeys
+            ? `${PREFIX}_phone_number` extends FieldKeys
+                ? PREFIX
+                : never
+            : never
+        : never
+    : never
+
+export type ValidContactFieldPrefixes = ExtractContactPrefix<FieldKeys>;
+
+function getContactSchema<KEY extends ValidContactFieldPrefixes>(key: KEY) {
+    type ContactSchema = {
+        [K in `${KEY}_${ContactFieldSuffix}`]: LiteralSchema<string | undefined, PartialSimplifiedEapType>
+    }
+
+    return {
+        [`${key}_name`]: {},
+        [`${key}_title`]: {},
+        [`${key}_email`]: { validations: [emailCondition] },
+        [`${key}_phone_number`]: {},
+    } as ContactSchema;
+}
+
+export const formSchema: FormSchema = {
+    fields: (): FormSchemaFields => ({
+        // Overview
+
+        // national_society: {},
+        // country: {},
+        // disaster_type: {},
+
+        cover_image_file: {
+            fields: (): CoverImageFileFormFields => ({
+                client_id: {},
+                caption: {},
+                id: { defaultValue: undefinedValue },
+            }),
+        },
+        seap_timeframe: { required: true },
+
+        ...getContactSchema('national_society_contact'),
+        ...getContactSchema('partner_ns'),
+        ...getContactSchema('ifrc_delegation_focal_point'),
+        ...getContactSchema('ifrc_head_of_delegation'),
+        ...getContactSchema('dref_focal_point'),
+        ...getContactSchema('ifrc_regional_focal_point'),
+        ...getContactSchema('ifrc_regional_ops_manager'),
+        ...getContactSchema('ifrc_regional_head_dcc'),
+        ...getContactSchema('ifrc_global_ops_coordinator'),
+
+        // Risk Analysis
+
+        prioritized_hazard_and_impact: {},
+        hazard_impact_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): HazardImpactFileFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+        risks_selected_protocols: {},
+        risk_selected_protocols_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): RiskProtocolsFileFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+        selected_early_actions: {},
+        selected_early_actions_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): EarlyActionFileFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+
+        // Early Action Interventions
+
+        overall_objective_intervention: {},
+        potential_geographical_high_risk_areas: {},
+        admin2: {
+            defaultValue: [],
+        },
+        people_targeted: { required: true },
+        assisted_through_operation: {},
+        selection_criteria: {},
+        trigger_statement: {},
+        seap_lead_time: { required: true },
+        seap_lead_timeframe_unit: { required: true },
+        operational_timeframe: {
+            required: true,
+            validations: [maxOperationalTimeframeCondition],
+        },
+        operational_timeframe_unit: {},
+        trigger_threshold_justification: {},
+        next_step_towards_full_eap: { required: true },
+
+        // Planned Operations
+
+        planned_operations: {
+            keySelector: (item) => item.sector,
+            member: () => ({
+                fields: (): PlannedOperationalFields => ({
+                    id: { defaultValue: undefinedValue },
+                    sector: {},
+                    budget_per_sector: {},
+                    ap_code: {},
+                    indicators: {
+                        keySelector: (indicator) => indicator.client_id,
+                        member: () => ({
+                            fields: (): IndicatorFields => ({
+                                client_id: {},
+                                id: { defaultValue: undefinedValue },
+                                title: {},
+                                target: { validations: [positiveNumberCondition] },
+                            }),
+                        }),
+                    },
+                    people_targeted: {},
+                    early_action_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                    readiness_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                    prepositioning_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                }),
+            }),
+        },
+
+        // Enabling Approaches
+
+        enable_approaches: {
+            keySelector: (item) => item.approach,
+            member: () => ({
+                fields: (): EnableApproachesFields => ({
+                    id: { defaultValue: undefinedValue },
+                    approach: {},
+                    budget_per_approach: {},
+                    ap_code: {},
+                    indicators: {
+                        keySelector: (indicator) => indicator.client_id,
+                        member: () => ({
+                            fields: (): ApproachIndicatorFields => ({
+                                client_id: {},
+                                id: { defaultValue: undefinedValue },
+                                title: {},
+                                target: { validations: [positiveNumberCondition] },
+                            }),
+                        }),
+                    },
+                    early_action_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                    readiness_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                    prepositioning_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => operationActivitySchema,
+                    },
+                }),
+            }),
+        },
+
+        // Delivery & Budget
+
+        early_action_capability: {},
+        rcrc_movement_involvement: {},
+        total_budget: { required: true },
+        readiness_budget: { required: true },
+        pre_positioning_budget: { required: true },
+        early_action_budget: { required: true },
+        budget_file: { required: true },
+    }),
+};
diff --git a/app/src/views/SimplifiedEapForm/styles.module.css b/app/src/views/SimplifiedEapForm/styles.module.css
new file mode 100644
index 0000000000..c5bb9d5384
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/styles.module.css
@@ -0,0 +1,18 @@
+.simplified-eap-form {
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-2xl);
+
+        .actions {
+            display: flex;
+
+            .page-actions {
+                display: flex;
+                flex-grow: 1;
+                justify-content: center;
+                gap: var(--go-ui-spacing-md);
+            }
+        }
+    }
+}
diff --git a/go-api b/go-api
index fd94c8fca4..cf7bb7efef 160000
--- a/go-api
+++ b/go-api
@@ -1 +1 @@
-Subproject commit fd94c8fca4bd0b1fef3c2ea294ae142a5f650233
+Subproject commit cf7bb7efefeb9401fcc4c083b4e90e40e50ede78
diff --git a/knip.jsonc b/knip.jsonc
index e1f6617abf..8b249e1a01 100644
--- a/knip.jsonc
+++ b/knip.jsonc
@@ -29,7 +29,7 @@
                 "eslint-plugin-react-refresh",
                 "eslint-plugin-simple-import-sort",
                 // We are using this with dotenv and cross-var so we are getting a false positive
-                "openapi-typescript",
+                // "openapi-typescript",
                 // We are using this in eslint.config.ts but we are getting a false positive
                 "@typescript-eslint/parser",
                 "@typescript-eslint/eslint-plugin"
diff --git a/packages/ui/src/components/Checklist/index.tsx b/packages/ui/src/components/Checklist/index.tsx
index cf6c05d970..878cd929d8 100644
--- a/packages/ui/src/components/Checklist/index.tsx
+++ b/packages/ui/src/components/Checklist/index.tsx
@@ -1,4 +1,8 @@
-import React, { useCallback } from 'react';
+import {
+    type ComponentType,
+    type ReactNode,
+    useCallback,
+} from 'react';
 
 import Checkbox, { Props as CheckboxProps } from '#components/Checkbox';
 import InputError from '#components/InputError';
@@ -18,13 +22,13 @@ export interface Props<
     disabled?: boolean;
     error?: string;
     errorOnTooltip?: boolean;
-    hint?: React.ReactNode;
+    hint?: ReactNode;
     hintContainerClassName?: string;
     keySelector: (option: OPTION) => KEY;
-    label?: React.ReactNode;
+    label?: ReactNode;
     labelContainerClassName?: string;
     labelSelector: (option: OPTION) => string;
-    descriptionSelector?: (option: OPTION) => React.ReactNode;
+    descriptionSelector?: (option: OPTION) => ReactNode;
     name: NAME;
     onChange: (newValue: KEY[], name: NAME) => void;
     options: OPTION[] | undefined;
@@ -32,10 +36,13 @@ export interface Props<
     value: KEY[] | undefined | null;
     checkListLayout?: 'inline' | 'block' | 'grid';
     checkListLayoutPreferredGridColumns?: number;
+    checkListLayoutMinGridColumnSize?: string;
     spacing?: SpacingType;
     withPadding?: boolean;
     withBackground?: boolean;
     withDarkBackground?: boolean;
+    renderer?: ComponentType<CheckboxProps<KEY>>
+    withoutOpticalSpacingCorrection?: boolean;
 }
 
 function CheckList<
@@ -63,10 +70,13 @@ function CheckList<
         value,
         checkListLayout = 'inline',
         checkListLayoutPreferredGridColumns,
+        checkListLayoutMinGridColumnSize,
         spacing,
         withPadding,
         withBackground,
         withDarkBackground,
+        renderer = Checkbox<KEY>,
+        withoutOpticalSpacingCorrection,
     } = props;
 
     const handleCheck = useCallback((isSelected: boolean, key: KEY) => {
@@ -100,7 +110,7 @@ function CheckList<
         <RawList<OPTION, KEY, CheckboxProps<KEY>>
             data={options}
             keySelector={keySelector}
-            renderer={Checkbox}
+            renderer={renderer}
             rendererParams={optionListRendererParams}
         />
     );
@@ -124,7 +134,7 @@ function CheckList<
             {checkListLayout === 'inline' && (
                 <ListView
                     withWrap
-                    withSpacingOpticalCorrection
+                    withSpacingOpticalCorrection={!withoutOpticalSpacingCorrection}
                     spacing={spacing}
                 >
                     {checkList}
@@ -133,7 +143,7 @@ function CheckList<
             {checkListLayout === 'block' && (
                 <ListView
                     layout="block"
-                    withSpacingOpticalCorrection
+                    withSpacingOpticalCorrection={!withoutOpticalSpacingCorrection}
                     spacing={spacing}
                 >
                     {checkList}
@@ -143,7 +153,8 @@ function CheckList<
                 <ListView
                     layout="grid"
                     numPreferredGridColumns={checkListLayoutPreferredGridColumns}
-                    withSpacingOpticalCorrection
+                    minGridColumnSize={checkListLayoutMinGridColumnSize}
+                    withSpacingOpticalCorrection={!withoutOpticalSpacingCorrection}
                     spacing={spacing}
                 >
                     {checkList}
diff --git a/packages/ui/src/components/InputSection/index.tsx b/packages/ui/src/components/InputSection/index.tsx
index 2570b94fe0..5fb40510fe 100644
--- a/packages/ui/src/components/InputSection/index.tsx
+++ b/packages/ui/src/components/InputSection/index.tsx
@@ -10,7 +10,7 @@ export interface Props {
     children?: React.ReactNode;
     description?: React.ReactNode;
     // contentSectionClassName?: string;
-    tooltip?: string;
+    tooltip?: React.ReactNode;
     withoutTitleSection?: boolean;
     withFullWidthContent?: boolean;
     withoutPadding?: boolean;
diff --git a/packages/ui/src/components/RawFileInput/styles.module.css b/packages/ui/src/components/RawFileInput/styles.module.css
index 9c9ea05a0c..f724c6bb10 100644
--- a/packages/ui/src/components/RawFileInput/styles.module.css
+++ b/packages/ui/src/components/RawFileInput/styles.module.css
@@ -2,6 +2,7 @@
     display: contents;
 
     .input {
+        position: absolute;
         visibility: hidden;
         width: 0;
         height: 0;
diff --git a/packages/ui/src/components/TabLayout/index.tsx b/packages/ui/src/components/TabLayout/index.tsx
index 6ab2dfdb39..85374a4bc2 100644
--- a/packages/ui/src/components/TabLayout/index.tsx
+++ b/packages/ui/src/components/TabLayout/index.tsx
@@ -1,4 +1,7 @@
-import { CheckFillIcon } from '@ifrc-go/icons';
+import {
+    CheckFillIcon,
+    CloseLineIcon,
+} from '@ifrc-go/icons';
 import { _cs } from '@togglecorp/fujs';
 
 import InlineLayout, { type Props as InlineLayoutProps } from '#components/InlineLayout';
@@ -79,7 +82,6 @@ function TabLayout(props: Props) {
                 stepCompleted && styles.completed,
                 disabled && styles.disabled,
                 active && styles.active,
-                // FIXME: implement this
                 errored && styles.errored,
                 className,
             )}
@@ -87,7 +89,6 @@ function TabLayout(props: Props) {
             withAdditionalInlinePadding={styleVariant === 'pill'}
         >
             {children}
-            <span className={styles.visualFeedback} />
         </InlineLayout>
     );
 
@@ -125,9 +126,10 @@ function TabLayout(props: Props) {
                 <div className={styles.dotWrapper}>
                     <div className={styles.beforeDot} />
                     <div className={styles.dot}>
-                        {stepCompleted && (
+                        {!errored && stepCompleted && (
                             <CheckFillIcon className={styles.icon} />
                         )}
+                        {errored && <CloseLineIcon className={styles.icon} />}
                     </div>
                     <div className={styles.afterDot} />
                 </div>
diff --git a/packages/ui/src/components/TabLayout/styles.module.css b/packages/ui/src/components/TabLayout/styles.module.css
index 2892c12641..4ed14f25ce 100644
--- a/packages/ui/src/components/TabLayout/styles.module.css
+++ b/packages/ui/src/components/TabLayout/styles.module.css
@@ -14,6 +14,10 @@
     user-select: none;
     font-weight: var(--go-ui-font-weight-medium);
 
+    &.errored {
+        text-decoration: underline wavy var(--go-ui-color-primary-red);
+    }
+
     &.color-variant-text {
         --variant-color: var(--go-ui-color-text);
     }
diff --git a/packages/ui/src/components/Table/Cell/index.tsx b/packages/ui/src/components/Table/Cell/index.tsx
index 4dd91da0de..a8fcfa1f2d 100644
--- a/packages/ui/src/components/Table/Cell/index.tsx
+++ b/packages/ui/src/components/Table/Cell/index.tsx
@@ -1,15 +1,22 @@
 import type { ReactNode } from 'react';
-import { isNotDefined } from '@togglecorp/fujs';
+import {
+    _cs,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
 
 export interface CellProps<T extends ReactNode>{
     className?: string;
     value: T | null | undefined;
+    withLightText?: boolean;
 }
 
 function Cell<T extends ReactNode>(props: CellProps<T>) {
     const {
         className,
         value,
+        withLightText,
     } = props;
 
     if (isNotDefined(value)) {
@@ -17,7 +24,13 @@ function Cell<T extends ReactNode>(props: CellProps<T>) {
     }
 
     return (
-        <div className={className}>
+        <div
+            className={_cs(
+                styles.cell,
+                withLightText && styles.withLightText,
+                className,
+            )}
+        >
             {value}
         </div>
     );
diff --git a/packages/ui/src/components/Table/Cell/styles.module.css b/packages/ui/src/components/Table/Cell/styles.module.css
new file mode 100644
index 0000000000..1caa482fc1
--- /dev/null
+++ b/packages/ui/src/components/Table/Cell/styles.module.css
@@ -0,0 +1,5 @@
+.cell {
+    &.with-light-text {
+        color: var(--go-ui-color-text-light);
+    }
+}
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/index.tsx b/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/index.tsx
index 134cafefb4..5c0eeb69b0 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/index.tsx
+++ b/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/index.tsx
@@ -5,12 +5,14 @@ import styles from './styles.module.css';
 export interface Props {
     isExpanded?: boolean;
     variant?: 'start' | 'end' | 'mid' | 'single';
+    disabled?: boolean;
 }
 
 function ExpansionIndicator(props: Props) {
     const {
         isExpanded,
         variant,
+        disabled,
     } = props;
 
     if (!isExpanded) {
@@ -24,6 +26,7 @@ function ExpansionIndicator(props: Props) {
                 variant === 'start' && styles.start,
                 variant === 'end' && styles.end,
                 variant === 'single' && styles.single,
+                disabled && styles.disabled,
             )}
         >
             <div className={styles.startBorder} />
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/styles.module.css b/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/styles.module.css
index d9e86aa760..eddbd84ae8 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/styles.module.css
+++ b/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/styles.module.css
@@ -19,10 +19,11 @@
 
     .indicator {
         flex-shrink: 0;
+        border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-primary-red);
         border-radius: 50%;
         background-color: var(--go-ui-color-primary-red);
-        width: 0.8rem;
-        height: 0.8rem;
+        width: 0.8125rem;
+        height: 0.8125rem;
     }
 
     &.start {
@@ -43,4 +44,11 @@
             background-color: transparent;
         }
     }
+
+    &.disabled {
+        .indicator {
+            border-color: var(--go-ui-color-separator);
+            background-color: var(--go-ui-color-white);
+        }
+    }
 }
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/index.ts b/packages/ui/src/components/Table/ColumnShortcuts/index.ts
index 8fcbcd27a9..3e08fa1081 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/index.ts
+++ b/packages/ui/src/components/Table/ColumnShortcuts/index.ts
@@ -144,7 +144,9 @@ export function createStringColumn<D, K extends string | number>(
     id: string,
     title: string,
     accessor: (item: D) => string | undefined | null,
-    options?: Options<D, K, CellProps<string>, HeaderCellProps>,
+    options?: Options<D, K, CellProps<string>, HeaderCellProps> & {
+        withLightText?: (datum: D) => boolean;
+    },
 ) {
     const item: Column<D, K, CellProps<string>, HeaderCellProps> & {
         valueSelector: (item: D) => string | undefined | null,
@@ -166,6 +168,7 @@ export function createStringColumn<D, K extends string | number>(
         cellRenderer: Cell,
         cellRendererParams: (_: K, datum: D): CellProps<string> => ({
             value: accessor(datum) || (options?.defaultEmptyValue ?? '--'),
+            withLightText: options?.withLightText?.(datum),
         }),
         valueSelector: accessor,
         valueComparator: (foo: D, bar: D) => compareString(accessor(foo), accessor(bar)),
@@ -334,6 +337,7 @@ export function createExpandColumn<D, K>(
 
 export function createExpansionIndicatorColumn<DATUM, KEY>(
     isExpanded?: boolean,
+    getDisabled?: (datum: DATUM) => boolean,
 ) {
     const item: Column<DATUM, KEY, ExpansionIndicatorProps, HeaderCellProps> = {
         id: randomString(),
@@ -343,7 +347,7 @@ export function createExpansionIndicatorColumn<DATUM, KEY>(
             sortable: false,
         },
         cellRenderer: ExpansionIndicator,
-        cellRendererParams: (_, __, i, data) => {
+        cellRendererParams: (_, datum, i, data) => {
             let variant: ExpansionIndicatorProps['variant'] = 'mid';
 
             if (data.length === 1) {
@@ -357,10 +361,14 @@ export function createExpansionIndicatorColumn<DATUM, KEY>(
             return {
                 isExpanded,
                 variant,
+                disabled: getDisabled?.(datum),
             };
         },
+        // cellRendererClassName: styles.expansionIndicatorCell,
+        cellContainerRendererParams: () => ({
+            withoutBorder: true,
+        }),
         cellContainerClassName: styles.expansionIndicatorCellContainer,
-        cellRendererClassName: styles.expansionIndicatorCell,
     };
 
     return item;
diff --git a/packages/ui/src/components/Table/TableBodyContent/index.tsx b/packages/ui/src/components/Table/TableBodyContent/index.tsx
index af0f41d444..838216e217 100644
--- a/packages/ui/src/components/Table/TableBodyContent/index.tsx
+++ b/packages/ui/src/components/Table/TableBodyContent/index.tsx
@@ -9,8 +9,6 @@ import type {
     VerifyColumn,
 } from '../types';
 
-import styles from './styles.module.css';
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 interface Props<DATUM, KEY extends string | number, COLUMN extends Column<DATUM, KEY, any, any>> {
     data: DATUM[] | undefined | null;
@@ -19,6 +17,7 @@ interface Props<DATUM, KEY extends string | number, COLUMN extends Column<DATUM,
     rowClassName?: string | ((key: KEY, datum: DATUM) => (string | undefined));
     cellClassName?: string | ((key: KEY, datum: DATUM, columnKey: string) => (string | undefined));
     rowModifier?: (rowOptions: RowOptions<DATUM, KEY>) => React.ReactNode;
+    expandedContent?: boolean;
 }
 
 function TableBodyContent<
@@ -34,6 +33,7 @@ function TableBodyContent<
         rowClassName,
         cellClassName,
         rowModifier,
+        expandedContent,
     } = props;
 
     return (
@@ -48,6 +48,7 @@ function TableBodyContent<
                         cellRendererClassName,
                         cellRendererParams,
                         cellContainerClassName,
+                        cellContainerRendererParams,
                     } = column;
 
                     const otherProps = cellRendererParams(key, datum, index, data);
@@ -59,16 +60,27 @@ function TableBodyContent<
                             name={id}
                         />
                     );
+
+                    const cellContainerAdditionalProps = cellContainerRendererParams?.(
+                        key,
+                        datum,
+                        index,
+                        data,
+                    ) ?? {};
+
                     return (
                         <TableData
                             key={id}
                             className={_cs(
-                                styles.cell,
                                 cellContainerClassName,
                                 typeof cellClassName === 'function'
                                     ? cellClassName(key, datum, id)
                                     : cellClassName,
                             )}
+                            // eslint-disable-next-line react/jsx-props-no-spreading
+                            {...cellContainerAdditionalProps}
+                            expandedContentCell={cellContainerAdditionalProps.expandedContentCell
+                                ?? expandedContent}
                         >
                             {children}
                         </TableData>
@@ -78,7 +90,6 @@ function TableBodyContent<
                 const row = (
                     <TableRow
                         className={_cs(
-                            styles.row,
                             typeof rowClassName === 'function'
                                 ? rowClassName(key, datum)
                                 : rowClassName,
diff --git a/packages/ui/src/components/Table/TableBodyContent/styles.module.css b/packages/ui/src/components/Table/TableBodyContent/styles.module.css
deleted file mode 100644
index eb0a51b09c..0000000000
--- a/packages/ui/src/components/Table/TableBodyContent/styles.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.row {
-    .cell {
-        padding: var(--go-ui-spacing-sm);
-        overflow: hidden;
-        overflow-wrap: break-word;
-    }
-
-    /*
-    &:hover {
-        .cell {
-            background-color: var(--go-ui-color-background-hover);
-        }
-    }
-    */
-}
diff --git a/packages/ui/src/components/Table/TableData/index.tsx b/packages/ui/src/components/Table/TableData/index.tsx
index c96f9a26bc..cf5270e922 100644
--- a/packages/ui/src/components/Table/TableData/index.tsx
+++ b/packages/ui/src/components/Table/TableData/index.tsx
@@ -3,18 +3,30 @@ import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.module.css';
 
-export type Props = Omit<HTMLProps<HTMLTableCellElement>, 'ref'>;
+export interface TableDataAdditionalProps {
+    expandedContentCell?: boolean;
+    withoutBorder?: boolean;
+}
+
+export type Props = Omit<HTMLProps<HTMLTableCellElement>, 'ref'> & TableDataAdditionalProps;
 
 function TableData(props: Props) {
     const {
         className,
         children,
+        expandedContentCell,
+        withoutBorder,
         ...otherProps
     } = props;
 
     return (
         <td
-            className={_cs(className, styles.td)}
+            className={_cs(
+                styles.tableData,
+                expandedContentCell && styles.expandedContentCell,
+                withoutBorder && styles.withoutBorder,
+                className,
+            )}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...otherProps}
         >
diff --git a/packages/ui/src/components/Table/TableData/styles.module.css b/packages/ui/src/components/Table/TableData/styles.module.css
index 7e8d347ff4..fcd5d81388 100644
--- a/packages/ui/src/components/Table/TableData/styles.module.css
+++ b/packages/ui/src/components/Table/TableData/styles.module.css
@@ -1,3 +1,15 @@
-.td {
-    border-bottom: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+.table-data {
+    --cell-border-color: var(--go-ui-color-separator);
+    --cell-background-color: transparent;
+
+    border-bottom: var(--go-ui-width-separator-sm) solid var(--cell-border-color);
+    background-color: var(--cell-background-color);
+    padding: var(--go-ui-spacing-sm);
+    overflow: hidden;
+    overflow-wrap: break-word;
+
+    &.expanded-content-cell {
+        --cell-border-color: var(--go-ui-color-separator-light);
+        --cell-background-color: var(--go-ui-color-background);
+    }
 }
diff --git a/packages/ui/src/components/Table/types.ts b/packages/ui/src/components/Table/types.ts
index b33da8217f..213653c306 100644
--- a/packages/ui/src/components/Table/types.ts
+++ b/packages/ui/src/components/Table/types.ts
@@ -1,3 +1,5 @@
+import { type TableDataAdditionalProps } from './TableData';
+
 export type SortDirection = 'asc' | 'dsc';
 
 export interface BaseHeader {
@@ -34,6 +36,12 @@ export interface Column<DATA, KEY, COMPONENT_PROPS, HEADER_PROPS> {
     cellRendererClassName?: string;
 
     cellContainerClassName?: string;
+    cellContainerRendererParams?: (
+        key: KEY,
+        datum: DATA,
+        index: number,
+        data: DATA[],
+    ) => TableDataAdditionalProps;
 }
 
 export type VerifyColumn<T, D, K> = unknown extends (
diff --git a/packages/ui/src/components/printable/Heading/index.tsx b/packages/ui/src/components/printable/Heading/index.tsx
index b6aadf09a3..61705605ec 100644
--- a/packages/ui/src/components/printable/Heading/index.tsx
+++ b/packages/ui/src/components/printable/Heading/index.tsx
@@ -1,5 +1,7 @@
 import { _cs } from '@togglecorp/fujs';
 
+import { getSpacingValue } from '#utils/style';
+
 import styles from './styles.module.css';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
@@ -27,9 +29,13 @@ function Heading(props: Props) {
     } = props;
 
     const HeadingEl = `h${level}` as React.ElementType;
+    const spacing = getSpacingValue('2xl', -level);
 
     return (
-        <HeadingEl className={_cs(styles.heading, levelToClassName[level], className)}>
+        <HeadingEl
+            className={_cs(styles.heading, levelToClassName[level], className)}
+            style={{ marginBlockEnd: spacing }}
+        >
             {children}
         </HeadingEl>
     );
diff --git a/packages/ui/src/components/printable/Heading/styles.module.css b/packages/ui/src/components/printable/Heading/styles.module.css
index 3d7a84138a..da9c15781d 100644
--- a/packages/ui/src/components/printable/Heading/styles.module.css
+++ b/packages/ui/src/components/printable/Heading/styles.module.css
@@ -1,11 +1,11 @@
 .heading {
     --font-size: var(--go-ui-font-size-xl);
 
-    margin: 0 0 var(--go-ui-spacing-sm) 0;
     font-family: Montserrat, sans-serif;
     font-size: var(--font-size);
     font-weight: var(--go-ui-font-weight-bold);
     page-break-after: avoid;
+    margin-block-start: unset;
 
     &.level-one {
         --font-size: var(--go-ui-font-size-4xl);
diff --git a/packages/ui/src/components/printable/TextOutput/index.tsx b/packages/ui/src/components/printable/TextOutput/index.tsx
index a25e0eb270..1f4cc0acf1 100644
--- a/packages/ui/src/components/printable/TextOutput/index.tsx
+++ b/packages/ui/src/components/printable/TextOutput/index.tsx
@@ -19,7 +19,9 @@ interface BaseProps {
     strongLabel?: boolean;
     withoutLabelColon?: boolean;
     invalidText?: React.ReactNode;
-    variant?: 'default' | 'contents';
+    variant?: 'block' | 'default' | 'contents';
+    withPadding?: boolean;
+    withBackground?: boolean;
 }
 
 interface BooleanProps extends BooleanOutputProps {
@@ -59,6 +61,8 @@ function TextOutput(props: Props) {
         withoutLabelColon,
         invalidText = DEFAULT_INVALID_TEXT,
         variant = 'default',
+        withPadding,
+        withBackground,
         ...otherProps
     } = props;
 
@@ -100,6 +104,9 @@ function TextOutput(props: Props) {
                 styles.textOutput,
                 variant === 'default' && styles.defaultVariant,
                 variant === 'contents' && styles.contentsVariant,
+                variant === 'block' && styles.blockVariant,
+                withPadding && styles.withPadding,
+                withBackground && styles.withBackground,
                 className,
             )}
         >
diff --git a/packages/ui/src/components/printable/TextOutput/styles.module.css b/packages/ui/src/components/printable/TextOutput/styles.module.css
index aa09f28635..0367a14b47 100644
--- a/packages/ui/src/components/printable/TextOutput/styles.module.css
+++ b/packages/ui/src/components/printable/TextOutput/styles.module.css
@@ -1,4 +1,19 @@
 .text-output {
+    break-inside: avoid;
+
+    &.with-padding {
+        padding: var(--go-ui-spacing-sm);
+    }
+
+    &.with-background {
+        background-color: var(--go-ui-color-background);
+    }
+
+    &.block-variant {
+        display: flex;
+        flex-direction: column;
+    }
+
     &.default-variant {
         display: flex;
         flex-wrap: wrap;
diff --git a/packages/ui/src/hooks/index.tsx b/packages/ui/src/hooks/index.tsx
index 835ae02cba..72f5842c96 100644
--- a/packages/ui/src/hooks/index.tsx
+++ b/packages/ui/src/hooks/index.tsx
@@ -5,4 +5,5 @@ export { default as useDebouncedValue } from './useDebouncedValue';
 export { default as useFloatPlacement } from './useFloatPlacement';
 export { default as useKeyboard } from './useKeyboard';
 export { default as useSizeTracking } from './useSizeTracking';
+export { default as useSpacingToken } from './useSpacingToken';
 export { default as useTranslation } from './useTranslation';
diff --git a/packages/ui/src/utils/style.ts b/packages/ui/src/utils/style.ts
index b9d84688ac..b74d2df534 100644
--- a/packages/ui/src/utils/style.ts
+++ b/packages/ui/src/utils/style.ts
@@ -64,13 +64,7 @@ export function getSpacingValue(
         spacingTokens.length - 1,
     );
 
-    const spacingValue = spacingTokens[
-        bound(
-            startIndex,
-            0,
-            spacingTokens.length - 1,
-        )
-    ];
+    const spacingValue = spacingTokens[startIndex];
 
     return spacingValue;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 17adc76b6d..07b01e0ce7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -64,6 +64,9 @@ importers:
       '@turf/buffer':
         specifier: ^6.5.0
         version: 6.5.0(patch_hash=f6b966f3d2d5a66fd961363e20ecdfad1b807ae7ba8d56eb6bd57592b3fa13af)
+      diff:
+        specifier: ^8.0.2
+        version: 8.0.2
       exceljs:
         specifier: ^4.3.0
         version: 4.4.0
@@ -3341,6 +3344,10 @@ packages:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  diff@8.0.2:
+    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
+    engines: {node: '>=0.3.1'}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -9890,6 +9897,8 @@ snapshots:
 
   diff-sequences@29.6.3: {}
 
+  diff@8.0.2: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -10183,7 +10192,7 @@ snapshots:
     dependencies:
       confusing-browser-globals: 1.0.11
       eslint: 9.20.1(jiti@2.5.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.24.1(eslint@9.20.1(jiti@2.5.1))(typescript@5.7.3))(eslint-import-resolver-typescript@3.8.2)(eslint@9.20.1(jiti@2.5.1))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@9.20.1(jiti@2.5.1))(typescript@5.7.3))(eslint-import-resolver-typescript@3.8.2)(eslint@9.20.1(jiti@2.5.1))
       object.assign: 4.1.7
       object.entries: 1.1.8
       semver: 6.3.1
@@ -10192,7 +10201,7 @@ snapshots:
     dependencies:
       eslint: 9.20.1(jiti@2.5.1)
       eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.31.0)(eslint@9.20.1(jiti@2.5.1))
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.24.1(eslint@9.20.1(jiti@2.5.1))(typescript@5.7.3))(eslint-import-resolver-typescript@3.8.2)(eslint@9.20.1(jiti@2.5.1))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@9.20.1(jiti@2.5.1))(typescript@5.7.3))(eslint-import-resolver-typescript@3.8.2)(eslint@9.20.1(jiti@2.5.1))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.20.1(jiti@2.5.1))
       eslint-plugin-react: 7.37.4(eslint@9.20.1(jiti@2.5.1))
       eslint-plugin-react-hooks: 5.1.0(eslint@9.20.1(jiti@2.5.1))
@@ -10218,7 +10227,7 @@ snapshots:
       stable-hash: 0.0.4
       tinyglobby: 0.2.12
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.24.1(eslint@9.20.1(jiti@2.5.1))(typescript@5.7.3))(eslint-import-resolver-typescript@3.8.2)(eslint@9.20.1(jiti@2.5.1))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.26.0(eslint@9.20.1(jiti@2.5.1))(typescript@5.7.3))(eslint-import-resolver-typescript@3.8.2)(eslint@9.20.1(jiti@2.5.1))
     transitivePeerDependencies:
       - supports-color