From 783166df6d5d885a8e121bf0cb71197432594912 Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Mon, 13 Oct 2025 11:42:11 +0545
Subject: [PATCH 01/19] global(add-global-page): Add a global page

---
 app/src/App/routes/index.tsx                  | 30 +++++++++
 app/src/components/Navbar/i18n.json           |  1 +
 app/src/views/EapRegistration/i18n.json       |  7 ++
 app/src/views/EapRegistration/index.tsx       | 21 ++++++
 app/src/views/EarlyActionProtocols/i18n.json  | 17 +++++
 app/src/views/EarlyActionProtocols/index.tsx  | 66 +++++++++++++++++++
 .../EarlyActionProtocols/styles.module.css    |  5 ++
 go-api                                        |  2 +-
 8 files changed, 148 insertions(+), 1 deletion(-)
 create mode 100644 app/src/views/EapRegistration/i18n.json
 create mode 100644 app/src/views/EapRegistration/index.tsx
 create mode 100644 app/src/views/EarlyActionProtocols/i18n.json
 create mode 100644 app/src/views/EarlyActionProtocols/index.tsx
 create mode 100644 app/src/views/EarlyActionProtocols/styles.module.css

diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index b25ad826a..76a6bb6cc 100644
--- a/app/src/App/routes/index.tsx
+++ b/app/src/App/routes/index.tsx
@@ -701,6 +701,19 @@ const accountMyFormsDref = customWrapRoute({
     },
 });
 
+const earlyActionProtocols = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap',
+    component: {
+        render: () => import('#views/EarlyActionProtocols'),
+        props: {},
+    },
+    context: {
+        title: 'Early Action Protocols',
+        visibility: 'anything',
+    },
+});
+
 const accountMyFormsThreeW = customWrapRoute({
     parent: accountMyFormsLayout,
     path: 'three-w',
@@ -1146,6 +1159,21 @@ const newPerOverviewForm = customWrapRoute({
     },
 });
 
+const eapDevelopmentRegistration = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap-registration/new',
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Development Registration',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
 const perOverviewForm = customWrapRoute({
     parent: perProcessLayout,
     path: ':perId/overview',
@@ -1353,6 +1381,7 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
+    eapDevelopmentRegistration,
     ...regionRoutes,
     ...countryRoutes,
     ...surgeRoutes,
@@ -1363,6 +1392,7 @@ const wrappedRoutes = {
     // Redirects
     preparednessOperationalLearning,
     obsoleteFieldReportDetails,
+    earlyActionProtocols,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));
diff --git a/app/src/components/Navbar/i18n.json b/app/src/components/Navbar/i18n.json
index 0132def3c..e0ed399ed 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/views/EapRegistration/i18n.json b/app/src/views/EapRegistration/i18n.json
new file mode 100644
index 000000000..9b7a06dd0
--- /dev/null
+++ b/app/src/views/EapRegistration/i18n.json
@@ -0,0 +1,7 @@
+{
+    "namespace": "eapRegistration",
+    "strings": {
+        "eapRegistrationHeading": "EAP Development Registration",
+        "eapRegistrationDescription": "The purpose of this form is for you to notify the IFRC team of the start of your EAP process. If you need assistance with the initiation of the process, send us a message."
+    }
+}
diff --git a/app/src/views/EapRegistration/index.tsx b/app/src/views/EapRegistration/index.tsx
new file mode 100644
index 000000000..31698b3c5
--- /dev/null
+++ b/app/src/views/EapRegistration/index.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+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.eapRegistrationHeading}
+            description={strings.eapRegistrationDescription}
+        >
+            {/* TODO: Add the form */}
+            Application Details
+        </Page>
+    );
+}
diff --git a/app/src/views/EarlyActionProtocols/i18n.json b/app/src/views/EarlyActionProtocols/i18n.json
new file mode 100644
index 000000000..93b0362f8
--- /dev/null
+++ b/app/src/views/EarlyActionProtocols/i18n.json
@@ -0,0 +1,17 @@
+{
+    "namespace": "earlyActionProtocols",
+    "strings": {
+        "eapHeading": "Disaster Response Emergency Fund (DREF)",
+        "eapDescription": "The IFRC's Disaster Emergency Fund (DREF): rapid, reliable funding for life-saving action.",
+        "eapTitle": "Early Action Protocols (EAP)",
+        "eapRegistrationLink": "EAP in Progress? Let Us Know",
+        "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 000000000..7688ff66a
--- /dev/null
+++ b/app/src/views/EarlyActionProtocols/index.tsx
@@ -0,0 +1,66 @@
+import {
+    Container,
+    ExpandableContainer,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Link from '#components/Link';
+import Page from '#components/Page';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <Page
+            heading={strings.eapHeading}
+            description={strings.eapDescription}
+        >
+            <Container
+                heading={strings.eapTitle}
+                actions={(
+                    <Link
+                        to="eapDevelopmentRegistration"
+                        variant="primary"
+                    >
+                        {strings.eapRegistrationLink}
+                    </Link>
+                )}
+                childrenContainerClassName={styles.earlyActionProtocols}
+            >
+                <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}
+                />
+                <ExpandableContainer
+                    heading={strings.eapContentSubHeadingThree}
+                />
+            </Container>
+        </Page>
+    );
+}
diff --git a/app/src/views/EarlyActionProtocols/styles.module.css b/app/src/views/EarlyActionProtocols/styles.module.css
new file mode 100644
index 000000000..8ec3f610f
--- /dev/null
+++ b/app/src/views/EarlyActionProtocols/styles.module.css
@@ -0,0 +1,5 @@
+.early-action-protocols {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-lg);
+}
diff --git a/go-api b/go-api
index fd94c8fca..ca55a2fee 160000
--- a/go-api
+++ b/go-api
@@ -1 +1 @@
-Subproject commit fd94c8fca4bd0b1fef3c2ea294ae142a5f650233
+Subproject commit ca55a2fee02fd7271bf9a320f6209ec465618bf9

From 73051d564e2c25007be1a2f51b5a68ef7b29e3ba Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Tue, 14 Oct 2025 13:29:53 +0545
Subject: [PATCH 02/19] eap(add-eap-link): Add EAP Tab in account page

---
 app/src/App/routes/index.tsx                  | 47 +++++++++++++++++++
 app/src/views/AccountMyFormsLayout/i18n.json  |  3 +-
 app/src/views/AccountMyFormsLayout/index.tsx  |  5 ++
 app/src/views/EapApplications/i18n.json       |  8 ++++
 app/src/views/EapApplications/index.tsx       | 39 +++++++++++++++
 .../views/EapApplications/styles.module.css   |  6 +++
 app/src/views/EapFullForm/index.tsx           | 12 +++++
 app/src/views/SimplifiedEapForm/index.tsx     | 12 +++++
 8 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 app/src/views/EapApplications/i18n.json
 create mode 100644 app/src/views/EapApplications/index.tsx
 create mode 100644 app/src/views/EapApplications/styles.module.css
 create mode 100644 app/src/views/EapFullForm/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/index.tsx

diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index 76a6bb6cc..593597780 100644
--- a/app/src/App/routes/index.tsx
+++ b/app/src/App/routes/index.tsx
@@ -728,6 +728,50 @@ const accountMyFormsThreeW = customWrapRoute({
     },
 });
 
+const accountMyFormsEap = customWrapRoute({
+    parent: accountMyFormsLayout,
+    path: 'eap-applications',
+    component: {
+        render: () => import('#views/EapApplications'),
+        props: {},
+    },
+    context: {
+        title: 'Account - EAP Applications',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const eapFullForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap-full-form',
+    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: 'simplified-eap-form',
+    component: {
+        render: () => import('#views/SimplifiedEapForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Simplified EAP Forms',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
 const accountNotifications = customWrapRoute({
     parent: accountLayout,
     path: 'notifications',
@@ -1345,6 +1389,7 @@ const wrappedRoutes = {
     accountMyFormsPer,
     accountMyFormsDref,
     accountMyFormsThreeW,
+    accountMyFormsEap,
     resources,
     search,
     allThreeWProject,
@@ -1382,6 +1427,8 @@ const wrappedRoutes = {
     operationalLearning,
     montandonLandingPage,
     eapDevelopmentRegistration,
+    eapFullForm,
+    simplifiedEapForm,
     ...regionRoutes,
     ...countryRoutes,
     ...surgeRoutes,
diff --git a/app/src/views/AccountMyFormsLayout/i18n.json b/app/src/views/AccountMyFormsLayout/i18n.json
index 6b70856db..c23cf7ce5 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 5364a3844..c7eaac05d 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/EapApplications/i18n.json b/app/src/views/EapApplications/i18n.json
new file mode 100644
index 000000000..a48b9dee3
--- /dev/null
+++ b/app/src/views/EapApplications/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "eapApplication",
+    "strings": {
+        "eapRegistrationLink": "EAP In Process? Let Us Know",
+        "eapFormLink": "Start Full EAP",
+        "simplifiedEapLink": "Start sEAP"
+    }
+}
diff --git a/app/src/views/EapApplications/index.tsx b/app/src/views/EapApplications/index.tsx
new file mode 100644
index 000000000..dd9f788b5
--- /dev/null
+++ b/app/src/views/EapApplications/index.tsx
@@ -0,0 +1,39 @@
+import { Container } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Link from '#components/Link';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <Container
+            childrenContainerClassName={styles.eapFormLinks}
+        >
+            {/* FIXME: Add eap registration link */}
+            <Link
+                to="home"
+                variant="secondary"
+            >
+                {strings.eapRegistrationLink}
+            </Link>
+            <Link
+                to="eapFullForm"
+                variant="secondary"
+            >
+                {strings.eapFormLink}
+            </Link>
+            <Link
+                to="simplifiedEapForm"
+                variant="secondary"
+            >
+                {strings.simplifiedEapLink}
+            </Link>
+        </Container>
+    );
+}
diff --git a/app/src/views/EapApplications/styles.module.css b/app/src/views/EapApplications/styles.module.css
new file mode 100644
index 000000000..c111ea1e6
--- /dev/null
+++ b/app/src/views/EapApplications/styles.module.css
@@ -0,0 +1,6 @@
+.eap-form-links {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--go-ui-spacing-sm);
+}
\ No newline at end of file
diff --git a/app/src/views/EapFullForm/index.tsx b/app/src/views/EapFullForm/index.tsx
new file mode 100644
index 000000000..e6d0317fe
--- /dev/null
+++ b/app/src/views/EapFullForm/index.tsx
@@ -0,0 +1,12 @@
+import Page from '#components/Page';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    return (
+        <Page>
+            {/* TODO: Add EAP form */}
+            Full EAP Form
+        </Page>
+    );
+}
diff --git a/app/src/views/SimplifiedEapForm/index.tsx b/app/src/views/SimplifiedEapForm/index.tsx
new file mode 100644
index 000000000..57bcf2b6c
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/index.tsx
@@ -0,0 +1,12 @@
+import Page from '#components/Page';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    return (
+        <Page>
+            {/* TODO: Add Simplified EAP form */}
+            Simplified EAP form
+        </Page>
+    );
+}

From c6edf32a67a615b5609906490168f13c91cce307 Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Wed, 5 Nov 2025 11:34:02 +0545
Subject: [PATCH 03/19] dref-process(tabs): Add tabs in dref process link

---
 app/src/App/routes/index.tsx                  | 61 ++++++++++---
 app/src/components/Navbar/index.tsx           | 10 ++-
 app/src/views/DrefDetail/i18n.json            | 15 ++++
 app/src/views/DrefDetail/index.tsx            | 56 ++++++++++++
 app/src/views/DrefDetail/styles.module.css    | 11 +++
 app/src/views/DrefProcess/i18n.json           |  9 ++
 app/src/views/DrefProcess/index.tsx           | 37 ++++++++
 app/src/views/EapApplications/i18n.json       |  2 +-
 app/src/views/EarlyActionProtocols/i18n.json  |  5 +-
 app/src/views/EarlyActionProtocols/index.tsx  | 87 +++++++++----------
 .../EarlyActionProtocols/styles.module.css    | 10 ++-
 11 files changed, 236 insertions(+), 67 deletions(-)
 create mode 100644 app/src/views/DrefDetail/i18n.json
 create mode 100644 app/src/views/DrefDetail/index.tsx
 create mode 100644 app/src/views/DrefDetail/styles.module.css
 create mode 100644 app/src/views/DrefProcess/i18n.json
 create mode 100644 app/src/views/DrefProcess/index.tsx

diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index 593597780..3c4c91523 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,
@@ -701,19 +745,6 @@ const accountMyFormsDref = customWrapRoute({
     },
 });
 
-const earlyActionProtocols = customWrapRoute({
-    parent: rootLayout,
-    path: 'eap',
-    component: {
-        render: () => import('#views/EarlyActionProtocols'),
-        props: {},
-    },
-    context: {
-        title: 'Early Action Protocols',
-        visibility: 'anything',
-    },
-});
-
 const accountMyFormsThreeW = customWrapRoute({
     parent: accountMyFormsLayout,
     path: 'three-w',
@@ -1439,7 +1470,9 @@ const wrappedRoutes = {
     // Redirects
     preparednessOperationalLearning,
     obsoleteFieldReportDetails,
-    earlyActionProtocols,
+    drefDetail,
+    eapDetail,
+    drefProcessLayout,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));
diff --git a/app/src/components/Navbar/index.tsx b/app/src/components/Navbar/index.tsx
index be067b2ef..0786bdea7 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/views/DrefDetail/i18n.json b/app/src/views/DrefDetail/i18n.json
new file mode 100644
index 000000000..47ce2fe4c
--- /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 000000000..117cd526c
--- /dev/null
+++ b/app/src/views/DrefDetail/index.tsx
@@ -0,0 +1,56 @@
+import { Container } 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';
+import styles from './styles.module.css';
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    return (
+        <Container
+            className={styles.drefDetail}
+            contentViewType="vertical"
+            childrenContainerClassName={styles.content}
+        >
+            <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>
+        </Container>
+    );
+}
+
+Component.displayName = 'DrefDetail';
diff --git a/app/src/views/DrefDetail/styles.module.css b/app/src/views/DrefDetail/styles.module.css
new file mode 100644
index 000000000..c850c0ee2
--- /dev/null
+++ b/app/src/views/DrefDetail/styles.module.css
@@ -0,0 +1,11 @@
+.dref-detail {
+    display: flex;
+    flex-direction: column;
+    padding: var(--go-ui-spacing-2xl) 0;
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-xl);
+    }
+}
diff --git a/app/src/views/DrefProcess/i18n.json b/app/src/views/DrefProcess/i18n.json
new file mode 100644
index 000000000..01904a6dd
--- /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 000000000..2ed605891
--- /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/EapApplications/i18n.json b/app/src/views/EapApplications/i18n.json
index a48b9dee3..1d3fbee8c 100644
--- a/app/src/views/EapApplications/i18n.json
+++ b/app/src/views/EapApplications/i18n.json
@@ -1,7 +1,7 @@
 {
     "namespace": "eapApplication",
     "strings": {
-        "eapRegistrationLink": "EAP In Process? Let Us Know",
+        "eapRegistrationLink": "Register Your EAP",
         "eapFormLink": "Start Full EAP",
         "simplifiedEapLink": "Start sEAP"
     }
diff --git a/app/src/views/EarlyActionProtocols/i18n.json b/app/src/views/EarlyActionProtocols/i18n.json
index 93b0362f8..9472e2952 100644
--- a/app/src/views/EarlyActionProtocols/i18n.json
+++ b/app/src/views/EarlyActionProtocols/i18n.json
@@ -1,10 +1,7 @@
 {
     "namespace": "earlyActionProtocols",
     "strings": {
-        "eapHeading": "Disaster Response Emergency Fund (DREF)",
-        "eapDescription": "The IFRC's Disaster Emergency Fund (DREF): rapid, reliable funding for life-saving action.",
-        "eapTitle": "Early Action Protocols (EAP)",
-        "eapRegistrationLink": "EAP in Progress? Let Us Know",
+        "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:",
diff --git a/app/src/views/EarlyActionProtocols/index.tsx b/app/src/views/EarlyActionProtocols/index.tsx
index 7688ff66a..3cd1d79d4 100644
--- a/app/src/views/EarlyActionProtocols/index.tsx
+++ b/app/src/views/EarlyActionProtocols/index.tsx
@@ -5,7 +5,6 @@ import {
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import Link from '#components/Link';
-import Page from '#components/Page';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -16,51 +15,49 @@ export function Component() {
     const strings = useTranslation(i18n);
 
     return (
-        <Page
-            heading={strings.eapHeading}
-            description={strings.eapDescription}
+        <Container
+            className={styles.eapDetail}
+            contentViewType="vertical"
+            childrenContainerClassName={styles.content}
+            actions={(
+                <Link
+                    to="eapDevelopmentRegistration"
+                    variant="secondary"
+                >
+                    {strings.eapRegistrationLink}
+                </Link>
+            )}
         >
-            <Container
-                heading={strings.eapTitle}
-                actions={(
-                    <Link
-                        to="eapDevelopmentRegistration"
-                        variant="primary"
-                    >
-                        {strings.eapRegistrationLink}
-                    </Link>
-                )}
-                childrenContainerClassName={styles.earlyActionProtocols}
+            <ExpandableContainer
+                heading={strings.eapContent}
             >
-                <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}
-                />
-                <ExpandableContainer
-                    heading={strings.eapContentSubHeadingThree}
-                />
-            </Container>
-        </Page>
+                <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}
+            />
+            <ExpandableContainer
+                heading={strings.eapContentSubHeadingThree}
+            />
+        </Container>
     );
 }
+
+Component.displayName = 'EarlyActionProtocols';
diff --git a/app/src/views/EarlyActionProtocols/styles.module.css b/app/src/views/EarlyActionProtocols/styles.module.css
index 8ec3f610f..4df12fe2b 100644
--- a/app/src/views/EarlyActionProtocols/styles.module.css
+++ b/app/src/views/EarlyActionProtocols/styles.module.css
@@ -1,5 +1,11 @@
-.early-action-protocols {
+.eap-detail {
     display: flex;
     flex-direction: column;
-    gap: var(--go-ui-spacing-lg);
+    padding: var(--go-ui-spacing-2xl) 0;
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-lg);
+    }
 }

From f102fc4b0ad0aff072025f9e8ddc166ad65efd44 Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Mon, 10 Nov 2025 16:54:31 +0545
Subject: [PATCH 04/19] eap-table(table): Add eap development table

---
 .../views/EapApplications/Filters/i18n.json   |   6 +
 .../views/EapApplications/Filters/index.tsx   |  47 +++++
 app/src/views/EapApplications/i18n.json       |   1 +
 app/src/views/EapApplications/index.tsx       | 178 ++++++++++++++++--
 .../views/EapApplications/styles.module.css   |  12 +-
 5 files changed, 221 insertions(+), 23 deletions(-)
 create mode 100644 app/src/views/EapApplications/Filters/i18n.json
 create mode 100644 app/src/views/EapApplications/Filters/index.tsx

diff --git a/app/src/views/EapApplications/Filters/i18n.json b/app/src/views/EapApplications/Filters/i18n.json
new file mode 100644
index 000000000..9aab9233d
--- /dev/null
+++ b/app/src/views/EapApplications/Filters/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "accountMyFormsEap",
+    "strings": {
+        "filterStatusPlaceholder": "Select Status"
+    }
+}
diff --git a/app/src/views/EapApplications/Filters/index.tsx b/app/src/views/EapApplications/Filters/index.tsx
new file mode 100644
index 000000000..8ebee1036
--- /dev/null
+++ b/app/src/views/EapApplications/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/EapApplications/i18n.json b/app/src/views/EapApplications/i18n.json
index 1d3fbee8c..72be7b0f2 100644
--- a/app/src/views/EapApplications/i18n.json
+++ b/app/src/views/EapApplications/i18n.json
@@ -2,6 +2,7 @@
     "namespace": "eapApplication",
     "strings": {
         "eapRegistrationLink": "Register Your EAP",
+        "eapApplicationsHeading": "EAP Application",
         "eapFormLink": "Start Full EAP",
         "simplifiedEapLink": "Start sEAP"
     }
diff --git a/app/src/views/EapApplications/index.tsx b/app/src/views/EapApplications/index.tsx
index dd9f788b5..130b9f6f1 100644
--- a/app/src/views/EapApplications/index.tsx
+++ b/app/src/views/EapApplications/index.tsx
@@ -1,39 +1,179 @@
-import { Container } from '@ifrc-go/ui';
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import {
+    Container,
+    Table,
+} from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    createDateColumn,
+    createExpandColumn,
+    createExpansionIndicatorColumn,
+    createStringColumn,
+    numericIdSelector,
+} from '@ifrc-go/ui/utils';
 
 import Link from '#components/Link';
+import useFilterState from '#hooks/useFilterState';
+import {
+    type GoApiResponse,
+    useRequest,
+} from '#utils/restRequest';
+
+import Filters, { type FilterValue } from './Filters';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
+type EapResponse = GoApiResponse<'/api/v2/eap-registration/'>;
+type EapListItem = NonNullable<EapResponse['results']>[number];
+
+type Key = EapListItem['id'];
+
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
+    const {
+        filter,
+        offset,
+        limit,
+        rawFilter,
+        filtered,
+        setFilterField,
+    } = useFilterState<FilterValue>({
+        filter: {},
+        pageSize: 6,
+    });
+
+    const {
+        response: eapResponse,
+        pending: eapPending,
+    } = 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 baseColumns = useMemo(
+        () => ([
+            createDateColumn<EapListItem, number>(
+                'created_at',
+                'Last Updated',
+                (item) => item.created_at,
+                { columnClassName: styles.date },
+            ),
+            createStringColumn<EapListItem, number>(
+                'name',
+                'Name/Phase',
+                (item) => {
+                    const baseYear = new Date(item.created_at).getFullYear();
+                    let addedYear = baseYear;
+                    if (item.eap_type === 10) {
+                        addedYear = baseYear + 4;
+                    } else if (item.eap_type === 20) {
+                        addedYear = baseYear + 2;
+                    }
+                    return `${item.country_details?.name}:
+                        ${item.disaster_type_details?.name}
+                        ${baseYear} - ${addedYear}`;
+                },
+                { columnClassName: styles.title },
+            ),
+            createStringColumn<EapListItem, number>(
+                'eap_type_display',
+                'EAP Type',
+                (item) => item.eap_type_display,
+                { columnClassName: styles.type },
+            ),
+            createStringColumn<EapListItem, number>(
+                'status_display',
+                'Status',
+                (item) => item.status_display,
+                { columnClassName: styles.status },
+            ),
+        ]),
+        [],
+    );
+
+    const columns = useMemo(
+        () => ([
+            createExpansionIndicatorColumn<EapListItem, Key>(false),
+            ...baseColumns,
+            createExpandColumn<EapListItem, Key>(
+                'expandRow',
+                '',
+                (row) => ({
+                    onClick: handleExpandClick,
+                    expanded: row.id === expandedRow?.id,
+                }),
+            ),
+        ]),
+        [baseColumns, handleExpandClick, expandedRow],
+    );
 
     return (
         <Container
             childrenContainerClassName={styles.eapFormLinks}
+            heading={strings.eapApplicationsHeading}
+            withHeaderBorder
+            filters={(
+                <Filters
+                    value={rawFilter}
+                    onChange={setFilterField}
+                />
+            )}
+            actions={(
+                <>
+                    <Link
+                        to="home"
+                        variant="secondary"
+                    >
+                        {strings.eapRegistrationLink}
+                    </Link>
+                    {/* TODO: Move this to table action
+                    <Link
+                        to="eapFullForm"
+                        variant="secondary"
+                    >
+                        {strings.eapFormLink}
+                    </Link>
+                    <Link
+                        to="simplifiedEapForm"
+                        variant="secondary"
+                    >
+                        {strings.simplifiedEapLink}
+                    </Link>
+                    */}
+                </>
+            )}
         >
             {/* FIXME: Add eap registration link */}
-            <Link
-                to="home"
-                variant="secondary"
-            >
-                {strings.eapRegistrationLink}
-            </Link>
-            <Link
-                to="eapFullForm"
-                variant="secondary"
-            >
-                {strings.eapFormLink}
-            </Link>
-            <Link
-                to="simplifiedEapForm"
-                variant="secondary"
-            >
-                {strings.simplifiedEapLink}
-            </Link>
+            <Table
+                className={styles.table}
+                data={eapResponse?.results}
+                columns={columns}
+                keySelector={numericIdSelector}
+                pending={eapPending}
+                filtered={filtered}
+            />
         </Container>
     );
 }
diff --git a/app/src/views/EapApplications/styles.module.css b/app/src/views/EapApplications/styles.module.css
index c111ea1e6..2e3cef3c6 100644
--- a/app/src/views/EapApplications/styles.module.css
+++ b/app/src/views/EapApplications/styles.module.css
@@ -1,6 +1,10 @@
 .eap-form-links {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--go-ui-spacing-sm);
+    .table {
+        .type,
+        .status,
+        .date {
+            width: 0%;
+            min-width: 7rem;
+        }
+    }
 }
\ No newline at end of file

From 6a0745a379b6ac66aafff5e5d9102a2fb62a5a46 Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Wed, 15 Oct 2025 15:43:29 +0545
Subject: [PATCH 05/19] eap(eap-registration-form): Add EAP Registration Form

---
 app/src/views/EapRegistration/i18n.json       |  42 +-
 app/src/views/EapRegistration/index.tsx       | 406 +++++++++++++++++-
 app/src/views/EapRegistration/schema.ts       |  56 +++
 .../views/EapRegistration/styles.module.css   |  22 +
 4 files changed, 522 insertions(+), 4 deletions(-)
 create mode 100644 app/src/views/EapRegistration/schema.ts
 create mode 100644 app/src/views/EapRegistration/styles.module.css

diff --git a/app/src/views/EapRegistration/i18n.json b/app/src/views/EapRegistration/i18n.json
index 9b7a06dd0..de60e6530 100644
--- a/app/src/views/EapRegistration/i18n.json
+++ b/app/src/views/EapRegistration/i18n.json
@@ -2,6 +2,46 @@
     "namespace": "eapRegistration",
     "strings": {
         "eapRegistrationHeading": "EAP Development Registration",
-        "eapRegistrationDescription": "The purpose of this form is for you to notify the IFRC team of the start of your EAP process. If you need assistance with the initiation of the process, send us a message."
+        "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",
+        "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."
     }
 }
diff --git a/app/src/views/EapRegistration/index.tsx b/app/src/views/EapRegistration/index.tsx
index 31698b3c5..3e3e08b4f 100644
--- a/app/src/views/EapRegistration/index.tsx
+++ b/app/src/views/EapRegistration/index.tsx
@@ -1,21 +1,421 @@
+import {
+    type ElementRef,
+    useCallback,
+    useRef,
+} from 'react';
+import {
+    ConfirmButton,
+    Container,
+    DateInput,
+    InputSection,
+    Radio,
+    RadioInput,
+    TextInput,
+} from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    resolveToComponent,
+    stringValueSelector,
+} from '@ifrc-go/ui/utils';
+import {
+    createSubmitHandler,
+    getErrorObject,
+    useForm,
+} from '@togglecorp/toggle-form';
 
+import CountrySelectInput from '#components/domain/CountrySelectInput';
+import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput';
+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,
+} from '#utils/restRequest';
+import { transformObjectError } from '#utils/restRequest/error';
+
+import {
+    defaultFormValue,
+    formSchema,
+} from './schema';
 
 import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+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 {
+        value,
+        setFieldValue,
+        error: formError,
+        setError,
+        validate,
+    } = useForm(formSchema, { value: defaultFormValue });
+
+    const {
+        eap_eap_type: eapFormOptions,
+    } = useGlobalEnums();
+
+    const error = getErrorObject(formError);
+    const formContentRef = useRef<ElementRef<'div'>>(null);
+
+    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 handleCountryChange = useCallback(
+        (val: number | undefined, name: 'country') => {
+            setFieldValue(val, name);
+        },
+        [setFieldValue],
+    );
+
+    const handleEapTypeClick = useCallback(() => {
+        setFieldValue(undefined, 'eap_type');
+    }, [setFieldValue]);
+
+    const handleSubmissionTimeClick = useCallback(() => {
+        setFieldValue(undefined, 'expected_submission_time');
+    }, [setFieldValue]);
+
+    const eapRegistration = useCallback(() => {
+        const handler = createSubmitHandler(
+            validate,
+            setError,
+            (formValues) => {
+                eapRegister(formValues as EapRegisterRequestBody);
+            },
+        );
+        handler();
+    }, [
+        setError,
+        validate,
+        eapRegister,
+    ]);
+
+    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;
 
     return (
         <Page
+            mainSectionClassName={styles.eapRegistrationForm}
             heading={strings.eapRegistrationHeading}
-            description={strings.eapRegistrationDescription}
+            description={resolveToComponent(
+                strings.eapRegistrationDescription,
+                {
+                    link: (
+                        <Link
+                            to="eapDetail"
+                        >
+                            {strings.eapRegistrationLink}
+                        </Link>
+                    ),
+                },
+            )}
+            actions={(
+                <Link
+                    to="accountMyFormsEap"
+                    variant="secondary"
+                >
+                    {strings.eapCancelButton}
+                </Link>
+            )}
+            withBackgroundColorInMainSection
         >
-            {/* TODO: Add the form */}
-            Application Details
+            <div ref={formContentRef}>
+                <Container
+                    heading={strings.eapApplicationDetails}
+                    childrenContainerClassName={styles.content}
+                >
+                    <InputSection
+                        title={strings.eapNationalSociety}
+                        description={strings.eapNationalSocietyDescription}
+                        withAsteriskOnTitle
+                    >
+                        <NationalSocietySelectInput
+                            error={error?.national_society}
+                            name="national_society"
+                            onChange={setFieldValue}
+                            value={value?.national_society}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapCountry}
+                        description={strings.eapCountryDescription}
+                        withAsteriskOnTitle
+                    >
+                        <CountrySelectInput
+                            error={error?.country}
+                            name="country"
+                            onChange={handleCountryChange}
+                            value={value?.country}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapDisasterType}
+                        description={strings.eapDisasterTypeDescription}
+                        withAsteriskOnTitle
+                    >
+                        <DisasterTypeSelectInput
+                            name="disaster_type"
+                            value={value?.disaster_type}
+                            onChange={setFieldValue}
+                            error={error?.disaster_type}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapType}
+                        // TODO: Add link here
+                        description={strings.eapTypeDescription}
+                        contentSectionClassName={styles.radioContent}
+                        withAsteriskOnTitle
+                    >
+                        <RadioInput
+                            name="eap_type"
+                            value={value?.eap_type}
+                            onChange={setFieldValue}
+                            options={eapFormOptions}
+                            keySelector={eapTypeKeySelector}
+                            labelSelector={stringValueSelector}
+                            error={error?.eap_type}
+                        />
+                        <Radio
+                            name="eap_type"
+                            label={strings.eapNotSure}
+                            value={value?.eap_type === undefined}
+                            onClick={handleEapTypeClick}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapSubmission}
+                        description={strings.eapSubmissionDescription}
+                        contentSectionClassName={styles.radioContent}
+                        withAsteriskOnTitle
+                    >
+                        <DateInput
+                            name="expected_submission_time"
+                            onChange={setFieldValue}
+                            value={value?.expected_submission_time}
+                            error={error?.expected_submission_time}
+                        />
+                        <Radio
+                            name="expected_submission_time"
+                            label={strings.eapNotSure}
+                            value={value?.expected_submission_time === undefined}
+                            onClick={handleSubmissionTimeClick}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.eapPartnersInvolved}
+                        description={strings.eapPartnersInvolvedDescription}
+                        withAsteriskOnTitle
+                    >
+                        <NationalSocietyMultiSelectInput
+                            name="partners"
+                            value={value.partners}
+                            onChange={setFieldValue}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                </Container>
+                <Container
+                    heading={strings.eapContacts}
+                >
+                    <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}
+                        />
+                        <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}
+                        />
+                        <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}
+                        />
+                        <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}
+                        />
+                    </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}
+                        />
+                        <TextInput
+                            label={strings.eapIFRCTitle}
+                            name="ifrc_contact_title"
+                            value={value?.ifrc_contact_title}
+                            onChange={setFieldValue}
+                            error={error?.ifrc_contact_title}
+                            disabled={disabled}
+                        />
+                        <TextInput
+                            label={strings.eapIFRCEmail}
+                            name="ifrc_contact_email"
+                            value={value?.ifrc_contact_email}
+                            onChange={setFieldValue}
+                            error={error?.ifrc_contact_email}
+                            disabled={disabled}
+                        />
+                        <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}
+                        />
+                    </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}
+                        />
+                        <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}
+                        />
+                        <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}
+                        />
+                        <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}
+                        />
+                    </InputSection>
+                </Container>
+            </div>
+            <div className={styles.footer}>
+                <ConfirmButton
+                    name={undefined}
+                    confirmHeading={strings.eapDevelopmentRegistrationHeading}
+                    confirmMessage={strings.eapDevelopmentRegistrationDescription}
+                    onConfirm={handleEapRegistration}
+                    disabled={disabled}
+                >
+                    {strings.eapSubmitButton}
+                </ConfirmButton>
+            </div>
         </Page>
     );
 }
diff --git a/app/src/views/EapRegistration/schema.ts b/app/src/views/EapRegistration/schema.ts
new file mode 100644
index 000000000..640e0b1cb
--- /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: null,
+    expected_submission_time: null,
+};
+
+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/EapRegistration/styles.module.css b/app/src/views/EapRegistration/styles.module.css
new file mode 100644
index 000000000..a6479f54a
--- /dev/null
+++ b/app/src/views/EapRegistration/styles.module.css
@@ -0,0 +1,22 @@
+.eap-registration-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-md);
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-md);
+
+        .radio-content {
+            display: flex;
+            gap: var(--go-ui-spacing-md);
+        }
+    }
+
+    .footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

From ac6555ff0263f2c5f6bbbc44c550658485491e92 Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Mon, 10 Nov 2025 16:54:31 +0545
Subject: [PATCH 06/19] eap-table(table): Add eap development table

---
 app/src/App/routes/index.tsx                  | 80 +++++++++++++---
 .../EapApplications/EapTableActions/i18n.json |  8 ++
 .../EapApplications/EapTableActions/index.tsx | 48 ++++++++++
 app/src/views/EapApplications/i18n.json       |  4 +-
 app/src/views/EapApplications/index.tsx       | 93 ++++++++++++++-----
 .../views/EapApplications/styles.module.css   |  5 +
 6 files changed, 195 insertions(+), 43 deletions(-)
 create mode 100644 app/src/views/EapApplications/EapTableActions/i18n.json
 create mode 100644 app/src/views/EapApplications/EapTableActions/index.tsx

diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index 3c4c91523..00fa1594a 100644
--- a/app/src/App/routes/index.tsx
+++ b/app/src/App/routes/index.tsx
@@ -1182,6 +1182,68 @@ 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 eapRegistrationFormIndex = customWrapRoute({
+    parent: eapRegistrationLayout,
+    index: true,
+    component: {
+        eagerLoad: true,
+        render: Navigate,
+        props: {
+            to: 'new' satisfies DefaultPerProcessChild,
+            replace: true,
+        },
+    },
+    context: {
+        title: 'EAP Registration',
+        visibility: 'anything',
+    },
+});
+
+const eapDevelopmentRegistration = 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/view',
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'View EAP Overview',
+        visibility: 'is-authenticated',
+    },
+});
+
 type DefaultPerProcessChild = 'new';
 const perProcessLayout = customWrapRoute({
     parent: rootLayout,
@@ -1234,21 +1296,6 @@ const newPerOverviewForm = customWrapRoute({
     },
 });
 
-const eapDevelopmentRegistration = customWrapRoute({
-    parent: rootLayout,
-    path: 'eap-registration/new',
-    component: {
-        render: () => import('#views/EapRegistration'),
-        props: {},
-    },
-    wrapperComponent: Auth,
-    context: {
-        title: 'EAP Development Registration',
-        visibility: 'is-authenticated',
-        permissions: ({ isGuestUser }) => !isGuestUser,
-    },
-});
-
 const perOverviewForm = customWrapRoute({
     parent: perProcessLayout,
     path: ':perId/overview',
@@ -1473,6 +1520,9 @@ const wrappedRoutes = {
     drefDetail,
     eapDetail,
     drefProcessLayout,
+    eapRegistrationLayout,
+    eapDevelopmentRegistrationForm,
+    eapRegistrationFormIndex,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));
diff --git a/app/src/views/EapApplications/EapTableActions/i18n.json b/app/src/views/EapApplications/EapTableActions/i18n.json
new file mode 100644
index 000000000..dcacb9754
--- /dev/null
+++ b/app/src/views/EapApplications/EapTableActions/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace":"accountMyFormsEap",
+    "strings":{
+        "eapViewLabel": "View",
+        "eapFormLink": "Start Full EAP",
+        "simplifiedEapLink": "Start sEAP"
+    }
+}
diff --git a/app/src/views/EapApplications/EapTableActions/index.tsx b/app/src/views/EapApplications/EapTableActions/index.tsx
new file mode 100644
index 000000000..24039a845
--- /dev/null
+++ b/app/src/views/EapApplications/EapTableActions/index.tsx
@@ -0,0 +1,48 @@
+import { TableActions } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import DropdownMenuItem from '#components/DropdownMenuItem';
+import Link from '#components/Link';
+
+import i18n from './i18n.json';
+
+export interface Props {
+    eapId: number;
+}
+
+function EapTableActions(props: Props) {
+    const { eapId } = props;
+
+    const strings = useTranslation(i18n);
+
+    return (
+        <TableActions
+            extraActions={(
+                <DropdownMenuItem
+                    type="link"
+                    to="eapDevelopmentRegistrationForm"
+                    urlParams={{ eapId }}
+                >
+                    {strings.eapViewLabel}
+                </DropdownMenuItem>
+            )}
+        >
+            <Link
+                to="eapFullForm"
+                urlParams={{ eapId }}
+                variant="secondary"
+            >
+                {strings.eapFormLink}
+            </Link>
+            <Link
+                to="simplifiedEapForm"
+                urlParams={{ eapId }}
+                variant="secondary"
+            >
+                {strings.simplifiedEapLink}
+            </Link>
+        </TableActions>
+    );
+}
+
+export default EapTableActions;
diff --git a/app/src/views/EapApplications/i18n.json b/app/src/views/EapApplications/i18n.json
index 72be7b0f2..2c28c7659 100644
--- a/app/src/views/EapApplications/i18n.json
+++ b/app/src/views/EapApplications/i18n.json
@@ -2,8 +2,6 @@
     "namespace": "eapApplication",
     "strings": {
         "eapRegistrationLink": "Register Your EAP",
-        "eapApplicationsHeading": "EAP Application",
-        "eapFormLink": "Start Full EAP",
-        "simplifiedEapLink": "Start sEAP"
+        "eapApplicationsHeading": "EAP Application"
     }
 }
diff --git a/app/src/views/EapApplications/index.tsx b/app/src/views/EapApplications/index.tsx
index 130b9f6f1..c6efb434c 100644
--- a/app/src/views/EapApplications/index.tsx
+++ b/app/src/views/EapApplications/index.tsx
@@ -5,11 +5,15 @@ import {
 } from 'react';
 import {
     Container,
+    type RowOptions,
     Table,
+    TableBodyContent,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     createDateColumn,
+    createElementColumn,
+    createEmptyColumn,
     createExpandColumn,
     createExpansionIndicatorColumn,
     createStringColumn,
@@ -23,6 +27,7 @@ import {
     useRequest,
 } from '#utils/restRequest';
 
+import EapTableActions, { type Props as EapTableActionProps } from './EapTableActions';
 import Filters, { type FilterValue } from './Filters';
 
 import i18n from './i18n.json';
@@ -37,6 +42,7 @@ type Key = EapListItem['id'];
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
+
     const {
         filter,
         offset,
@@ -113,7 +119,7 @@ export function Component() {
         [],
     );
 
-    const columns = useMemo(
+    const aggregatedColumns = useMemo(
         () => ([
             createExpansionIndicatorColumn<EapListItem, Key>(false),
             ...baseColumns,
@@ -129,6 +135,59 @@ export function Component() {
         [baseColumns, handleExpandClick, expandedRow],
     );
 
+    const detailColumns = useMemo(
+        () => ([
+            createExpansionIndicatorColumn<EapListItem, number>(true),
+            createStringColumn<EapListItem, number>(
+                'title',
+                '',
+                () => 'EAP Registration',
+                { columnClassName: styles.detailTitle },
+            ),
+            createElementColumn<EapListItem, number, EapTableActionProps>(
+                'actions',
+                'EAP Registration',
+                EapTableActions,
+                (eapId) => ({
+                    eapId,
+                }),
+            ),
+            createEmptyColumn(),
+            createEmptyColumn(),
+            createEmptyColumn(),
+        ]),
+        [],
+    );
+
+    const rowModifier = useCallback(
+        ({ row, datum }: RowOptions<EapListItem, number>) => {
+            if (datum.id !== expandedRow?.id) {
+                return row;
+            }
+
+            const subRows = eapResponse?.results?.filter(
+                (subRow) => subRow.id === datum.id,
+            );
+
+            return (
+                <>
+                    {row}
+                    <TableBodyContent
+                        keySelector={numericIdSelector}
+                        data={subRows}
+                        columns={detailColumns}
+                        cellClassName={styles.subCell}
+                    />
+                </>
+            );
+        },
+        [
+            expandedRow,
+            detailColumns,
+            eapResponse,
+        ],
+    );
+
     return (
         <Container
             childrenContainerClassName={styles.eapFormLinks}
@@ -141,35 +200,19 @@ export function Component() {
                 />
             )}
             actions={(
-                <>
-                    <Link
-                        to="home"
-                        variant="secondary"
-                    >
-                        {strings.eapRegistrationLink}
-                    </Link>
-                    {/* TODO: Move this to table action
-                    <Link
-                        to="eapFullForm"
-                        variant="secondary"
-                    >
-                        {strings.eapFormLink}
-                    </Link>
-                    <Link
-                        to="simplifiedEapForm"
-                        variant="secondary"
-                    >
-                        {strings.simplifiedEapLink}
-                    </Link>
-                    */}
-                </>
+                <Link
+                    to="home"
+                    variant="secondary"
+                >
+                    {strings.eapRegistrationLink}
+                </Link>
             )}
         >
-            {/* FIXME: Add eap registration link */}
             <Table
                 className={styles.table}
                 data={eapResponse?.results}
-                columns={columns}
+                columns={aggregatedColumns}
+                rowModifier={rowModifier}
                 keySelector={numericIdSelector}
                 pending={eapPending}
                 filtered={filtered}
diff --git a/app/src/views/EapApplications/styles.module.css b/app/src/views/EapApplications/styles.module.css
index 2e3cef3c6..726e43b99 100644
--- a/app/src/views/EapApplications/styles.module.css
+++ b/app/src/views/EapApplications/styles.module.css
@@ -6,5 +6,10 @@
             width: 0%;
             min-width: 7rem;
         }
+
+        .sub-cell {
+            border-bottom: unset;
+            background-color: var(--go-ui-color-gray-20);
+        }
     }
 }
\ No newline at end of file

From 922323810064f87f9bd1ae27eaaa028ed208c434 Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Wed, 12 Nov 2025 16:22:37 +0545
Subject: [PATCH 07/19] eap(lisitng): Add eap listing page

---
 app/src/App/routes/index.tsx                  |  26 +--
 app/src/utils/constants.ts                    |   3 +
 .../EapApplications/EapTableActions/i18n.json |   1 +
 .../EapApplications/EapTableActions/index.tsx |  25 ++-
 app/src/views/EapApplications/i18n.json       |   7 +-
 app/src/views/EapApplications/index.tsx       |  66 ++++---
 .../views/EapApplications/styles.module.css   |   7 +-
 app/src/views/EapRegistration/i18n.json       |   6 +-
 app/src/views/EapRegistration/index.tsx       | 164 +++++++++++++++---
 app/src/views/EapRegistration/schema.ts       |   4 +-
 app/src/views/EarlyActionProtocols/index.tsx  |   2 +-
 11 files changed, 223 insertions(+), 88 deletions(-)

diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index 00fa1594a..0fb0e0e86 100644
--- a/app/src/App/routes/index.tsx
+++ b/app/src/App/routes/index.tsx
@@ -1198,24 +1198,7 @@ const eapRegistrationLayout = customWrapRoute({
     },
 });
 
-const eapRegistrationFormIndex = customWrapRoute({
-    parent: eapRegistrationLayout,
-    index: true,
-    component: {
-        eagerLoad: true,
-        render: Navigate,
-        props: {
-            to: 'new' satisfies DefaultPerProcessChild,
-            replace: true,
-        },
-    },
-    context: {
-        title: 'EAP Registration',
-        visibility: 'anything',
-    },
-});
-
-const eapDevelopmentRegistration = customWrapRoute({
+const newEapDevelopmentRegistration = customWrapRoute({
     parent: eapRegistrationLayout,
     path: 'new' satisfies DefaultEapRegistrationChild,
     component: {
@@ -1232,14 +1215,14 @@ const eapDevelopmentRegistration = customWrapRoute({
 
 const eapDevelopmentRegistrationForm = customWrapRoute({
     parent: eapRegistrationLayout,
-    path: ':eapId/view',
+    path: ':eapId/',
     component: {
         render: () => import('#views/EapRegistration'),
         props: {},
     },
     wrapperComponent: Auth,
     context: {
-        title: 'View EAP Overview',
+        title: 'View EAP',
         visibility: 'is-authenticated',
     },
 });
@@ -1504,7 +1487,7 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
-    eapDevelopmentRegistration,
+    newEapDevelopmentRegistration,
     eapFullForm,
     simplifiedEapForm,
     ...regionRoutes,
@@ -1522,7 +1505,6 @@ const wrappedRoutes = {
     drefProcessLayout,
     eapRegistrationLayout,
     eapDevelopmentRegistrationForm,
-    eapRegistrationFormIndex,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));
diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
index 8d3ec82ce..453939d3e 100644
--- a/app/src/utils/constants.ts
+++ b/app/src/utils/constants.ts
@@ -199,3 +199,6 @@ export const multiMonthSelectDefaultValue = listToMap(
 export const ERU_READINESS_READY = 1;
 export const ERU_READINESS_CAN_CONTRIBUTE = 2;
 export const ERU_READINESS_NO_CAPACITY = 3;
+
+export const EAP_TYPE_SIMPLIFIED = 20;
+export const EAP_TYPE_FULL = 10;
diff --git a/app/src/views/EapApplications/EapTableActions/i18n.json b/app/src/views/EapApplications/EapTableActions/i18n.json
index dcacb9754..35e2dc216 100644
--- a/app/src/views/EapApplications/EapTableActions/i18n.json
+++ b/app/src/views/EapApplications/EapTableActions/i18n.json
@@ -2,6 +2,7 @@
     "namespace":"accountMyFormsEap",
     "strings":{
         "eapViewLabel": "View",
+        "eapEditLabel": "Edit",
         "eapFormLink": "Start Full EAP",
         "simplifiedEapLink": "Start sEAP"
     }
diff --git a/app/src/views/EapApplications/EapTableActions/index.tsx b/app/src/views/EapApplications/EapTableActions/index.tsx
index 24039a845..1294b0098 100644
--- a/app/src/views/EapApplications/EapTableActions/index.tsx
+++ b/app/src/views/EapApplications/EapTableActions/index.tsx
@@ -18,13 +18,24 @@ function EapTableActions(props: Props) {
     return (
         <TableActions
             extraActions={(
-                <DropdownMenuItem
-                    type="link"
-                    to="eapDevelopmentRegistrationForm"
-                    urlParams={{ eapId }}
-                >
-                    {strings.eapViewLabel}
-                </DropdownMenuItem>
+                <>
+                    <DropdownMenuItem
+                        type="link"
+                        to="eapDevelopmentRegistrationForm"
+                        urlParams={{ eapId }}
+                        state={{ mode: 'view' }}
+                    >
+                        {strings.eapViewLabel}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        type="link"
+                        to="eapDevelopmentRegistrationForm"
+                        urlParams={{ eapId }}
+                        state={{ mode: 'edit' }}
+                    >
+                        {strings.eapEditLabel}
+                    </DropdownMenuItem>
+                </>
             )}
         >
             <Link
diff --git a/app/src/views/EapApplications/i18n.json b/app/src/views/EapApplications/i18n.json
index 2c28c7659..aa1d449b3 100644
--- a/app/src/views/EapApplications/i18n.json
+++ b/app/src/views/EapApplications/i18n.json
@@ -2,6 +2,11 @@
     "namespace": "eapApplication",
     "strings": {
         "eapRegistrationLink": "Register Your EAP",
-        "eapApplicationsHeading": "EAP Application"
+        "eapApplicationsHeading": "EAP Application",
+        "eapLastUpdated": "Last Updated",
+        "eapName": "Name/Phase",
+        "eapType": "EAP Type",
+        "eapStatus": "Status",
+        "eapRegistration": "EAP Registration"
     }
 }
diff --git a/app/src/views/EapApplications/index.tsx b/app/src/views/EapApplications/index.tsx
index c6efb434c..7e92dea62 100644
--- a/app/src/views/EapApplications/index.tsx
+++ b/app/src/views/EapApplications/index.tsx
@@ -5,6 +5,7 @@ import {
 } from 'react';
 import {
     Container,
+    Pager,
     type RowOptions,
     Table,
     TableBodyContent,
@@ -22,6 +23,10 @@ import {
 
 import Link from '#components/Link';
 import useFilterState from '#hooks/useFilterState';
+import {
+    EAP_TYPE_FULL,
+    EAP_TYPE_SIMPLIFIED,
+} from '#utils/constants';
 import {
     type GoApiResponse,
     useRequest,
@@ -37,6 +42,7 @@ type EapResponse = GoApiResponse<'/api/v2/eap-registration/'>;
 type EapListItem = NonNullable<EapResponse['results']>[number];
 
 type Key = EapListItem['id'];
+const ITEM_PER_PAGE = 6;
 
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
@@ -50,9 +56,11 @@ export function Component() {
         rawFilter,
         filtered,
         setFilterField,
+        page,
+        setPage,
     } = useFilterState<FilterValue>({
         filter: {},
-        pageSize: 6,
+        pageSize: ITEM_PER_PAGE,
     });
 
     const {
@@ -82,19 +90,18 @@ export function Component() {
         () => ([
             createDateColumn<EapListItem, number>(
                 'created_at',
-                'Last Updated',
+                strings.eapLastUpdated,
                 (item) => item.created_at,
-                { columnClassName: styles.date },
             ),
             createStringColumn<EapListItem, number>(
                 'name',
-                'Name/Phase',
+                strings.eapName,
                 (item) => {
                     const baseYear = new Date(item.created_at).getFullYear();
                     let addedYear = baseYear;
-                    if (item.eap_type === 10) {
-                        addedYear = baseYear + 4;
-                    } else if (item.eap_type === 20) {
+                    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}:
@@ -105,24 +112,15 @@ export function Component() {
             ),
             createStringColumn<EapListItem, number>(
                 'eap_type_display',
-                'EAP Type',
+                strings.eapType,
                 (item) => item.eap_type_display,
-                { columnClassName: styles.type },
             ),
             createStringColumn<EapListItem, number>(
                 'status_display',
-                'Status',
+                strings.eapStatus,
                 (item) => item.status_display,
                 { columnClassName: styles.status },
             ),
-        ]),
-        [],
-    );
-
-    const aggregatedColumns = useMemo(
-        () => ([
-            createExpansionIndicatorColumn<EapListItem, Key>(false),
-            ...baseColumns,
             createExpandColumn<EapListItem, Key>(
                 'expandRow',
                 '',
@@ -132,7 +130,14 @@ export function Component() {
                 }),
             ),
         ]),
-        [baseColumns, handleExpandClick, expandedRow],
+        [
+            strings.eapLastUpdated,
+            strings.eapName,
+            strings.eapType,
+            strings.eapStatus,
+            expandedRow,
+            handleExpandClick,
+        ],
     );
 
     const detailColumns = useMemo(
@@ -141,22 +146,21 @@ export function Component() {
             createStringColumn<EapListItem, number>(
                 'title',
                 '',
-                () => 'EAP Registration',
+                () => strings.eapRegistration,
                 { columnClassName: styles.detailTitle },
             ),
+            createEmptyColumn(),
             createElementColumn<EapListItem, number, EapTableActionProps>(
                 'actions',
-                'EAP Registration',
+                '',
                 EapTableActions,
                 (eapId) => ({
                     eapId,
                 }),
             ),
             createEmptyColumn(),
-            createEmptyColumn(),
-            createEmptyColumn(),
         ]),
-        [],
+        [strings.eapRegistration],
     );
 
     const rowModifier = useCallback(
@@ -193,7 +197,7 @@ export function Component() {
             childrenContainerClassName={styles.eapFormLinks}
             heading={strings.eapApplicationsHeading}
             withHeaderBorder
-            filters={(
+            filters={(eapResponse?.count ?? 0) > 0 && (
                 <Filters
                     value={rawFilter}
                     onChange={setFilterField}
@@ -201,17 +205,25 @@ export function Component() {
             )}
             actions={(
                 <Link
-                    to="home"
+                    to="newEapDevelopmentRegistration"
                     variant="secondary"
                 >
                     {strings.eapRegistrationLink}
                 </Link>
             )}
+            footerActions={(
+                <Pager
+                    activePage={page}
+                    itemsCount={eapResponse?.count ?? 0}
+                    maxItemsPerPage={limit}
+                    onActivePageChange={setPage}
+                />
+            )}
         >
             <Table
                 className={styles.table}
                 data={eapResponse?.results}
-                columns={aggregatedColumns}
+                columns={baseColumns}
                 rowModifier={rowModifier}
                 keySelector={numericIdSelector}
                 pending={eapPending}
diff --git a/app/src/views/EapApplications/styles.module.css b/app/src/views/EapApplications/styles.module.css
index 726e43b99..f78eeb90a 100644
--- a/app/src/views/EapApplications/styles.module.css
+++ b/app/src/views/EapApplications/styles.module.css
@@ -1,12 +1,9 @@
 .eap-form-links {
     .table {
-        .type,
-        .status,
-        .date {
+        .status {
             width: 0%;
-            min-width: 7rem;
+            min-width: 19rem;
         }
-
         .sub-cell {
             border-bottom: unset;
             background-color: var(--go-ui-color-gray-20);
diff --git a/app/src/views/EapRegistration/i18n.json b/app/src/views/EapRegistration/i18n.json
index de60e6530..9a8304afc 100644
--- a/app/src/views/EapRegistration/i18n.json
+++ b/app/src/views/EapRegistration/i18n.json
@@ -37,11 +37,15 @@
         "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."
+        "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
index 3e3e08b4f..c776ad9da 100644
--- a/app/src/views/EapRegistration/index.tsx
+++ b/app/src/views/EapRegistration/index.tsx
@@ -3,6 +3,10 @@ import {
     useCallback,
     useRef,
 } from 'react';
+import {
+    useLocation,
+    useParams,
+} from 'react-router-dom';
 import {
     ConfirmButton,
     Container,
@@ -17,6 +21,11 @@ import {
     resolveToComponent,
     stringValueSelector,
 } from '@ifrc-go/ui/utils';
+import {
+    isDefined,
+    isNotDefined,
+    isTruthyString,
+} from '@togglecorp/fujs';
 import {
     createSubmitHandler,
     getErrorObject,
@@ -25,6 +34,7 @@ import {
 
 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';
@@ -36,6 +46,7 @@ import {
     type GoApiBody,
     type GoApiResponse,
     useLazyRequest,
+    useRequest,
 } from '#utils/restRequest';
 import { transformObjectError } from '#utils/restRequest/error';
 
@@ -61,12 +72,18 @@ 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 });
 
@@ -77,6 +94,23 @@ export function Component() {
     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,
@@ -108,6 +142,49 @@ export function Component() {
         },
     });
 
+    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);
@@ -116,19 +193,32 @@ export function Component() {
     );
 
     const handleEapTypeClick = useCallback(() => {
-        setFieldValue(undefined, 'eap_type');
-    }, [setFieldValue]);
+        if (isReadOnly) {
+            return;
+        }
+        setFieldValue(null, 'eap_type');
+    }, [isReadOnly, setFieldValue]);
 
     const handleSubmissionTimeClick = useCallback(() => {
-        setFieldValue(undefined, 'expected_submission_time');
-    }, [setFieldValue]);
+        if (isReadOnly) {
+            return;
+        }
+        setFieldValue(null, 'expected_submission_time');
+    }, [isReadOnly, setFieldValue]);
 
     const eapRegistration = useCallback(() => {
         const handler = createSubmitHandler(
             validate,
             setError,
             (formValues) => {
-                eapRegister(formValues as EapRegisterRequestBody);
+                if (isNotDefined(eapId)) {
+                    eapRegister(formValues as EapRegisterRequestBody);
+                } else {
+                    updateEapRegistration({
+                        ...formValues,
+                        id: eapId,
+                    } as EapRegisterRequestBody);
+                }
             },
         );
         handler();
@@ -136,6 +226,8 @@ export function Component() {
         setError,
         validate,
         eapRegister,
+        updateEapRegistration,
+        eapId,
     ]);
 
     const handleFormError = useCallback(() => {
@@ -157,7 +249,15 @@ export function Component() {
         setError,
     ]);
 
-    const disabled = eapRegistrationPending;
+    const disabled = eapRegistrationPending || fetchingEap || updateEapRegistrationPending;
+
+    if (isDefined(eapError)) {
+        return (
+            <FormFailedToLoadMessage
+                description={strings.eapFailedToLoad}
+            />
+        );
+    }
 
     return (
         <Page
@@ -180,7 +280,7 @@ export function Component() {
                     to="accountMyFormsEap"
                     variant="secondary"
                 >
-                    {strings.eapCancelButton}
+                    {eapId ? strings.eapBackButton : strings.eapCancelButton}
                 </Link>
             )}
             withBackgroundColorInMainSection
@@ -201,6 +301,7 @@ export function Component() {
                             onChange={setFieldValue}
                             value={value?.national_society}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                     </InputSection>
                     <InputSection
@@ -214,6 +315,7 @@ export function Component() {
                             onChange={handleCountryChange}
                             value={value?.country}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                     </InputSection>
                     <InputSection
@@ -227,6 +329,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.disaster_type}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                     </InputSection>
                     <InputSection
@@ -238,19 +341,20 @@ export function Component() {
                     >
                         <RadioInput
                             name="eap_type"
-                            value={value?.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"
                             label={strings.eapNotSure}
-                            value={value?.eap_type === undefined}
+                            value={value?.eap_type === null}
                             onClick={handleEapTypeClick}
-                            disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                     </InputSection>
                     <InputSection
@@ -262,15 +366,16 @@ export function Component() {
                         <DateInput
                             name="expected_submission_time"
                             onChange={setFieldValue}
-                            value={value?.expected_submission_time}
+                            value={value?.expected_submission_time ?? undefined}
                             error={error?.expected_submission_time}
+                            readOnly={isReadOnly}
                         />
                         <Radio
                             name="expected_submission_time"
                             label={strings.eapNotSure}
-                            value={value?.expected_submission_time === undefined}
+                            value={value?.expected_submission_time === null}
                             onClick={handleSubmissionTimeClick}
-                            disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                     </InputSection>
                     <InputSection
@@ -283,6 +388,7 @@ export function Component() {
                             value={value.partners}
                             onChange={setFieldValue}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                     </InputSection>
                 </Container>
@@ -301,6 +407,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.national_society_contact_name}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                         <TextInput
                             label={strings.eapNSTitle}
@@ -309,6 +416,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.national_society_contact_title}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                         <TextInput
                             label={strings.eapNSEmail}
@@ -317,6 +425,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.national_society_contact_email}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                         <TextInput
                             label={strings.eapNSPhoneNumber}
@@ -325,6 +434,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.national_society_contact_phone_number}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                     </InputSection>
                     <InputSection
@@ -339,6 +449,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.ifrc_contact_name}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                         <TextInput
                             label={strings.eapIFRCTitle}
@@ -347,6 +458,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.ifrc_contact_title}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                         <TextInput
                             label={strings.eapIFRCEmail}
@@ -355,6 +467,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.ifrc_contact_email}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                         <TextInput
                             label={strings.eapIFRCPhoneNumber}
@@ -363,6 +476,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.ifrc_contact_phone_number}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                     </InputSection>
                     <InputSection
@@ -377,6 +491,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.dref_focal_point_name}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                         <TextInput
                             label={strings.eapFocalPointTitle}
@@ -385,6 +500,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.dref_focal_point_title}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                         <TextInput
                             label={strings.eapFocalPointEmail}
@@ -393,6 +509,7 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.dref_focal_point_email}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                         <TextInput
                             label={strings.eapFocalPointPhoneNumber}
@@ -401,20 +518,23 @@ export function Component() {
                             onChange={setFieldValue}
                             error={error?.dref_focal_point_phone_number}
                             disabled={disabled}
+                            readOnly={isReadOnly}
                         />
                     </InputSection>
                 </Container>
             </div>
             <div className={styles.footer}>
-                <ConfirmButton
-                    name={undefined}
-                    confirmHeading={strings.eapDevelopmentRegistrationHeading}
-                    confirmMessage={strings.eapDevelopmentRegistrationDescription}
-                    onConfirm={handleEapRegistration}
-                    disabled={disabled}
-                >
-                    {strings.eapSubmitButton}
-                </ConfirmButton>
+                {!isReadOnly && (
+                    <ConfirmButton
+                        name={undefined}
+                        confirmHeading={strings.eapDevelopmentRegistrationHeading}
+                        confirmMessage={strings.eapDevelopmentRegistrationDescription}
+                        onConfirm={handleEapRegistration}
+                        disabled={disabled}
+                    >
+                        {strings.eapSubmitButton}
+                    </ConfirmButton>
+                )}
             </div>
         </Page>
     );
diff --git a/app/src/views/EapRegistration/schema.ts b/app/src/views/EapRegistration/schema.ts
index 640e0b1cb..17dca9c0b 100644
--- a/app/src/views/EapRegistration/schema.ts
+++ b/app/src/views/EapRegistration/schema.ts
@@ -9,8 +9,8 @@ import { type GoApiBody } from '#utils/restRequest';
 type EapRegisterRequestBody = GoApiBody<'/api/v2/eap-registration/', 'POST'>;
 
 export const defaultFormValue: FormFields = {
-    eap_type: null,
-    expected_submission_time: null,
+    eap_type: undefined,
+    expected_submission_time: undefined,
 };
 
 type FormFields = PartialForm<EapRegisterRequestBody>;
diff --git a/app/src/views/EarlyActionProtocols/index.tsx b/app/src/views/EarlyActionProtocols/index.tsx
index 3cd1d79d4..fa7d968d3 100644
--- a/app/src/views/EarlyActionProtocols/index.tsx
+++ b/app/src/views/EarlyActionProtocols/index.tsx
@@ -21,7 +21,7 @@ export function Component() {
             childrenContainerClassName={styles.content}
             actions={(
                 <Link
-                    to="eapDevelopmentRegistration"
+                    to="newEapDevelopmentRegistration"
                     variant="secondary"
                 >
                     {strings.eapRegistrationLink}

From 6767eea23215d1f78a029e317b07f5e3541305e2 Mon Sep 17 00:00:00 2001
From: Shreeyash Shrestha <shreeyash.shrestha@togglecorp.com>
Date: Tue, 18 Nov 2025 11:56:11 +0545
Subject: [PATCH 08/19] fix(eap): update eap section according to new UI

---
 app/src/App/routes/index.tsx                  |  2 +-
 .../EapTableActions/i18n.json                 |  0
 .../EapTableActions/index.tsx                 |  6 +-
 .../Filters/i18n.json                         |  0
 .../Filters/index.tsx                         |  0
 .../i18n.json                                 |  0
 .../index.tsx                                 | 12 +--
 app/src/views/DrefDetail/index.tsx            | 76 ++++++++++---------
 app/src/views/DrefDetail/styles.module.css    | 11 ---
 .../views/EapApplications/styles.module.css   | 12 ---
 app/src/views/EapRegistration/index.tsx       | 42 ++++++----
 .../views/EapRegistration/styles.module.css   | 23 +-----
 app/src/views/EarlyActionProtocols/index.tsx  | 74 ++++++++++--------
 .../EarlyActionProtocols/styles.module.css    | 11 ---
 14 files changed, 118 insertions(+), 151 deletions(-)
 rename app/src/views/{EapApplications => AccountMyFormsEap}/EapTableActions/i18n.json (100%)
 rename app/src/views/{EapApplications => AccountMyFormsEap}/EapTableActions/index.tsx (91%)
 rename app/src/views/{EapApplications => AccountMyFormsEap}/Filters/i18n.json (100%)
 rename app/src/views/{EapApplications => AccountMyFormsEap}/Filters/index.tsx (100%)
 rename app/src/views/{EapApplications => AccountMyFormsEap}/i18n.json (100%)
 rename app/src/views/{EapApplications => AccountMyFormsEap}/index.tsx (93%)
 delete mode 100644 app/src/views/DrefDetail/styles.module.css
 delete mode 100644 app/src/views/EapApplications/styles.module.css
 delete mode 100644 app/src/views/EarlyActionProtocols/styles.module.css

diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index 0fb0e0e86..799bcdf31 100644
--- a/app/src/App/routes/index.tsx
+++ b/app/src/App/routes/index.tsx
@@ -763,7 +763,7 @@ const accountMyFormsEap = customWrapRoute({
     parent: accountMyFormsLayout,
     path: 'eap-applications',
     component: {
-        render: () => import('#views/EapApplications'),
+        render: () => import('#views/AccountMyFormsEap'),
         props: {},
     },
     context: {
diff --git a/app/src/views/EapApplications/EapTableActions/i18n.json b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
similarity index 100%
rename from app/src/views/EapApplications/EapTableActions/i18n.json
rename to app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
diff --git a/app/src/views/EapApplications/EapTableActions/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
similarity index 91%
rename from app/src/views/EapApplications/EapTableActions/index.tsx
rename to app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
index 1294b0098..bf783af4c 100644
--- a/app/src/views/EapApplications/EapTableActions/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
@@ -41,14 +41,16 @@ function EapTableActions(props: Props) {
             <Link
                 to="eapFullForm"
                 urlParams={{ eapId }}
-                variant="secondary"
+                styleVariant="outline"
+                colorVariant="primary"
             >
                 {strings.eapFormLink}
             </Link>
             <Link
                 to="simplifiedEapForm"
                 urlParams={{ eapId }}
-                variant="secondary"
+                styleVariant="outline"
+                colorVariant="primary"
             >
                 {strings.simplifiedEapLink}
             </Link>
diff --git a/app/src/views/EapApplications/Filters/i18n.json b/app/src/views/AccountMyFormsEap/Filters/i18n.json
similarity index 100%
rename from app/src/views/EapApplications/Filters/i18n.json
rename to app/src/views/AccountMyFormsEap/Filters/i18n.json
diff --git a/app/src/views/EapApplications/Filters/index.tsx b/app/src/views/AccountMyFormsEap/Filters/index.tsx
similarity index 100%
rename from app/src/views/EapApplications/Filters/index.tsx
rename to app/src/views/AccountMyFormsEap/Filters/index.tsx
diff --git a/app/src/views/EapApplications/i18n.json b/app/src/views/AccountMyFormsEap/i18n.json
similarity index 100%
rename from app/src/views/EapApplications/i18n.json
rename to app/src/views/AccountMyFormsEap/i18n.json
diff --git a/app/src/views/EapApplications/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
similarity index 93%
rename from app/src/views/EapApplications/index.tsx
rename to app/src/views/AccountMyFormsEap/index.tsx
index 7e92dea62..35a643200 100644
--- a/app/src/views/EapApplications/index.tsx
+++ b/app/src/views/AccountMyFormsEap/index.tsx
@@ -36,7 +36,6 @@ import EapTableActions, { type Props as EapTableActionProps } from './EapTableAc
 import Filters, { type FilterValue } from './Filters';
 
 import i18n from './i18n.json';
-import styles from './styles.module.css';
 
 type EapResponse = GoApiResponse<'/api/v2/eap-registration/'>;
 type EapListItem = NonNullable<EapResponse['results']>[number];
@@ -108,7 +107,6 @@ export function Component() {
                         ${item.disaster_type_details?.name}
                         ${baseYear} - ${addedYear}`;
                 },
-                { columnClassName: styles.title },
             ),
             createStringColumn<EapListItem, number>(
                 'eap_type_display',
@@ -119,7 +117,6 @@ export function Component() {
                 'status_display',
                 strings.eapStatus,
                 (item) => item.status_display,
-                { columnClassName: styles.status },
             ),
             createExpandColumn<EapListItem, Key>(
                 'expandRow',
@@ -147,7 +144,6 @@ export function Component() {
                 'title',
                 '',
                 () => strings.eapRegistration,
-                { columnClassName: styles.detailTitle },
             ),
             createEmptyColumn(),
             createElementColumn<EapListItem, number, EapTableActionProps>(
@@ -180,7 +176,6 @@ export function Component() {
                         keySelector={numericIdSelector}
                         data={subRows}
                         columns={detailColumns}
-                        cellClassName={styles.subCell}
                     />
                 </>
             );
@@ -194,7 +189,6 @@ export function Component() {
 
     return (
         <Container
-            childrenContainerClassName={styles.eapFormLinks}
             heading={strings.eapApplicationsHeading}
             withHeaderBorder
             filters={(eapResponse?.count ?? 0) > 0 && (
@@ -203,10 +197,11 @@ export function Component() {
                     onChange={setFilterField}
                 />
             )}
-            actions={(
+            headerActions={(
                 <Link
                     to="newEapDevelopmentRegistration"
-                    variant="secondary"
+                    styleVariant="outline"
+                    colorVariant="primary"
                 >
                     {strings.eapRegistrationLink}
                 </Link>
@@ -221,7 +216,6 @@ export function Component() {
             )}
         >
             <Table
-                className={styles.table}
                 data={eapResponse?.results}
                 columns={baseColumns}
                 rowModifier={rowModifier}
diff --git a/app/src/views/DrefDetail/index.tsx b/app/src/views/DrefDetail/index.tsx
index 117cd526c..33869faf0 100644
--- a/app/src/views/DrefDetail/index.tsx
+++ b/app/src/views/DrefDetail/index.tsx
@@ -1,11 +1,13 @@
-import { Container } from '@ifrc-go/ui';
+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';
-import styles from './styles.module.css';
 
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
@@ -13,42 +15,42 @@ export function Component() {
     const strings = useTranslation(i18n);
 
     return (
-        <Container
-            className={styles.drefDetail}
-            contentViewType="vertical"
-            childrenContainerClassName={styles.content}
-        >
-            <SurgeContentContainer
-                heading={strings.drefIntroHeading}
+        <Container>
+            <ListView
+                layout="block"
             >
-                <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>
+                <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>
     );
 }
diff --git a/app/src/views/DrefDetail/styles.module.css b/app/src/views/DrefDetail/styles.module.css
deleted file mode 100644
index c850c0ee2..000000000
--- a/app/src/views/DrefDetail/styles.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.dref-detail {
-    display: flex;
-    flex-direction: column;
-    padding: var(--go-ui-spacing-2xl) 0;
-
-    .content {
-        display: flex;
-        flex-direction: column;
-        gap: var(--go-ui-spacing-xl);
-    }
-}
diff --git a/app/src/views/EapApplications/styles.module.css b/app/src/views/EapApplications/styles.module.css
deleted file mode 100644
index f78eeb90a..000000000
--- a/app/src/views/EapApplications/styles.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.eap-form-links {
-    .table {
-        .status {
-            width: 0%;
-            min-width: 19rem;
-        }
-        .sub-cell {
-            border-bottom: unset;
-            background-color: var(--go-ui-color-gray-20);
-        }
-    }
-}
\ No newline at end of file
diff --git a/app/src/views/EapRegistration/index.tsx b/app/src/views/EapRegistration/index.tsx
index c776ad9da..16d65dc60 100644
--- a/app/src/views/EapRegistration/index.tsx
+++ b/app/src/views/EapRegistration/index.tsx
@@ -12,6 +12,7 @@ import {
     Container,
     DateInput,
     InputSection,
+    ListView,
     Radio,
     RadioInput,
     TextInput,
@@ -261,7 +262,6 @@ export function Component() {
 
     return (
         <Page
-            mainSectionClassName={styles.eapRegistrationForm}
             heading={strings.eapRegistrationHeading}
             description={resolveToComponent(
                 strings.eapRegistrationDescription,
@@ -278,17 +278,20 @@ export function Component() {
             actions={(
                 <Link
                     to="accountMyFormsEap"
-                    variant="secondary"
+                    styleVariant="outline"
+                    colorVariant="primary"
                 >
                     {eapId ? strings.eapBackButton : strings.eapCancelButton}
                 </Link>
             )}
+            elementRef={formContentRef}
             withBackgroundColorInMainSection
         >
-            <div ref={formContentRef}>
-                <Container
-                    heading={strings.eapApplicationDetails}
-                    childrenContainerClassName={styles.content}
+            <Container
+                heading={strings.eapApplicationDetails}
+            >
+                <ListView
+                    layout="block"
                 >
                     <InputSection
                         title={strings.eapNationalSociety}
@@ -336,7 +339,6 @@ export function Component() {
                         title={strings.eapType}
                         // TODO: Add link here
                         description={strings.eapTypeDescription}
-                        contentSectionClassName={styles.radioContent}
                         withAsteriskOnTitle
                     >
                         <RadioInput
@@ -349,9 +351,12 @@ export function Component() {
                             error={error?.eap_type}
                             readOnly={isReadOnly}
                         />
+                        {/* FIXME: label is not showing */}
                         <Radio
                             name="eap_type"
-                            label={strings.eapNotSure}
+                            // FIXME: inputname should not be strings
+                            // it should be transferred to label
+                            inputName={strings.eapNotSure}
                             value={value?.eap_type === null}
                             onClick={handleEapTypeClick}
                             readOnly={isReadOnly}
@@ -360,7 +365,6 @@ export function Component() {
                     <InputSection
                         title={strings.eapSubmission}
                         description={strings.eapSubmissionDescription}
-                        contentSectionClassName={styles.radioContent}
                         withAsteriskOnTitle
                     >
                         <DateInput
@@ -370,9 +374,12 @@ export function Component() {
                             error={error?.expected_submission_time}
                             readOnly={isReadOnly}
                         />
+                        {/* FIXME: label is not showing */}
                         <Radio
                             name="expected_submission_time"
-                            label={strings.eapNotSure}
+                            // FIXME: inputname should not be strings
+                            // it should be transferred to label
+                            inputName={strings.eapNotSure}
                             value={value?.expected_submission_time === null}
                             onClick={handleSubmissionTimeClick}
                             readOnly={isReadOnly}
@@ -391,9 +398,14 @@ export function Component() {
                             readOnly={isReadOnly}
                         />
                     </InputSection>
-                </Container>
-                <Container
-                    heading={strings.eapContacts}
+                </ListView>
+            </Container>
+            <Container
+                heading={strings.eapContacts}
+                spacing="md"
+            >
+                <ListView
+                    layout="block"
                 >
                     <InputSection
                         title={strings.eapNSContact}
@@ -521,8 +533,8 @@ export function Component() {
                             readOnly={isReadOnly}
                         />
                     </InputSection>
-                </Container>
-            </div>
+                </ListView>
+            </Container>
             <div className={styles.footer}>
                 {!isReadOnly && (
                     <ConfirmButton
diff --git a/app/src/views/EapRegistration/styles.module.css b/app/src/views/EapRegistration/styles.module.css
index a6479f54a..fdeaccbca 100644
--- a/app/src/views/EapRegistration/styles.module.css
+++ b/app/src/views/EapRegistration/styles.module.css
@@ -1,22 +1,5 @@
-.eap-registration-form {
+.footer {
     display: flex;
-    flex-direction: column;
-    gap: var(--go-ui-spacing-md);
-
-    .content {
-        display: flex;
-        flex-direction: column;
-        gap: var(--go-ui-spacing-md);
-
-        .radio-content {
-            display: flex;
-            gap: var(--go-ui-spacing-md);
-        }
-    }
-
-    .footer {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
+    align-items: center;
+    justify-content: center;
 }
diff --git a/app/src/views/EarlyActionProtocols/index.tsx b/app/src/views/EarlyActionProtocols/index.tsx
index fa7d968d3..98ac8ff32 100644
--- a/app/src/views/EarlyActionProtocols/index.tsx
+++ b/app/src/views/EarlyActionProtocols/index.tsx
@@ -1,13 +1,13 @@
 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';
-import styles from './styles.module.css';
 
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
@@ -16,46 +16,54 @@ export function Component() {
 
     return (
         <Container
-            className={styles.eapDetail}
-            contentViewType="vertical"
-            childrenContainerClassName={styles.content}
-            actions={(
+            headerActions={(
                 <Link
                     to="newEapDevelopmentRegistration"
-                    variant="secondary"
+                    styleVariant="outline"
+                    colorVariant="primary"
                 >
                     {strings.eapRegistrationLink}
                 </Link>
             )}
         >
-            <ExpandableContainer
-                heading={strings.eapContent}
+            <ListView
+                layout="block"
             >
-                <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}
-            />
-            <ExpandableContainer
-                heading={strings.eapContentSubHeadingThree}
-            />
+                <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>
     );
 }
diff --git a/app/src/views/EarlyActionProtocols/styles.module.css b/app/src/views/EarlyActionProtocols/styles.module.css
deleted file mode 100644
index 4df12fe2b..000000000
--- a/app/src/views/EarlyActionProtocols/styles.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.eap-detail {
-    display: flex;
-    flex-direction: column;
-    padding: var(--go-ui-spacing-2xl) 0;
-
-    .content {
-        display: flex;
-        flex-direction: column;
-        gap: var(--go-ui-spacing-lg);
-    }
-}

From 4395c69c11ed29aa0b761d5e32f2298ad34faf6e Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Tue, 28 Oct 2025 16:00:13 +0545
Subject: [PATCH 09/19] feat(eap): add simplified EAP form

- Update DREF table actions
---
 app/src/App/routes/index.tsx                  |  11 +-
 .../domain/GoMultiFileInput/index.tsx         |   2 +-
 .../domain/GoSingleFileInput/index.tsx        |   2 +-
 .../domain/ImageWithCaptionInput/index.tsx    |   2 +-
 .../MultiImageWithCaptionInput/index.tsx      |   2 +-
 app/src/utils/constants.ts                    |  14 +-
 .../EapTableActions/i18n.json                 |   6 +-
 .../EapTableActions/index.tsx                 |  69 +-
 app/src/views/AccountMyFormsEap/index.tsx     |  19 +-
 app/src/views/DrefApplicationForm/index.tsx   |   1 +
 app/src/views/EapRegistration/index.tsx       |  49 +-
 .../DeliveryAndBudget/i18n.json               |  21 +
 .../DeliveryAndBudget/index.tsx               | 152 ++++
 .../DistrictMapModal/DistrictItem/i18n.json   |   7 +
 .../DistrictMapModal/DistrictItem/index.tsx   | 106 +++
 .../DistrictItem/styles.module.css            |  56 ++
 .../DistrictMap/DistrictMapModal/i18n.json    |  11 +
 .../DistrictMap/DistrictMapModal/index.tsx    | 688 ++++++++++++++++++
 .../DistrictMapModal/styles.module.css        |  36 +
 .../EarlyAction/DistrictMap/i18n.json         |   6 +
 .../EarlyAction/DistrictMap/index.tsx         | 127 ++++
 .../EarlyAction/DistrictMap/styles.module.css |  14 +
 .../SimplifiedEapForm/EarlyAction/i18n.json   |  28 +
 .../SimplifiedEapForm/EarlyAction/index.tsx   | 277 +++++++
 .../ApproachesInput/ActivityInput/i18n.json   |   8 +
 .../ApproachesInput/ActivityInput/index.tsx   | 166 +++++
 .../ApproachesInput/i18n.json                 |  14 +
 .../ApproachesInput/index.tsx                 | 315 ++++++++
 .../EnablingApproaches/i18n.json              |   7 +
 .../EnablingApproaches/index.tsx              | 169 +++++
 .../SimplifiedEapForm/Overview/i18n.json      |  69 ++
 .../SimplifiedEapForm/Overview/index.tsx      | 525 +++++++++++++
 .../OperationsInput/ActivityInput/i18n.json   |   8 +
 .../OperationsInput/ActivityInput/index.tsx   | 165 +++++
 .../OperationsInput/i18n.json                 |  14 +
 .../OperationsInput/index.tsx                 | 317 ++++++++
 .../PlannedOperations/i18n.json               |   7 +
 .../PlannedOperations/index.tsx               | 167 +++++
 .../SimplifiedEapForm/RiskAnalysis/i18n.json  |  15 +
 .../SimplifiedEapForm/RiskAnalysis/index.tsx  | 142 ++++
 app/src/views/SimplifiedEapForm/common.tsx    | 122 ++++
 app/src/views/SimplifiedEapForm/i18n.json     |  20 +
 app/src/views/SimplifiedEapForm/index.tsx     | 418 ++++++++++-
 app/src/views/SimplifiedEapForm/schema.ts     | 339 +++++++++
 .../views/SimplifiedEapForm/styles.module.css |  18 +
 45 files changed, 4662 insertions(+), 69 deletions(-)
 create mode 100644 app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/styles.module.css
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/styles.module.css
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/styles.module.css
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/EnablingApproaches/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/Overview/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/Overview/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/PlannedOperations/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/common.tsx
 create mode 100644 app/src/views/SimplifiedEapForm/i18n.json
 create mode 100644 app/src/views/SimplifiedEapForm/schema.ts
 create mode 100644 app/src/views/SimplifiedEapForm/styles.module.css

diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index 799bcdf31..75e1e370e 100644
--- a/app/src/App/routes/index.tsx
+++ b/app/src/App/routes/index.tsx
@@ -773,9 +773,9 @@ const accountMyFormsEap = customWrapRoute({
     },
 });
 
-const eapFullForm = customWrapRoute({
+const fullEapForm = customWrapRoute({
     parent: rootLayout,
-    path: 'eap-full-form',
+    path: 'eap/:eapId/full',
     component: {
         render: () => import('#views/EapFullForm'),
         props: {},
@@ -790,16 +790,15 @@ const eapFullForm = customWrapRoute({
 
 const simplifiedEapForm = customWrapRoute({
     parent: rootLayout,
-    path: 'simplified-eap-form',
+    path: 'eap/:eapId/simplified',
     component: {
         render: () => import('#views/SimplifiedEapForm'),
         props: {},
     },
     wrapperComponent: Auth,
     context: {
-        title: 'Simplified EAP Forms',
+        title: 'Simplified EAP Form',
         visibility: 'is-authenticated',
-        permissions: ({ isGuestUser }) => !isGuestUser,
     },
 });
 
@@ -1488,7 +1487,7 @@ const wrappedRoutes = {
     operationalLearning,
     montandonLandingPage,
     newEapDevelopmentRegistration,
-    eapFullForm,
+    fullEapForm,
     simplifiedEapForm,
     ...regionRoutes,
     ...countryRoutes,
diff --git a/app/src/components/domain/GoMultiFileInput/index.tsx b/app/src/components/domain/GoMultiFileInput/index.tsx
index d4f8f7491..c15ffb360 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 dc885dfe7..af10bd788 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/index.tsx b/app/src/components/domain/ImageWithCaptionInput/index.tsx
index cf74833d9..5a3b877fb 100644
--- a/app/src/components/domain/ImageWithCaptionInput/index.tsx
+++ b/app/src/components/domain/ImageWithCaptionInput/index.tsx
@@ -24,7 +24,7 @@ import i18n from './i18n.json';
 type Value = {
     id?: number | undefined;
     client_id: string;
-    caption?: string | undefined;
+    caption?: string | undefined | null;
 };
 
 interface Props<N> {
diff --git a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
index c7e2be846..5fe4a5c01 100644
--- a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
+++ b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
@@ -32,7 +32,7 @@ import styles from './styles.module.css';
 type Value = {
     client_id: string;
     id?: number;
-    caption?: string;
+    caption?: string | null;
 };
 
 interface Props<N> {
diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
index 453939d3e..855310536 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,9 +196,19 @@ 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;
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
index 35e2dc216..e4d9e1211 100644
--- a/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
@@ -3,7 +3,9 @@
     "strings":{
         "eapViewLabel": "View",
         "eapEditLabel": "Edit",
-        "eapFormLink": "Start Full EAP",
-        "simplifiedEapLink": "Start sEAP"
+        "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
index bf783af4c..b355a6fda 100644
--- a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
@@ -3,15 +3,24 @@ import { useTranslation } from '@ifrc-go/ui/hooks';
 
 import DropdownMenuItem from '#components/DropdownMenuItem';
 import Link from '#components/Link';
+import { type GoApiResponse } from '#utils/restRequest';
 
 import i18n from './i18n.json';
+import { isNotDefined } from '@togglecorp/fujs';
+import { EAP_TYPE_FULL, EAP_TYPE_SIMPLIFIED } from '#utils/constants';
+
+type EapResponse = GoApiResponse<'/api/v2/eap-registration/{id}/'>;
 
 export interface Props {
     eapId: number;
+    eapType: EapResponse['eap_type'];
 }
 
 function EapTableActions(props: Props) {
-    const { eapId } = props;
+    const {
+        eapId,
+        eapType,
+    } = props;
 
     const strings = useTranslation(i18n);
 
@@ -23,6 +32,7 @@ function EapTableActions(props: Props) {
                         type="link"
                         to="eapDevelopmentRegistrationForm"
                         urlParams={{ eapId }}
+                        // FIXME: we should use the route for read-only view
                         state={{ mode: 'view' }}
                     >
                         {strings.eapViewLabel}
@@ -31,6 +41,7 @@ function EapTableActions(props: Props) {
                         type="link"
                         to="eapDevelopmentRegistrationForm"
                         urlParams={{ eapId }}
+                        // FIXME: we should use separate route for edit view
                         state={{ mode: 'edit' }}
                     >
                         {strings.eapEditLabel}
@@ -38,22 +49,46 @@ function EapTableActions(props: Props) {
                 </>
             )}
         >
-            <Link
-                to="eapFullForm"
-                urlParams={{ eapId }}
-                styleVariant="outline"
-                colorVariant="primary"
-            >
-                {strings.eapFormLink}
-            </Link>
-            <Link
-                to="simplifiedEapForm"
-                urlParams={{ eapId }}
-                styleVariant="outline"
-                colorVariant="primary"
-            >
-                {strings.simplifiedEapLink}
-            </Link>
+            {isNotDefined(eapType) && (
+                <Link
+                    to="fullEapForm"
+                    urlParams={{ eapId }}
+                    styleVariant="outline"
+                    colorVariant="primary"
+                >
+                    {strings.eapStartFullLink}
+                </Link>
+            )}
+            {isNotDefined(eapType) && (
+                <Link
+                    to="simplifiedEapForm"
+                    urlParams={{ eapId }}
+                    styleVariant="outline"
+                    colorVariant="primary"
+                >
+                    {strings.eapStartSimplifiedLink}
+                </Link>
+            )}
+            {eapType === EAP_TYPE_FULL && (
+                <Link
+                    to="fullEapForm"
+                    urlParams={{ eapId }}
+                    styleVariant="outline"
+                    colorVariant="primary"
+                >
+                    {strings.eapEditFullLink}
+                </Link>
+            )}
+            {eapType === EAP_TYPE_SIMPLIFIED && (
+                <Link
+                    to="simplifiedEapForm"
+                    urlParams={{ eapId }}
+                    styleVariant="outline"
+                    colorVariant="primary"
+                >
+                    {strings.eapEditSimplifiedLink}
+                </Link>
+            )}
         </TableActions>
     );
 }
diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
index 35a643200..ced69d136 100644
--- a/app/src/views/AccountMyFormsEap/index.tsx
+++ b/app/src/views/AccountMyFormsEap/index.tsx
@@ -63,8 +63,8 @@ export function Component() {
     });
 
     const {
-        response: eapResponse,
-        pending: eapPending,
+        response: eapListResponse,
+        pending: eapListPending,
     } = useRequest({
         url: '/api/v2/eap-registration/',
         preserveResponse: true,
@@ -150,8 +150,9 @@ export function Component() {
                 'actions',
                 '',
                 EapTableActions,
-                (eapId) => ({
+                (eapId, eap) => ({
                     eapId,
+                    eapType: eap.eap_type,
                 }),
             ),
             createEmptyColumn(),
@@ -165,7 +166,7 @@ export function Component() {
                 return row;
             }
 
-            const subRows = eapResponse?.results?.filter(
+            const subRows = eapListResponse?.results?.filter(
                 (subRow) => subRow.id === datum.id,
             );
 
@@ -183,7 +184,7 @@ export function Component() {
         [
             expandedRow,
             detailColumns,
-            eapResponse,
+            eapListResponse,
         ],
     );
 
@@ -191,7 +192,7 @@ export function Component() {
         <Container
             heading={strings.eapApplicationsHeading}
             withHeaderBorder
-            filters={(eapResponse?.count ?? 0) > 0 && (
+            filters={(eapListResponse?.count ?? 0) > 0 && (
                 <Filters
                     value={rawFilter}
                     onChange={setFilterField}
@@ -209,18 +210,18 @@ export function Component() {
             footerActions={(
                 <Pager
                     activePage={page}
-                    itemsCount={eapResponse?.count ?? 0}
+                    itemsCount={eapListResponse?.count ?? 0}
                     maxItemsPerPage={limit}
                     onActivePageChange={setPage}
                 />
             )}
         >
             <Table
-                data={eapResponse?.results}
+                data={eapListResponse?.results}
                 columns={baseColumns}
                 rowModifier={rowModifier}
                 keySelector={numericIdSelector}
-                pending={eapPending}
+                pending={eapListPending}
                 filtered={filtered}
             />
         </Container>
diff --git a/app/src/views/DrefApplicationForm/index.tsx b/app/src/views/DrefApplicationForm/index.tsx
index 226d5a1c4..58b95680c 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/EapRegistration/index.tsx b/app/src/views/EapRegistration/index.tsx
index 16d65dc60..82c44ec6a 100644
--- a/app/src/views/EapRegistration/index.tsx
+++ b/app/src/views/EapRegistration/index.tsx
@@ -341,31 +341,32 @@ export function Component() {
                         description={strings.eapTypeDescription}
                         withAsteriskOnTitle
                     >
-                        <RadioInput
-                            name="eap_type"
-                            value={value?.eap_type ?? undefined}
-                            onChange={setFieldValue}
-                            options={eapFormOptions}
-                            keySelector={eapTypeKeySelector}
-                            labelSelector={stringValueSelector}
-                            error={error?.eap_type}
-                            readOnly={isReadOnly}
-                        />
-                        {/* FIXME: label is not showing */}
-                        <Radio
-                            name="eap_type"
-                            // FIXME: inputname should not be strings
-                            // it should be transferred to label
-                            inputName={strings.eapNotSure}
-                            value={value?.eap_type === null}
-                            onClick={handleEapTypeClick}
-                            readOnly={isReadOnly}
-                        />
+                        <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={value?.eap_type === null}
+                                onClick={handleEapTypeClick}
+                                readOnly={isReadOnly}
+                            >
+                                {strings.eapNotSure}
+                            </Radio>
+                        </ListView>
                     </InputSection>
                     <InputSection
                         title={strings.eapSubmission}
                         description={strings.eapSubmissionDescription}
                         withAsteriskOnTitle
+                        numPreferredColumns={2}
                     >
                         <DateInput
                             name="expected_submission_time"
@@ -374,16 +375,14 @@ export function Component() {
                             error={error?.expected_submission_time}
                             readOnly={isReadOnly}
                         />
-                        {/* FIXME: label is not showing */}
                         <Radio
                             name="expected_submission_time"
-                            // FIXME: inputname should not be strings
-                            // it should be transferred to label
-                            inputName={strings.eapNotSure}
                             value={value?.expected_submission_time === null}
                             onClick={handleSubmissionTimeClick}
                             readOnly={isReadOnly}
-                        />
+                        >
+                            {strings.eapNotSure}
+                        </Radio>
                     </InputSection>
                     <InputSection
                         title={strings.eapPartnersInvolved}
diff --git a/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json
new file mode 100644
index 000000000..1ff62873e
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json
@@ -0,0 +1,21 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "simplifiedEapDeliverHeading": "Risk Analysis",
+        "simplifiedEapDeliverEarlyActions": "Experience and/or capacity to implement the early actions",
+        "simplifiedEapDeliverEarlyActionsDescription": "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?",
+        "simplifiedEapDeliverDescription": "Description",
+        "simplifiedEapDeliverInvolved": "RCRC Movement partners, Governmental/other agencies consulted/involved",
+        "simplifiedEapDeliverInvolvedDescription": "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.",
+        "simplifiedEapDeliverBudget": "Budget",
+        "simplifiedEapDeliverTotalBudget": "Total budget",
+        "simplifiedEapDeliverTotalBudgetDescription": "Add the expected budget amount",
+        "simplifiedEapDeliverBudgetLabel": "Budget",
+        "simplifiedEapDeliverReadinessLabel": "Readiness",
+        "simplifiedEapDeliverPrepositioning": "Prepositioning",
+        "simplifiedEapDeliverBudgetDetails": "Budget details",
+        "simplifiedEapDeliverBudgetDetailsDescription": "Add here the page from the budget template called EAP for publication.",
+        "simplifiedEapEarlyAction": "Early Action",
+        "simplifiedEapUpload": "Upload"
+    }
+}
diff --git a/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx
new file mode 100644
index 000000000..0fe763569
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx
@@ -0,0 +1,152 @@
+import {
+    Container,
+    Heading,
+    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 { 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 (
+        <Container
+            heading={strings.simplifiedEapDeliverHeading}
+        >
+            <ListView
+                layout="block"
+                spacing="sm"
+            >
+                <InputSection
+                    title={strings.simplifiedEapDeliverEarlyActions}
+                    description={strings.simplifiedEapDeliverEarlyActionsDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.simplifiedEapDeliverDescription}
+                        name="early_action_capability"
+                        value={value?.early_action_capability}
+                        onChange={setFieldValue}
+                        error={error?.early_action_capability}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.simplifiedEapDeliverInvolved}
+                    description={strings.simplifiedEapDeliverInvolvedDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.simplifiedEapDeliverDescription}
+                        name="rcrc_movement_involvement"
+                        value={value?.rcrc_movement_involvement}
+                        onChange={setFieldValue}
+                        error={error?.rcrc_movement_involvement}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <Heading level={4}>
+                    {strings.simplifiedEapDeliverBudget}
+                </Heading>
+                <InputSection
+                    title={strings.simplifiedEapDeliverTotalBudget}
+                    description={strings.simplifiedEapDeliverTotalBudgetDescription}
+                    withAsteriskOnTitle
+                >
+                    <ListView layout="block">
+                        <ListView
+                            layout="grid"
+                            numPreferredGridColumns={2}
+                        >
+                            <NumberInput
+                                name="total_budget"
+                                value={value?.total_budget}
+                                onChange={setFieldValue}
+                                error={error?.total_budget}
+                                disabled={disabled}
+                                label={strings.simplifiedEapDeliverBudgetLabel}
+                            />
+                            <NumberInput
+                                label={strings.simplifiedEapDeliverReadinessLabel}
+                                name="readiness_budget"
+                                value={value?.readiness_budget}
+                                onChange={setFieldValue}
+                                error={error?.readiness_budget}
+                                disabled={disabled}
+                            />
+                            <NumberInput
+                                label={strings.simplifiedEapDeliverPrepositioning}
+                                name="pre_positioning_budget"
+                                value={value?.pre_positioning_budget}
+                                onChange={setFieldValue}
+                                error={error?.pre_positioning_budget}
+                                disabled={disabled}
+                            />
+                            <NumberInput
+                                label={strings.simplifiedEapEarlyAction}
+                                name="early_action_budget"
+                                value={value?.early_action_budget}
+                                onChange={setFieldValue}
+                                error={error?.early_action_budget}
+                                disabled={disabled}
+                            />
+                        </ListView>
+                    </ListView>
+                </InputSection>
+                <InputSection
+                    title={strings.simplifiedEapDeliverBudgetDetails}
+                    description={strings.simplifiedEapDeliverBudgetDetailsDescription}
+                    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.simplifiedEapUpload}
+                    </GoSingleFileInput>
+                </InputSection>
+            </ListView>
+        </Container>
+    );
+}
+
+export default DeliveryAndBudget;
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json
new file mode 100644
index 000000000..c44984e19
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json
@@ -0,0 +1,7 @@
+{
+    "namespace": "threeWProjectForm",
+    "strings": {
+        "removeDistrict": "Remove Districts",
+        "removeAdmin2":"Remove Admin2"
+    }
+}
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/index.tsx b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/index.tsx
new file mode 100644
index 000000000..41c74c6c1
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/index.tsx
@@ -0,0 +1,106 @@
+import { useMemo } from 'react';
+import { DeleteBinFillIcon } from '@ifrc-go/icons';
+import { Button } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    _cs,
+    isDefined,
+    listToMap,
+} from '@togglecorp/fujs';
+
+import { type DistrictItem as DistrictSearchItem } from '#components/domain/DistrictSearchMultiSelectInput';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface Props {
+    className?: string;
+    districtId: number;
+    admin2Selections: number[] | undefined;
+    onDistrictRemove: (item: number) => void;
+    onAdmin2Remove: (item: number) => void;
+    districtOptions: DistrictSearchItem[] | undefined | null;
+    admin2Options: {id: number; name: string; district_id: number }[] | undefined | null;
+}
+
+function DistrictItem(props: Props) {
+    const {
+        className,
+        districtId,
+        onDistrictRemove,
+        districtOptions,
+        admin2Selections,
+        admin2Options,
+        onAdmin2Remove,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const districtItem = useMemo(
+        () => districtOptions?.find((item) => item.id === districtId),
+        [
+            districtOptions,
+            districtId,
+        ],
+    );
+
+    const admin2ObjectMap = useMemo(() => (
+        listToMap(
+            admin2Options,
+            (item) => item.id,
+            (item) => item,
+        )
+    ), [admin2Options]);
+
+    const admin2InCurrentDistrict = useMemo(() => (
+        admin2Selections?.filter((item) => admin2ObjectMap?.[item].district_id === districtId)
+    ), [
+        admin2ObjectMap,
+        districtId,
+        admin2Selections,
+    ]);
+
+    return (
+        <div className={_cs(className, styles.districtItem)}>
+            <div className={styles.district}>
+                <div className={styles.name}>
+                    {districtItem?.name}
+                </div>
+                <Button
+                    name={districtId}
+                    className={styles.removeButton}
+                    onClick={onDistrictRemove}
+                    colorVariant="text"
+                    title={strings.removeDistrict}
+                >
+                    <DeleteBinFillIcon />
+                </Button>
+            </div>
+            {isDefined(admin2InCurrentDistrict) && admin2InCurrentDistrict?.length > 0 && (
+                <div className={styles.admin2Items}>
+                    {admin2InCurrentDistrict.map((item) => (
+                        <div
+                            key={item}
+                            className={styles.admin2Item}
+                        >
+                            <div className={styles.name}>
+                                {admin2ObjectMap?.[item].name ?? '?'}
+                            </div>
+                            <Button
+                                className={styles.removeButton}
+                                name={item}
+                                onClick={onAdmin2Remove}
+                                colorVariant="text"
+                                title={strings.removeAdmin2}
+                            >
+                                <DeleteBinFillIcon />
+                            </Button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default DistrictItem;
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/styles.module.css b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/styles.module.css
new file mode 100644
index 000000000..2055b4dd7
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/styles.module.css
@@ -0,0 +1,56 @@
+.district-item {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--go-ui-color-background);
+    padding: var(--go-ui-spacing-xs) 0;
+
+    .district {
+        display: flex;
+        padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-md);
+        font-weight: var(--go-ui-font-weight-medium);
+
+        .name {
+            flex-grow: 1;
+        }
+
+        .remove-button {
+            flex-shrink: 0;
+            opacity: 0;
+        }
+
+        &:hover {
+            background-color: var(--go-ui-color-background-hover);
+            .remove-button {
+                opacity: 1;
+            }
+        }
+    }
+
+    .admin2-items {
+        display: flex;
+        flex-direction: column;
+
+        .admin-2-item {
+            display: flex;
+            padding: var(--go-ui-spacing-3xs) var(--go-ui-spacing-md);
+            font-size: var(--go-ui-font-size-sm);
+
+            .name {
+                flex-grow: 1;
+            }
+
+            .remove-button {
+                flex-shrink: 0;
+                opacity: 0;
+            }
+
+            &:hover {
+                background-color: var(--go-ui-color-background-hover);
+
+                .remove-button {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json
new file mode 100644
index 000000000..ec9db2109
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json
@@ -0,0 +1,11 @@
+{
+    "namespace": "threeWProjectForm",
+    "strings": {
+        "districtButtonSelectProvince": "Select Province / Region",
+        "save": "Save",
+        "backToCountry": "Back to Country",
+        "labelDistricts": "Districts",
+        "listEmptyMessage":"Select districts by click on map or from the select input above",
+        "mapTitle": "District / Admin2 selection map"
+    }
+}
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/index.tsx b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/index.tsx
new file mode 100644
index 000000000..e0df68c4b
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/index.tsx
@@ -0,0 +1,688 @@
+import {
+    type Dispatch,
+    type SetStateAction,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { ChevronLeftLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    List,
+    Modal,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isNotDefined,
+    listToMap,
+    unique,
+} 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 BaseMap from '#components/domain/BaseMap';
+import DistrictSearchMultiSelectInput, { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput';
+import GoMapContainer from '#components/GoMapContainer';
+import NonFieldError from '#components/NonFieldError';
+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 { useRequest } from '#utils/restRequest';
+
+import DistrictListItem from './DistrictItem';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+const districtKeySelector = (item: number) => item;
+
+export interface Props<NAME, ADMIN2_NAME> {
+    countryId: number;
+    disabled?: boolean;
+    onModalClose: () => void;
+    districtsName: NAME;
+    districtsValue: number[] | undefined;
+    districtsError?: string;
+    districtOptions: DistrictItem[] | undefined | null;
+    onDistrictsChange: (newVal: number[] | undefined, districtsName: NAME) => void;
+    onDistrictsOptionsChange: Dispatch<SetStateAction<DistrictItem[] | undefined | null>>;
+    admin2Name: ADMIN2_NAME;
+    admin2Value: number[] | undefined;
+    admin2Error?: string;
+    admin2Options: {id: number; name: string; district_id: number }[] | undefined | null;
+    onAdmin2Change: (newVal: number[] | undefined, admin2Name: ADMIN2_NAME) => void;
+    onAdmin2OptionsChange: Dispatch<
+        SetStateAction<{ id: number; name: string; district_id: number }[] | undefined | null>
+    >;
+}
+
+function DistrictMap<const NAME, const ADMIN2_NAME>(props: Props<NAME, ADMIN2_NAME>) {
+    const {
+        districtsName,
+        countryId,
+        onModalClose,
+        disabled,
+        districtsValue,
+        onDistrictsChange,
+        districtOptions,
+        onDistrictsOptionsChange,
+        districtsError,
+        admin2Name,
+        admin2Value,
+        onAdmin2Change,
+        onAdmin2OptionsChange,
+        admin2Options,
+        admin2Error,
+    } = props;
+
+    const waitingForDblClick = useRef<{
+        [key: string]: number | undefined,
+    }>({});
+    const strings = useTranslation(i18n);
+
+    useEffect(
+        // eslint-disable-next-line arrow-body-style
+        () => {
+            return () => {
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                Object.values(waitingForDblClick.current).forEach((timeout) => {
+                    window.clearTimeout(timeout);
+                });
+            };
+        },
+        [],
+    );
+
+    const [districts, setDistricts] = useState<number[] | undefined>(districtsValue);
+    const [admin2Selections, setAdmin2Selections] = useState<number[] | undefined>(admin2Value);
+
+    const [selectedDistrict, setSelectedDistrict] = useState<number | undefined>();
+
+    const {
+        response: districtResponse,
+    } = useRequest({
+        skip: isNotDefined(selectedDistrict),
+        url: '/api/v2/district/{id}/',
+        pathVariables: selectedDistrict ? {
+            id: selectedDistrict,
+        } : undefined,
+        preserveResponse: true,
+    });
+
+    const countryDetails = useCountry({
+        id: countryId,
+    });
+
+    const iso3 = countryDetails?.iso3;
+
+    const bounds = useMemo(() => {
+        if (!countryDetails) {
+            return undefined;
+        }
+
+        if (selectedDistrict && districtResponse?.bbox) {
+            return turfBbox(districtResponse.bbox);
+        }
+
+        return turfBbox(countryDetails.bbox);
+    }, [
+        selectedDistrict,
+        districtResponse,
+        countryDetails,
+    ]);
+
+    const adminLabelLayerOptions: Omit<SymbolLayer, 'id'> = useMemo(() => ({
+        type: 'symbol',
+        paint: {
+            'text-opacity': [
+                'match',
+                ['get', 'country_id'],
+                countryId,
+                1,
+                0,
+            ],
+        },
+        layout: {
+            'text-offset': [
+                0, 1,
+            ],
+            visibility: selectedDistrict ? 'none' : 'visible',
+        },
+    }), [
+        countryId,
+        selectedDistrict,
+    ]);
+
+    const adminOneFillLayerOptions: Omit<FillLayer, 'id'> = useMemo(() => {
+        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',
+            paint: {
+                'fill-color': (!districts || districts.length <= 0)
+                    ? defaultColor
+                    : [
+                        'match',
+                        ['get', 'district_id'],
+                        ...districts.flatMap((districtId) => [
+                            districtId,
+                            COLOR_PRIMARY_RED,
+                        ]),
+                        defaultColor,
+                    ],
+                'fill-outline-color': COLOR_DARK_GREY,
+                'fill-opacity': [
+                    'match',
+                    ['get', 'country_id'],
+                    countryId,
+                    1,
+                    0,
+                ],
+            },
+            layout: {
+                visibility: selectedDistrict ? 'none' : 'visible',
+            },
+        };
+        return options;
+    }, [
+        countryId,
+        districts,
+        selectedDistrict,
+    ]);
+
+    const adminTwoLineLayerOptions: Omit<LineLayer, 'id'> | undefined = useMemo(() => (
+        iso3 && selectedDistrict ? ({
+            type: 'line',
+            'source-layer': `go-admin2-${iso3}-staging`,
+            paint: {
+                'line-color': COLOR_BLACK,
+                'line-opacity': [
+                    'match',
+                    ['get', 'admin1_id'],
+                    selectedDistrict,
+                    1,
+                    0,
+                ],
+            },
+            layout: {
+                visibility: 'visible',
+            },
+        }) : undefined
+    ), [
+        iso3,
+        selectedDistrict,
+    ]);
+
+    const adminTwoFillLayerOptions = useMemo((): Omit<FillLayer, 'id'> | undefined => {
+        if (!iso3 || !selectedDistrict) {
+            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': (!admin2Selections || admin2Selections.length <= 0)
+                    ? defaultColor
+                    : [
+                        'match',
+                        ['get', 'id'],
+                        ...admin2Selections.map((admin2Item) => [
+                            admin2Item,
+                            COLOR_PRIMARY_RED,
+                        ]).flat(),
+                        defaultColor,
+                    ],
+                'fill-outline-color': COLOR_DARK_GREY,
+                'fill-opacity': [
+                    'match',
+                    ['get', 'admin1_id'],
+                    selectedDistrict,
+                    1,
+                    0,
+                ],
+            },
+            layout: {
+                visibility: 'visible',
+            },
+        };
+        return options;
+    }, [
+        iso3,
+        admin2Selections,
+        selectedDistrict,
+    ]);
+
+    const adminTwoLabelLayerOptions = useMemo((): Omit<SymbolLayer, 'id'> | undefined => {
+        const textColor: NonNullable<SymbolLayer['paint']>['text-color'] = (
+            admin2Selections && admin2Selections.length > 0
+                ? [
+                    'match',
+                    ['get', 'id'],
+                    ...admin2Selections.map((admin2) => [
+                        admin2,
+                        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': [
+                    'match',
+                    ['get', 'admin1_id'],
+                    selectedDistrict,
+                    1,
+                    0,
+                ],
+            },
+            layout: {
+                'text-field': ['get', 'name'],
+                'text-anchor': 'center',
+                'text-size': 10,
+            },
+        };
+        return options;
+    }, [iso3, admin2Selections, selectedDistrict]);
+
+    const updateAdmin2 = useCallback(
+        (newDistricts: number[] | undefined) => {
+            const admin2ToDistrictMap = listToMap(
+                admin2Options,
+                (item) => item.id,
+                (item) => item.district_id,
+            );
+            const filteredAdmin2s = admin2Selections?.filter(
+                (item) => (
+                    admin2ToDistrictMap
+                        ? newDistricts?.includes(admin2ToDistrictMap?.[item])
+                        : false
+                ),
+            );
+            setAdmin2Selections(filteredAdmin2s);
+        },
+        [
+            admin2Selections,
+            admin2Options,
+        ],
+    );
+
+    const handleDistrictChange = useCallback<typeof setDistricts>(
+        (x) => {
+            if (typeof x === 'function') {
+                setDistricts((prevValue) => {
+                    const newValue = x(prevValue);
+
+                    // TODO: Research if we can call function with setState here?
+                    updateAdmin2(newValue);
+                    return newValue;
+                });
+            } else {
+                updateAdmin2(x);
+                setDistricts(x);
+            }
+        },
+        [updateAdmin2],
+    );
+
+    const handleDistrictClick = useCallback((clickedFeature: MapboxGeoJSONFeature) => {
+        const properties = clickedFeature.properties as {
+            country_id?: number;
+            district_id?: number;
+            name?: string;
+        };
+        if (properties.country_id !== countryId) {
+            return false;
+        }
+        const id = properties.district_id;
+        if (!id) {
+            return false;
+        }
+
+        if (waitingForDblClick.current[id]) {
+            window.clearTimeout(waitingForDblClick.current[id]);
+        }
+        waitingForDblClick.current[id] = window.setTimeout(
+            () => {
+                onDistrictsOptionsChange((oldOptions) => {
+                    if (!properties.name) {
+                        return oldOptions;
+                    }
+                    return unique(
+                        [
+                            ...(oldOptions ?? []),
+                            {
+                                id,
+                                name: properties.name,
+                            },
+                        ],
+                        (item) => item.id,
+                    );
+                });
+                handleDistrictChange((oldVal = []) => {
+                    const index = oldVal?.indexOf(id);
+                    if (isNotDefined(index) || index === -1) {
+                        return [
+                            ...oldVal,
+                            id,
+                        ];
+                    }
+                    const newVal = [...oldVal];
+                    newVal.splice(index, 1);
+
+                    return newVal;
+                });
+            },
+            // Why we are using 500ms
+            // https://en.wikipedia.org/wiki/Double-click#Speed_and_timing
+            500,
+        );
+
+        return false;
+    }, [
+        countryId,
+        onDistrictsOptionsChange,
+        handleDistrictChange,
+    ]);
+
+    const handleDistrictDoubleClick = useCallback((clickedFeature: MapboxGeoJSONFeature) => {
+        const properties = clickedFeature?.properties as {
+            country_id?: number;
+            district_id?: number;
+            name?: string;
+        };
+        if (properties.country_id !== countryId) {
+            return false;
+        }
+        const id = properties.district_id;
+        if (!id) {
+            return false;
+        }
+
+        if (waitingForDblClick.current[id]) {
+            window.clearTimeout(waitingForDblClick.current[id]);
+            waitingForDblClick.current[id] = undefined;
+        }
+
+        setSelectedDistrict(id);
+        onDistrictsOptionsChange((oldOptions) => {
+            if (!properties.name) {
+                return oldOptions;
+            }
+            return unique(
+                [
+                    ...(oldOptions ?? []),
+                    {
+                        id,
+                        name: properties.name,
+                    },
+                ],
+                (item) => item.id,
+            );
+        });
+        handleDistrictChange((oldVal = []) => (
+            unique([
+                ...oldVal,
+                id,
+            ])
+        ));
+        return false;
+    }, [
+        countryId,
+        onDistrictsOptionsChange,
+        handleDistrictChange,
+    ]);
+
+    const handleDistrictRemove = useCallback((districtId: number) => {
+        if (districtId === selectedDistrict) {
+            setSelectedDistrict(undefined);
+        }
+        handleDistrictChange((oldVal = []) => (
+            oldVal.filter((item) => item !== districtId)
+        ));
+    }, [
+        handleDistrictChange,
+        selectedDistrict,
+    ]);
+
+    const handleAdmin2Click = useCallback((clickedFeature: MapboxGeoJSONFeature) => {
+        const properties = clickedFeature?.properties as {
+            id: number;
+            admin1_id: number;
+            name?: string;
+        };
+        if (properties.admin1_id !== selectedDistrict) {
+            return false;
+        }
+        onAdmin2OptionsChange((oldOptions) => {
+            if (!properties.name || !properties.id) {
+                return oldOptions;
+            }
+            return unique(
+                [
+                    ...(oldOptions ?? []),
+                    {
+                        id: properties.id,
+                        district_id: properties.admin1_id,
+                        name: properties.name,
+                    },
+                ],
+                (item) => item.id,
+            );
+        });
+        setAdmin2Selections((oldVal = []) => {
+            if (!properties.id) {
+                return oldVal;
+            }
+            const index = oldVal?.indexOf(properties.id);
+            if (isNotDefined(index) || index === -1) {
+                return [
+                    ...oldVal,
+                    properties.id,
+                ];
+            }
+            const newVal = [...oldVal];
+            newVal.splice(index, 1);
+
+            return newVal;
+        });
+        return false;
+    }, [
+        selectedDistrict,
+        onAdmin2OptionsChange,
+    ]);
+
+    const handleAdmin2Remove = useCallback((admin2Id: number) => {
+        setAdmin2Selections((oldVal = []) => (
+            oldVal.filter((item) => item !== admin2Id)
+        ));
+    }, []);
+
+    const handleSaveClick = useCallback(() => {
+        onDistrictsChange(districts, districtsName);
+        onAdmin2Change(admin2Selections, admin2Name);
+        onModalClose();
+    }, [
+        admin2Name,
+        admin2Selections,
+        onAdmin2Change,
+        onModalClose,
+        onDistrictsChange,
+        districtsName,
+        districts,
+    ]);
+
+    const districtRendererParams = useCallback((districtId: number) => ({
+        districtId,
+        districtOptions,
+        onDistrictRemove: handleDistrictRemove,
+        onAdmin2Remove: handleAdmin2Remove,
+        admin2Options,
+        admin2Selections,
+    }), [
+        districtOptions,
+        admin2Selections,
+        admin2Options,
+        handleDistrictRemove,
+        handleAdmin2Remove,
+    ]);
+
+    return (
+        <Modal
+            className={styles.districtMapModal}
+            heading={strings.districtButtonSelectProvince}
+            onClose={onModalClose}
+            footerActions={(
+                <Button
+                    name={undefined}
+                    onClick={handleSaveClick}
+                >
+                    {strings.save}
+                </Button>
+            )}
+            size="xl"
+        >
+            <div className={styles.mapSection}>
+                {selectedDistrict && (
+                    <Button
+                        name={undefined}
+                        onClick={setSelectedDistrict}
+                        colorVariant="text"
+                        before={(
+                            <ChevronLeftLineIcon className={styles.backButton} />
+                        )}
+                    >
+                        {strings.backToCountry}
+                    </Button>
+                )}
+                <BaseMap
+                    baseLayers={(
+                        <>
+                            <MapLayer
+                                layerKey="admin-1-highlight"
+                                hoverable
+                                layerOptions={adminOneFillLayerOptions}
+                                onClick={!disabled ? handleDistrictClick : undefined}
+                                onDoubleClick={!disabled ? handleDistrictDoubleClick : undefined}
+                            />
+                            <MapLayer
+                                layerKey="admin-1-label"
+                                layerOptions={adminLabelLayerOptions}
+                            />
+                        </>
+                    )}
+                >
+                    <GoMapContainer
+                        title={strings.mapTitle}
+                        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>
+            </div>
+            <div className={styles.sidePanel}>
+                {/* FIXME: DistrictSearchMultiSelectInput should handle error itself */}
+                <NonFieldError error={admin2Error} />
+                <DistrictSearchMultiSelectInput
+                    error={districtsError}
+                    label={strings.labelDistricts}
+                    name="project_districts"
+                    countryId={countryId}
+                    options={districtOptions}
+                    onOptionsChange={onDistrictsOptionsChange}
+                    value={districts}
+                    onChange={handleDistrictChange}
+                    disabled={disabled}
+                />
+                <List
+                    className={styles.districtList}
+                    data={districts}
+                    renderer={DistrictListItem}
+                    keySelector={districtKeySelector}
+                    rendererParams={districtRendererParams}
+                    emptyMessage={strings.listEmptyMessage}
+                    errored={false}
+                    pending={false}
+                    filtered={false}
+                    compact
+                />
+            </div>
+        </Modal>
+    );
+}
+
+export default DistrictMap;
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/styles.module.css b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/styles.module.css
new file mode 100644
index 000000000..5705a788d
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/styles.module.css
@@ -0,0 +1,36 @@
+.district-map-modal {
+    .content {
+        display: flex;
+        gap: var(--go-ui-spacing-sm);
+
+        .map-section {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-sm);
+
+            .map-container {
+                width: 40rem;
+                height: 60vh;
+            }
+
+            .back-button {
+                font-size: var(--go-ui-height-icon-multiplier);
+            }
+        }
+
+        .side-panel {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-sm);
+            height: 60vh;
+
+            .district-list {
+                display: flex;
+                flex-direction: column;
+                overflow-y: auto;
+                gap: var(--go-ui-spacing-xs);
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/i18n.json
new file mode 100644
index 000000000..d8181bb1a
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "buttonSelectProvince": "Select Province / Region"
+    }
+}
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/index.tsx b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/index.tsx
new file mode 100644
index 000000000..008919a48
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/index.tsx
@@ -0,0 +1,127 @@
+import {
+    useCallback,
+    useMemo,
+} from 'react';
+import {
+    Button,
+    List,
+    TextOutput,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import { numericIdSelector } from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
+
+import { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput';
+
+import DistrictMapModal, { type Props as MapModalProps } from './DistrictMapModal';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface AdminTwo {
+    id: number;
+    name: string;
+    district_id: number;
+}
+
+interface DistrictWithAdminTwo extends DistrictItem {
+    localUnits: AdminTwo[];
+}
+
+type Props<NAME, ADMIN2_NAME> = Omit<MapModalProps<NAME, ADMIN2_NAME>, 'countryId' | 'onModalClose'> & {
+    countryId: number | undefined;
+    className?: string;
+};
+
+function DistrictMap<
+    const NAME,
+    const ADMIN2_NAME,
+>(props: Props<NAME, ADMIN2_NAME>) {
+    const {
+        className,
+        countryId,
+        disabled,
+        admin2Value,
+        districtsValue,
+        admin2Options,
+        districtOptions,
+        ...otherProps
+    } = props;
+    const strings = useTranslation(i18n);
+
+    const [
+        modalShown,
+        {
+            setTrue: showModal,
+            setFalse: hideModal,
+        },
+    ] = useBooleanState(false);
+
+    const selectedAdminTwo = useMemo(() => (
+        admin2Value
+            ?.map((adminTwoId) => admin2Options?.find((adminTwo) => adminTwo.id === adminTwoId))
+            .filter(isDefined)
+    ), [admin2Options, admin2Value]);
+
+    const selectedDistricts = useMemo(() => (
+        districtsValue
+            ?.map((districtId) => districtOptions?.find((district) => district.id === districtId))
+            ?.filter(isDefined)
+            .map((district) => ({
+                ...district,
+                localUnits: selectedAdminTwo
+                    ?.filter((adminTwo) => adminTwo.district_id === district.id),
+            }))
+    ), [districtOptions, selectedAdminTwo, districtsValue]);
+
+    const districtRendererParams = useCallback((_: number, data: DistrictWithAdminTwo) => ({
+        value: data.name,
+        strongValue: true,
+        className: styles.districtList,
+        descriptionClassName: styles.localUnits,
+        description: data.localUnits?.map((adminTwo) => adminTwo.name).join(', '),
+    }), []);
+
+    return (
+        <div className={styles.input}>
+            <Button
+                className={className}
+                name={undefined}
+                disabled={!countryId || disabled}
+                onClick={showModal}
+                styleVariant="outline"
+            >
+                {strings.buttonSelectProvince}
+            </Button>
+            <List
+                data={selectedDistricts}
+                rendererParams={districtRendererParams}
+                renderer={TextOutput}
+                keySelector={numericIdSelector}
+                withoutMessage
+                compact
+                pending={false}
+                errored={false}
+                filtered={false}
+            />
+            {modalShown && countryId && (
+                <DistrictMapModal
+                    countryId={countryId}
+                    disabled={disabled}
+                    admin2Options={admin2Options}
+                    admin2Value={admin2Value}
+                    districtsValue={districtsValue}
+                    districtOptions={districtOptions}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...otherProps}
+                    onModalClose={hideModal}
+                />
+            )}
+        </div>
+    );
+}
+
+export default DistrictMap;
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/styles.module.css b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/styles.module.css
new file mode 100644
index 000000000..e4a2a5aba
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/styles.module.css
@@ -0,0 +1,14 @@
+.input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-sm);
+
+    .district-list {
+        display: flex;
+        flex-direction: column;
+
+        .local-units {
+            font-size: var(--go-ui-font-size-sm);
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/i18n.json
new file mode 100644
index 000000000..ce291ad0f
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/i18n.json
@@ -0,0 +1,28 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "simplifiedEapActionHeading": "Early Action Intervention",
+        "simplifiedEapIntervention": "Overall objective of the intervention",
+        "simplifiedEapInterventionDescription": "Provide an objective statement that describes the main goal of the intervention.",
+        "simplifiedGeographicalRiskArea": "Potential geographical high-risk areas that the simplified EAP would target",
+        "simplifiedGeographicalRiskAreaDescription": "Which high risk regions have been selected for this intervention and why?",
+        "simplifiedEapActionDescription": "Description",
+        "simplifiedEapActionValue": "Value",
+        "simplifiedEapActionPeopleTargeted": "People targeted",
+        "simplifiedEapActionPeopleTargetedDescription": "Add the number of people targeted for the event.",
+        "simplifiedEapActionOperation": "Assisted through the operation",
+        "simplifiedEapActionOperationDescription": "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)",
+        "simplifiedEapActionCriteria": "Explain your selection criteria for who will be targeted.",
+        "simplifiedEapActionsStatement": "Trigger(s) statement",
+        "simplifiedEapActionsStatementDescription": "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.",
+        "simplifiedEapActionsLeadTime": "sEAP Lead Time",
+        "simplifiedEapActionsLeadTimeDescription": "This is the time between the trigger being met and the impact of the hazard, when the early actions are undertaken.",
+        "simplifiedEapActionsOperational": "Operational Timeframe",
+        "simplifiedEapActionsOperationalDescription": "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.",
+        "simplifiedEapJustification": "Trigger threshold justification",
+        "simplifiedEapJustificationDescription": "Explain how the triggers(s) were set and provide information showing that the level chosen has caused humanitarian impact in the past.",
+        "simplifiedEapFullEap": "Next step towards full EAP",
+        "simplifiedEapFullEapDescription": "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 000000000..a71a19d3e
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/index.tsx
@@ -0,0 +1,277 @@
+import { useState } from 'react';
+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 {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+} from '@togglecorp/toggle-form';
+
+import { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { TIMEFRAME_YEAR } from '#utils/constants';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import { type PartialSimplifiedEapType } from '../schema';
+import DistrictMap from './DistrictMap';
+
+import i18n from './i18n.json';
+
+type GetDistrictResponse = GoApiResponse<'/api/v2/district/'>;
+
+export type Admin2item = Pick<NonNullable<GetDistrictResponse['results']>[number], 'id' | 'name'>;
+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}/'>;
+}
+
+interface AdminTwo {
+    id: number;
+    name: string;
+    district_id: number;
+}
+
+function EarlyAction(props: Props) {
+    const {
+        value,
+        setFieldValue,
+        error: formError,
+        disabled,
+        eapRegistrationDetail,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const error = getErrorObject(formError);
+
+    const [districtOptions, setDistrictOptions] = useState<
+        DistrictItem[] | undefined | null
+    >([]);
+
+    const [admin2Options, setAdmin2Options] = useState<
+    AdminTwo[] | undefined | null
+    >([]);
+
+    const {
+        eap_timeframe,
+    } = useGlobalEnums();
+
+    const [districts, setDistricts] = useState<number[] | undefined>();
+
+    const eapTimeframeOption = eap_timeframe?.filter(
+        (item) => item.key !== TIMEFRAME_YEAR,
+    );
+
+    return (
+        <Container
+            heading={strings.simplifiedEapActionHeading}
+        >
+            <ListView
+                layout="block"
+                spacing="sm"
+            >
+                <InputSection
+                    title={strings.simplifiedEapIntervention}
+                    description={strings.simplifiedEapInterventionDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.simplifiedEapActionDescription}
+                        name="overall_objective_intervention"
+                        value={value?.overall_objective_intervention}
+                        onChange={setFieldValue}
+                        error={error?.overall_objective_intervention}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.simplifiedGeographicalRiskArea}
+                    description={strings.simplifiedGeographicalRiskAreaDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.simplifiedEapActionDescription}
+                        name="potential_geographical_high_risk_areas"
+                        value={value?.potential_geographical_high_risk_areas}
+                        onChange={setFieldValue}
+                        error={error?.potential_geographical_high_risk_areas}
+                        disabled={disabled}
+                    />
+                    <DistrictMap
+                        districtsName="district"
+                        districtsValue={districts}
+                        admin2Name="admin2"
+                        admin2Value={value?.admin2}
+                        onDistrictsChange={setDistricts}
+                        districtOptions={districtOptions}
+                        onDistrictsOptionsChange={setDistrictOptions}
+                        onAdmin2Change={setFieldValue}
+                        admin2Options={admin2Options}
+                        onAdmin2OptionsChange={setAdmin2Options}
+                        countryId={eapRegistrationDetail?.country}
+                        disabled={disabled}
+                        districtsError={getErrorString(error?.admin2)}
+                        admin2Error={getErrorString(error?.admin2)}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.simplifiedEapActionPeopleTargeted}
+                    description={strings.simplifiedEapActionPeopleTargetedDescription}
+                    withAsteriskOnTitle
+                    numPreferredColumns={2}
+                >
+                    <NumberInput
+                        label={strings.simplifiedEapActionDescription}
+                        name="people_targeted"
+                        value={value?.people_targeted}
+                        onChange={setFieldValue}
+                        error={error?.people_targeted}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.simplifiedEapActionOperation}
+                    description={strings.simplifiedEapActionOperationDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.simplifiedEapActionDescription}
+                        name="assisted_through_operation"
+                        value={value?.assisted_through_operation}
+                        onChange={setFieldValue}
+                        error={error?.assisted_through_operation}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    description={strings.simplifiedEapActionCriteria}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.simplifiedEapActionDescription}
+                        name="selection_criteria"
+                        value={value?.selection_criteria}
+                        onChange={setFieldValue}
+                        error={error?.selection_criteria}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.simplifiedEapActionsStatement}
+                    description={strings.simplifiedEapActionsStatementDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.simplifiedEapActionDescription}
+                        name="trigger_statement"
+                        value={value?.trigger_statement}
+                        onChange={setFieldValue}
+                        error={error?.trigger_statement}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.simplifiedEapActionsLeadTime}
+                    description={strings.simplifiedEapActionsLeadTimeDescription}
+                    withAsteriskOnTitle
+                    numPreferredColumns={2}
+                >
+                    <NumberInput
+                        label={strings.simplifiedEapActionValue}
+                        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.simplifiedEapActionsOperational}
+                    description={strings.simplifiedEapActionsOperationalDescription}
+                    withAsteriskOnTitle
+                    numPreferredColumns={2}
+                >
+                    <NumberInput
+                        label={strings.simplifiedEapActionValue}
+                        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.simplifiedEapJustification}
+                    description={strings.simplifiedEapJustificationDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.simplifiedEapActionDescription}
+                        name="trigger_threshold_justification"
+                        value={value?.trigger_threshold_justification}
+                        onChange={setFieldValue}
+                        error={error?.trigger_threshold_justification}
+                        disabled={disabled}
+                    />
+                </InputSection>
+                <InputSection
+                    title={strings.simplifiedEapFullEap}
+                    description={strings.simplifiedEapFullEapDescription}
+                    withAsteriskOnTitle
+                >
+                    <TextArea
+                        label={strings.simplifiedEapActionDescription}
+                        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/ActivityInput/i18n.json b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/i18n.json
new file mode 100644
index 000000000..18f7d4f98
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "approachReadiness": "Readiness",
+        "approachTimeFrame": "Time Frame",
+        "approachTimeValue": "Time Value"
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/index.tsx b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/index.tsx
new file mode 100644
index 000000000..60af84242
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/index.tsx
@@ -0,0 +1,166 @@
+import { useCallback } from 'react';
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Checklist,
+    Container,
+    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,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import { type PartialSimplifiedEapType } from '../../../schema';
+
+import i18n from './i18n.json';
+
+type ApproachesFormFields = NonNullable<PartialSimplifiedEapType['enable_approaches']>[number];
+type ActivityFormField = NonNullable<ApproachesFormFields['early_action_activities']>[number];
+
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+type TimeframeOption = NonNullable<GlobalEnumsResponse['eap_timeframe']>[number];
+
+const defaultActivityValue: ActivityFormField = {
+    client_id: '-1',
+};
+
+function timeframeKeySelector(option: TimeframeOption) {
+    return option.key;
+}
+
+const timeValueKeySelector = (
+    option: { key: number; value: string },
+) => option.key;
+
+interface Props {
+    value: ActivityFormField;
+    error: ArrayError<ActivityFormField> | undefined;
+    onChange: (value: SetValueArg<ActivityFormField>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+}
+
+function ActivityInput(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 (
+        <Container
+            headerActions={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="outline"
+                    title="Remove"
+                    disabled={disabled}
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            )}
+        >
+            <ListView layout="block">
+                <ListView layout="grid" numPreferredGridColumns={3}>
+                    <TextInput
+                        label={strings.approachReadiness}
+                        name="activity"
+                        value={value.activity}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        withAsterisk
+                    />
+                    <SelectInput
+                        label={strings.approachTimeFrame}
+                        name="timeframe"
+                        value={value.timeframe}
+                        onChange={handleTimeframeChange}
+                        keySelector={timeframeKeySelector}
+                        labelSelector={stringValueSelector}
+                        options={eap_timeframe}
+                        disabled={disabled}
+                        error={error?.timeframe}
+                    />
+
+                    {value?.timeframe && (
+                        <Checklist
+                            label={strings.approachTimeValue}
+                            name="time_value"
+                            value={value?.time_value}
+                            onChange={onFieldChange}
+                            keySelector={timeValueKeySelector}
+                            labelSelector={stringValueSelector}
+                            options={timeValueOptions}
+                            disabled={disabled}
+                        />
+                    )}
+                </ListView>
+            </ListView>
+        </Container>
+    );
+}
+
+export default ActivityInput;
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 000000000..08d42d3a7
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
@@ -0,0 +1,14 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "approachBudget": "Budget",
+        "approachApCode": "AP Code",
+        "approachIndicatorTarget": "Indicator Target",
+        "approachRemoveButton": "Remove",
+        "approachAddActivityButton": "Add Activity",
+        "approachReadinessActivities": "Readiness Activities",
+        "approachPrepositioningActivities": "Pre-positioning Activities",
+        "approachEarlyActionActivities": "Early Action Activities",
+        "approachNoActivitesMessage": "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 000000000..18207ca8c
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
@@ -0,0 +1,315 @@
+import { useCallback } from 'react';
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    ExpandableContainer,
+    ListView,
+    NumberInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type SetValueArg,
+    useFormArray,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import NonFieldError from '#components/NonFieldError';
+
+import { type PartialSimplifiedEapType } from '../../schema';
+import ActivityInput from './ActivityInput';
+
+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];
+
+const defaultApproachValue: EnableApproachesFormFields = {
+    client_id: '-1',
+};
+
+interface Props {
+    value: EnableApproachesFormFields;
+    error: ArrayError<EnableApproachesFormFields> | undefined;
+    onChange: (value: SetValueArg<EnableApproachesFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    titleMap: Record<string, string> | undefined;
+}
+
+function OperationsBySectorInput(props: Props) {
+    const {
+        error: errorFromProps,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+        titleMap,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const onFieldChange = useFormObject(index, onChange, defaultApproachValue);
+
+    const approachLabel = isDefined(value.title)
+        ? titleMap?.[value.title]
+        : undefined;
+
+    const error = (value && value.client_id && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : 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 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],
+    );
+
+    return (
+        <ExpandableContainer
+            heading={approachLabel ?? '--'}
+            headerActions={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="outline"
+                    title="Button"
+                    disabled={disabled}
+                    before={<DeleteBinTwoLineIcon />}
+                >
+                    {strings.approachRemoveButton}
+                </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}
+                    />
+                    <NumberInput
+                        label={strings.approachIndicatorTarget}
+                        name="indicator_target"
+                        value={value?.indicator_target}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        error={error?.indicator_target}
+                    />
+                </ListView>
+                <ListView layout="block">
+                    <Container
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.approachReadinessActivities}
+                        headingLevel={5}
+                        headerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handleReadinessAddButtonClick}
+                                disabled={disabled}
+                            >
+                                {strings.approachAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.readiness_activities)
+                            || value.readiness_activities.length === 0}
+                        emptyMessage={strings.approachNoActivitesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.readiness_activities)
+                            }
+                            />
+                        )}
+                    >
+                        {value?.readiness_activities?.map((activity, i) => (
+                            <ActivityInput
+                                key={activity.client_id}
+                                index={i}
+                                value={activity}
+                                onChange={onReadinessChange}
+                                onRemove={onReadinessRemove}
+                                error={getErrorObject(error?.readiness_activities)}
+                                disabled={disabled}
+                            />
+                        ))}
+                    </Container>
+                    <Container
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.approachPrepositioningActivities}
+                        headingLevel={5}
+                        headerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handlePrepositioningAddButtonClick}
+                                disabled={disabled}
+                            >
+                                {strings.approachAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.prepositioning_activities)
+                            || value.prepositioning_activities.length === 0}
+                        emptyMessage={strings.approachNoActivitesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.prepositioning_activities)
+                            }
+                            />
+                        )}
+                    >
+                        {value?.prepositioning_activities?.map((activity, i) => (
+                            <ActivityInput
+                                key={activity.client_id}
+                                index={i}
+                                value={activity}
+                                onChange={onPrepositioningChange}
+                                onRemove={onPrepositioningRemove}
+                                error={getErrorObject(error?.prepositioning_activities)}
+                                disabled={disabled}
+                            />
+                        ))}
+                    </Container>
+                    <Container
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.approachEarlyActionActivities}
+                        headingLevel={5}
+                        headerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handleEarlyActionAddButtonClick}
+                                disabled={disabled}
+                            >
+                                {strings.approachAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.early_action_activities)
+                            || value.early_action_activities.length === 0}
+                        emptyMessage={strings.approachNoActivitesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.early_action_activities)
+                            }
+                            />
+                        )}
+                    >
+                        {value?.early_action_activities?.map((activity, i) => (
+                            <ActivityInput
+                                key={activity.client_id}
+                                index={i}
+                                value={activity}
+                                onChange={onEarlyActionChange}
+                                onRemove={onEarlyActionRemove}
+                                error={getErrorObject(error?.early_action_activities)}
+                                disabled={disabled}
+                            />
+                        ))}
+                    </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 000000000..b2fc7004f
--- /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 000000000..87f7c3df9
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx
@@ -0,0 +1,169 @@
+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,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import NonFieldError from '#components/NonFieldError';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import { type PartialSimplifiedEapType } from '../schema';
+import ApproachesInput from './ApproachesInput';
+
+import i18n from './i18n.json';
+
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+type EnablingApproachesOption = NonNullable<GlobalEnumsResponse['eap_approach']>[number];
+
+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: EnablingApproachesOption) {
+    return option.key;
+}
+function EnablingApproches(props: Props) {
+    const {
+        value,
+        error: formError,
+        disabled,
+        setFieldValue,
+    } = props;
+
+    const error = getErrorObject(formError);
+    const strings = useTranslation(i18n);
+
+    const {
+        eap_approach: approachesOptions,
+    } = useGlobalEnums();
+
+    const selectedApproach = (value.enable_approaches ?? [])
+        .map((op) => op.title)
+        .filter((key): key is EnablingApproachesOption['key'] => key !== undefined);
+
+    const {
+        setValue: onApproachChange,
+        removeValue: onApproachRemove,
+    } = useFormArray<'enable_approaches', EnablingApproachesFormFields>(
+        'enable_approaches',
+        setFieldValue,
+    );
+
+    const handleApproachSelect = useCallback((selectedKeys: EnablingApproachesOption['key'][]) => {
+        const previousKeys = (value.enable_approaches ?? [])
+            .map((op) => op.title)
+            .filter((key): key is EnablingApproachesOption['key'] => key !== undefined);
+
+        const addedKeys = selectedKeys.filter((key) => !previousKeys.includes(key));
+        const removedKeys = previousKeys.filter((key) => !selectedKeys.includes(key));
+
+        if (addedKeys.length > 0) {
+            const newOperations = addedKeys.map((key) => ({
+                client_id: randomString(),
+                title: key,
+            }));
+
+            setFieldValue(
+                (oldValue: EnablingApproachesFormFields[] = []) => {
+                    const safeOldValue = oldValue.map((op) => ({
+                        ...op,
+                        title: op.title,
+                    }));
+                    return [...safeOldValue, ...newOperations];
+                },
+                'enable_approaches',
+            );
+        }
+
+        if (removedKeys.length > 0) {
+            removedKeys.forEach((key) => {
+                const index = value.enable_approaches?.findIndex(
+                    (op) => op.title === key,
+                );
+                if (index !== undefined && index >= 0) {
+                    onApproachRemove(index);
+                }
+            });
+        }
+    }, [
+        value.enable_approaches,
+        setFieldValue,
+        onApproachRemove,
+    ]);
+
+    const approachTitleMap = useMemo(
+        () => (
+            listToMap(
+                approachesOptions,
+                (approach) => approach.key,
+                (approach) => approach.value,
+            )
+        ),
+        [approachesOptions],
+    );
+
+    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={approachesOptions}
+                        onChange={handleApproachSelect}
+                        value={selectedApproach}
+                        disabled={disabled}
+                        keySelector={approachesKeySelector}
+                        labelSelector={stringValueSelector}
+                        checkListLayout="grid"
+                        checkListLayoutPreferredGridColumns={3}
+                    />
+                </InputSection>
+                {value?.enable_approaches?.map((approach, index) => (
+                    <ApproachesInput
+                        key={approach.client_id}
+                        index={index}
+                        value={approach}
+                        onChange={onApproachChange}
+                        onRemove={onApproachRemove}
+                        error={getErrorObject(error?.enable_approaches)}
+                        disabled={disabled}
+                        titleMap={approachTitleMap}
+                    />
+                ))}
+            </ListView>
+        </Container>
+    );
+}
+
+export default EnablingApproches;
diff --git a/app/src/views/SimplifiedEapForm/Overview/i18n.json b/app/src/views/SimplifiedEapForm/Overview/i18n.json
new file mode 100644
index 000000000..024eeb008
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/Overview/i18n.json
@@ -0,0 +1,69 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "simplifiedFormHeading": "Details",
+        "simplifiedFormNationalSociety": "National Society (NS)",
+        "simplifiedFormNationalSocietyDescription": "Select National Society that is planning to apply for the EAP",
+        "simplifiedFormCountry": "Country",
+        "simplifiedFormCountryDescription": "The country will be pre-populated based on the NS selection, but can be adapted as needed.",
+        "simplifiedFormDisasterType": "Disaster Type",
+        "simplifiedFormDisasterTypeDescription": "Select the disaster type for which the EAP is needed.",
+        "simplifiedFormUploadCoverImage": "Cover Photo",
+        "simplifiedFormUploadCoverImageDescription": "Upload a image for the cover page of the publicly published DREF application.",
+        "simplifiedFormUploadAnImageLabel": "Select an Image",
+        "simplifiedFormTimeframe": "sEAP Timeframe",
+        "simplifiedFormTimeframeDescription": "A simplified EAP has a timeframe of two years (unless the early actions are activiated)",
+        "simplifiedFormContacts": "Contacts",
+        "simplifiedFormNationalHeader": "National",
+        "simplifiedFormDelegationHeader": "Delegation",
+        "simplifiedRegionalHeader": "Regional and global",
+        "simplifiedFormNSContact": "National Society Contact",
+        "simplifiedFormNSContactDescription": "National Society contact responsible for the EAP process",
+        "simplifiedFormNSName": "Name",
+        "simplifiedFormNSTitle": "Title",
+        "simplifiedFormNSEmail": "Email",
+        "simplifiedFormNSPhoneNumber": "Phone Number",
+        "simplifiedFormPartnerNS": "Partner NS",
+        "simplifiedFormPartnerNSDescription": "Partner National Society contact",
+        "simplifiedFormPartnerNSName": "Name",
+        "simplifiedFormPartnerNSTitle": "Title",
+        "simplifiedFormPartnerNSEmail": "Email",
+        "simplifiedFormPartnerNSPhoneNumber": "Phone Number",
+        "simplifiedFormFocalPoint": "IFRC Delegation AA Focal Point",
+        "simplifiedFormFocalPointName": "Name",
+        "simplifiedFormFocalPointTitle": "Title",
+        "simplifiedFormFocalPointEmail": "Email",
+        "simplifiedFormFocalPointPhoneNumber": "Phone Number",
+        "simplifiedFormDelegation": "IFRC Head of Delegation",
+        "simplifiedFormDelegationName": "Name",
+        "simplifiedFormDelegationTitle": "Title",
+        "simplifiedFormDelegationEmail": "Email",
+        "simplifiedFormDelegationPhoneNumber": "Phone Number",
+        "simplifiedFormDrefFocalPoint": "DREF Focal Point",
+        "simplifiedFormDrefFocalPointDescription": "The DREF contact person fro IFRC",
+        "simplifiedFormDrefFocalPointName": "Name",
+        "simplifiedFormDrefFocalPointTitle": "Title",
+        "simplifiedFormDrefFocalPointEmail": "Email",
+        "simplifiedFormDrefFocalPointPhoneNumber": "Phone Number",
+        "simplifiedFormRegionalFocalPoint": "IFRC Regional AA Focal Point",
+        "simplifiedFormRegionalFocalPointName": "Name",
+        "simplifiedFormRegionalFocalPointTitle": "Title",
+        "simplifiedFormRegionalFocalPointEmail": "Email",
+        "simplifiedFormRegionalFocalPointPhoneNumber": "Phone Number",
+        "simplifiedFormRegionalManager": "IFRC Regional Ops Manager",
+        "simplifiedFormRegionalManagerName": "Name",
+        "simplifiedFormRegionalManagerTitle": "Title",
+        "simplifiedFormRegionalManagerEmail": "Email",
+        "simplifiedFormRegionalManagerPhoneNumber": "Phone Number",
+        "simplifiedFormRegionalHead": "IFRC Regional Head of DCC",
+        "simplifiedFormRegionalHeadName": "Name",
+        "simplifiedFormRegionalHeadTitle": "Title",
+        "simplifiedFormRegionalHeadEmail": "Email",
+        "simplifiedFormRegionalHeadPhoneNumber": "Phone Number",
+        "simplifiedFormRegionalCoordinator": "IFRC Global Ops Coordinator",
+        "simplifiedFormRegionalCoordinatorName": "Name",
+        "simplifiedFormRegionalCoordinatorTitle": "Title",
+        "simplifiedFormRegionalCoordinatorEmail": "Email",
+        "simplifiedFormRegionalCoordinatorPhoneNumber": "Phone Number"
+    }
+}
diff --git a/app/src/views/SimplifiedEapForm/Overview/index.tsx b/app/src/views/SimplifiedEapForm/Overview/index.tsx
new file mode 100644
index 000000000..dd7f8f139
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/Overview/index.tsx
@@ -0,0 +1,525 @@
+import {
+    Container,
+    Heading,
+    InputSection,
+    ListView,
+    NumberInput,
+    TextInput,
+} 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 { 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.simplifiedFormHeading}
+            >
+                <ListView
+                    layout="block"
+                    spacing="sm"
+                >
+                    <InputSection
+                        title={strings.simplifiedFormNationalSociety}
+                        description={strings.simplifiedFormNationalSocietyDescription}
+                        withAsteriskOnTitle
+                    >
+                        <NationalSocietySelectInput
+                            name="national_society"
+                            onChange={noop}
+                            value={eapRegistrationDetail?.national_society}
+                            disabled={disabled}
+                            readOnly
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.simplifiedFormCountry}
+                        description={strings.simplifiedFormCountryDescription}
+                        withAsteriskOnTitle
+                    >
+                        <CountrySelectInput
+                            name="country"
+                            value={eapRegistrationDetail?.country}
+                            onChange={noop}
+                            disabled={disabled}
+                            readOnly
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.simplifiedFormDisasterType}
+                        description={strings.simplifiedFormDisasterTypeDescription}
+                        withAsteriskOnTitle
+                    >
+                        <DisasterTypeSelectInput
+                            name="disaster_type"
+                            value={eapRegistrationDetail?.disaster_type}
+                            onChange={noop}
+                            disabled={disabled}
+                            readOnly
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.simplifiedFormUploadCoverImage}
+                        description={strings.simplifiedFormUploadCoverImageDescription}
+                        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.simplifiedFormUploadAnImageLabel}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                    <InputSection
+                        title={strings.simplifiedFormTimeframe}
+                        description={strings.simplifiedFormTimeframeDescription}
+                        withAsteriskOnTitle
+                    >
+                        <NumberInput
+                            name="seap_timeframe"
+                            value={value?.seap_timeframe}
+                            onChange={setFieldValue}
+                            error={error?.seap_timeframe}
+                            disabled={disabled}
+                        />
+                    </InputSection>
+                </ListView>
+            </Container>
+            <Container
+                heading={strings.simplifiedFormContacts}
+            >
+                <ListView layout="block">
+                    <Heading
+                        level={4}
+                    >
+                        {strings.simplifiedFormNationalHeader}
+                    </Heading>
+                    <InputSection
+                        title={strings.simplifiedFormNSContact}
+                        description={strings.simplifiedFormNSContactDescription}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.simplifiedFormNSName}
+                            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.simplifiedFormNSTitle}
+                            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.simplifiedFormNSEmail}
+                            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.simplifiedFormNSPhoneNumber}
+                            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.simplifiedFormPartnerNS}
+                        description={strings.simplifiedFormPartnerNSDescription}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.simplifiedFormPartnerNSName}
+                            name="partner_ns_name"
+                            value={value?.partner_ns_name}
+                            onChange={setFieldValue}
+                            error={error?.partner_ns_name}
+                            disabled={disabled}
+                        />
+                        <TextInput
+                            label={strings.simplifiedFormPartnerNSTitle}
+                            name="partner_ns_title"
+                            value={value?.partner_ns_title}
+                            onChange={setFieldValue}
+                            error={error?.partner_ns_title}
+                            disabled={disabled}
+                        />
+                        <TextInput
+                            label={strings.simplifiedFormPartnerNSEmail}
+                            name="partner_ns_email"
+                            value={value?.partner_ns_email}
+                            onChange={setFieldValue}
+                            error={error?.partner_ns_email}
+                            disabled={disabled}
+                        />
+                        <TextInput
+                            label={strings.simplifiedFormPartnerNSPhoneNumber}
+                            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.simplifiedFormDelegationHeader}
+                    </Heading>
+                    <InputSection
+                        title={strings.simplifiedFormFocalPoint}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.simplifiedFormFocalPointName}
+                            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.simplifiedFormFocalPointTitle}
+                            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.simplifiedFormFocalPointEmail}
+                            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.simplifiedFormFocalPointPhoneNumber}
+                            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.simplifiedFormDelegation}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.simplifiedFormDelegationName}
+                            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.simplifiedFormDelegationTitle}
+                            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.simplifiedFormDelegationEmail}
+                            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.simplifiedFormDelegationPhoneNumber}
+                            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.simplifiedRegionalHeader}
+                    </Heading>
+                    <InputSection
+                        title={strings.simplifiedFormDrefFocalPoint}
+                        description={strings.simplifiedFormDrefFocalPointDescription}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.simplifiedFormDrefFocalPointName}
+                            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.simplifiedFormDrefFocalPointTitle}
+                            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.simplifiedFormDrefFocalPointEmail}
+                            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.simplifiedFormDrefFocalPointPhoneNumber}
+                            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.simplifiedFormRegionalFocalPoint}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.simplifiedFormRegionalFocalPointName}
+                            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.simplifiedFormRegionalFocalPointTitle}
+                            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.simplifiedFormRegionalFocalPointEmail}
+                            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.simplifiedFormRegionalFocalPointPhoneNumber}
+                            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.simplifiedFormRegionalManager}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.simplifiedFormRegionalManagerName}
+                            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.simplifiedFormRegionalManagerTitle}
+                            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.simplifiedFormRegionalManagerEmail}
+                            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.simplifiedFormRegionalManagerPhoneNumber}
+                            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.simplifiedFormRegionalHead}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.simplifiedFormRegionalHeadName}
+                            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.simplifiedFormRegionalHeadTitle}
+                            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.simplifiedFormRegionalHeadEmail}
+                            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.simplifiedFormRegionalHeadPhoneNumber}
+                            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.simplifiedFormRegionalCoordinator}
+                        numPreferredColumns={2}
+                    >
+                        <TextInput
+                            label={strings.simplifiedFormRegionalCoordinatorName}
+                            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.simplifiedFormRegionalCoordinatorTitle}
+                            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.simplifiedFormRegionalCoordinatorEmail}
+                            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.simplifiedFormRegionalCoordinatorPhoneNumber}
+                            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>
+                </ListView>
+            </Container>
+        </TabPage>
+    );
+}
+
+export default Overview;
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/i18n.json b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/i18n.json
new file mode 100644
index 000000000..57024efda
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/i18n.json
@@ -0,0 +1,8 @@
+{
+    "namespace": "simplifiedEapForm",
+    "strings": {
+        "operationReadiness": "Readiness",
+        "operationTimeFrame": "Time Frame",
+        "operationTimeValue": "Time Value"
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/index.tsx b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/index.tsx
new file mode 100644
index 000000000..f79d4e438
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/index.tsx
@@ -0,0 +1,165 @@
+import { useCallback } from 'react';
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Checklist,
+    Container,
+    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,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import { type PartialSimplifiedEapType } from '../../../schema';
+
+import i18n from './i18n.json';
+
+type PlannedInterventionFormFields = NonNullable<PartialSimplifiedEapType['planned_operations']>[number];
+type ActivityFormField = NonNullable<PlannedInterventionFormFields['early_action_activities']>[number];
+
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+type TimeframeOption = NonNullable<GlobalEnumsResponse['eap_timeframe']>[number];
+
+const defaultActivityValue: ActivityFormField = {
+    client_id: '-1',
+};
+
+function timeframeKeySelector(option: TimeframeOption) {
+    return option.key;
+}
+
+const timeValueKeySelector = (
+    option: { key: number; value: string },
+) => option.key;
+
+interface Props {
+    value: ActivityFormField;
+    error: ArrayError<ActivityFormField> | undefined;
+    onChange: (value: SetValueArg<ActivityFormField>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+}
+
+function ActivityInput(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 (
+        <Container
+            headerActions={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="outline"
+                    title="Remove"
+                    disabled={disabled}
+                >
+                    <DeleteBinTwoLineIcon />
+                </Button>
+            )}
+        >
+            <ListView layout="block">
+                <ListView layout="grid" numPreferredGridColumns={3}>
+                    <TextInput
+                        label={strings.operationReadiness}
+                        name="activity"
+                        value={value.activity}
+                        onChange={onFieldChange}
+                        disabled={disabled}
+                        withAsterisk
+                    />
+                    <SelectInput
+                        label={strings.operationTimeFrame}
+                        name="timeframe"
+                        value={value.timeframe}
+                        onChange={handleTimeframeChange}
+                        keySelector={timeframeKeySelector}
+                        labelSelector={stringValueSelector}
+                        options={eap_timeframe}
+                        disabled={disabled}
+                        error={error?.timeframe}
+                    />
+                    {value?.timeframe && (
+                        <Checklist
+                            label={strings.operationTimeValue}
+                            name="time_value"
+                            value={value?.time_value}
+                            onChange={onFieldChange}
+                            keySelector={timeValueKeySelector}
+                            labelSelector={stringValueSelector}
+                            options={timeValueOptions}
+                            disabled={disabled}
+                        />
+                    )}
+                </ListView>
+            </ListView>
+        </Container>
+    );
+}
+
+export default ActivityInput;
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 000000000..4011d0c89
--- /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",
+        "operationNoActivitesMessage": "No activities added yet"
+    }
+}
\ No newline at end of file
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 000000000..e6ced0b21
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
@@ -0,0 +1,317 @@
+import { useCallback } from 'react';
+import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    Container,
+    ExpandableContainer,
+    ListView,
+    NumberInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type SetValueArg,
+    useFormArray,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import NonFieldError from '#components/NonFieldError';
+
+import { type PartialSimplifiedEapType } from '../../schema';
+import ActivityInput from './ActivityInput';
+
+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];
+
+const defaultOperationValue: PlannedOperationFormFields = {
+    client_id: '-1',
+};
+
+interface Props {
+    value: PlannedOperationFormFields;
+    error: ArrayError<PlannedOperationFormFields> | undefined;
+    onChange: (value: SetValueArg<PlannedOperationFormFields>, index: number) => void;
+    onRemove: (index: number) => void;
+    index: number;
+    disabled?: boolean;
+    titleMap: Record<string, string> | undefined;
+}
+
+function OperationsBySectorInput(props: Props) {
+    const {
+        error: errorFromProps,
+        onChange,
+        value,
+        index,
+        onRemove,
+        disabled,
+        titleMap,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const onFieldChange = useFormObject(index, onChange, defaultOperationValue);
+
+    const operationLabel = isDefined(value.title)
+        ? titleMap?.[value.title]
+        : undefined;
+
+    const error = (value && value.client_id && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : 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 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],
+    );
+
+    return (
+        <ExpandableContainer
+            heading={operationLabel ?? '--'}
+            headerActions={(
+                <Button
+                    name={index}
+                    onClick={onRemove}
+                    styleVariant="outline"
+                    title="Button"
+                    disabled={disabled}
+                    before={<DeleteBinTwoLineIcon />}
+                >
+                    {strings.operationRemoveButton}
+                </Button>
+            )}
+            withPadding
+            withBackground
+            initiallyExpanded
+        >
+            <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">
+                    <Container
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.operationReadinessActivities}
+                        headingLevel={5}
+                        headerActions={(
+                            <Button
+                                styleVariant="outline"
+                                name={undefined}
+                                onClick={handleReadinessAddButtonClick}
+                                disabled={disabled}
+                            >
+                                {strings.operationAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.readiness_activities)
+                            || value.readiness_activities.length === 0}
+                        emptyMessage={strings.operationNoActivitesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.readiness_activities)
+                            }
+                            />
+                        )}
+                    >
+                        {value?.readiness_activities?.map((activity, i) => (
+                            <ActivityInput
+                                key={activity.client_id}
+                                index={i}
+                                value={activity}
+                                onChange={onReadinessChange}
+                                onRemove={onReadinessRemove}
+                                error={getErrorObject(error?.readiness_activities)}
+                                disabled={disabled}
+                            />
+                        ))}
+                    </Container>
+                    <Container
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.operationPrepositioningActivities}
+                        headingLevel={5}
+                        headerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handlePrepositioningAddButtonClick}
+                                disabled={disabled}
+                                styleVariant="outline"
+                            >
+                                {strings.operationAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.prepositioning_activities)
+                            || value.prepositioning_activities.length === 0}
+                        emptyMessage={strings.operationNoActivitesMessage}
+                        headerDescription={(
+                            <NonFieldError error={
+                                getErrorObject(error?.prepositioning_activities)
+                            }
+                            />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.prepositioning_activities?.map((activity, i) => (
+                                <ActivityInput
+                                    key={activity.client_id}
+                                    index={i}
+                                    value={activity}
+                                    onChange={onPrepositioningChange}
+                                    onRemove={onPrepositioningRemove}
+                                    error={getErrorObject(error?.prepositioning_activities)}
+                                    disabled={disabled}
+                                />
+                            ))}
+                        </ListView>
+                    </Container>
+                    <Container
+                        withDarkBackground
+                        withHeaderBorder
+                        withPadding
+                        heading={strings.operationEarlyActionActivities}
+                        headingLevel={5}
+                        headerActions={(
+                            <Button
+                                name={undefined}
+                                onClick={handleEarlyActionAddButtonClick}
+                                disabled={disabled}
+                                styleVariant="outline"
+                            >
+                                {strings.operationAddActivityButton}
+                            </Button>
+                        )}
+                        withCompactMessage
+                        empty={isNotDefined(value.early_action_activities)
+                            || value.early_action_activities.length === 0}
+                        emptyMessage={strings.operationNoActivitesMessage}
+                        headerDescription={(
+                            <NonFieldError error={getErrorObject(error?.early_action_activities)} />
+                        )}
+                    >
+                        <ListView layout="block">
+                            {value?.early_action_activities?.map((activity, i) => (
+                                <ActivityInput
+                                    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 000000000..fe89c1f8e
--- /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 000000000..bc190713f
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
@@ -0,0 +1,167 @@
+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,
+    randomString,
+} from '@togglecorp/fujs';
+import {
+    type EntriesAsList,
+    type Error,
+    getErrorObject,
+    getErrorString,
+    useFormArray,
+} from '@togglecorp/toggle-form';
+
+import NonFieldError from '#components/NonFieldError';
+import TabPage from '#components/TabPage';
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import { type PartialSimplifiedEapType } from '../schema';
+import OperationInput from './OperationsInput';
+
+import i18n from './i18n.json';
+
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+type EapSectorOption = NonNullable<GlobalEnumsResponse['eap_sector']>[number];
+
+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 selectedOperations = (value.planned_operations ?? [])
+        .map((op) => op.title)
+        .filter((key): key is EapSectorOption['key'] => key !== undefined);
+
+    const {
+        setValue: onOperationChange,
+        removeValue: onOperationRemove,
+    } = useFormArray<'planned_operations', PlannedOperationFormFields>(
+        'planned_operations',
+        setFieldValue,
+    );
+
+    const handleOperationSelect = useCallback((selectedKeys: EapSectorOption['key'][]) => {
+        const previousKeys = (value.planned_operations ?? [])
+            .map((op) => op.title)
+            .filter((key): key is EapSectorOption['key'] => key !== undefined);
+
+        const addedKeys = selectedKeys.filter((key) => !previousKeys.includes(key));
+        const removedKeys = previousKeys.filter((key) => !selectedKeys.includes(key));
+
+        if (addedKeys.length > 0) {
+            const newOperations = addedKeys.map((key) => ({
+                client_id: randomString(),
+                title: key,
+            }));
+
+            setFieldValue(
+                (oldValue: PlannedOperationFormFields[] = []) => [...oldValue, ...newOperations],
+                'planned_operations',
+            );
+        }
+
+        removedKeys.forEach((key) => {
+            const index = value.planned_operations?.findIndex(
+                (op) => op.title === key,
+            );
+            if (index !== undefined && index >= 0) {
+                onOperationRemove(index);
+            }
+        });
+    }, [
+        value.planned_operations,
+        setFieldValue,
+        onOperationRemove,
+    ]);
+
+    const eapSectorTitleMap = useMemo(
+        () => (
+            listToMap(
+                eapSectorOptions,
+                (sector) => sector.key,
+                (sector) => sector.value,
+            )
+        ),
+        [eapSectorOptions],
+    );
+
+    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={selectedOperations}
+                            onChange={handleOperationSelect}
+                            disabled={disabled}
+                            keySelector={sectorKeySelector}
+                            labelSelector={stringValueSelector}
+                            checkListLayout="grid"
+                            checkListLayoutPreferredGridColumns={3}
+                        />
+
+                    </InputSection>
+                    {value?.planned_operations?.map((operation, index) => (
+                        <OperationInput
+                            key={operation.client_id}
+                            index={index}
+                            value={operation}
+                            onChange={onOperationChange}
+                            onRemove={onOperationRemove}
+                            error={getErrorObject(error?.planned_operations)}
+                            disabled={disabled}
+                            titleMap={eapSectorTitleMap}
+                        />
+                    ))}
+                </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 000000000..d7520c102
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
@@ -0,0 +1,15 @@
+{
+    "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 choosen 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",
+        "simplifiedFormUploadlabel": "Upload",
+        "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 000000000..cfe999f98
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx
@@ -0,0 +1,142 @@
+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}
+                            label={strings.simplifiedFormUploadlabel}
+                            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}
+                            label={strings.simplifiedFormUploadlabel}
+                            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}
+                            label={strings.simplifiedFormUploadlabel}
+                            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 000000000..eb9dce9d8
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/common.tsx
@@ -0,0 +1,122 @@
+import { isNotDefined } from '@togglecorp/fujs';
+import {
+    analyzeErrors,
+    type Error,
+    getErrorObject,
+} from '@togglecorp/toggle-form';
+
+import { type PartialSimplifiedEapType } from './schema';
+
+type TabKeys = 'overview' | 'riskAnalysis' | 'earlyAction' | 'plannedOperations' | 'approaches' | 'deliverBudget';
+
+export 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)[];
+
+export 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)[];
+
+export 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)[];
+
+export const plannedOperationsTabFields: (keyof PartialSimplifiedEapType)[] = [
+    'planned_operations',
+] satisfies (keyof PartialSimplifiedEapType)[];
+
+export const approachesTabFields: (keyof PartialSimplifiedEapType)[] = [
+    'enable_approaches',
+] satisfies (keyof PartialSimplifiedEapType)[];
+
+export const deliverBudgetTabFields: (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 = {
+    overview: overviewTabFields,
+    riskAnalysis: riskAnalysisTabFields,
+    earlyAction: earlyActionTabFields,
+    plannedOperations: plannedOperationsTabFields,
+    approaches: approachesTabFields,
+    deliverBudget: deliverBudgetTabFields,
+};
+
+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 000000000..87716ad24
--- /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 Early Action Protocols (EAP) submission. This is the Full EAP form. If you are instead looking for the Simplified EAP.",
+        "simplifiedEapOverview": "Overview",
+        "simplifiedEapRiskAnalysis": "Risk Analysis & Early Action Selection",
+        "simplifiedEapEarlyAction": "Early Action Interventation",
+        "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 Simplifed EAP right now!",
+        "eapSimplifiedSuccess": "Successfully created a new Simplifed EAP!",
+        "eapSimplifiedUpdateMessage": "Simplified EAP Form updated Successfully."
+    }
+}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/index.tsx b/app/src/views/SimplifiedEapForm/index.tsx
index 57bcf2b6c..4d6dea8c2 100644
--- a/app/src/views/SimplifiedEapForm/index.tsx
+++ b/app/src/views/SimplifiedEapForm/index.tsx
@@ -1,12 +1,422 @@
+import {
+    type ElementRef,
+    useCallback,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { useParams } from 'react-router-dom';
+import {
+    Button,
+    Tab,
+    TabList,
+    TabPanel,
+    Tabs,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { hasSomeDefinedValue } from '@ifrc-go/ui/utils';
+import {
+    isDefined,
+    isNotDefined,
+    isTruthyString,
+} from '@togglecorp/fujs';
+import {
+    createSubmitHandler,
+    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,
+    useLazyRequest,
+    useRequest,
+} from '#utils/restRequest';
+import { transformObjectError } from '#utils/restRequest/error';
+
+import { checkTabErrors } from './common';
+import DeliveryAndBudget from './DeliveryAndBudget';
+import EarlyAction from './EarlyAction';
+import EnablingApproches 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 TabKeys = 'overview' | 'riskAnalysis' | 'earlyAction' | 'plannedOperations' | 'enablingApproaches' | 'deliveryAndBudget';
+
+function getNextStep(current: TabKeys, direction: 1 | -1) {
+    if (direction === 1) {
+        const mapping: { [key in TabKeys]?: TabKeys } = {
+            overview: 'riskAnalysis',
+            riskAnalysis: 'earlyAction',
+            earlyAction: 'plannedOperations',
+            plannedOperations: 'enablingApproaches',
+            enablingApproaches: 'deliveryAndBudget',
+        };
+        return mapping[current];
+    }
+    if (direction === -1) {
+        const mapping: { [key in TabKeys]?: TabKeys } = {
+            deliveryAndBudget: 'enablingApproaches',
+            enablingApproaches: 'plannedOperations',
+            plannedOperations: 'earlyAction',
+            earlyAction: 'riskAnalysis',
+            riskAnalysis: 'overview',
+        };
+        return mapping[current];
+    }
+    return undefined;
+}
 
 /** @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 {
+        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 instead of using 0
+    const latestSimplifiedEapId = eapDetailResponse?.simplified_eap_details[0]?.id;
+
+    // FIXME: handle errors
+    useRequest({
+        skip: isNotDefined(latestSimplifiedEapId),
+        url: '/api/v2/simplified-eap/{id}/',
+        pathVariables: isDefined(latestSimplifiedEapId) ? ({
+            id: latestSimplifiedEapId,
+        }) : undefined,
+        onSuccess: (simplifiedEapResponse) => {
+            // FIXME: remove unnecessary variables
+            // FIXME: add setFileIdToUrlMap
+            // FIXME: inject client ID
+            const {
+                admin2_details,
+                budget_file_details,
+                ...otherValues
+            } = simplifiedEapResponse;
+
+            // FIXME: typings
+            setValue(otherValues);
+        },
+    });
+
+    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,
+                },
+            } = err;
+
+            setError(transformObjectError(formErrors, () => undefined));
+
+            alert.show(
+                strings.eapSimplifiedFailure,
+                { variant: 'danger' },
+            );
+        },
+    });
+
+    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' },
+            );
+            navigate(
+                'accountMyFormsEap',
+                { params: { eapId: response.id } },
+            );
+        },
+        onFailure: (err) => {
+            const {
+                value: {
+                    formErrors,
+                    messageForNotification,
+                },
+            } = err;
+
+            setError(transformObjectError(
+                formErrors,
+                () => undefined,
+            ));
+
+            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),
+                admin2: [27485],
+                cover_image_file: hasSomeDefinedValue(validatedFormValue.cover_image_file)
+                    ? validatedFormValue.cover_image_file
+                    : undefined,
+            });
+        } 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 (
-        <Page>
-            {/* TODO: Add Simplified EAP form */}
-            Simplified EAP form
-        </Page>
+        <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>
+                )}
+                info={(
+                    <TabList className={styles.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="approaches"
+                            step={5}
+                            errored={checkTabErrors(formError, 'approaches')}
+                        >
+                            {strings.simplifiedEnablingApproaches}
+                        </Tab>
+                        <Tab
+                            name="deliverBudget"
+                            step={6}
+                            errored={checkTabErrors(formError, 'deliverBudget')}
+                        >
+                            {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="approaches">
+                    <EnablingApproches
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                    />
+                </TabPanel>
+                <TabPanel name="deliverBudget">
+                    <DeliveryAndBudget
+                        value={value}
+                        setFieldValue={setFieldValue}
+                        error={formError}
+                        disabled={disabled}
+                        fileIdToUrlMap={fileIdToUrlMap}
+                        setFileIdToUrlMap={setFileIdToUrlMap}
+                    />
+                </TabPanel>
+                <div className={styles.actions}>
+                    <div className={styles.pageActions}>
+                        <Button
+                            name={prevStep ?? activeTab}
+                            onClick={handleTabChange}
+                            disabled={isNotDefined(prevStep)}
+                            colorVariant="secondary"
+                            styleVariant="outline"
+                        >
+                            {strings.simplifiedBackButton}
+                        </Button>
+                        {isDefined(nextStep) ? (
+                            <Button
+                                name={nextStep ?? activeTab}
+                                onClick={handleTabChange}
+                                colorVariant="secondary"
+                                styleVariant="outline"
+                            >
+                                {strings.simplifiedNextButton}
+                            </Button>
+                        ) : (
+                            <Button
+                                name={undefined}
+                                onClick={handleSave}
+                            >
+                                {strings.simplifiedSaveButton}
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            </Page>
+        </Tabs>
     );
 }
diff --git a/app/src/views/SimplifiedEapForm/schema.ts b/app/src/views/SimplifiedEapForm/schema.ts
new file mode 100644
index 000000000..e3bf269ff
--- /dev/null
+++ b/app/src/views/SimplifiedEapForm/schema.ts
@@ -0,0 +1,339 @@
+import { type DeepReplace } from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
+import {
+    emailCondition,
+    type ObjectSchema,
+    type PartialForm,
+    undefinedValue,
+} from '@togglecorp/toggle-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 = GoApiBody<'/api/v2/simplified-eap/', 'POST'>;
+
+type EnableApproachesResponse = NonNullable<EapSimplifiedRequestBody['enable_approaches']>[number];
+type EarlyActionApproachesResponse = NonNullable<EnableApproachesResponse['early_action_activities']>[number];
+type PrepositioningApproachesResponse = NonNullable<EnableApproachesResponse['prepositioning_activities']>[number];
+type ReadinessApproachesResponse = NonNullable<EnableApproachesResponse['readiness_activities']>[number];
+
+type OperationsResponse = NonNullable<EapSimplifiedRequestBody['planned_operations']>[number];
+type EarlyActionResponse = NonNullable<OperationsResponse['early_action_activities']>[number];
+type PrepositioningResponse = NonNullable<OperationsResponse['prepositioning_activities']>[number];
+type ReadinessResponse = NonNullable<OperationsResponse['readiness_activities']>[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 EarlyActionApproachesFormFields = EarlyActionApproachesResponse & { client_id: string };
+type PrepositioningApproachesFormFields = PrepositioningApproachesResponse & { client_id: string };
+type ReadinessApproachesFormFields = ReadinessApproachesResponse & { 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 HazardImagesFormFields = HazardImagesResponse & { client_id: string };
+type RiskImagesFormFields = RiskImagesResponse & { client_id: string };
+type EarlyActionImagesFormFields = EarlyActionImagesResponse & { client_id: string };
+
+type EnableApproachesResponseFormFields = (
+    DeepReplace<
+        DeepReplace<
+            DeepReplace<
+                EnableApproachesResponse,
+                EarlyActionApproachesResponse,
+                EarlyActionApproachesFormFields
+            >,
+            PrepositioningApproachesResponse,
+            PrepositioningApproachesFormFields
+        >,
+        ReadinessApproachesResponse,
+        ReadinessApproachesFormFields
+    >
+) & { client_id: string, title: number | undefined }
+
+type OperationsResponseFormFields = (
+    DeepReplace<
+        DeepReplace<
+            DeepReplace<
+                OperationsResponse,
+                EarlyActionResponse,
+                EarlyActionFormFields
+            >,
+            PrepositioningResponse,
+            PrepositioningFormFields
+        >,
+        ReadinessResponse,
+        ReadinessFormFields
+    >
+) & { client_id: string, title: number | undefined }
+
+type FormFields = (
+    DeepReplace<
+        DeepReplace<
+            DeepReplace<
+                DeepReplace<
+                    DeepReplace<
+                        DeepReplace<
+                            EapSimplifiedRequestBody,
+                            OperationsResponse,
+                            OperationsResponseFormFields
+                        >,
+                        EnableApproachesResponse,
+                        EnableApproachesResponseFormFields
+                    >,
+                    CoverImageFileResponse,
+                    CoverImageFileFields
+                >,
+                HazardImagesResponse,
+                HazardImagesFormFields
+            >,
+            RiskImagesResponse,
+            RiskImagesFormFields
+        >,
+        EarlyActionImagesResponse,
+        EarlyActionImagesFormFields
+    >
+);
+
+export type PartialSimplifiedEapType = PartialForm<FormFields, 'client_id'>;
+type PlannedOperationalFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifiedEapType['planned_operations']>[number], PartialSimplifiedEapType>['fields']>;
+type EarlyActionFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['planned_operations']>[number]['early_action_activities']>[number], PartialSimplifiedEapType>['fields']>;
+type PrepositioningFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['planned_operations']>[number]['prepositioning_activities']>[number], PartialSimplifiedEapType>['fields']>;
+type ReadinessFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['planned_operations']>[number]['readiness_activities']>[number], PartialSimplifiedEapType>['fields']>;
+
+type EnableApproachesFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifiedEapType['enable_approaches']>[number], PartialSimplifiedEapType>['fields']>;
+type EarlyActionApproachesFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['enable_approaches']>[number]['early_action_activities']>[number], PartialSimplifiedEapType>['fields']>;
+type PrepositioningApproachesFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['enable_approaches']>[number]['prepositioning_activities']>[number], PartialSimplifiedEapType>['fields']>;
+type ReadinessApproachesFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['enable_approaches']>[number]['readiness_activities']>[number], PartialSimplifiedEapType>['fields']>;
+
+type CoverImageFileFormFields = ReturnType<ObjectSchema<PartialSimplifiedEapType['cover_image_file'], 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']>;
+
+export const formSchema: FormSchema = {
+    fields: (): FormSchemaFields => ({
+        admin2: { },
+        budget_file: { required: true },
+        cover_image_file: {
+            fields: (): CoverImageFileFormFields => ({
+                client_id: {},
+                caption: {},
+                id: { defaultValue: undefinedValue },
+            }),
+        },
+        hazard_impact_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): HazardImpactFileFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+        risk_selected_protocols_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): RiskProtocolsFileFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+        selected_early_actions_images: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): EarlyActionFileFields => ({
+                    client_id: {},
+                    caption: {},
+                    id: { defaultValue: undefinedValue },
+                }),
+            }),
+            validation: lessThanEqualToFiveImagesCondition,
+        },
+        seap_timeframe: { required: true },
+        assisted_through_operation: {},
+        dref_focal_point_name: {},
+        dref_focal_point_title: {},
+        dref_focal_point_email: { validations: [emailCondition] },
+        dref_focal_point_phone_number: {},
+        eap_registration: {},
+        early_action_budget: { required: true },
+        early_action_capability: {},
+        ifrc_delegation_focal_point_name: {},
+        ifrc_delegation_focal_point_title: {},
+        ifrc_delegation_focal_point_email: { validations: [emailCondition] },
+        ifrc_delegation_focal_point_phone_number: {},
+        ifrc_global_ops_coordinator_name: {},
+        ifrc_global_ops_coordinator_title: {},
+        ifrc_global_ops_coordinator_phone_number: {},
+        ifrc_global_ops_coordinator_email: { validations: [emailCondition] },
+        ifrc_head_of_delegation_name: {},
+        ifrc_head_of_delegation_title: {},
+        ifrc_head_of_delegation_email: { validations: [emailCondition] },
+        ifrc_head_of_delegation_phone_number: {},
+        ifrc_regional_focal_point_name: {},
+        ifrc_regional_focal_point_title: {},
+        ifrc_regional_focal_point_email: { validations: [emailCondition] },
+        ifrc_regional_focal_point_phone_number: {},
+        ifrc_regional_head_dcc_name: {},
+        ifrc_regional_head_dcc_title: {},
+        ifrc_regional_head_dcc_email: { validations: [emailCondition] },
+        ifrc_regional_head_dcc_phone_number: {},
+        ifrc_regional_ops_manager_name: {},
+        ifrc_regional_ops_manager_title: {},
+        ifrc_regional_ops_manager_phone_number: {},
+        ifrc_regional_ops_manager_email: { validations: [emailCondition] },
+        national_society_contact_name: {},
+        national_society_contact_title: {},
+        national_society_contact_email: { validations: [emailCondition] },
+        national_society_contact_phone_number: {},
+        operational_timeframe: {
+            required: true,
+            validations: [maxOperationalTimeframeCondition],
+        },
+        partner_ns_name: {},
+        partner_ns_title: {},
+        partner_ns_email: { validations: [emailCondition] },
+        partner_ns_phone_number: {},
+        people_targeted: { required: true },
+        pre_positioning_budget: { required: true },
+        readiness_budget: { required: true },
+        seap_lead_time: { required: true },
+        selected_early_actions: {},
+        selection_criteria: {},
+        trigger_threshold_justification: {},
+        trigger_statement: {},
+        total_budget: { required: true },
+        prioritized_hazard_and_impact: {},
+        risks_selected_protocols: {},
+        seap_lead_timeframe_unit: { required: true },
+        operational_timeframe_unit: {},
+        next_step_towards_full_eap: { required: true },
+        enable_approaches: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): EnableApproachesFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    title: {},
+                    approach: {},
+                    budget_per_approach: {},
+                    ap_code: {},
+                    indicator_target: {},
+                    early_action_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => ({
+                            fields: (): EarlyActionApproachesFields => ({
+                                client_id: { forceValue: undefinedValue },
+                                id: { defaultValue: undefinedValue },
+                                activity: {},
+                                timeframe: {},
+                                time_value: {},
+                            }),
+                        }),
+                    },
+                    readiness_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => ({
+                            fields: (): ReadinessApproachesFields => ({
+                                client_id: { forceValue: undefinedValue },
+                                id: { defaultValue: undefinedValue },
+                                activity: {},
+                                timeframe: {},
+                                time_value: {},
+                            }),
+                        }),
+                    },
+                    prepositioning_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => ({
+                            fields: (): PrepositioningApproachesFields => ({
+                                client_id: { forceValue: undefinedValue },
+                                id: { defaultValue: undefinedValue },
+                                activity: {},
+                                timeframe: {},
+                                time_value: {},
+                            }),
+                        }),
+                    },
+                }),
+            }),
+        },
+        planned_operations: {
+            keySelector: (item) => item.client_id,
+            member: () => ({
+                fields: (): PlannedOperationalFields => ({
+                    client_id: {},
+                    id: { defaultValue: undefinedValue },
+                    title: {},
+                    sector: {},
+                    budget_per_sector: {},
+                    ap_code: {},
+                    people_targeted: {},
+                    early_action_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => ({
+                            fields: (): EarlyActionFields => ({
+                                client_id: { forceValue: undefinedValue },
+                                id: { defaultValue: undefinedValue },
+                                activity: {},
+                                timeframe: {},
+                                time_value: {},
+                            }),
+                        }),
+                    },
+                    readiness_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => ({
+                            fields: (): ReadinessFields => ({
+                                client_id: { forceValue: undefinedValue },
+                                id: { defaultValue: undefinedValue },
+                                activity: {},
+                                timeframe: {},
+                                time_value: {},
+                            }),
+                        }),
+                    },
+                    prepositioning_activities: {
+                        keySelector: (item) => item.client_id,
+                        member: () => ({
+                            fields: (): PrepositioningFields => ({
+                                client_id: { forceValue: undefinedValue },
+                                id: { defaultValue: undefinedValue },
+                                activity: {},
+                                timeframe: {},
+                                time_value: {},
+                            }),
+                        }),
+                    },
+                }),
+            }),
+        },
+    }),
+};
diff --git a/app/src/views/SimplifiedEapForm/styles.module.css b/app/src/views/SimplifiedEapForm/styles.module.css
new file mode 100644
index 000000000..c5bb9d538
--- /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);
+            }
+        }
+    }
+}

From e408b92685317c4607b7fc0e618c6ac10bac1883 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Tue, 2 Dec 2025 12:34:33 +0545
Subject: [PATCH 10/19] feat(eap): add export for simplified EAP

---
 app/src/App/routes/index.tsx                  |  16 +
 .../printable/PrintableContainer/index.tsx    |  43 ++
 .../PrintableContainer/styles.module.css      |   3 +
 .../printable/PrintableDataDisplay/index.tsx  | 164 ++++++
 .../PrintableDataDisplay/styles.module.css    |  44 ++
 .../printable/PrintableDescription/index.tsx  |   0
 .../PrintableDescription/styles.module.css    |   0
 .../printable/PrintableLabel/index.tsx        |   0
 .../PrintableLabel/styles.module.css          |   0
 .../printable/PrintablePage/index.tsx         |  47 ++
 .../printable/PrintablePage/styles.module.css |  38 ++
 app/src/views/AccountMyFormsEap/index.tsx     |   2 +-
 app/src/views/SimplifiedEapExport/i18n.json   |  40 ++
 app/src/views/SimplifiedEapExport/index.tsx   | 544 ++++++++++++++++++
 .../SimplifiedEapExport/styles.module.css     |  11 +
 go-api                                        |   2 +-
 .../components/printable/Heading/index.tsx    |   7 +-
 .../printable/Heading/styles.module.css       |   2 +-
 .../components/printable/TextOutput/index.tsx |   9 +-
 .../printable/TextOutput/styles.module.css    |  15 +
 packages/ui/src/hooks/index.tsx               |   1 +
 packages/ui/src/utils/style.ts                |   8 +-
 22 files changed, 984 insertions(+), 12 deletions(-)
 create mode 100644 app/src/components/printable/PrintableContainer/index.tsx
 create mode 100644 app/src/components/printable/PrintableContainer/styles.module.css
 create mode 100644 app/src/components/printable/PrintableDataDisplay/index.tsx
 create mode 100644 app/src/components/printable/PrintableDataDisplay/styles.module.css
 create mode 100644 app/src/components/printable/PrintableDescription/index.tsx
 create mode 100644 app/src/components/printable/PrintableDescription/styles.module.css
 create mode 100644 app/src/components/printable/PrintableLabel/index.tsx
 create mode 100644 app/src/components/printable/PrintableLabel/styles.module.css
 create mode 100644 app/src/components/printable/PrintablePage/index.tsx
 create mode 100644 app/src/components/printable/PrintablePage/styles.module.css
 create mode 100644 app/src/views/SimplifiedEapExport/i18n.json
 create mode 100644 app/src/views/SimplifiedEapExport/index.tsx
 create mode 100644 app/src/views/SimplifiedEapExport/styles.module.css

diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index 75e1e370e..d96364750 100644
--- a/app/src/App/routes/index.tsx
+++ b/app/src/App/routes/index.tsx
@@ -1226,6 +1226,21 @@ const eapDevelopmentRegistrationForm = customWrapRoute({
     },
 });
 
+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,
@@ -1504,6 +1519,7 @@ const wrappedRoutes = {
     drefProcessLayout,
     eapRegistrationLayout,
     eapDevelopmentRegistrationForm,
+    simplifiedEapExport,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));
diff --git a/app/src/components/printable/PrintableContainer/index.tsx b/app/src/components/printable/PrintableContainer/index.tsx
new file mode 100644
index 000000000..ff291099d
--- /dev/null
+++ b/app/src/components/printable/PrintableContainer/index.tsx
@@ -0,0 +1,43 @@
+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}>
+                    {heading}
+                </Heading>
+            )}
+            {children}
+            <div 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 000000000..c88ffb898
--- /dev/null
+++ b/app/src/components/printable/PrintableContainer/styles.module.css
@@ -0,0 +1,3 @@
+.page-break {
+    break-before: page;
+}
diff --git a/app/src/components/printable/PrintableDataDisplay/index.tsx b/app/src/components/printable/PrintableDataDisplay/index.tsx
new file mode 100644
index 000000000..abe29ccb3
--- /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;
+}
+
+export 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 000000000..7add934f4
--- /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 000000000..e69de29bb
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 000000000..e69de29bb
diff --git a/app/src/components/printable/PrintableLabel/index.tsx b/app/src/components/printable/PrintableLabel/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/src/components/printable/PrintableLabel/styles.module.css b/app/src/components/printable/PrintableLabel/styles.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/src/components/printable/PrintablePage/index.tsx b/app/src/components/printable/PrintablePage/index.tsx
new file mode 100644
index 000000000..62d152adb
--- /dev/null
+++ b/app/src/components/printable/PrintablePage/index.tsx
@@ -0,0 +1,47 @@
+import React 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;
+}
+
+function PrintablePage(props: Props) {
+    const {
+        className,
+        children,
+        heading,
+        description,
+    } = props;
+
+    return (
+        <main className={_cs(styles.printablePage, className)}>
+            <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}
+        </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 000000000..06f063c82
--- /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/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
index ced69d136..c662013f5 100644
--- a/app/src/views/AccountMyFormsEap/index.tsx
+++ b/app/src/views/AccountMyFormsEap/index.tsx
@@ -192,7 +192,7 @@ export function Component() {
         <Container
             heading={strings.eapApplicationsHeading}
             withHeaderBorder
-            filters={(eapListResponse?.count ?? 0) > 0 && (
+            filters={(
                 <Filters
                     value={rawFilter}
                     onChange={setFilterField}
diff --git a/app/src/views/SimplifiedEapExport/i18n.json b/app/src/views/SimplifiedEapExport/i18n.json
new file mode 100644
index 000000000..6b916736b
--- /dev/null
+++ b/app/src/views/SimplifiedEapExport/i18n.json
@@ -0,0 +1,40 @@
+{
+    "namespace": "simplifiedEapExport",
+    "strings": {
+        "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 invervention",
+        "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",
+        "budgetHeading": "Budget",
+        "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 000000000..4e261c44d
--- /dev/null
+++ b/app/src/views/SimplifiedEapExport/index.tsx
@@ -0,0 +1,544 @@
+import { useParams } from 'react-router-dom';
+import { Label } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    DescriptionText,
+    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 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';
+
+// FIXME: indicators should come from the server (for each sector)
+const sampleIndicators = [
+    {
+        id: 1,
+        title: '# households would have improved access to drinking water in case of Karnali flooding.',
+        target: 420,
+    },
+    {
+        id: 2,
+        title: '# households would have improved access to drinking water in case of Babai flooding.',
+        target: 640,
+    },
+    {
+        id: 3,
+        title: '# households would have improved access to drinking water in case of West Rapti Flooding',
+        target: 440,
+    },
+];
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const { eapId } = useParams<{ eapId: string }>();
+
+    const strings = useTranslation(i18n);
+
+    const { response: eapRegistrationResponse } = useRequest({
+        skip: isFalsyString(eapId),
+        url: '/api/v2/eap-registration/{id}/',
+        pathVariables: isTruthyString(eapId) ? {
+            id: Number(eapId),
+        } : undefined,
+    });
+
+    const latestSimplifiedEap = eapRegistrationResponse?.simplified_eap_details[0];
+
+    const { response: simplifiedEapResponse } = useRequest({
+        skip: isNotDefined(latestSimplifiedEap?.id),
+        url: '/api/v2/simplified-eap/{id}/',
+        pathVariables: isDefined(latestSimplifiedEap?.id) ? {
+            id: Number(latestSimplifiedEap.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 {
+        cover_image_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 ?? {};
+
+    return (
+        <PrintablePage
+            heading={(
+                <>
+                    Simplified
+                    <br />
+                    Early Action Protocol
+                </>
+            )}
+            description="Nepal, Western Terai | Flood"
+        >
+            {isDefined(cover_image_details?.file) && (
+                <PrintableContainer>
+                    <Image
+                        src={cover_image_details.file}
+                        alt=""
+                        caption={cover_image_details.caption}
+                    />
+                </PrintableContainer>
+            )}
+            <PrintableContainer>
+                <div className={styles.metaItems}>
+                    <PrintableDataDisplay
+                        label={strings.sEapNoLabel}
+                        value="sEAP2024NP01"
+                        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}
+                >
+                    <DescriptionText>
+                        {prioritized_hazard_and_impact}
+                    </DescriptionText>
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.riskSelectedProtocolsHeading}
+                    headingLevel={3}
+                >
+                    <DescriptionText>
+                        {risks_selected_protocols}
+                    </DescriptionText>
+                </PrintableContainer>
+            </PrintableContainer>
+            <PrintableContainer
+                heading={strings.earlyActionInterventionHeading}
+                headingLevel={2}
+            >
+                <PrintableContainer
+                    heading={strings.overallObjectiveInterventionHeading}
+                    headingLevel={3}
+                >
+                    <DescriptionText>
+                        {overall_objective_intervention}
+                    </DescriptionText>
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.potentialGeographicalHighRiskAreasHeading}
+                    headingLevel={3}
+                >
+                    <DescriptionText>
+                        {potential_geographical_high_risk_areas}
+                    </DescriptionText>
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.assistedThroughOperationHeading}
+                    headingLevel={3}
+                >
+                    <DescriptionText>
+                        {assisted_through_operation}
+                    </DescriptionText>
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.triggerStatementHeading}
+                    headingLevel={3}
+                >
+                    <DescriptionText>
+                        {trigger_statement}
+                    </DescriptionText>
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.triggerThresholdJustificationHeading}
+                    headingLevel={3}
+                >
+                    <DescriptionText>
+                        {trigger_threshold_justification}
+                    </DescriptionText>
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.nextStepsTowardsFullEapHeading}
+                    headingLevel={3}
+                >
+                    <DescriptionText>
+                        {next_step_towards_full_eap}
+                    </DescriptionText>
+                </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>
+                                {sampleIndicators.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
+                            />
+                            <PrintableDataDisplay
+                                label={strings.operationPeopleTargetedLabel}
+                                value={approach.indicator_target}
+                                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>
+                                {sampleIndicators.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}
+                >
+                    <DescriptionText>
+                        {early_action_capability}
+                    </DescriptionText>
+                </PrintableContainer>
+                <PrintableContainer
+                    heading={strings.rcrcMovementInvolvementHeading}
+                    headingLevel={3}
+                >
+                    <DescriptionText>
+                        {rcrc_movement_involvement}
+                    </DescriptionText>
+                </PrintableContainer>
+            </PrintableContainer>
+            <PrintableContainer
+                heading={strings.budgetHeading}
+                headingLevel={2}
+            >
+                Budget details
+            </PrintableContainer>
+            <PrintableContainer
+                heading={strings.contactInformationHeading}
+                headingLevel={2}
+            >
+                <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,
+                        ].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 000000000..c9628d685
--- /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/go-api b/go-api
index ca55a2fee..0a62d2fc7 160000
--- a/go-api
+++ b/go-api
@@ -1 +1 @@
-Subproject commit ca55a2fee02fd7271bf9a320f6209ec465618bf9
+Subproject commit 0a62d2fc7cc8481f06e93137ae5d096e49244867
diff --git a/packages/ui/src/components/printable/Heading/index.tsx b/packages/ui/src/components/printable/Heading/index.tsx
index b6aadf09a..f07352e36 100644
--- a/packages/ui/src/components/printable/Heading/index.tsx
+++ b/packages/ui/src/components/printable/Heading/index.tsx
@@ -1,6 +1,7 @@
 import { _cs } from '@togglecorp/fujs';
 
 import styles from './styles.module.css';
+import { getSpacingValue } from '#utils/style';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -27,9 +28,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 3d7a84138..da9c15781 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 a25e0eb27..1f4cc0acf 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 aa09f2863..0367a14b4 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 835ae02cb..72f5842c9 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 b9d84688a..b74d2df53 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;
 }

From 7e2c5d47268ed627c192af047e8fdeeb52c48495 Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Mon, 8 Dec 2025 13:29:58 +0545
Subject: [PATCH 11/19] feat(eap): update simplified eap form schema

---
 app/src/App/routes/index.tsx                  |   1 -
 .../TimeSpanCheck/index.tsx                   |  90 +++
 .../TimeSpanCheck/styles.module.css           |  29 +
 .../domain/OperationActivityInput/i18n.json   |   8 +
 .../domain/OperationActivityInput}/index.tsx  |  63 ++-
 .../domain/OperationActivityInput/schema.ts   |  27 +
 .../printable/PrintableDescription/index.tsx  |   0
 .../PrintableDescription/styles.module.css    |   0
 .../printable/PrintableLabel/index.tsx        |   0
 .../PrintableLabel/styles.module.css          |   0
 .../EapTableActions/index.tsx                 |   7 +-
 app/src/views/SimplifiedEapExport/i18n.json   |   2 +-
 .../ContactInputsSection/index.tsx            |  86 +++
 .../DeliveryAndBudget/i18n.json               |  32 +-
 .../DeliveryAndBudget/index.tsx               | 164 +++---
 .../DistrictMapModal/DistrictItem/i18n.json   |   2 +-
 .../DistrictMap/DistrictMapModal/i18n.json    |   2 +-
 .../SimplifiedEapForm/EarlyAction/i18n.json   |  46 +-
 .../SimplifiedEapForm/EarlyAction/index.tsx   |  62 +--
 .../ApproachesInput/ActivityInput/i18n.json   |   8 -
 .../ApproachesInput/i18n.json                 |   2 +-
 .../ApproachesInput/index.tsx                 | 107 ++--
 .../EnablingApproaches/index.tsx              |   5 +-
 .../SimplifiedEapForm/Overview/i18n.json      |  92 +--
 .../SimplifiedEapForm/Overview/index.tsx      | 525 +++++-------------
 .../OperationsInput/ActivityInput/i18n.json   |   8 -
 .../OperationsInput/ActivityInput/index.tsx   | 165 ------
 .../OperationsInput/i18n.json                 |   6 +-
 .../OperationsInput/index.tsx                 |  71 ++-
 .../PlannedOperations/index.tsx               |   2 +-
 .../SimplifiedEapForm/RiskAnalysis/i18n.json  |   2 +-
 .../SimplifiedEapForm/RiskAnalysis/index.tsx  |   8 +-
 app/src/views/SimplifiedEapForm/i18n.json     |   8 +-
 app/src/views/SimplifiedEapForm/index.tsx     | 312 +++++++++--
 app/src/views/SimplifiedEapForm/schema.ts     | 223 ++++----
 go-api                                        |   2 +-
 .../ui/src/components/Checklist/index.tsx     |  27 +-
 .../components/printable/Heading/index.tsx    |   3 +-
 38 files changed, 1087 insertions(+), 1110 deletions(-)
 create mode 100644 app/src/components/domain/OperationActivityInput/TimeSpanCheck/index.tsx
 create mode 100644 app/src/components/domain/OperationActivityInput/TimeSpanCheck/styles.module.css
 create mode 100644 app/src/components/domain/OperationActivityInput/i18n.json
 rename app/src/{views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput => components/domain/OperationActivityInput}/index.tsx (72%)
 create mode 100644 app/src/components/domain/OperationActivityInput/schema.ts
 delete mode 100644 app/src/components/printable/PrintableDescription/index.tsx
 delete mode 100644 app/src/components/printable/PrintableDescription/styles.module.css
 delete mode 100644 app/src/components/printable/PrintableLabel/index.tsx
 delete mode 100644 app/src/components/printable/PrintableLabel/styles.module.css
 create mode 100644 app/src/views/SimplifiedEapForm/ContactInputsSection/index.tsx
 delete mode 100644 app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/i18n.json
 delete mode 100644 app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/i18n.json
 delete mode 100644 app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/index.tsx

diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
index d96364750..ec94e3d3b 100644
--- a/app/src/App/routes/index.tsx
+++ b/app/src/App/routes/index.tsx
@@ -1240,7 +1240,6 @@ const simplifiedEapExport = customWrapRoute({
     },
 });
 
-
 type DefaultPerProcessChild = 'new';
 const perProcessLayout = customWrapRoute({
     parent: rootLayout,
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 000000000..d94c47b04
--- /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 000000000..00ca96a56
--- /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 000000000..56bb30214
--- /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/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/index.tsx b/app/src/components/domain/OperationActivityInput/index.tsx
similarity index 72%
rename from app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/index.tsx
rename to app/src/components/domain/OperationActivityInput/index.tsx
index 60af84242..c66ec8fc6 100644
--- a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/index.tsx
+++ b/app/src/components/domain/OperationActivityInput/index.tsx
@@ -3,7 +3,7 @@ import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Checklist,
-    Container,
+    InlineLayout,
     ListView,
     SelectInput,
     TextInput,
@@ -17,23 +17,20 @@ import {
     useFormObject,
 } from '@togglecorp/toggle-form';
 
+import { type components } from '#generated/types';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
-import { type GoApiResponse } from '#utils/restRequest';
 
-import { type PartialSimplifiedEapType } from '../../../schema';
+import { type OperationActivityFormFields } from './schema';
+import TimeSpanCheck from './TimeSpanCheck';
 
 import i18n from './i18n.json';
 
-type ApproachesFormFields = NonNullable<PartialSimplifiedEapType['enable_approaches']>[number];
-type ActivityFormField = NonNullable<ApproachesFormFields['early_action_activities']>[number];
-
-type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
-type TimeframeOption = NonNullable<GlobalEnumsResponse['eap_timeframe']>[number];
-
-const defaultActivityValue: ActivityFormField = {
+const defaultActivityValue: OperationActivityFormFields = {
     client_id: '-1',
 };
 
+type TimeframeOption = components['schemas']['EapTimeframeEnum'];
+
 function timeframeKeySelector(option: TimeframeOption) {
     return option.key;
 }
@@ -43,15 +40,15 @@ const timeValueKeySelector = (
 ) => option.key;
 
 interface Props {
-    value: ActivityFormField;
-    error: ArrayError<ActivityFormField> | undefined;
-    onChange: (value: SetValueArg<ActivityFormField>, index: number) => void;
+    value: OperationActivityFormFields;
+    error: ArrayError<OperationActivityFormFields> | undefined;
+    onChange: (value: SetValueArg<OperationActivityFormFields>, index: number) => void;
     onRemove: (index: number) => void;
     index: number;
     disabled?: boolean;
 }
 
-function ActivityInput(props: Props) {
+function OperationActivityInput(props: Props) {
     const {
         error: errorFromProps,
         onChange,
@@ -110,12 +107,12 @@ function ActivityInput(props: Props) {
     );
 
     return (
-        <Container
-            headerActions={(
+        <InlineLayout
+            after={(
                 <Button
                     name={index}
                     onClick={onRemove}
-                    styleVariant="outline"
+                    styleVariant="action"
                     title="Remove"
                     disabled={disabled}
                 >
@@ -123,18 +120,18 @@ function ActivityInput(props: Props) {
                 </Button>
             )}
         >
-            <ListView layout="block">
-                <ListView layout="grid" numPreferredGridColumns={3}>
-                    <TextInput
-                        label={strings.approachReadiness}
-                        name="activity"
-                        value={value.activity}
-                        onChange={onFieldChange}
-                        disabled={disabled}
-                        withAsterisk
-                    />
+            <ListView layout="grid">
+                <TextInput
+                    label={strings.operationPriorityActionLabel}
+                    name="activity"
+                    value={value.activity}
+                    onChange={onFieldChange}
+                    disabled={disabled}
+                    withAsterisk
+                />
+                <ListView layout="grid">
                     <SelectInput
-                        label={strings.approachTimeFrame}
+                        label={strings.operationTimeFrameLabel}
                         name="timeframe"
                         value={value.timeframe}
                         onChange={handleTimeframeChange}
@@ -144,23 +141,25 @@ function ActivityInput(props: Props) {
                         disabled={disabled}
                         error={error?.timeframe}
                     />
-
                     {value?.timeframe && (
                         <Checklist
-                            label={strings.approachTimeValue}
+                            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
                         />
                     )}
                 </ListView>
             </ListView>
-        </Container>
+        </InlineLayout>
     );
 }
 
-export default ActivityInput;
+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 000000000..c6042a3e3
--- /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/PrintableDescription/index.tsx b/app/src/components/printable/PrintableDescription/index.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/src/components/printable/PrintableDescription/styles.module.css b/app/src/components/printable/PrintableDescription/styles.module.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/src/components/printable/PrintableLabel/index.tsx b/app/src/components/printable/PrintableLabel/index.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/src/components/printable/PrintableLabel/styles.module.css b/app/src/components/printable/PrintableLabel/styles.module.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
index b355a6fda..acecbac94 100644
--- a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
@@ -1,13 +1,16 @@
 import { TableActions } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import { isNotDefined } from '@togglecorp/fujs';
 
 import DropdownMenuItem from '#components/DropdownMenuItem';
 import Link from '#components/Link';
+import {
+    EAP_TYPE_FULL,
+    EAP_TYPE_SIMPLIFIED,
+} from '#utils/constants';
 import { type GoApiResponse } from '#utils/restRequest';
 
 import i18n from './i18n.json';
-import { isNotDefined } from '@togglecorp/fujs';
-import { EAP_TYPE_FULL, EAP_TYPE_SIMPLIFIED } from '#utils/constants';
 
 type EapResponse = GoApiResponse<'/api/v2/eap-registration/{id}/'>;
 
diff --git a/app/src/views/SimplifiedEapExport/i18n.json b/app/src/views/SimplifiedEapExport/i18n.json
index 6b916736b..92ce6b17f 100644
--- a/app/src/views/SimplifiedEapExport/i18n.json
+++ b/app/src/views/SimplifiedEapExport/i18n.json
@@ -14,7 +14,7 @@
         "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 invervention",
+        "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",
diff --git a/app/src/views/SimplifiedEapForm/ContactInputsSection/index.tsx b/app/src/views/SimplifiedEapForm/ContactInputsSection/index.tsx
new file mode 100644
index 000000000..4f49a0233
--- /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
index 1ff62873e..7117ff40f 100644
--- a/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json
+++ b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/i18n.json
@@ -1,21 +1,21 @@
 {
     "namespace": "simplifiedEapForm",
     "strings": {
-        "simplifiedEapDeliverHeading": "Risk Analysis",
-        "simplifiedEapDeliverEarlyActions": "Experience and/or capacity to implement the early actions",
-        "simplifiedEapDeliverEarlyActionsDescription": "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?",
-        "simplifiedEapDeliverDescription": "Description",
-        "simplifiedEapDeliverInvolved": "RCRC Movement partners, Governmental/other agencies consulted/involved",
-        "simplifiedEapDeliverInvolvedDescription": "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.",
-        "simplifiedEapDeliverBudget": "Budget",
-        "simplifiedEapDeliverTotalBudget": "Total budget",
-        "simplifiedEapDeliverTotalBudgetDescription": "Add the expected budget amount",
-        "simplifiedEapDeliverBudgetLabel": "Budget",
-        "simplifiedEapDeliverReadinessLabel": "Readiness",
-        "simplifiedEapDeliverPrepositioning": "Prepositioning",
-        "simplifiedEapDeliverBudgetDetails": "Budget details",
-        "simplifiedEapDeliverBudgetDetailsDescription": "Add here the page from the budget template called EAP for publication.",
-        "simplifiedEapEarlyAction": "Early Action",
-        "simplifiedEapUpload": "Upload"
+        "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
index 0fe763569..1613d5274 100644
--- a/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx
+++ b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx
@@ -1,6 +1,5 @@
 import {
     Container,
-    Heading,
     InputSection,
     ListView,
     NumberInput,
@@ -15,6 +14,7 @@ import {
 } from '@togglecorp/toggle-form';
 
 import GoSingleFileInput from '#components/domain/GoSingleFileInput';
+import TabPage from '#components/TabPage';
 
 import { type PartialSimplifiedEapType } from '../schema';
 
@@ -43,92 +43,90 @@ function DeliveryAndBudget(props: Props) {
     const error = getErrorObject(formError);
 
     return (
-        <Container
-            heading={strings.simplifiedEapDeliverHeading}
-        >
-            <ListView
-                layout="block"
-                spacing="sm"
-            >
-                <InputSection
-                    title={strings.simplifiedEapDeliverEarlyActions}
-                    description={strings.simplifiedEapDeliverEarlyActionsDescription}
-                    withAsteriskOnTitle
-                >
-                    <TextArea
-                        label={strings.simplifiedEapDeliverDescription}
-                        name="early_action_capability"
-                        value={value?.early_action_capability}
-                        onChange={setFieldValue}
-                        error={error?.early_action_capability}
-                        disabled={disabled}
-                    />
-                </InputSection>
-                <InputSection
-                    title={strings.simplifiedEapDeliverInvolved}
-                    description={strings.simplifiedEapDeliverInvolvedDescription}
-                    withAsteriskOnTitle
+        <TabPage>
+            <Container heading={strings.deliverHeading}>
+                <ListView
+                    layout="block"
+                    spacing="sm"
                 >
-                    <TextArea
-                        label={strings.simplifiedEapDeliverDescription}
-                        name="rcrc_movement_involvement"
-                        value={value?.rcrc_movement_involvement}
-                        onChange={setFieldValue}
-                        error={error?.rcrc_movement_involvement}
-                        disabled={disabled}
-                    />
-                </InputSection>
-                <Heading level={4}>
-                    {strings.simplifiedEapDeliverBudget}
-                </Heading>
+                    <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}>
                 <InputSection
-                    title={strings.simplifiedEapDeliverTotalBudget}
-                    description={strings.simplifiedEapDeliverTotalBudgetDescription}
+                    title={strings.deliverTotalBudget}
+                    description={strings.deliverTotalBudgetDescription}
                     withAsteriskOnTitle
                 >
-                    <ListView layout="block">
-                        <ListView
-                            layout="grid"
-                            numPreferredGridColumns={2}
-                        >
-                            <NumberInput
-                                name="total_budget"
-                                value={value?.total_budget}
-                                onChange={setFieldValue}
-                                error={error?.total_budget}
-                                disabled={disabled}
-                                label={strings.simplifiedEapDeliverBudgetLabel}
-                            />
-                            <NumberInput
-                                label={strings.simplifiedEapDeliverReadinessLabel}
-                                name="readiness_budget"
-                                value={value?.readiness_budget}
-                                onChange={setFieldValue}
-                                error={error?.readiness_budget}
-                                disabled={disabled}
-                            />
-                            <NumberInput
-                                label={strings.simplifiedEapDeliverPrepositioning}
-                                name="pre_positioning_budget"
-                                value={value?.pre_positioning_budget}
-                                onChange={setFieldValue}
-                                error={error?.pre_positioning_budget}
-                                disabled={disabled}
-                            />
-                            <NumberInput
-                                label={strings.simplifiedEapEarlyAction}
-                                name="early_action_budget"
-                                value={value?.early_action_budget}
-                                onChange={setFieldValue}
-                                error={error?.early_action_budget}
-                                disabled={disabled}
-                            />
-                        </ListView>
+                    <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.simplifiedEapDeliverBudgetDetails}
-                    description={strings.simplifiedEapDeliverBudgetDetailsDescription}
+                    title={strings.deliverBudgetDetails}
+                    description={strings.deliverBudgetDetailsDescription}
                     withAsteriskOnTitle
                 >
                     <GoSingleFileInput
@@ -141,11 +139,11 @@ function DeliveryAndBudget(props: Props) {
                         setFileIdToUrlMap={setFileIdToUrlMap}
                         disabled={disabled}
                     >
-                        {strings.simplifiedEapUpload}
+                        {strings.upload}
                     </GoSingleFileInput>
                 </InputSection>
-            </ListView>
-        </Container>
+            </Container>
+        </TabPage>
     );
 }
 
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json
index c44984e19..f80bd450b 100644
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json
@@ -1,5 +1,5 @@
 {
-    "namespace": "threeWProjectForm",
+    "namespace": "simplifiedEapForm",
     "strings": {
         "removeDistrict": "Remove Districts",
         "removeAdmin2":"Remove Admin2"
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json
index ec9db2109..2ee140a58 100644
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json
@@ -1,5 +1,5 @@
 {
-    "namespace": "threeWProjectForm",
+    "namespace": "simplifiedEapForm",
     "strings": {
         "districtButtonSelectProvince": "Select Province / Region",
         "save": "Save",
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/i18n.json
index ce291ad0f..f2bd8dbe5 100644
--- a/app/src/views/SimplifiedEapForm/EarlyAction/i18n.json
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/i18n.json
@@ -1,28 +1,28 @@
 {
-    "namespace": "simplifiedEapForm",
+    "namespace": "form",
     "strings": {
-        "simplifiedEapActionHeading": "Early Action Intervention",
-        "simplifiedEapIntervention": "Overall objective of the intervention",
-        "simplifiedEapInterventionDescription": "Provide an objective statement that describes the main goal of the intervention.",
-        "simplifiedGeographicalRiskArea": "Potential geographical high-risk areas that the simplified EAP would target",
-        "simplifiedGeographicalRiskAreaDescription": "Which high risk regions have been selected for this intervention and why?",
-        "simplifiedEapActionDescription": "Description",
-        "simplifiedEapActionValue": "Value",
-        "simplifiedEapActionPeopleTargeted": "People targeted",
-        "simplifiedEapActionPeopleTargetedDescription": "Add the number of people targeted for the event.",
-        "simplifiedEapActionOperation": "Assisted through the operation",
-        "simplifiedEapActionOperationDescription": "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)",
-        "simplifiedEapActionCriteria": "Explain your selection criteria for who will be targeted.",
-        "simplifiedEapActionsStatement": "Trigger(s) statement",
-        "simplifiedEapActionsStatementDescription": "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.",
-        "simplifiedEapActionsLeadTime": "sEAP Lead Time",
-        "simplifiedEapActionsLeadTimeDescription": "This is the time between the trigger being met and the impact of the hazard, when the early actions are undertaken.",
-        "simplifiedEapActionsOperational": "Operational Timeframe",
-        "simplifiedEapActionsOperationalDescription": "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.",
-        "simplifiedEapJustification": "Trigger threshold justification",
-        "simplifiedEapJustificationDescription": "Explain how the triggers(s) were set and provide information showing that the level chosen has caused humanitarian impact in the past.",
-        "simplifiedEapFullEap": "Next step towards full EAP",
-        "simplifiedEapFullEapDescription": "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.",
+        "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
index a71a19d3e..75af247a0 100644
--- a/app/src/views/SimplifiedEapForm/EarlyAction/index.tsx
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/index.tsx
@@ -82,20 +82,18 @@ function EarlyAction(props: Props) {
     );
 
     return (
-        <Container
-            heading={strings.simplifiedEapActionHeading}
-        >
+        <Container heading={strings.actionHeading}>
             <ListView
                 layout="block"
                 spacing="sm"
             >
                 <InputSection
-                    title={strings.simplifiedEapIntervention}
-                    description={strings.simplifiedEapInterventionDescription}
+                    title={strings.intervention}
+                    description={strings.interventionDescription}
                     withAsteriskOnTitle
                 >
                     <TextArea
-                        label={strings.simplifiedEapActionDescription}
+                        label={strings.actionDescription}
                         name="overall_objective_intervention"
                         value={value?.overall_objective_intervention}
                         onChange={setFieldValue}
@@ -104,12 +102,12 @@ function EarlyAction(props: Props) {
                     />
                 </InputSection>
                 <InputSection
-                    title={strings.simplifiedGeographicalRiskArea}
-                    description={strings.simplifiedGeographicalRiskAreaDescription}
+                    title={strings.geographicalRiskArea}
+                    description={strings.geographicalRiskAreaDescription}
                     withAsteriskOnTitle
                 >
                     <TextArea
-                        label={strings.simplifiedEapActionDescription}
+                        label={strings.actionDescription}
                         name="potential_geographical_high_risk_areas"
                         value={value?.potential_geographical_high_risk_areas}
                         onChange={setFieldValue}
@@ -134,13 +132,13 @@ function EarlyAction(props: Props) {
                     />
                 </InputSection>
                 <InputSection
-                    title={strings.simplifiedEapActionPeopleTargeted}
-                    description={strings.simplifiedEapActionPeopleTargetedDescription}
+                    title={strings.actionPeopleTargeted}
+                    description={strings.actionPeopleTargetedDescription}
                     withAsteriskOnTitle
                     numPreferredColumns={2}
                 >
                     <NumberInput
-                        label={strings.simplifiedEapActionDescription}
+                        label={strings.actionDescription}
                         name="people_targeted"
                         value={value?.people_targeted}
                         onChange={setFieldValue}
@@ -149,12 +147,12 @@ function EarlyAction(props: Props) {
                     />
                 </InputSection>
                 <InputSection
-                    title={strings.simplifiedEapActionOperation}
-                    description={strings.simplifiedEapActionOperationDescription}
+                    title={strings.actionOperation}
+                    description={strings.actionOperationDescription}
                     withAsteriskOnTitle
                 >
                     <TextArea
-                        label={strings.simplifiedEapActionDescription}
+                        label={strings.actionDescription}
                         name="assisted_through_operation"
                         value={value?.assisted_through_operation}
                         onChange={setFieldValue}
@@ -163,11 +161,11 @@ function EarlyAction(props: Props) {
                     />
                 </InputSection>
                 <InputSection
-                    description={strings.simplifiedEapActionCriteria}
+                    description={strings.actionCriteria}
                     withAsteriskOnTitle
                 >
                     <TextArea
-                        label={strings.simplifiedEapActionDescription}
+                        label={strings.actionDescription}
                         name="selection_criteria"
                         value={value?.selection_criteria}
                         onChange={setFieldValue}
@@ -176,12 +174,12 @@ function EarlyAction(props: Props) {
                     />
                 </InputSection>
                 <InputSection
-                    title={strings.simplifiedEapActionsStatement}
-                    description={strings.simplifiedEapActionsStatementDescription}
+                    title={strings.actionsStatement}
+                    description={strings.actionsStatementDescription}
                     withAsteriskOnTitle
                 >
                     <TextArea
-                        label={strings.simplifiedEapActionDescription}
+                        label={strings.actionDescription}
                         name="trigger_statement"
                         value={value?.trigger_statement}
                         onChange={setFieldValue}
@@ -190,13 +188,13 @@ function EarlyAction(props: Props) {
                     />
                 </InputSection>
                 <InputSection
-                    title={strings.simplifiedEapActionsLeadTime}
-                    description={strings.simplifiedEapActionsLeadTimeDescription}
+                    title={strings.actionsLeadTime}
+                    description={strings.actionsLeadTimeDescription}
                     withAsteriskOnTitle
                     numPreferredColumns={2}
                 >
                     <NumberInput
-                        label={strings.simplifiedEapActionValue}
+                        label={strings.actionValue}
                         name="seap_lead_time"
                         value={value?.seap_lead_time}
                         onChange={setFieldValue}
@@ -216,13 +214,13 @@ function EarlyAction(props: Props) {
                     />
                 </InputSection>
                 <InputSection
-                    title={strings.simplifiedEapActionsOperational}
-                    description={strings.simplifiedEapActionsOperationalDescription}
+                    title={strings.actionsOperational}
+                    description={strings.actionsOperationalDescription}
                     withAsteriskOnTitle
                     numPreferredColumns={2}
                 >
                     <NumberInput
-                        label={strings.simplifiedEapActionValue}
+                        label={strings.actionValue}
                         name="operational_timeframe"
                         value={value?.operational_timeframe}
                         onChange={setFieldValue}
@@ -242,12 +240,12 @@ function EarlyAction(props: Props) {
                     />
                 </InputSection>
                 <InputSection
-                    title={strings.simplifiedEapJustification}
-                    description={strings.simplifiedEapJustificationDescription}
+                    title={strings.justification}
+                    description={strings.justificationDescription}
                     withAsteriskOnTitle
                 >
                     <TextArea
-                        label={strings.simplifiedEapActionDescription}
+                        label={strings.actionDescription}
                         name="trigger_threshold_justification"
                         value={value?.trigger_threshold_justification}
                         onChange={setFieldValue}
@@ -256,12 +254,12 @@ function EarlyAction(props: Props) {
                     />
                 </InputSection>
                 <InputSection
-                    title={strings.simplifiedEapFullEap}
-                    description={strings.simplifiedEapFullEapDescription}
+                    title={strings.fullEap}
+                    description={strings.fullEapDescription}
                     withAsteriskOnTitle
                 >
                     <TextArea
-                        label={strings.simplifiedEapActionDescription}
+                        label={strings.actionDescription}
                         name="next_step_towards_full_eap"
                         value={value?.next_step_towards_full_eap}
                         onChange={setFieldValue}
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/i18n.json b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/i18n.json
deleted file mode 100644
index 18f7d4f98..000000000
--- a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/ActivityInput/i18n.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-    "namespace": "simplifiedEapForm",
-    "strings": {
-        "approachReadiness": "Readiness",
-        "approachTimeFrame": "Time Frame",
-        "approachTimeValue": "Time Value"
-    }
-}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
index 08d42d3a7..0726d9a19 100644
--- a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
@@ -9,6 +9,6 @@
         "approachReadinessActivities": "Readiness Activities",
         "approachPrepositioningActivities": "Pre-positioning Activities",
         "approachEarlyActionActivities": "Early Action Activities",
-        "approachNoActivitesMessage": "No activities added yet"
+        "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
index 18207ca8c..d53921a60 100644
--- a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
@@ -1,5 +1,8 @@
 import { useCallback } from 'react';
-import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    AddLineIcon,
+    DeleteBinTwoLineIcon,
+} from '@ifrc-go/icons';
 import {
     Button,
     Container,
@@ -21,10 +24,10 @@ import {
     useFormObject,
 } from '@togglecorp/toggle-form';
 
+import OperationActivityInput from '#components/domain/OperationActivityInput';
 import NonFieldError from '#components/NonFieldError';
 
 import { type PartialSimplifiedEapType } from '../../schema';
-import ActivityInput from './ActivityInput';
 
 import i18n from './i18n.json';
 
@@ -146,12 +149,11 @@ function OperationsBySectorInput(props: Props) {
                 <Button
                     name={index}
                     onClick={onRemove}
-                    styleVariant="outline"
-                    title="Button"
+                    styleVariant="action"
+                    title={strings.approachRemoveButton}
                     disabled={disabled}
-                    before={<DeleteBinTwoLineIcon />}
                 >
-                    {strings.approachRemoveButton}
+                    <DeleteBinTwoLineIcon />
                 </Button>
             )}
             withPadding
@@ -190,17 +192,20 @@ function OperationsBySectorInput(props: Props) {
                 </ListView>
                 <ListView layout="block">
                     <Container
+                        spacing="sm"
                         withDarkBackground
                         withHeaderBorder
                         withPadding
                         heading={strings.approachReadinessActivities}
                         headingLevel={5}
-                        headerActions={(
+                        footerActions={(
                             <Button
                                 styleVariant="outline"
                                 name={undefined}
                                 onClick={handleReadinessAddButtonClick}
                                 disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
                             >
                                 {strings.approachAddActivityButton}
                             </Button>
@@ -208,7 +213,7 @@ function OperationsBySectorInput(props: Props) {
                         withCompactMessage
                         empty={isNotDefined(value.readiness_activities)
                             || value.readiness_activities.length === 0}
-                        emptyMessage={strings.approachNoActivitesMessage}
+                        emptyMessage={strings.approachNoActivitiesMessage}
                         headerDescription={(
                             <NonFieldError error={
                                 getErrorObject(error?.readiness_activities)
@@ -216,30 +221,35 @@ function OperationsBySectorInput(props: Props) {
                             />
                         )}
                     >
-                        {value?.readiness_activities?.map((activity, i) => (
-                            <ActivityInput
-                                key={activity.client_id}
-                                index={i}
-                                value={activity}
-                                onChange={onReadinessChange}
-                                onRemove={onReadinessRemove}
-                                error={getErrorObject(error?.readiness_activities)}
-                                disabled={disabled}
-                            />
-                        ))}
+                        <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}
-                        headerActions={(
+                        footerActions={(
                             <Button
                                 styleVariant="outline"
                                 name={undefined}
                                 onClick={handlePrepositioningAddButtonClick}
                                 disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
                             >
                                 {strings.approachAddActivityButton}
                             </Button>
@@ -247,7 +257,7 @@ function OperationsBySectorInput(props: Props) {
                         withCompactMessage
                         empty={isNotDefined(value.prepositioning_activities)
                             || value.prepositioning_activities.length === 0}
-                        emptyMessage={strings.approachNoActivitesMessage}
+                        emptyMessage={strings.approachNoActivitiesMessage}
                         headerDescription={(
                             <NonFieldError error={
                                 getErrorObject(error?.prepositioning_activities)
@@ -255,30 +265,35 @@ function OperationsBySectorInput(props: Props) {
                             />
                         )}
                     >
-                        {value?.prepositioning_activities?.map((activity, i) => (
-                            <ActivityInput
-                                key={activity.client_id}
-                                index={i}
-                                value={activity}
-                                onChange={onPrepositioningChange}
-                                onRemove={onPrepositioningRemove}
-                                error={getErrorObject(error?.prepositioning_activities)}
-                                disabled={disabled}
-                            />
-                        ))}
+                        <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}
-                        headerActions={(
+                        footerActions={(
                             <Button
                                 styleVariant="outline"
                                 name={undefined}
                                 onClick={handleEarlyActionAddButtonClick}
                                 disabled={disabled}
+                                spacing="sm"
+                                before={<AddLineIcon />}
                             >
                                 {strings.approachAddActivityButton}
                             </Button>
@@ -286,7 +301,7 @@ function OperationsBySectorInput(props: Props) {
                         withCompactMessage
                         empty={isNotDefined(value.early_action_activities)
                             || value.early_action_activities.length === 0}
-                        emptyMessage={strings.approachNoActivitesMessage}
+                        emptyMessage={strings.approachNoActivitiesMessage}
                         headerDescription={(
                             <NonFieldError error={
                                 getErrorObject(error?.early_action_activities)
@@ -294,17 +309,19 @@ function OperationsBySectorInput(props: Props) {
                             />
                         )}
                     >
-                        {value?.early_action_activities?.map((activity, i) => (
-                            <ActivityInput
-                                key={activity.client_id}
-                                index={i}
-                                value={activity}
-                                onChange={onEarlyActionChange}
-                                onRemove={onEarlyActionRemove}
-                                error={getErrorObject(error?.early_action_activities)}
-                                disabled={disabled}
-                            />
-                        ))}
+                        <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>
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx b/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx
index 87f7c3df9..941c684cc 100644
--- a/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx
@@ -18,7 +18,6 @@ import {
     type EntriesAsList,
     type Error,
     getErrorObject,
-    getErrorString,
     useFormArray,
 } from '@togglecorp/toggle-form';
 
@@ -46,7 +45,7 @@ interface Props {
 function approachesKeySelector(option: EnablingApproachesOption) {
     return option.key;
 }
-function EnablingApproches(props: Props) {
+function EnablingApproaches(props: Props) {
     const {
         value,
         error: formError,
@@ -166,4 +165,4 @@ function EnablingApproches(props: Props) {
     );
 }
 
-export default EnablingApproches;
+export default EnablingApproaches;
diff --git a/app/src/views/SimplifiedEapForm/Overview/i18n.json b/app/src/views/SimplifiedEapForm/Overview/i18n.json
index 024eeb008..9de5ed5a2 100644
--- a/app/src/views/SimplifiedEapForm/Overview/i18n.json
+++ b/app/src/views/SimplifiedEapForm/Overview/i18n.json
@@ -1,69 +1,33 @@
 {
     "namespace": "simplifiedEapForm",
     "strings": {
-        "simplifiedFormHeading": "Details",
-        "simplifiedFormNationalSociety": "National Society (NS)",
-        "simplifiedFormNationalSocietyDescription": "Select National Society that is planning to apply for the EAP",
-        "simplifiedFormCountry": "Country",
-        "simplifiedFormCountryDescription": "The country will be pre-populated based on the NS selection, but can be adapted as needed.",
-        "simplifiedFormDisasterType": "Disaster Type",
-        "simplifiedFormDisasterTypeDescription": "Select the disaster type for which the EAP is needed.",
-        "simplifiedFormUploadCoverImage": "Cover Photo",
-        "simplifiedFormUploadCoverImageDescription": "Upload a image for the cover page of the publicly published DREF application.",
-        "simplifiedFormUploadAnImageLabel": "Select an Image",
-        "simplifiedFormTimeframe": "sEAP Timeframe",
-        "simplifiedFormTimeframeDescription": "A simplified EAP has a timeframe of two years (unless the early actions are activiated)",
-        "simplifiedFormContacts": "Contacts",
-        "simplifiedFormNationalHeader": "National",
-        "simplifiedFormDelegationHeader": "Delegation",
-        "simplifiedRegionalHeader": "Regional and global",
-        "simplifiedFormNSContact": "National Society Contact",
-        "simplifiedFormNSContactDescription": "National Society contact responsible for the EAP process",
-        "simplifiedFormNSName": "Name",
-        "simplifiedFormNSTitle": "Title",
-        "simplifiedFormNSEmail": "Email",
-        "simplifiedFormNSPhoneNumber": "Phone Number",
-        "simplifiedFormPartnerNS": "Partner NS",
-        "simplifiedFormPartnerNSDescription": "Partner National Society contact",
-        "simplifiedFormPartnerNSName": "Name",
-        "simplifiedFormPartnerNSTitle": "Title",
-        "simplifiedFormPartnerNSEmail": "Email",
-        "simplifiedFormPartnerNSPhoneNumber": "Phone Number",
-        "simplifiedFormFocalPoint": "IFRC Delegation AA Focal Point",
-        "simplifiedFormFocalPointName": "Name",
-        "simplifiedFormFocalPointTitle": "Title",
-        "simplifiedFormFocalPointEmail": "Email",
-        "simplifiedFormFocalPointPhoneNumber": "Phone Number",
-        "simplifiedFormDelegation": "IFRC Head of Delegation",
-        "simplifiedFormDelegationName": "Name",
-        "simplifiedFormDelegationTitle": "Title",
-        "simplifiedFormDelegationEmail": "Email",
-        "simplifiedFormDelegationPhoneNumber": "Phone Number",
-        "simplifiedFormDrefFocalPoint": "DREF Focal Point",
-        "simplifiedFormDrefFocalPointDescription": "The DREF contact person fro IFRC",
-        "simplifiedFormDrefFocalPointName": "Name",
-        "simplifiedFormDrefFocalPointTitle": "Title",
-        "simplifiedFormDrefFocalPointEmail": "Email",
-        "simplifiedFormDrefFocalPointPhoneNumber": "Phone Number",
-        "simplifiedFormRegionalFocalPoint": "IFRC Regional AA Focal Point",
-        "simplifiedFormRegionalFocalPointName": "Name",
-        "simplifiedFormRegionalFocalPointTitle": "Title",
-        "simplifiedFormRegionalFocalPointEmail": "Email",
-        "simplifiedFormRegionalFocalPointPhoneNumber": "Phone Number",
-        "simplifiedFormRegionalManager": "IFRC Regional Ops Manager",
-        "simplifiedFormRegionalManagerName": "Name",
-        "simplifiedFormRegionalManagerTitle": "Title",
-        "simplifiedFormRegionalManagerEmail": "Email",
-        "simplifiedFormRegionalManagerPhoneNumber": "Phone Number",
-        "simplifiedFormRegionalHead": "IFRC Regional Head of DCC",
-        "simplifiedFormRegionalHeadName": "Name",
-        "simplifiedFormRegionalHeadTitle": "Title",
-        "simplifiedFormRegionalHeadEmail": "Email",
-        "simplifiedFormRegionalHeadPhoneNumber": "Phone Number",
-        "simplifiedFormRegionalCoordinator": "IFRC Global Ops Coordinator",
-        "simplifiedFormRegionalCoordinatorName": "Name",
-        "simplifiedFormRegionalCoordinatorTitle": "Title",
-        "simplifiedFormRegionalCoordinatorEmail": "Email",
-        "simplifiedFormRegionalCoordinatorPhoneNumber": "Phone Number"
+        "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.",
+        "uploadAnImageLabel": "Select an Image",
+        "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
index dd7f8f139..023a7ab81 100644
--- a/app/src/views/SimplifiedEapForm/Overview/index.tsx
+++ b/app/src/views/SimplifiedEapForm/Overview/index.tsx
@@ -1,10 +1,8 @@
 import {
     Container,
-    Heading,
     InputSection,
     ListView,
     NumberInput,
-    TextInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -21,6 +19,7 @@ import NationalSocietySelectInput from '#components/domain/NationalSocietySelect
 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';
@@ -56,17 +55,16 @@ function Overview(props: Props) {
 
     return (
         <TabPage>
-            <Container
-                heading={strings.simplifiedFormHeading}
-            >
+            <Container heading={strings.detailsHeading}>
                 <ListView
                     layout="block"
                     spacing="sm"
                 >
                     <InputSection
-                        title={strings.simplifiedFormNationalSociety}
-                        description={strings.simplifiedFormNationalSocietyDescription}
+                        title={strings.nationalSociety}
+                        description={strings.nationalSocietyDescription}
                         withAsteriskOnTitle
+                        numPreferredColumns={2}
                     >
                         <NationalSocietySelectInput
                             name="national_society"
@@ -77,9 +75,10 @@ function Overview(props: Props) {
                         />
                     </InputSection>
                     <InputSection
-                        title={strings.simplifiedFormCountry}
-                        description={strings.simplifiedFormCountryDescription}
+                        title={strings.country}
+                        description={strings.countryDescription}
                         withAsteriskOnTitle
+                        numPreferredColumns={2}
                     >
                         <CountrySelectInput
                             name="country"
@@ -90,9 +89,10 @@ function Overview(props: Props) {
                         />
                     </InputSection>
                     <InputSection
-                        title={strings.simplifiedFormDisasterType}
-                        description={strings.simplifiedFormDisasterTypeDescription}
+                        title={strings.disasterType}
+                        description={strings.disasterTypeDescription}
                         withAsteriskOnTitle
+                        numPreferredColumns={2}
                     >
                         <DisasterTypeSelectInput
                             name="disaster_type"
@@ -103,8 +103,8 @@ function Overview(props: Props) {
                         />
                     </InputSection>
                     <InputSection
-                        title={strings.simplifiedFormUploadCoverImage}
-                        description={strings.simplifiedFormUploadCoverImageDescription}
+                        title={strings.uploadCoverImage}
+                        description={strings.uploadCoverImageDescription}
                         withAsteriskOnTitle
                     >
                         <ImageWithCaptionInput
@@ -115,14 +115,15 @@ function Overview(props: Props) {
                             error={getErrorObject(error?.cover_image_file)}
                             fileIdToUrlMap={fileIdToUrlMap}
                             setFileIdToUrlMap={setFileIdToUrlMap}
-                            label={strings.simplifiedFormUploadAnImageLabel}
+                            label={strings.uploadAnImageLabel}
                             disabled={disabled}
                         />
                     </InputSection>
                     <InputSection
-                        title={strings.simplifiedFormTimeframe}
-                        description={strings.simplifiedFormTimeframeDescription}
+                        title={strings.timeframe}
+                        description={strings.timeframeDescription}
                         withAsteriskOnTitle
+                        numPreferredColumns={2}
                     >
                         <NumberInput
                             name="seap_timeframe"
@@ -134,388 +135,116 @@ function Overview(props: Props) {
                     </InputSection>
                 </ListView>
             </Container>
-            <Container
-                heading={strings.simplifiedFormContacts}
-            >
-                <ListView layout="block">
-                    <Heading
-                        level={4}
-                    >
-                        {strings.simplifiedFormNationalHeader}
-                    </Heading>
-                    <InputSection
-                        title={strings.simplifiedFormNSContact}
-                        description={strings.simplifiedFormNSContactDescription}
-                        numPreferredColumns={2}
-                    >
-                        <TextInput
-                            label={strings.simplifiedFormNSName}
-                            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.simplifiedFormNSTitle}
-                            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.simplifiedFormNSEmail}
-                            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.simplifiedFormNSPhoneNumber}
-                            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.simplifiedFormPartnerNS}
-                        description={strings.simplifiedFormPartnerNSDescription}
-                        numPreferredColumns={2}
-                    >
-                        <TextInput
-                            label={strings.simplifiedFormPartnerNSName}
-                            name="partner_ns_name"
-                            value={value?.partner_ns_name}
-                            onChange={setFieldValue}
-                            error={error?.partner_ns_name}
-                            disabled={disabled}
-                        />
-                        <TextInput
-                            label={strings.simplifiedFormPartnerNSTitle}
-                            name="partner_ns_title"
-                            value={value?.partner_ns_title}
-                            onChange={setFieldValue}
-                            error={error?.partner_ns_title}
-                            disabled={disabled}
-                        />
-                        <TextInput
-                            label={strings.simplifiedFormPartnerNSEmail}
-                            name="partner_ns_email"
-                            value={value?.partner_ns_email}
-                            onChange={setFieldValue}
-                            error={error?.partner_ns_email}
-                            disabled={disabled}
-                        />
-                        <TextInput
-                            label={strings.simplifiedFormPartnerNSPhoneNumber}
-                            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.simplifiedFormDelegationHeader}
-                    </Heading>
-                    <InputSection
-                        title={strings.simplifiedFormFocalPoint}
-                        numPreferredColumns={2}
-                    >
-                        <TextInput
-                            label={strings.simplifiedFormFocalPointName}
-                            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.simplifiedFormFocalPointTitle}
-                            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.simplifiedFormFocalPointEmail}
-                            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.simplifiedFormFocalPointPhoneNumber}
-                            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.simplifiedFormDelegation}
-                        numPreferredColumns={2}
-                    >
-                        <TextInput
-                            label={strings.simplifiedFormDelegationName}
-                            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.simplifiedFormDelegationTitle}
-                            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.simplifiedFormDelegationEmail}
-                            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.simplifiedFormDelegationPhoneNumber}
-                            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.simplifiedRegionalHeader}
-                    </Heading>
-                    <InputSection
-                        title={strings.simplifiedFormDrefFocalPoint}
-                        description={strings.simplifiedFormDrefFocalPointDescription}
-                        numPreferredColumns={2}
-                    >
-                        <TextInput
-                            label={strings.simplifiedFormDrefFocalPointName}
-                            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.simplifiedFormDrefFocalPointTitle}
-                            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.simplifiedFormDrefFocalPointEmail}
-                            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.simplifiedFormDrefFocalPointPhoneNumber}
-                            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.simplifiedFormRegionalFocalPoint}
-                        numPreferredColumns={2}
-                    >
-                        <TextInput
-                            label={strings.simplifiedFormRegionalFocalPointName}
-                            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.simplifiedFormRegionalFocalPointTitle}
-                            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.simplifiedFormRegionalFocalPointEmail}
-                            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.simplifiedFormRegionalFocalPointPhoneNumber}
-                            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.simplifiedFormRegionalManager}
-                        numPreferredColumns={2}
-                    >
-                        <TextInput
-                            label={strings.simplifiedFormRegionalManagerName}
-                            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.simplifiedFormRegionalManagerTitle}
-                            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.simplifiedFormRegionalManagerEmail}
-                            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.simplifiedFormRegionalManagerPhoneNumber}
-                            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.simplifiedFormRegionalHead}
-                        numPreferredColumns={2}
-                    >
-                        <TextInput
-                            label={strings.simplifiedFormRegionalHeadName}
-                            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.simplifiedFormRegionalHeadTitle}
-                            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.simplifiedFormRegionalHeadEmail}
-                            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.simplifiedFormRegionalHeadPhoneNumber}
-                            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.simplifiedFormRegionalCoordinator}
-                        numPreferredColumns={2}
-                    >
-                        <TextInput
-                            label={strings.simplifiedFormRegionalCoordinatorName}
-                            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.simplifiedFormRegionalCoordinatorTitle}
-                            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.simplifiedFormRegionalCoordinatorEmail}
-                            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.simplifiedFormRegionalCoordinatorPhoneNumber}
-                            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>
+            <Container heading={strings.contacts}>
+                <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>
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/i18n.json b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/i18n.json
deleted file mode 100644
index 57024efda..000000000
--- a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/i18n.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-    "namespace": "simplifiedEapForm",
-    "strings": {
-        "operationReadiness": "Readiness",
-        "operationTimeFrame": "Time Frame",
-        "operationTimeValue": "Time Value"
-    }
-}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/index.tsx b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/index.tsx
deleted file mode 100644
index f79d4e438..000000000
--- a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/ActivityInput/index.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { useCallback } from 'react';
-import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
-import {
-    Button,
-    Checklist,
-    Container,
-    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,
-    type SetValueArg,
-    useFormObject,
-} from '@togglecorp/toggle-form';
-
-import useGlobalEnums from '#hooks/domain/useGlobalEnums';
-import { type GoApiResponse } from '#utils/restRequest';
-
-import { type PartialSimplifiedEapType } from '../../../schema';
-
-import i18n from './i18n.json';
-
-type PlannedInterventionFormFields = NonNullable<PartialSimplifiedEapType['planned_operations']>[number];
-type ActivityFormField = NonNullable<PlannedInterventionFormFields['early_action_activities']>[number];
-
-type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
-type TimeframeOption = NonNullable<GlobalEnumsResponse['eap_timeframe']>[number];
-
-const defaultActivityValue: ActivityFormField = {
-    client_id: '-1',
-};
-
-function timeframeKeySelector(option: TimeframeOption) {
-    return option.key;
-}
-
-const timeValueKeySelector = (
-    option: { key: number; value: string },
-) => option.key;
-
-interface Props {
-    value: ActivityFormField;
-    error: ArrayError<ActivityFormField> | undefined;
-    onChange: (value: SetValueArg<ActivityFormField>, index: number) => void;
-    onRemove: (index: number) => void;
-    index: number;
-    disabled?: boolean;
-}
-
-function ActivityInput(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 (
-        <Container
-            headerActions={(
-                <Button
-                    name={index}
-                    onClick={onRemove}
-                    styleVariant="outline"
-                    title="Remove"
-                    disabled={disabled}
-                >
-                    <DeleteBinTwoLineIcon />
-                </Button>
-            )}
-        >
-            <ListView layout="block">
-                <ListView layout="grid" numPreferredGridColumns={3}>
-                    <TextInput
-                        label={strings.operationReadiness}
-                        name="activity"
-                        value={value.activity}
-                        onChange={onFieldChange}
-                        disabled={disabled}
-                        withAsterisk
-                    />
-                    <SelectInput
-                        label={strings.operationTimeFrame}
-                        name="timeframe"
-                        value={value.timeframe}
-                        onChange={handleTimeframeChange}
-                        keySelector={timeframeKeySelector}
-                        labelSelector={stringValueSelector}
-                        options={eap_timeframe}
-                        disabled={disabled}
-                        error={error?.timeframe}
-                    />
-                    {value?.timeframe && (
-                        <Checklist
-                            label={strings.operationTimeValue}
-                            name="time_value"
-                            value={value?.time_value}
-                            onChange={onFieldChange}
-                            keySelector={timeValueKeySelector}
-                            labelSelector={stringValueSelector}
-                            options={timeValueOptions}
-                            disabled={disabled}
-                        />
-                    )}
-                </ListView>
-            </ListView>
-        </Container>
-    );
-}
-
-export default ActivityInput;
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/i18n.json b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/i18n.json
index 4011d0c89..6ffc1a9a7 100644
--- a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/i18n.json
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/i18n.json
@@ -5,10 +5,10 @@
         "operationBudget": "Budget",
         "operationApCode": "AP Code",
         "operationRemoveButton": "Remove",
-        "operationAddActivityButton": "Add Activity",
+        "operationAddActivityButton": "Add activity",
         "operationReadinessActivities": "Readiness Activities",
         "operationPrepositioningActivities": "Pre-positioning Activities",
         "operationEarlyActionActivities": "Early Action Activities",
-        "operationNoActivitesMessage": "No activities added yet"
+        "operationNoActivitiesMessage": "No activities added yet"
     }
-}
\ No newline at end of file
+}
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
index e6ced0b21..7967e58dc 100644
--- a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
@@ -1,5 +1,8 @@
 import { useCallback } from 'react';
-import { DeleteBinTwoLineIcon } from '@ifrc-go/icons';
+import {
+    AddLineIcon,
+    DeleteBinTwoLineIcon,
+} from '@ifrc-go/icons';
 import {
     Button,
     Container,
@@ -21,10 +24,10 @@ import {
     useFormObject,
 } from '@togglecorp/toggle-form';
 
+import OperationActivityInput from '#components/domain/OperationActivityInput';
 import NonFieldError from '#components/NonFieldError';
 
 import { type PartialSimplifiedEapType } from '../../schema';
-import ActivityInput from './ActivityInput';
 
 import i18n from './i18n.json';
 
@@ -147,17 +150,18 @@ function OperationsBySectorInput(props: Props) {
                 <Button
                     name={index}
                     onClick={onRemove}
-                    styleVariant="outline"
-                    title="Button"
+                    styleVariant="action"
                     disabled={disabled}
-                    before={<DeleteBinTwoLineIcon />}
+                    title={strings.operationRemoveButton}
                 >
-                    {strings.operationRemoveButton}
+                    <DeleteBinTwoLineIcon />
                 </Button>
             )}
             withPadding
             withBackground
             initiallyExpanded
+            withHeaderBorder
+            // FIXME: add non field error and error indicator
         >
             <ListView layout="block">
                 <ListView
@@ -189,19 +193,26 @@ function OperationsBySectorInput(props: Props) {
                         error={error?.ap_code}
                     />
                 </ListView>
-                <ListView layout="block">
+                <ListView
+                    layout="block"
+                    spacing="2xs"
+                    // FIXME: following can be converted into a component and reused
+                >
                     <Container
+                        spacing="sm"
                         withDarkBackground
                         withHeaderBorder
                         withPadding
                         heading={strings.operationReadinessActivities}
                         headingLevel={5}
-                        headerActions={(
+                        footerActions={(
                             <Button
                                 styleVariant="outline"
                                 name={undefined}
                                 onClick={handleReadinessAddButtonClick}
+                                spacing="sm"
                                 disabled={disabled}
+                                before={<AddLineIcon />}
                             >
                                 {strings.operationAddActivityButton}
                             </Button>
@@ -209,7 +220,7 @@ function OperationsBySectorInput(props: Props) {
                         withCompactMessage
                         empty={isNotDefined(value.readiness_activities)
                             || value.readiness_activities.length === 0}
-                        emptyMessage={strings.operationNoActivitesMessage}
+                        emptyMessage={strings.operationNoActivitiesMessage}
                         headerDescription={(
                             <NonFieldError error={
                                 getErrorObject(error?.readiness_activities)
@@ -217,30 +228,35 @@ function OperationsBySectorInput(props: Props) {
                             />
                         )}
                     >
-                        {value?.readiness_activities?.map((activity, i) => (
-                            <ActivityInput
-                                key={activity.client_id}
-                                index={i}
-                                value={activity}
-                                onChange={onReadinessChange}
-                                onRemove={onReadinessRemove}
-                                error={getErrorObject(error?.readiness_activities)}
-                                disabled={disabled}
-                            />
-                        ))}
+                        <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}
-                        headerActions={(
+                        footerActions={(
                             <Button
                                 name={undefined}
                                 onClick={handlePrepositioningAddButtonClick}
                                 disabled={disabled}
                                 styleVariant="outline"
+                                spacing="sm"
+                                before={<AddLineIcon />}
                             >
                                 {strings.operationAddActivityButton}
                             </Button>
@@ -248,7 +264,7 @@ function OperationsBySectorInput(props: Props) {
                         withCompactMessage
                         empty={isNotDefined(value.prepositioning_activities)
                             || value.prepositioning_activities.length === 0}
-                        emptyMessage={strings.operationNoActivitesMessage}
+                        emptyMessage={strings.operationNoActivitiesMessage}
                         headerDescription={(
                             <NonFieldError error={
                                 getErrorObject(error?.prepositioning_activities)
@@ -258,7 +274,7 @@ function OperationsBySectorInput(props: Props) {
                     >
                         <ListView layout="block">
                             {value?.prepositioning_activities?.map((activity, i) => (
-                                <ActivityInput
+                                <OperationActivityInput
                                     key={activity.client_id}
                                     index={i}
                                     value={activity}
@@ -271,17 +287,20 @@ function OperationsBySectorInput(props: Props) {
                         </ListView>
                     </Container>
                     <Container
+                        spacing="sm"
                         withDarkBackground
                         withHeaderBorder
                         withPadding
                         heading={strings.operationEarlyActionActivities}
                         headingLevel={5}
-                        headerActions={(
+                        footerActions={(
                             <Button
                                 name={undefined}
                                 onClick={handleEarlyActionAddButtonClick}
                                 disabled={disabled}
                                 styleVariant="outline"
+                                spacing="sm"
+                                before={<AddLineIcon />}
                             >
                                 {strings.operationAddActivityButton}
                             </Button>
@@ -289,14 +308,14 @@ function OperationsBySectorInput(props: Props) {
                         withCompactMessage
                         empty={isNotDefined(value.early_action_activities)
                             || value.early_action_activities.length === 0}
-                        emptyMessage={strings.operationNoActivitesMessage}
+                        emptyMessage={strings.operationNoActivitiesMessage}
                         headerDescription={(
                             <NonFieldError error={getErrorObject(error?.early_action_activities)} />
                         )}
                     >
                         <ListView layout="block">
                             {value?.early_action_activities?.map((activity, i) => (
-                                <ActivityInput
+                                <OperationActivityInput
                                     key={activity.client_id}
                                     index={i}
                                     value={activity}
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx b/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
index bc190713f..c6633de97 100644
--- a/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
@@ -18,7 +18,6 @@ import {
     type EntriesAsList,
     type Error,
     getErrorObject,
-    getErrorString,
     useFormArray,
 } from '@togglecorp/toggle-form';
 
@@ -98,6 +97,7 @@ function PlannedOperations(props: Props) {
             const index = value.planned_operations?.findIndex(
                 (op) => op.title === key,
             );
+
             if (index !== undefined && index >= 0) {
                 onOperationRemove(index);
             }
diff --git a/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json b/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
index d7520c102..944c7191b 100644
--- a/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
+++ b/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
@@ -2,7 +2,7 @@
     "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 choosen 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.",
+        "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",
         "simplifiedFormUploadlabel": "Upload",
         "simplifiedFormDescriptionLabel": "Description",
diff --git a/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx b/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx
index cfe999f98..0350e0b7b 100644
--- a/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx
+++ b/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx
@@ -42,9 +42,7 @@ function RiskAnalysis(props: Props) {
 
     return (
         <TabPage>
-            <Container
-                heading={strings.simplifiedEapRiskHeading}
-            >
+            <Container heading={strings.simplifiedEapRiskHeading}>
                 <ListView
                     layout="block"
                     spacing="sm"
@@ -101,9 +99,7 @@ function RiskAnalysis(props: Props) {
                     </InputSection>
                 </ListView>
             </Container>
-            <Container
-                heading={strings.simplifiedFormEarlyActionSelection}
-            >
+            <Container heading={strings.simplifiedFormEarlyActionSelection}>
                 <ListView
                     layout="block"
                     spacing="sm"
diff --git a/app/src/views/SimplifiedEapForm/i18n.json b/app/src/views/SimplifiedEapForm/i18n.json
index 87716ad24..1fc199acb 100644
--- a/app/src/views/SimplifiedEapForm/i18n.json
+++ b/app/src/views/SimplifiedEapForm/i18n.json
@@ -5,7 +5,7 @@
         "simplifiedEapDescription": "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.",
         "simplifiedEapOverview": "Overview",
         "simplifiedEapRiskAnalysis": "Risk Analysis & Early Action Selection",
-        "simplifiedEapEarlyAction": "Early Action Interventation",
+        "simplifiedEapEarlyAction": "Early Action Intervention",
         "simplifiedPlannedOperations": "Planned Operations",
         "simplifiedEnablingApproaches": "Enabling Approaches",
         "simplifiedDeliverAndBudget": "Conditions to deliver & budgets",
@@ -13,8 +13,8 @@
         "simplifiedBackButton": "Back",
         "simplifiedNextButton": "Next",
         "simplifiedSaveButton": "Save",
-        "eapSimplifiedFailure": "Sorry could not create a new Simplifed EAP right now!",
-        "eapSimplifiedSuccess": "Successfully created a new Simplifed EAP!",
+        "eapSimplifiedFailure": "Sorry could not create a new Simplified EAP right now!",
+        "eapSimplifiedSuccess": "Successfully created a new Simplified EAP!",
         "eapSimplifiedUpdateMessage": "Simplified EAP Form updated Successfully."
     }
-}
\ No newline at end of file
+}
diff --git a/app/src/views/SimplifiedEapForm/index.tsx b/app/src/views/SimplifiedEapForm/index.tsx
index 4d6dea8c2..591653067 100644
--- a/app/src/views/SimplifiedEapForm/index.tsx
+++ b/app/src/views/SimplifiedEapForm/index.tsx
@@ -8,13 +8,14 @@ import {
 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 { hasSomeDefinedValue } from '@ifrc-go/ui/utils';
+import { injectClientId } from '@ifrc-go/ui/utils';
 import {
     isDefined,
     isNotDefined,
@@ -22,6 +23,7 @@ import {
 } from '@togglecorp/fujs';
 import {
     createSubmitHandler,
+    removeNull,
     useForm,
 } from '@togglecorp/toggle-form';
 
@@ -31,15 +33,20 @@ 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 {
+    matchArray,
+    NUM,
+    transformObjectError,
+} from '#utils/restRequest/error';
 
 import { checkTabErrors } from './common';
 import DeliveryAndBudget from './DeliveryAndBudget';
 import EarlyAction from './EarlyAction';
-import EnablingApproches from './EnablingApproaches';
+import EnablingApproaches from './EnablingApproaches';
 import Overview from './Overview';
 import PlannedOperations from './PlannedOperations';
 import RiskAnalysis from './RiskAnalysis';
@@ -52,6 +59,7 @@ 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}/'>;
 
 type TabKeys = 'overview' | 'riskAnalysis' | 'earlyAction' | 'plannedOperations' | 'enablingApproaches' | 'deliveryAndBudget';
 
@@ -98,6 +106,78 @@ export function Component() {
     const [fileIdToUrlMap, setFileIdToUrlMap] = useState<Record<number, string>>({});
     const { eapId } = useParams<{ eapId: string }>();
 
+    const handleSimplifiedLoad = useCallback((response: GetSimplifiedResponse) => {
+        setFileIdToUrlMap((preMap) => {
+            const newMap = {
+                ...preMap,
+            };
+
+            const {
+                budget_file_details,
+                cover_image_file,
+            } = response;
+
+            if (
+                budget_file_details
+                && budget_file_details.id
+                && budget_file_details.file
+            ) {
+                newMap[
+                    budget_file_details.id
+                ] = budget_file_details.file;
+            }
+
+            if (
+                cover_image_file
+                && cover_image_file.id
+                && cover_image_file.file
+            ) {
+                newMap[cover_image_file.id] = cover_image_file.file;
+            }
+            return newMap;
+        });
+    }, []);
+
+    const loadResponseToFormValue = useCallback((response: GetSimplifiedResponse) => {
+        handleSimplifiedLoad(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) => ({
+                ...injectClientId(intervention),
+                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) => ({
+                ...injectClientId(approach),
+                early_action_activities: approach.early_action_activities?.map(injectClientId),
+                readiness_activities: approach.readiness_activities?.map(injectClientId),
+                prepositioning_activities: approach.prepositioning_activities?.map(injectClientId),
+            })),
+        });
+    }, [handleSimplifiedLoad, setValue]);
+
     const {
         pending: fetchingEap,
         response: eapDetailResponse,
@@ -119,19 +199,7 @@ export function Component() {
         pathVariables: isDefined(latestSimplifiedEapId) ? ({
             id: latestSimplifiedEapId,
         }) : undefined,
-        onSuccess: (simplifiedEapResponse) => {
-            // FIXME: remove unnecessary variables
-            // FIXME: add setFileIdToUrlMap
-            // FIXME: inject client ID
-            const {
-                admin2_details,
-                budget_file_details,
-                ...otherValues
-            } = simplifiedEapResponse;
-
-            // FIXME: typings
-            setValue(otherValues);
-        },
+        onSuccess: (simplifiedEapResponse) => loadResponseToFormValue(simplifiedEapResponse),
     });
 
     const {
@@ -156,7 +224,81 @@ export function Component() {
                 },
             } = err;
 
-            setError(transformObjectError(formErrors, () => undefined));
+            setError(transformObjectError(
+                formErrors,
+                (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!]?.client_id;
+                    }
+                    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!]?.client_id;
+                    }
+                    return undefined;
+                },
+            ));
 
             alert.show(
                 strings.eapSimplifiedFailure,
@@ -195,7 +337,86 @@ export function Component() {
 
             setError(transformObjectError(
                 formErrors,
-                () => undefined,
+                (locations) => {
+                    let match = matchArray(locations, ['cover_image_file']);
+                    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!]?.client_id;
+                    }
+
+                    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!]?.client_id;
+                    }
+                    return undefined;
+                },
             ));
 
             alert.show(
@@ -215,10 +436,9 @@ export function Component() {
             createSimplifiedEap({
                 ...validatedFormValue as EapSimplifiedRequestBody,
                 eap_registration: Number(eapId),
+
+                // FIXME: update admin2 input
                 admin2: [27485],
-                cover_image_file: hasSomeDefinedValue(validatedFormValue.cover_image_file)
-                    ? validatedFormValue.cover_image_file
-                    : undefined,
             });
         } else {
             updateSimplifiedEap({
@@ -282,7 +502,7 @@ export function Component() {
                     </Link>
                 )}
                 info={(
-                    <TabList className={styles.tabList}>
+                    <TabList>
                         <Tab
                             name="overview"
                             step={1}
@@ -369,7 +589,7 @@ export function Component() {
                     />
                 </TabPanel>
                 <TabPanel name="approaches">
-                    <EnablingApproches
+                    <EnablingApproaches
                         value={value}
                         setFieldValue={setFieldValue}
                         error={formError}
@@ -386,36 +606,30 @@ export function Component() {
                         setFileIdToUrlMap={setFileIdToUrlMap}
                     />
                 </TabPanel>
-                <div className={styles.actions}>
-                    <div className={styles.pageActions}>
+                <ListView withCenteredContents>
+                    <Button
+                        name={prevStep ?? activeTab}
+                        onClick={handleTabChange}
+                        disabled={isNotDefined(prevStep)}
+                    >
+                        {strings.simplifiedBackButton}
+                    </Button>
+                    {isDefined(nextStep) ? (
                         <Button
-                            name={prevStep ?? activeTab}
+                            name={nextStep ?? activeTab}
                             onClick={handleTabChange}
-                            disabled={isNotDefined(prevStep)}
-                            colorVariant="secondary"
-                            styleVariant="outline"
                         >
-                            {strings.simplifiedBackButton}
+                            {strings.simplifiedNextButton}
+                        </Button>
+                    ) : (
+                        <Button
+                            name={undefined}
+                            onClick={handleSave}
+                        >
+                            {strings.simplifiedSaveButton}
                         </Button>
-                        {isDefined(nextStep) ? (
-                            <Button
-                                name={nextStep ?? activeTab}
-                                onClick={handleTabChange}
-                                colorVariant="secondary"
-                                styleVariant="outline"
-                            >
-                                {strings.simplifiedNextButton}
-                            </Button>
-                        ) : (
-                            <Button
-                                name={undefined}
-                                onClick={handleSave}
-                            >
-                                {strings.simplifiedSaveButton}
-                            </Button>
-                        )}
-                    </div>
-                </div>
+                    )}
+                </ListView>
             </Page>
         </Tabs>
     );
diff --git a/app/src/views/SimplifiedEapForm/schema.ts b/app/src/views/SimplifiedEapForm/schema.ts
index e3bf269ff..abbe9151e 100644
--- a/app/src/views/SimplifiedEapForm/schema.ts
+++ b/app/src/views/SimplifiedEapForm/schema.ts
@@ -2,11 +2,13 @@ import { type DeepReplace } from '@ifrc-go/ui/utils';
 import { isDefined } from '@togglecorp/fujs';
 import {
     emailCondition,
+    type LiteralSchema,
     type ObjectSchema,
     type PartialForm,
     undefinedValue,
 } from '@togglecorp/toggle-form';
 
+import operationActivitySchema from '#components/domain/OperationActivityInput/schema';
 import { type GoApiBody } from '#utils/restRequest';
 
 function lessThanEqualToFiveImagesCondition<T>(value: T[] | undefined) {
@@ -114,15 +116,7 @@ type FormFields = (
 
 export type PartialSimplifiedEapType = PartialForm<FormFields, 'client_id'>;
 type PlannedOperationalFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifiedEapType['planned_operations']>[number], PartialSimplifiedEapType>['fields']>;
-type EarlyActionFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['planned_operations']>[number]['early_action_activities']>[number], PartialSimplifiedEapType>['fields']>;
-type PrepositioningFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['planned_operations']>[number]['prepositioning_activities']>[number], PartialSimplifiedEapType>['fields']>;
-type ReadinessFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['planned_operations']>[number]['readiness_activities']>[number], PartialSimplifiedEapType>['fields']>;
-
 type EnableApproachesFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifiedEapType['enable_approaches']>[number], PartialSimplifiedEapType>['fields']>;
-type EarlyActionApproachesFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['enable_approaches']>[number]['early_action_activities']>[number], PartialSimplifiedEapType>['fields']>;
-type PrepositioningApproachesFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['enable_approaches']>[number]['prepositioning_activities']>[number], PartialSimplifiedEapType>['fields']>;
-type ReadinessApproachesFields = ReturnType<ObjectSchema<NonNullable<NonNullable<PartialSimplifiedEapType['enable_approaches']>[number]['readiness_activities']>[number], PartialSimplifiedEapType>['fields']>;
-
 type CoverImageFileFormFields = ReturnType<ObjectSchema<PartialSimplifiedEapType['cover_image_file'], PartialSimplifiedEapType>['fields']>;
 
 type RiskProtocolsFileFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifiedEapType['risk_selected_protocols_images']>[number], PartialSimplifiedEapType>['fields']>;
@@ -132,10 +126,42 @@ type EarlyActionFileFields = ReturnType<ObjectSchema<NonNullable<PartialSimplifi
 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 | null, PartialSimplifiedEapType>
+    }
+
+    return {
+        [`${key}_name`]: {},
+        [`${key}_title`]: {},
+        [`${key}_email`]: { validations: [emailCondition] },
+        [`${key}_phone_number`]: {},
+    } as ContactSchema;
+}
+
 export const formSchema: FormSchema = {
     fields: (): FormSchemaFields => ({
-        admin2: { },
-        budget_file: { required: true },
+        // Overview
+
+        // national_society: {},
+        // country: {},
+        // disaster_type: {},
+
         cover_image_file: {
             fields: (): CoverImageFileFormFields => ({
                 client_id: {},
@@ -143,6 +169,21 @@ export const formSchema: FormSchema = {
                 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: () => ({
@@ -154,6 +195,7 @@ export const formSchema: FormSchema = {
             }),
             validation: lessThanEqualToFiveImagesCondition,
         },
+        risks_selected_protocols: {},
         risk_selected_protocols_images: {
             keySelector: (item) => item.client_id,
             member: () => ({
@@ -165,6 +207,7 @@ export const formSchema: FormSchema = {
             }),
             validation: lessThanEqualToFiveImagesCondition,
         },
+        selected_early_actions: {},
         selected_early_actions_images: {
             keySelector: (item) => item.client_id,
             member: () => ({
@@ -176,164 +219,92 @@ export const formSchema: FormSchema = {
             }),
             validation: lessThanEqualToFiveImagesCondition,
         },
-        seap_timeframe: { required: true },
+
+        // Early Action Interventions
+
+        overall_objective_intervention: {},
+        potential_geographical_high_risk_areas: {},
+        admin2: {},
+        people_targeted: { required: true },
         assisted_through_operation: {},
-        dref_focal_point_name: {},
-        dref_focal_point_title: {},
-        dref_focal_point_email: { validations: [emailCondition] },
-        dref_focal_point_phone_number: {},
-        eap_registration: {},
-        early_action_budget: { required: true },
-        early_action_capability: {},
-        ifrc_delegation_focal_point_name: {},
-        ifrc_delegation_focal_point_title: {},
-        ifrc_delegation_focal_point_email: { validations: [emailCondition] },
-        ifrc_delegation_focal_point_phone_number: {},
-        ifrc_global_ops_coordinator_name: {},
-        ifrc_global_ops_coordinator_title: {},
-        ifrc_global_ops_coordinator_phone_number: {},
-        ifrc_global_ops_coordinator_email: { validations: [emailCondition] },
-        ifrc_head_of_delegation_name: {},
-        ifrc_head_of_delegation_title: {},
-        ifrc_head_of_delegation_email: { validations: [emailCondition] },
-        ifrc_head_of_delegation_phone_number: {},
-        ifrc_regional_focal_point_name: {},
-        ifrc_regional_focal_point_title: {},
-        ifrc_regional_focal_point_email: { validations: [emailCondition] },
-        ifrc_regional_focal_point_phone_number: {},
-        ifrc_regional_head_dcc_name: {},
-        ifrc_regional_head_dcc_title: {},
-        ifrc_regional_head_dcc_email: { validations: [emailCondition] },
-        ifrc_regional_head_dcc_phone_number: {},
-        ifrc_regional_ops_manager_name: {},
-        ifrc_regional_ops_manager_title: {},
-        ifrc_regional_ops_manager_phone_number: {},
-        ifrc_regional_ops_manager_email: { validations: [emailCondition] },
-        national_society_contact_name: {},
-        national_society_contact_title: {},
-        national_society_contact_email: { validations: [emailCondition] },
-        national_society_contact_phone_number: {},
+        selection_criteria: {},
+        trigger_statement: {},
+        seap_lead_time: { required: true },
+        seap_lead_timeframe_unit: { required: true },
         operational_timeframe: {
             required: true,
             validations: [maxOperationalTimeframeCondition],
         },
-        partner_ns_name: {},
-        partner_ns_title: {},
-        partner_ns_email: { validations: [emailCondition] },
-        partner_ns_phone_number: {},
-        people_targeted: { required: true },
-        pre_positioning_budget: { required: true },
-        readiness_budget: { required: true },
-        seap_lead_time: { required: true },
-        selected_early_actions: {},
-        selection_criteria: {},
-        trigger_threshold_justification: {},
-        trigger_statement: {},
-        total_budget: { required: true },
-        prioritized_hazard_and_impact: {},
-        risks_selected_protocols: {},
-        seap_lead_timeframe_unit: { required: true },
         operational_timeframe_unit: {},
+        trigger_threshold_justification: {},
         next_step_towards_full_eap: { required: true },
-        enable_approaches: {
+
+        // Planned Operations
+
+        planned_operations: {
             keySelector: (item) => item.client_id,
             member: () => ({
-                fields: (): EnableApproachesFields => ({
+                fields: (): PlannedOperationalFields => ({
                     client_id: {},
                     id: { defaultValue: undefinedValue },
                     title: {},
-                    approach: {},
-                    budget_per_approach: {},
+                    sector: {},
+                    budget_per_sector: {},
                     ap_code: {},
-                    indicator_target: {},
+                    people_targeted: {},
                     early_action_activities: {
                         keySelector: (item) => item.client_id,
-                        member: () => ({
-                            fields: (): EarlyActionApproachesFields => ({
-                                client_id: { forceValue: undefinedValue },
-                                id: { defaultValue: undefinedValue },
-                                activity: {},
-                                timeframe: {},
-                                time_value: {},
-                            }),
-                        }),
+                        member: () => operationActivitySchema,
                     },
                     readiness_activities: {
                         keySelector: (item) => item.client_id,
-                        member: () => ({
-                            fields: (): ReadinessApproachesFields => ({
-                                client_id: { forceValue: undefinedValue },
-                                id: { defaultValue: undefinedValue },
-                                activity: {},
-                                timeframe: {},
-                                time_value: {},
-                            }),
-                        }),
+                        member: () => operationActivitySchema,
                     },
                     prepositioning_activities: {
                         keySelector: (item) => item.client_id,
-                        member: () => ({
-                            fields: (): PrepositioningApproachesFields => ({
-                                client_id: { forceValue: undefinedValue },
-                                id: { defaultValue: undefinedValue },
-                                activity: {},
-                                timeframe: {},
-                                time_value: {},
-                            }),
-                        }),
+                        member: () => operationActivitySchema,
                     },
                 }),
             }),
         },
-        planned_operations: {
+
+        // Enabling Approaches
+
+        enable_approaches: {
             keySelector: (item) => item.client_id,
             member: () => ({
-                fields: (): PlannedOperationalFields => ({
+                fields: (): EnableApproachesFields => ({
                     client_id: {},
                     id: { defaultValue: undefinedValue },
                     title: {},
-                    sector: {},
-                    budget_per_sector: {},
+                    approach: {},
+                    budget_per_approach: {},
                     ap_code: {},
-                    people_targeted: {},
+                    indicator_target: {},
                     early_action_activities: {
                         keySelector: (item) => item.client_id,
-                        member: () => ({
-                            fields: (): EarlyActionFields => ({
-                                client_id: { forceValue: undefinedValue },
-                                id: { defaultValue: undefinedValue },
-                                activity: {},
-                                timeframe: {},
-                                time_value: {},
-                            }),
-                        }),
+                        member: () => operationActivitySchema,
                     },
                     readiness_activities: {
                         keySelector: (item) => item.client_id,
-                        member: () => ({
-                            fields: (): ReadinessFields => ({
-                                client_id: { forceValue: undefinedValue },
-                                id: { defaultValue: undefinedValue },
-                                activity: {},
-                                timeframe: {},
-                                time_value: {},
-                            }),
-                        }),
+                        member: () => operationActivitySchema,
                     },
                     prepositioning_activities: {
                         keySelector: (item) => item.client_id,
-                        member: () => ({
-                            fields: (): PrepositioningFields => ({
-                                client_id: { forceValue: undefinedValue },
-                                id: { defaultValue: undefinedValue },
-                                activity: {},
-                                timeframe: {},
-                                time_value: {},
-                            }),
-                        }),
+                        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/go-api b/go-api
index 0a62d2fc7..a68571881 160000
--- a/go-api
+++ b/go-api
@@ -1 +1 @@
-Subproject commit 0a62d2fc7cc8481f06e93137ae5d096e49244867
+Subproject commit a685718813b968d48a7f00827048252dfc39d7d0
diff --git a/packages/ui/src/components/Checklist/index.tsx b/packages/ui/src/components/Checklist/index.tsx
index cf6c05d97..878cd929d 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/printable/Heading/index.tsx b/packages/ui/src/components/printable/Heading/index.tsx
index f07352e36..61705605e 100644
--- a/packages/ui/src/components/printable/Heading/index.tsx
+++ b/packages/ui/src/components/printable/Heading/index.tsx
@@ -1,8 +1,9 @@
 import { _cs } from '@togglecorp/fujs';
 
-import styles from './styles.module.css';
 import { getSpacingValue } from '#utils/style';
 
+import styles from './styles.module.css';
+
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 const levelToClassName: Record<HeadingLevel, string> = {

From 38322d60b85867dd702f57b4510902edb4d0d104 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Thu, 11 Dec 2025 11:38:25 +0545
Subject: [PATCH 12/19] feat(admin-2-input): add basic component

---
 .../components/domain/Admin2Input/i18n.json   |   0
 .../components/domain/Admin2Input/index.tsx   | 336 +++++++++
 app/src/components/domain/BaseMap/index.tsx   |   8 +-
 .../ComponentInput/index.tsx                  |   3 +-
 .../DistrictMapModal/DistrictItem/i18n.json   |   7 -
 .../DistrictMapModal/DistrictItem/index.tsx   | 106 ---
 .../DistrictItem/styles.module.css            |  56 --
 .../DistrictMap/DistrictMapModal/i18n.json    |  11 -
 .../DistrictMap/DistrictMapModal/index.tsx    | 688 ------------------
 .../DistrictMapModal/styles.module.css        |  36 -
 .../EarlyAction/DistrictMap/i18n.json         |   6 -
 .../EarlyAction/DistrictMap/index.tsx         | 127 ----
 .../EarlyAction/DistrictMap/styles.module.css |  14 -
 .../SimplifiedEapForm/EarlyAction/index.tsx   |  49 +-
 .../SimplifiedEapForm/Overview/index.tsx      |  10 +-
 app/src/views/SimplifiedEapForm/i18n.json     |   2 +-
 app/src/views/SimplifiedEapForm/index.tsx     |  12 +-
 17 files changed, 367 insertions(+), 1104 deletions(-)
 create mode 100644 app/src/components/domain/Admin2Input/i18n.json
 create mode 100644 app/src/components/domain/Admin2Input/index.tsx
 delete mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json
 delete mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/index.tsx
 delete mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/styles.module.css
 delete mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json
 delete mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/index.tsx
 delete mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/styles.module.css
 delete mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/i18n.json
 delete mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/index.tsx
 delete mode 100644 app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/styles.module.css

diff --git a/app/src/components/domain/Admin2Input/i18n.json b/app/src/components/domain/Admin2Input/i18n.json
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/src/components/domain/Admin2Input/index.tsx b/app/src/components/domain/Admin2Input/index.tsx
new file mode 100644
index 000000000..35a4f9487
--- /dev/null
+++ b/app/src/components/domain/Admin2Input/index.tsx
@@ -0,0 +1,336 @@
+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
+                            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 ec4a79358..125d6138f 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/views/PerPrioritizationForm/ComponentInput/index.tsx b/app/src/views/PerPrioritizationForm/ComponentInput/index.tsx
index 3a496a9b0..2a2835e37 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/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json
deleted file mode 100644
index f80bd450b..000000000
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/i18n.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-    "namespace": "simplifiedEapForm",
-    "strings": {
-        "removeDistrict": "Remove Districts",
-        "removeAdmin2":"Remove Admin2"
-    }
-}
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/index.tsx b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/index.tsx
deleted file mode 100644
index 41c74c6c1..000000000
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/index.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useMemo } from 'react';
-import { DeleteBinFillIcon } from '@ifrc-go/icons';
-import { Button } from '@ifrc-go/ui';
-import { useTranslation } from '@ifrc-go/ui/hooks';
-import {
-    _cs,
-    isDefined,
-    listToMap,
-} from '@togglecorp/fujs';
-
-import { type DistrictItem as DistrictSearchItem } from '#components/domain/DistrictSearchMultiSelectInput';
-
-import i18n from './i18n.json';
-import styles from './styles.module.css';
-
-interface Props {
-    className?: string;
-    districtId: number;
-    admin2Selections: number[] | undefined;
-    onDistrictRemove: (item: number) => void;
-    onAdmin2Remove: (item: number) => void;
-    districtOptions: DistrictSearchItem[] | undefined | null;
-    admin2Options: {id: number; name: string; district_id: number }[] | undefined | null;
-}
-
-function DistrictItem(props: Props) {
-    const {
-        className,
-        districtId,
-        onDistrictRemove,
-        districtOptions,
-        admin2Selections,
-        admin2Options,
-        onAdmin2Remove,
-    } = props;
-
-    const strings = useTranslation(i18n);
-
-    const districtItem = useMemo(
-        () => districtOptions?.find((item) => item.id === districtId),
-        [
-            districtOptions,
-            districtId,
-        ],
-    );
-
-    const admin2ObjectMap = useMemo(() => (
-        listToMap(
-            admin2Options,
-            (item) => item.id,
-            (item) => item,
-        )
-    ), [admin2Options]);
-
-    const admin2InCurrentDistrict = useMemo(() => (
-        admin2Selections?.filter((item) => admin2ObjectMap?.[item].district_id === districtId)
-    ), [
-        admin2ObjectMap,
-        districtId,
-        admin2Selections,
-    ]);
-
-    return (
-        <div className={_cs(className, styles.districtItem)}>
-            <div className={styles.district}>
-                <div className={styles.name}>
-                    {districtItem?.name}
-                </div>
-                <Button
-                    name={districtId}
-                    className={styles.removeButton}
-                    onClick={onDistrictRemove}
-                    colorVariant="text"
-                    title={strings.removeDistrict}
-                >
-                    <DeleteBinFillIcon />
-                </Button>
-            </div>
-            {isDefined(admin2InCurrentDistrict) && admin2InCurrentDistrict?.length > 0 && (
-                <div className={styles.admin2Items}>
-                    {admin2InCurrentDistrict.map((item) => (
-                        <div
-                            key={item}
-                            className={styles.admin2Item}
-                        >
-                            <div className={styles.name}>
-                                {admin2ObjectMap?.[item].name ?? '?'}
-                            </div>
-                            <Button
-                                className={styles.removeButton}
-                                name={item}
-                                onClick={onAdmin2Remove}
-                                colorVariant="text"
-                                title={strings.removeAdmin2}
-                            >
-                                <DeleteBinFillIcon />
-                            </Button>
-                        </div>
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-}
-
-export default DistrictItem;
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/styles.module.css b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/styles.module.css
deleted file mode 100644
index 2055b4dd7..000000000
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/DistrictItem/styles.module.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.district-item {
-    display: flex;
-    flex-direction: column;
-    background-color: var(--go-ui-color-background);
-    padding: var(--go-ui-spacing-xs) 0;
-
-    .district {
-        display: flex;
-        padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-md);
-        font-weight: var(--go-ui-font-weight-medium);
-
-        .name {
-            flex-grow: 1;
-        }
-
-        .remove-button {
-            flex-shrink: 0;
-            opacity: 0;
-        }
-
-        &:hover {
-            background-color: var(--go-ui-color-background-hover);
-            .remove-button {
-                opacity: 1;
-            }
-        }
-    }
-
-    .admin2-items {
-        display: flex;
-        flex-direction: column;
-
-        .admin-2-item {
-            display: flex;
-            padding: var(--go-ui-spacing-3xs) var(--go-ui-spacing-md);
-            font-size: var(--go-ui-font-size-sm);
-
-            .name {
-                flex-grow: 1;
-            }
-
-            .remove-button {
-                flex-shrink: 0;
-                opacity: 0;
-            }
-
-            &:hover {
-                background-color: var(--go-ui-color-background-hover);
-
-                .remove-button {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json
deleted file mode 100644
index 2ee140a58..000000000
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/i18n.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-    "namespace": "simplifiedEapForm",
-    "strings": {
-        "districtButtonSelectProvince": "Select Province / Region",
-        "save": "Save",
-        "backToCountry": "Back to Country",
-        "labelDistricts": "Districts",
-        "listEmptyMessage":"Select districts by click on map or from the select input above",
-        "mapTitle": "District / Admin2 selection map"
-    }
-}
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/index.tsx b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/index.tsx
deleted file mode 100644
index e0df68c4b..000000000
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/index.tsx
+++ /dev/null
@@ -1,688 +0,0 @@
-import {
-    type Dispatch,
-    type SetStateAction,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
-import { ChevronLeftLineIcon } from '@ifrc-go/icons';
-import {
-    Button,
-    List,
-    Modal,
-} from '@ifrc-go/ui';
-import { useTranslation } from '@ifrc-go/ui/hooks';
-import {
-    isNotDefined,
-    listToMap,
-    unique,
-} 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 BaseMap from '#components/domain/BaseMap';
-import DistrictSearchMultiSelectInput, { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput';
-import GoMapContainer from '#components/GoMapContainer';
-import NonFieldError from '#components/NonFieldError';
-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 { useRequest } from '#utils/restRequest';
-
-import DistrictListItem from './DistrictItem';
-
-import i18n from './i18n.json';
-import styles from './styles.module.css';
-
-const districtKeySelector = (item: number) => item;
-
-export interface Props<NAME, ADMIN2_NAME> {
-    countryId: number;
-    disabled?: boolean;
-    onModalClose: () => void;
-    districtsName: NAME;
-    districtsValue: number[] | undefined;
-    districtsError?: string;
-    districtOptions: DistrictItem[] | undefined | null;
-    onDistrictsChange: (newVal: number[] | undefined, districtsName: NAME) => void;
-    onDistrictsOptionsChange: Dispatch<SetStateAction<DistrictItem[] | undefined | null>>;
-    admin2Name: ADMIN2_NAME;
-    admin2Value: number[] | undefined;
-    admin2Error?: string;
-    admin2Options: {id: number; name: string; district_id: number }[] | undefined | null;
-    onAdmin2Change: (newVal: number[] | undefined, admin2Name: ADMIN2_NAME) => void;
-    onAdmin2OptionsChange: Dispatch<
-        SetStateAction<{ id: number; name: string; district_id: number }[] | undefined | null>
-    >;
-}
-
-function DistrictMap<const NAME, const ADMIN2_NAME>(props: Props<NAME, ADMIN2_NAME>) {
-    const {
-        districtsName,
-        countryId,
-        onModalClose,
-        disabled,
-        districtsValue,
-        onDistrictsChange,
-        districtOptions,
-        onDistrictsOptionsChange,
-        districtsError,
-        admin2Name,
-        admin2Value,
-        onAdmin2Change,
-        onAdmin2OptionsChange,
-        admin2Options,
-        admin2Error,
-    } = props;
-
-    const waitingForDblClick = useRef<{
-        [key: string]: number | undefined,
-    }>({});
-    const strings = useTranslation(i18n);
-
-    useEffect(
-        // eslint-disable-next-line arrow-body-style
-        () => {
-            return () => {
-                // eslint-disable-next-line react-hooks/exhaustive-deps
-                Object.values(waitingForDblClick.current).forEach((timeout) => {
-                    window.clearTimeout(timeout);
-                });
-            };
-        },
-        [],
-    );
-
-    const [districts, setDistricts] = useState<number[] | undefined>(districtsValue);
-    const [admin2Selections, setAdmin2Selections] = useState<number[] | undefined>(admin2Value);
-
-    const [selectedDistrict, setSelectedDistrict] = useState<number | undefined>();
-
-    const {
-        response: districtResponse,
-    } = useRequest({
-        skip: isNotDefined(selectedDistrict),
-        url: '/api/v2/district/{id}/',
-        pathVariables: selectedDistrict ? {
-            id: selectedDistrict,
-        } : undefined,
-        preserveResponse: true,
-    });
-
-    const countryDetails = useCountry({
-        id: countryId,
-    });
-
-    const iso3 = countryDetails?.iso3;
-
-    const bounds = useMemo(() => {
-        if (!countryDetails) {
-            return undefined;
-        }
-
-        if (selectedDistrict && districtResponse?.bbox) {
-            return turfBbox(districtResponse.bbox);
-        }
-
-        return turfBbox(countryDetails.bbox);
-    }, [
-        selectedDistrict,
-        districtResponse,
-        countryDetails,
-    ]);
-
-    const adminLabelLayerOptions: Omit<SymbolLayer, 'id'> = useMemo(() => ({
-        type: 'symbol',
-        paint: {
-            'text-opacity': [
-                'match',
-                ['get', 'country_id'],
-                countryId,
-                1,
-                0,
-            ],
-        },
-        layout: {
-            'text-offset': [
-                0, 1,
-            ],
-            visibility: selectedDistrict ? 'none' : 'visible',
-        },
-    }), [
-        countryId,
-        selectedDistrict,
-    ]);
-
-    const adminOneFillLayerOptions: Omit<FillLayer, 'id'> = useMemo(() => {
-        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',
-            paint: {
-                'fill-color': (!districts || districts.length <= 0)
-                    ? defaultColor
-                    : [
-                        'match',
-                        ['get', 'district_id'],
-                        ...districts.flatMap((districtId) => [
-                            districtId,
-                            COLOR_PRIMARY_RED,
-                        ]),
-                        defaultColor,
-                    ],
-                'fill-outline-color': COLOR_DARK_GREY,
-                'fill-opacity': [
-                    'match',
-                    ['get', 'country_id'],
-                    countryId,
-                    1,
-                    0,
-                ],
-            },
-            layout: {
-                visibility: selectedDistrict ? 'none' : 'visible',
-            },
-        };
-        return options;
-    }, [
-        countryId,
-        districts,
-        selectedDistrict,
-    ]);
-
-    const adminTwoLineLayerOptions: Omit<LineLayer, 'id'> | undefined = useMemo(() => (
-        iso3 && selectedDistrict ? ({
-            type: 'line',
-            'source-layer': `go-admin2-${iso3}-staging`,
-            paint: {
-                'line-color': COLOR_BLACK,
-                'line-opacity': [
-                    'match',
-                    ['get', 'admin1_id'],
-                    selectedDistrict,
-                    1,
-                    0,
-                ],
-            },
-            layout: {
-                visibility: 'visible',
-            },
-        }) : undefined
-    ), [
-        iso3,
-        selectedDistrict,
-    ]);
-
-    const adminTwoFillLayerOptions = useMemo((): Omit<FillLayer, 'id'> | undefined => {
-        if (!iso3 || !selectedDistrict) {
-            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': (!admin2Selections || admin2Selections.length <= 0)
-                    ? defaultColor
-                    : [
-                        'match',
-                        ['get', 'id'],
-                        ...admin2Selections.map((admin2Item) => [
-                            admin2Item,
-                            COLOR_PRIMARY_RED,
-                        ]).flat(),
-                        defaultColor,
-                    ],
-                'fill-outline-color': COLOR_DARK_GREY,
-                'fill-opacity': [
-                    'match',
-                    ['get', 'admin1_id'],
-                    selectedDistrict,
-                    1,
-                    0,
-                ],
-            },
-            layout: {
-                visibility: 'visible',
-            },
-        };
-        return options;
-    }, [
-        iso3,
-        admin2Selections,
-        selectedDistrict,
-    ]);
-
-    const adminTwoLabelLayerOptions = useMemo((): Omit<SymbolLayer, 'id'> | undefined => {
-        const textColor: NonNullable<SymbolLayer['paint']>['text-color'] = (
-            admin2Selections && admin2Selections.length > 0
-                ? [
-                    'match',
-                    ['get', 'id'],
-                    ...admin2Selections.map((admin2) => [
-                        admin2,
-                        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': [
-                    'match',
-                    ['get', 'admin1_id'],
-                    selectedDistrict,
-                    1,
-                    0,
-                ],
-            },
-            layout: {
-                'text-field': ['get', 'name'],
-                'text-anchor': 'center',
-                'text-size': 10,
-            },
-        };
-        return options;
-    }, [iso3, admin2Selections, selectedDistrict]);
-
-    const updateAdmin2 = useCallback(
-        (newDistricts: number[] | undefined) => {
-            const admin2ToDistrictMap = listToMap(
-                admin2Options,
-                (item) => item.id,
-                (item) => item.district_id,
-            );
-            const filteredAdmin2s = admin2Selections?.filter(
-                (item) => (
-                    admin2ToDistrictMap
-                        ? newDistricts?.includes(admin2ToDistrictMap?.[item])
-                        : false
-                ),
-            );
-            setAdmin2Selections(filteredAdmin2s);
-        },
-        [
-            admin2Selections,
-            admin2Options,
-        ],
-    );
-
-    const handleDistrictChange = useCallback<typeof setDistricts>(
-        (x) => {
-            if (typeof x === 'function') {
-                setDistricts((prevValue) => {
-                    const newValue = x(prevValue);
-
-                    // TODO: Research if we can call function with setState here?
-                    updateAdmin2(newValue);
-                    return newValue;
-                });
-            } else {
-                updateAdmin2(x);
-                setDistricts(x);
-            }
-        },
-        [updateAdmin2],
-    );
-
-    const handleDistrictClick = useCallback((clickedFeature: MapboxGeoJSONFeature) => {
-        const properties = clickedFeature.properties as {
-            country_id?: number;
-            district_id?: number;
-            name?: string;
-        };
-        if (properties.country_id !== countryId) {
-            return false;
-        }
-        const id = properties.district_id;
-        if (!id) {
-            return false;
-        }
-
-        if (waitingForDblClick.current[id]) {
-            window.clearTimeout(waitingForDblClick.current[id]);
-        }
-        waitingForDblClick.current[id] = window.setTimeout(
-            () => {
-                onDistrictsOptionsChange((oldOptions) => {
-                    if (!properties.name) {
-                        return oldOptions;
-                    }
-                    return unique(
-                        [
-                            ...(oldOptions ?? []),
-                            {
-                                id,
-                                name: properties.name,
-                            },
-                        ],
-                        (item) => item.id,
-                    );
-                });
-                handleDistrictChange((oldVal = []) => {
-                    const index = oldVal?.indexOf(id);
-                    if (isNotDefined(index) || index === -1) {
-                        return [
-                            ...oldVal,
-                            id,
-                        ];
-                    }
-                    const newVal = [...oldVal];
-                    newVal.splice(index, 1);
-
-                    return newVal;
-                });
-            },
-            // Why we are using 500ms
-            // https://en.wikipedia.org/wiki/Double-click#Speed_and_timing
-            500,
-        );
-
-        return false;
-    }, [
-        countryId,
-        onDistrictsOptionsChange,
-        handleDistrictChange,
-    ]);
-
-    const handleDistrictDoubleClick = useCallback((clickedFeature: MapboxGeoJSONFeature) => {
-        const properties = clickedFeature?.properties as {
-            country_id?: number;
-            district_id?: number;
-            name?: string;
-        };
-        if (properties.country_id !== countryId) {
-            return false;
-        }
-        const id = properties.district_id;
-        if (!id) {
-            return false;
-        }
-
-        if (waitingForDblClick.current[id]) {
-            window.clearTimeout(waitingForDblClick.current[id]);
-            waitingForDblClick.current[id] = undefined;
-        }
-
-        setSelectedDistrict(id);
-        onDistrictsOptionsChange((oldOptions) => {
-            if (!properties.name) {
-                return oldOptions;
-            }
-            return unique(
-                [
-                    ...(oldOptions ?? []),
-                    {
-                        id,
-                        name: properties.name,
-                    },
-                ],
-                (item) => item.id,
-            );
-        });
-        handleDistrictChange((oldVal = []) => (
-            unique([
-                ...oldVal,
-                id,
-            ])
-        ));
-        return false;
-    }, [
-        countryId,
-        onDistrictsOptionsChange,
-        handleDistrictChange,
-    ]);
-
-    const handleDistrictRemove = useCallback((districtId: number) => {
-        if (districtId === selectedDistrict) {
-            setSelectedDistrict(undefined);
-        }
-        handleDistrictChange((oldVal = []) => (
-            oldVal.filter((item) => item !== districtId)
-        ));
-    }, [
-        handleDistrictChange,
-        selectedDistrict,
-    ]);
-
-    const handleAdmin2Click = useCallback((clickedFeature: MapboxGeoJSONFeature) => {
-        const properties = clickedFeature?.properties as {
-            id: number;
-            admin1_id: number;
-            name?: string;
-        };
-        if (properties.admin1_id !== selectedDistrict) {
-            return false;
-        }
-        onAdmin2OptionsChange((oldOptions) => {
-            if (!properties.name || !properties.id) {
-                return oldOptions;
-            }
-            return unique(
-                [
-                    ...(oldOptions ?? []),
-                    {
-                        id: properties.id,
-                        district_id: properties.admin1_id,
-                        name: properties.name,
-                    },
-                ],
-                (item) => item.id,
-            );
-        });
-        setAdmin2Selections((oldVal = []) => {
-            if (!properties.id) {
-                return oldVal;
-            }
-            const index = oldVal?.indexOf(properties.id);
-            if (isNotDefined(index) || index === -1) {
-                return [
-                    ...oldVal,
-                    properties.id,
-                ];
-            }
-            const newVal = [...oldVal];
-            newVal.splice(index, 1);
-
-            return newVal;
-        });
-        return false;
-    }, [
-        selectedDistrict,
-        onAdmin2OptionsChange,
-    ]);
-
-    const handleAdmin2Remove = useCallback((admin2Id: number) => {
-        setAdmin2Selections((oldVal = []) => (
-            oldVal.filter((item) => item !== admin2Id)
-        ));
-    }, []);
-
-    const handleSaveClick = useCallback(() => {
-        onDistrictsChange(districts, districtsName);
-        onAdmin2Change(admin2Selections, admin2Name);
-        onModalClose();
-    }, [
-        admin2Name,
-        admin2Selections,
-        onAdmin2Change,
-        onModalClose,
-        onDistrictsChange,
-        districtsName,
-        districts,
-    ]);
-
-    const districtRendererParams = useCallback((districtId: number) => ({
-        districtId,
-        districtOptions,
-        onDistrictRemove: handleDistrictRemove,
-        onAdmin2Remove: handleAdmin2Remove,
-        admin2Options,
-        admin2Selections,
-    }), [
-        districtOptions,
-        admin2Selections,
-        admin2Options,
-        handleDistrictRemove,
-        handleAdmin2Remove,
-    ]);
-
-    return (
-        <Modal
-            className={styles.districtMapModal}
-            heading={strings.districtButtonSelectProvince}
-            onClose={onModalClose}
-            footerActions={(
-                <Button
-                    name={undefined}
-                    onClick={handleSaveClick}
-                >
-                    {strings.save}
-                </Button>
-            )}
-            size="xl"
-        >
-            <div className={styles.mapSection}>
-                {selectedDistrict && (
-                    <Button
-                        name={undefined}
-                        onClick={setSelectedDistrict}
-                        colorVariant="text"
-                        before={(
-                            <ChevronLeftLineIcon className={styles.backButton} />
-                        )}
-                    >
-                        {strings.backToCountry}
-                    </Button>
-                )}
-                <BaseMap
-                    baseLayers={(
-                        <>
-                            <MapLayer
-                                layerKey="admin-1-highlight"
-                                hoverable
-                                layerOptions={adminOneFillLayerOptions}
-                                onClick={!disabled ? handleDistrictClick : undefined}
-                                onDoubleClick={!disabled ? handleDistrictDoubleClick : undefined}
-                            />
-                            <MapLayer
-                                layerKey="admin-1-label"
-                                layerOptions={adminLabelLayerOptions}
-                            />
-                        </>
-                    )}
-                >
-                    <GoMapContainer
-                        title={strings.mapTitle}
-                        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>
-            </div>
-            <div className={styles.sidePanel}>
-                {/* FIXME: DistrictSearchMultiSelectInput should handle error itself */}
-                <NonFieldError error={admin2Error} />
-                <DistrictSearchMultiSelectInput
-                    error={districtsError}
-                    label={strings.labelDistricts}
-                    name="project_districts"
-                    countryId={countryId}
-                    options={districtOptions}
-                    onOptionsChange={onDistrictsOptionsChange}
-                    value={districts}
-                    onChange={handleDistrictChange}
-                    disabled={disabled}
-                />
-                <List
-                    className={styles.districtList}
-                    data={districts}
-                    renderer={DistrictListItem}
-                    keySelector={districtKeySelector}
-                    rendererParams={districtRendererParams}
-                    emptyMessage={strings.listEmptyMessage}
-                    errored={false}
-                    pending={false}
-                    filtered={false}
-                    compact
-                />
-            </div>
-        </Modal>
-    );
-}
-
-export default DistrictMap;
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/styles.module.css b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/styles.module.css
deleted file mode 100644
index 5705a788d..000000000
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/DistrictMapModal/styles.module.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.district-map-modal {
-    .content {
-        display: flex;
-        gap: var(--go-ui-spacing-sm);
-
-        .map-section {
-            display: flex;
-            flex-direction: column;
-            gap: var(--go-ui-spacing-sm);
-
-            .map-container {
-                width: 40rem;
-                height: 60vh;
-            }
-
-            .back-button {
-                font-size: var(--go-ui-height-icon-multiplier);
-            }
-        }
-
-        .side-panel {
-            display: flex;
-            flex-direction: column;
-            gap: var(--go-ui-spacing-sm);
-            height: 60vh;
-
-            .district-list {
-                display: flex;
-                flex-direction: column;
-                overflow-y: auto;
-                gap: var(--go-ui-spacing-xs);
-            }
-        }
-
-    }
-}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/i18n.json b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/i18n.json
deleted file mode 100644
index d8181bb1a..000000000
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/i18n.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "namespace": "simplifiedEapForm",
-    "strings": {
-        "buttonSelectProvince": "Select Province / Region"
-    }
-}
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/index.tsx b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/index.tsx
deleted file mode 100644
index 008919a48..000000000
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/index.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import {
-    useCallback,
-    useMemo,
-} from 'react';
-import {
-    Button,
-    List,
-    TextOutput,
-} from '@ifrc-go/ui';
-import {
-    useBooleanState,
-    useTranslation,
-} from '@ifrc-go/ui/hooks';
-import { numericIdSelector } from '@ifrc-go/ui/utils';
-import { isDefined } from '@togglecorp/fujs';
-
-import { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput';
-
-import DistrictMapModal, { type Props as MapModalProps } from './DistrictMapModal';
-
-import i18n from './i18n.json';
-import styles from './styles.module.css';
-
-interface AdminTwo {
-    id: number;
-    name: string;
-    district_id: number;
-}
-
-interface DistrictWithAdminTwo extends DistrictItem {
-    localUnits: AdminTwo[];
-}
-
-type Props<NAME, ADMIN2_NAME> = Omit<MapModalProps<NAME, ADMIN2_NAME>, 'countryId' | 'onModalClose'> & {
-    countryId: number | undefined;
-    className?: string;
-};
-
-function DistrictMap<
-    const NAME,
-    const ADMIN2_NAME,
->(props: Props<NAME, ADMIN2_NAME>) {
-    const {
-        className,
-        countryId,
-        disabled,
-        admin2Value,
-        districtsValue,
-        admin2Options,
-        districtOptions,
-        ...otherProps
-    } = props;
-    const strings = useTranslation(i18n);
-
-    const [
-        modalShown,
-        {
-            setTrue: showModal,
-            setFalse: hideModal,
-        },
-    ] = useBooleanState(false);
-
-    const selectedAdminTwo = useMemo(() => (
-        admin2Value
-            ?.map((adminTwoId) => admin2Options?.find((adminTwo) => adminTwo.id === adminTwoId))
-            .filter(isDefined)
-    ), [admin2Options, admin2Value]);
-
-    const selectedDistricts = useMemo(() => (
-        districtsValue
-            ?.map((districtId) => districtOptions?.find((district) => district.id === districtId))
-            ?.filter(isDefined)
-            .map((district) => ({
-                ...district,
-                localUnits: selectedAdminTwo
-                    ?.filter((adminTwo) => adminTwo.district_id === district.id),
-            }))
-    ), [districtOptions, selectedAdminTwo, districtsValue]);
-
-    const districtRendererParams = useCallback((_: number, data: DistrictWithAdminTwo) => ({
-        value: data.name,
-        strongValue: true,
-        className: styles.districtList,
-        descriptionClassName: styles.localUnits,
-        description: data.localUnits?.map((adminTwo) => adminTwo.name).join(', '),
-    }), []);
-
-    return (
-        <div className={styles.input}>
-            <Button
-                className={className}
-                name={undefined}
-                disabled={!countryId || disabled}
-                onClick={showModal}
-                styleVariant="outline"
-            >
-                {strings.buttonSelectProvince}
-            </Button>
-            <List
-                data={selectedDistricts}
-                rendererParams={districtRendererParams}
-                renderer={TextOutput}
-                keySelector={numericIdSelector}
-                withoutMessage
-                compact
-                pending={false}
-                errored={false}
-                filtered={false}
-            />
-            {modalShown && countryId && (
-                <DistrictMapModal
-                    countryId={countryId}
-                    disabled={disabled}
-                    admin2Options={admin2Options}
-                    admin2Value={admin2Value}
-                    districtsValue={districtsValue}
-                    districtOptions={districtOptions}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...otherProps}
-                    onModalClose={hideModal}
-                />
-            )}
-        </div>
-    );
-}
-
-export default DistrictMap;
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/styles.module.css b/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/styles.module.css
deleted file mode 100644
index e4a2a5aba..000000000
--- a/app/src/views/SimplifiedEapForm/EarlyAction/DistrictMap/styles.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.input {
-    display: flex;
-    flex-direction: column;
-    gap: var(--go-ui-spacing-sm);
-
-    .district-list {
-        display: flex;
-        flex-direction: column;
-
-        .local-units {
-            font-size: var(--go-ui-font-size-sm);
-        }
-    }
-}
\ No newline at end of file
diff --git a/app/src/views/SimplifiedEapForm/EarlyAction/index.tsx b/app/src/views/SimplifiedEapForm/EarlyAction/index.tsx
index 75af247a0..f38ac699a 100644
--- a/app/src/views/SimplifiedEapForm/EarlyAction/index.tsx
+++ b/app/src/views/SimplifiedEapForm/EarlyAction/index.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import {
     Container,
     InputSection,
@@ -9,6 +8,7 @@ import {
 } 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,
@@ -16,19 +16,15 @@ import {
     getErrorString,
 } from '@togglecorp/toggle-form';
 
-import { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput';
+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 DistrictMap from './DistrictMap';
 
 import i18n from './i18n.json';
 
-type GetDistrictResponse = GoApiResponse<'/api/v2/district/'>;
-
-export type Admin2item = Pick<NonNullable<GetDistrictResponse['results']>[number], 'id' | 'name'>;
 type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
 
 type TimeframeOption = NonNullable<GlobalEnumsResponse['eap_timeframe']>[number];
@@ -45,12 +41,6 @@ interface Props {
     eapRegistrationDetail?: GoApiResponse<'/api/v2/eap-registration/{id}/'>;
 }
 
-interface AdminTwo {
-    id: number;
-    name: string;
-    district_id: number;
-}
-
 function EarlyAction(props: Props) {
     const {
         value,
@@ -63,20 +53,10 @@ function EarlyAction(props: Props) {
     const strings = useTranslation(i18n);
     const error = getErrorObject(formError);
 
-    const [districtOptions, setDistrictOptions] = useState<
-        DistrictItem[] | undefined | null
-    >([]);
-
-    const [admin2Options, setAdmin2Options] = useState<
-    AdminTwo[] | undefined | null
-    >([]);
-
     const {
         eap_timeframe,
     } = useGlobalEnums();
 
-    const [districts, setDistricts] = useState<number[] | undefined>();
-
     const eapTimeframeOption = eap_timeframe?.filter(
         (item) => item.key !== TIMEFRAME_YEAR,
     );
@@ -114,22 +94,15 @@ function EarlyAction(props: Props) {
                         error={error?.potential_geographical_high_risk_areas}
                         disabled={disabled}
                     />
-                    <DistrictMap
-                        districtsName="district"
-                        districtsValue={districts}
-                        admin2Name="admin2"
-                        admin2Value={value?.admin2}
-                        onDistrictsChange={setDistricts}
-                        districtOptions={districtOptions}
-                        onDistrictsOptionsChange={setDistrictOptions}
-                        onAdmin2Change={setFieldValue}
-                        admin2Options={admin2Options}
-                        onAdmin2OptionsChange={setAdmin2Options}
-                        countryId={eapRegistrationDetail?.country}
-                        disabled={disabled}
-                        districtsError={getErrorString(error?.admin2)}
-                        admin2Error={getErrorString(error?.admin2)}
-                    />
+                    {isDefined(eapRegistrationDetail?.country) && (
+                        <Admin2Input
+                            name="admin2"
+                            onChange={setFieldValue}
+                            value={value?.admin2}
+                            countryId={eapRegistrationDetail.country}
+                            error={getErrorString(error?.admin2)}
+                        />
+                    )}
                 </InputSection>
                 <InputSection
                     title={strings.actionPeopleTargeted}
diff --git a/app/src/views/SimplifiedEapForm/Overview/index.tsx b/app/src/views/SimplifiedEapForm/Overview/index.tsx
index 023a7ab81..c81157077 100644
--- a/app/src/views/SimplifiedEapForm/Overview/index.tsx
+++ b/app/src/views/SimplifiedEapForm/Overview/index.tsx
@@ -55,7 +55,10 @@ function Overview(props: Props) {
 
     return (
         <TabPage>
-            <Container heading={strings.detailsHeading}>
+            <Container
+                heading={strings.detailsHeading}
+                spacing="lg"
+            >
                 <ListView
                     layout="block"
                     spacing="sm"
@@ -135,7 +138,10 @@ function Overview(props: Props) {
                     </InputSection>
                 </ListView>
             </Container>
-            <Container heading={strings.contacts}>
+            <Container
+                heading={strings.contacts}
+                spacing="lg"
+            >
                 <ListView
                     layout="block"
                     spacing="lg"
diff --git a/app/src/views/SimplifiedEapForm/i18n.json b/app/src/views/SimplifiedEapForm/i18n.json
index 1fc199acb..a895aa311 100644
--- a/app/src/views/SimplifiedEapForm/i18n.json
+++ b/app/src/views/SimplifiedEapForm/i18n.json
@@ -2,7 +2,7 @@
     "namespace": "simplifiedEapForm",
     "strings": {
         "simplifiedEapHeading": "Simplified EAP form",
-        "simplifiedEapDescription": "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.",
+        "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",
diff --git a/app/src/views/SimplifiedEapForm/index.tsx b/app/src/views/SimplifiedEapForm/index.tsx
index 591653067..e2685a936 100644
--- a/app/src/views/SimplifiedEapForm/index.tsx
+++ b/app/src/views/SimplifiedEapForm/index.tsx
@@ -106,7 +106,7 @@ export function Component() {
     const [fileIdToUrlMap, setFileIdToUrlMap] = useState<Record<number, string>>({});
     const { eapId } = useParams<{ eapId: string }>();
 
-    const handleSimplifiedLoad = useCallback((response: GetSimplifiedResponse) => {
+    const handleSimplifiedEapLoad = useCallback((response: GetSimplifiedResponse) => {
         setFileIdToUrlMap((preMap) => {
             const newMap = {
                 ...preMap,
@@ -139,7 +139,7 @@ export function Component() {
     }, []);
 
     const loadResponseToFormValue = useCallback((response: GetSimplifiedResponse) => {
-        handleSimplifiedLoad(response);
+        handleSimplifiedEapLoad(response);
 
         const {
             planned_operations,
@@ -176,7 +176,7 @@ export function Component() {
                 prepositioning_activities: approach.prepositioning_activities?.map(injectClientId),
             })),
         });
-    }, [handleSimplifiedLoad, setValue]);
+    }, [handleSimplifiedEapLoad, setValue]);
 
     const {
         pending: fetchingEap,
@@ -227,6 +227,9 @@ export function Component() {
             setError(transformObjectError(
                 formErrors,
                 (locations) => {
+                    // FIXME: this transformation is duplicated
+                    // let's create a function to reuse it
+
                     let match = matchArray(locations, ['cover_image_file', NUM]);
                     if (isDefined(match)) {
                         return value?.cover_image_file?.client_id;
@@ -436,9 +439,6 @@ export function Component() {
             createSimplifiedEap({
                 ...validatedFormValue as EapSimplifiedRequestBody,
                 eap_registration: Number(eapId),
-
-                // FIXME: update admin2 input
-                admin2: [27485],
             });
         } else {
             updateSimplifiedEap({

From 05b1b841c3bdd1b27819c1da803ff56837f928da Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Thu, 11 Dec 2025 14:39:20 +0545
Subject: [PATCH 13/19] feat(eap): clean-up simplied form schema

---
 .../components/domain/Admin2Input/i18n.json   |   0
 .../domain/ImageWithCaptionInput/index.tsx    |  22 ++--
 .../MultiImageWithCaptionInput/index.tsx      |  16 ++-
 .../domain/OperationActivityInput/index.tsx   |   3 +
 .../printable/PrintableContainer/index.tsx    |  10 +-
 .../PrintableContainer/styles.module.css      |  13 +++
 .../printable/PrintableDataDisplay/index.tsx  |   2 +-
 app/src/utils/constants.ts                    |   2 +-
 app/src/views/SimplifiedEapExport/index.tsx   |  24 +++-
 .../ApproachesInput/index.tsx                 |  17 +--
 .../EnablingApproaches/index.tsx              | 105 ++++++------------
 .../OperationsInput/index.tsx                 |  18 +--
 .../PlannedOperations/index.tsx               |  93 ++++++----------
 app/src/views/SimplifiedEapForm/common.tsx    |  19 ++--
 app/src/views/SimplifiedEapForm/index.tsx     |  16 +--
 app/src/views/SimplifiedEapForm/schema.ts     |  19 ++--
 knip.jsonc                                    |   2 +-
 .../ui/src/components/TabLayout/index.tsx     |  10 +-
 .../components/TabLayout/styles.module.css    |   4 +
 19 files changed, 191 insertions(+), 204 deletions(-)
 delete mode 100644 app/src/components/domain/Admin2Input/i18n.json

diff --git a/app/src/components/domain/Admin2Input/i18n.json b/app/src/components/domain/Admin2Input/i18n.json
deleted file mode 100644
index e69de29bb..000000000
diff --git a/app/src/components/domain/ImageWithCaptionInput/index.tsx b/app/src/components/domain/ImageWithCaptionInput/index.tsx
index 5a3b877fb..a66380d0b 100644
--- a/app/src/components/domain/ImageWithCaptionInput/index.tsx
+++ b/app/src/components/domain/ImageWithCaptionInput/index.tsx
@@ -21,19 +21,25 @@ 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 | null;
+    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;
diff --git a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
index 5fe4a5c01..246c5c7c6 100644
--- a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
+++ b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
@@ -29,19 +29,25 @@ import NonFieldError from '#components/NonFieldError';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-type Value = {
-    client_id: string;
+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;
diff --git a/app/src/components/domain/OperationActivityInput/index.tsx b/app/src/components/domain/OperationActivityInput/index.tsx
index c66ec8fc6..408118ed5 100644
--- a/app/src/components/domain/OperationActivityInput/index.tsx
+++ b/app/src/components/domain/OperationActivityInput/index.tsx
@@ -13,6 +13,7 @@ import { stringValueSelector } from '@ifrc-go/ui/utils';
 import {
     type ArrayError,
     getErrorObject,
+    getErrorString,
     type SetValueArg,
     useFormObject,
 } from '@togglecorp/toggle-form';
@@ -125,6 +126,7 @@ function OperationActivityInput(props: Props) {
                     label={strings.operationPriorityActionLabel}
                     name="activity"
                     value={value.activity}
+                    error={error?.activity}
                     onChange={onFieldChange}
                     disabled={disabled}
                     withAsterisk
@@ -154,6 +156,7 @@ function OperationActivityInput(props: Props) {
                             disabled={disabled}
                             renderer={TimeSpanCheck}
                             withoutOpticalSpacingCorrection
+                            error={getErrorString(error?.time_value)}
                         />
                     )}
                 </ListView>
diff --git a/app/src/components/printable/PrintableContainer/index.tsx b/app/src/components/printable/PrintableContainer/index.tsx
index ff291099d..c0d248eef 100644
--- a/app/src/components/printable/PrintableContainer/index.tsx
+++ b/app/src/components/printable/PrintableContainer/index.tsx
@@ -29,12 +29,18 @@ function PrintableContainer(props: Props) {
         <>
             {breakBefore && <div className={styles.pageBreak} />}
             {heading && (
-                <Heading level={headingLevel}>
+                <Heading
+                    level={headingLevel}
+                    className={styles.heading}
+                >
                     {heading}
                 </Heading>
             )}
             {children}
-            <div style={{ marginBlockEnd: spacing }} />
+            <div
+                className={styles.blockSpacing}
+                style={{ marginBlockEnd: spacing }}
+            />
             {breakAfter && <div className={styles.pageBreak} />}
         </>
     );
diff --git a/app/src/components/printable/PrintableContainer/styles.module.css b/app/src/components/printable/PrintableContainer/styles.module.css
index c88ffb898..1d23b6813 100644
--- a/app/src/components/printable/PrintableContainer/styles.module.css
+++ b/app/src/components/printable/PrintableContainer/styles.module.css
@@ -1,3 +1,16 @@
 .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) {
+    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
index abe29ccb3..7d4075356 100644
--- a/app/src/components/printable/PrintableDataDisplay/index.tsx
+++ b/app/src/components/printable/PrintableDataDisplay/index.tsx
@@ -55,7 +55,7 @@ interface NodeProps {
     value?: React.ReactNode;
 }
 
-export type Props = BaseProps & (
+type Props = BaseProps & (
     NodeProps | TextProps | DateProps | NumberProps | BooleanProps
 );
 
diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
index 855310536..562e7902c 100644
--- a/app/src/utils/constants.ts
+++ b/app/src/utils/constants.ts
@@ -209,6 +209,6 @@ export const EAP_TYPE_FULL = 10;
 
 // FIXME these need to satisfy some enum
 export const TIMEFRAME_YEAR = 10;
-export const TIMEFRAME_MONTHS = 20;
+// export const TIMEFRAME_MONTHS = 20;
 // export const TIMEFRAME_DAYS = 30;
 // export const TIMEFRAME_HOURS = 40;
diff --git a/app/src/views/SimplifiedEapExport/index.tsx b/app/src/views/SimplifiedEapExport/index.tsx
index 4e261c44d..803e9735b 100644
--- a/app/src/views/SimplifiedEapExport/index.tsx
+++ b/app/src/views/SimplifiedEapExport/index.tsx
@@ -81,7 +81,13 @@ export function Component() {
     );
 
     const {
-        cover_image_details,
+        disaster_type_details,
+        country_details,
+    } = eapRegistrationResponse ?? {};
+
+    const {
+        cover_image_file,
+        admin2_details,
 
         total_budget,
         readiness_budget,
@@ -113,6 +119,12 @@ export function Component() {
         national_society_contact_phone_number,
     } = simplifiedEapResponse ?? {};
 
+    const eapTitle = [
+        country_details?.name,
+        admin2_details?.map(({ name }) => name).join(', '),
+        disaster_type_details?.name,
+    ].filter(isTruthyString).join(' | ');
+
     return (
         <PrintablePage
             heading={(
@@ -122,14 +134,14 @@ export function Component() {
                     Early Action Protocol
                 </>
             )}
-            description="Nepal, Western Terai | Flood"
+            description={eapTitle ?? '--'}
         >
-            {isDefined(cover_image_details?.file) && (
+            {isDefined(cover_image_file?.file) && (
                 <PrintableContainer>
                     <Image
-                        src={cover_image_details.file}
+                        src={cover_image_file.file}
                         alt=""
-                        caption={cover_image_details.caption}
+                        caption={cover_image_file.caption}
                     />
                 </PrintableContainer>
             )}
@@ -531,7 +543,7 @@ export function Component() {
                             national_society_contact_title,
                             national_society_contact_email,
                             national_society_contact_phone_number,
-                        ].join(', ')}
+                        ].filter(isTruthyString).join(', ')}
                         variant="block"
                         strongLabel
                     />
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
index d53921a60..8d77e1c7b 100644
--- a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
@@ -12,7 +12,6 @@ import {
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
-    isDefined,
     isNotDefined,
     randomString,
 } from '@togglecorp/fujs';
@@ -37,7 +36,7 @@ type PrepositioningFormFields = NonNullable<EnableApproachesFormFields['preposit
 type ReadinessFormFields = NonNullable<EnableApproachesFormFields['readiness_activities']>[number];
 
 const defaultApproachValue: EnableApproachesFormFields = {
-    client_id: '-1',
+    approach: 10,
 };
 
 interface Props {
@@ -47,7 +46,7 @@ interface Props {
     onRemove: (index: number) => void;
     index: number;
     disabled?: boolean;
-    titleMap: Record<string, string> | undefined;
+    approachTitle?: React.ReactNode;
 }
 
 function OperationsBySectorInput(props: Props) {
@@ -58,18 +57,14 @@ function OperationsBySectorInput(props: Props) {
         index,
         onRemove,
         disabled,
-        titleMap,
+        approachTitle,
     } = props;
 
     const strings = useTranslation(i18n);
     const onFieldChange = useFormObject(index, onChange, defaultApproachValue);
 
-    const approachLabel = isDefined(value.title)
-        ? titleMap?.[value.title]
-        : undefined;
-
-    const error = (value && value.client_id && errorFromProps)
-        ? getErrorObject(errorFromProps?.[value.client_id])
+    const error = (value && value.approach && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.approach])
         : undefined;
 
     const {
@@ -144,7 +139,7 @@ function OperationsBySectorInput(props: Props) {
 
     return (
         <ExpandableContainer
-            heading={approachLabel ?? '--'}
+            heading={approachTitle ?? '--'}
             headerActions={(
                 <Button
                     name={index}
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx b/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx
index 941c684cc..322c48258 100644
--- a/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/index.tsx
@@ -10,10 +10,7 @@ import {
 } 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 { listToMap } from '@togglecorp/fujs';
 import {
     type EntriesAsList,
     type Error,
@@ -22,16 +19,16 @@ import {
 } from '@togglecorp/toggle-form';
 
 import NonFieldError from '#components/NonFieldError';
+import { type components } from '#generated/types';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
-import { type GoApiResponse } from '#utils/restRequest';
 
 import { type PartialSimplifiedEapType } from '../schema';
 import ApproachesInput from './ApproachesInput';
 
 import i18n from './i18n.json';
 
-type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
-type EnablingApproachesOption = NonNullable<GlobalEnumsResponse['eap_approach']>[number];
+type EapApproach = components['schemas']['EapApproachEnumKey'];
+type EapApproachOption = components['schemas']['EapApproachEnum'];
 
 type EnablingApproachesFormFields = NonNullable<PartialSimplifiedEapType['enable_approaches']>[number];
 
@@ -42,7 +39,7 @@ interface Props {
     setFieldValue: (...entries: EntriesAsList<PartialSimplifiedEapType>) => void;
 }
 
-function approachesKeySelector(option: EnablingApproachesOption) {
+function approachesKeySelector(option: EapApproachOption) {
     return option.key;
 }
 function EnablingApproaches(props: Props) {
@@ -56,13 +53,15 @@ function EnablingApproaches(props: Props) {
     const error = getErrorObject(formError);
     const strings = useTranslation(i18n);
 
-    const {
-        eap_approach: approachesOptions,
-    } = useGlobalEnums();
+    const { eap_approach: eapApproachOptions } = useGlobalEnums();
 
-    const selectedApproach = (value.enable_approaches ?? [])
-        .map((op) => op.title)
-        .filter((key): key is EnablingApproachesOption['key'] => key !== undefined);
+    const eapApproachLabelMapping = useMemo(() => (
+        listToMap(
+            eapApproachOptions,
+            ({ key }) => key,
+            ({ value: label }) => label,
+        )
+    ), [eapApproachOptions]);
 
     const {
         setValue: onApproachChange,
@@ -72,58 +71,28 @@ function EnablingApproaches(props: Props) {
         setFieldValue,
     );
 
-    const handleApproachSelect = useCallback((selectedKeys: EnablingApproachesOption['key'][]) => {
-        const previousKeys = (value.enable_approaches ?? [])
-            .map((op) => op.title)
-            .filter((key): key is EnablingApproachesOption['key'] => key !== undefined);
-
-        const addedKeys = selectedKeys.filter((key) => !previousKeys.includes(key));
-        const removedKeys = previousKeys.filter((key) => !selectedKeys.includes(key));
-
-        if (addedKeys.length > 0) {
-            const newOperations = addedKeys.map((key) => ({
-                client_id: randomString(),
-                title: key,
-            }));
-
-            setFieldValue(
-                (oldValue: EnablingApproachesFormFields[] = []) => {
-                    const safeOldValue = oldValue.map((op) => ({
-                        ...op,
-                        title: op.title,
-                    }));
-                    return [...safeOldValue, ...newOperations];
-                },
-                'enable_approaches',
+    const handleApproachChecklistChange = useCallback((approaches: EapApproach[] | undefined) => {
+        setFieldValue((previousValue: EnablingApproachesFormFields[] | undefined) => {
+            const previousValueMapping = listToMap(
+                previousValue,
+                ({ approach }) => approach,
             );
-        }
-
-        if (removedKeys.length > 0) {
-            removedKeys.forEach((key) => {
-                const index = value.enable_approaches?.findIndex(
-                    (op) => op.title === key,
-                );
-                if (index !== undefined && index >= 0) {
-                    onApproachRemove(index);
+
+            return approaches?.map((approach) => {
+                const prevapproachValue = previousValueMapping?.[approach];
+
+                if (prevapproachValue) {
+                    return prevapproachValue;
                 }
+
+                return {
+                    approach,
+                } satisfies EnablingApproachesFormFields;
             });
-        }
-    }, [
-        value.enable_approaches,
-        setFieldValue,
-        onApproachRemove,
-    ]);
-
-    const approachTitleMap = useMemo(
-        () => (
-            listToMap(
-                approachesOptions,
-                (approach) => approach.key,
-                (approach) => approach.value,
-            )
-        ),
-        [approachesOptions],
-    );
+        }, 'enable_approaches');
+    }, [setFieldValue]);
+
+    const selectedApproaches = value?.enable_approaches?.map(({ approach }) => approach);
 
     return (
         <Container heading={strings.enablingApproachesTitle}>
@@ -138,9 +107,9 @@ function EnablingApproaches(props: Props) {
                     <NonFieldError error={getErrorObject(error?.enable_approaches)} />
                     <Checklist
                         name={undefined}
-                        options={approachesOptions}
-                        onChange={handleApproachSelect}
-                        value={selectedApproach}
+                        options={eapApproachOptions}
+                        onChange={handleApproachChecklistChange}
+                        value={selectedApproaches}
                         disabled={disabled}
                         keySelector={approachesKeySelector}
                         labelSelector={stringValueSelector}
@@ -150,14 +119,14 @@ function EnablingApproaches(props: Props) {
                 </InputSection>
                 {value?.enable_approaches?.map((approach, index) => (
                     <ApproachesInput
-                        key={approach.client_id}
+                        approachTitle={eapApproachLabelMapping?.[approach.approach]}
+                        key={approach.approach}
                         index={index}
                         value={approach}
                         onChange={onApproachChange}
                         onRemove={onApproachRemove}
                         error={getErrorObject(error?.enable_approaches)}
                         disabled={disabled}
-                        titleMap={approachTitleMap}
                     />
                 ))}
             </ListView>
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
index 7967e58dc..a1244505d 100644
--- a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
@@ -12,7 +12,6 @@ import {
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
-    isDefined,
     isNotDefined,
     randomString,
 } from '@togglecorp/fujs';
@@ -37,7 +36,7 @@ type PrepositioningFormFields = NonNullable<PlannedOperationFormFields['preposit
 type ReadinessFormFields = NonNullable<PlannedOperationFormFields['readiness_activities']>[number];
 
 const defaultOperationValue: PlannedOperationFormFields = {
-    client_id: '-1',
+    sector: 101,
 };
 
 interface Props {
@@ -47,7 +46,7 @@ interface Props {
     onRemove: (index: number) => void;
     index: number;
     disabled?: boolean;
-    titleMap: Record<string, string> | undefined;
+    operationTitle?: React.ReactNode;
 }
 
 function OperationsBySectorInput(props: Props) {
@@ -58,19 +57,14 @@ function OperationsBySectorInput(props: Props) {
         index,
         onRemove,
         disabled,
-        titleMap,
+        operationTitle,
     } = props;
 
     const strings = useTranslation(i18n);
-
     const onFieldChange = useFormObject(index, onChange, defaultOperationValue);
 
-    const operationLabel = isDefined(value.title)
-        ? titleMap?.[value.title]
-        : undefined;
-
-    const error = (value && value.client_id && errorFromProps)
-        ? getErrorObject(errorFromProps?.[value.client_id])
+    const error = (value && value.sector && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.sector])
         : undefined;
 
     const {
@@ -145,7 +139,7 @@ function OperationsBySectorInput(props: Props) {
 
     return (
         <ExpandableContainer
-            heading={operationLabel ?? '--'}
+            heading={operationTitle ?? '--'}
             headerActions={(
                 <Button
                     name={index}
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx b/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
index c6633de97..029c1bb20 100644
--- a/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
@@ -10,10 +10,7 @@ import {
 } 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 { listToMap } from '@togglecorp/fujs';
 import {
     type EntriesAsList,
     type Error,
@@ -23,16 +20,16 @@ import {
 
 import NonFieldError from '#components/NonFieldError';
 import TabPage from '#components/TabPage';
+import { type components } from '#generated/types';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
-import { type GoApiResponse } from '#utils/restRequest';
 
 import { type PartialSimplifiedEapType } from '../schema';
 import OperationInput from './OperationsInput';
 
 import i18n from './i18n.json';
 
-type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
-type EapSectorOption = NonNullable<GlobalEnumsResponse['eap_sector']>[number];
+type EapSector = components['schemas']['EapSectorEnumKey'];
+type EapSectorOption = components['schemas']['EapSectorEnum'];
 
 type PlannedOperationFormFields = NonNullable<PartialSimplifiedEapType['planned_operations']>[number];
 function sectorKeySelector(option: EapSectorOption) {
@@ -56,14 +53,15 @@ function PlannedOperations(props: Props) {
 
     const error = getErrorObject(formError);
     const strings = useTranslation(i18n);
+    const { eap_sector: eapSectorOptions } = useGlobalEnums();
 
-    const {
-        eap_sector: eapSectorOptions,
-    } = useGlobalEnums();
-
-    const selectedOperations = (value.planned_operations ?? [])
-        .map((op) => op.title)
-        .filter((key): key is EapSectorOption['key'] => key !== undefined);
+    const eapSectorLabelMapping = useMemo(() => (
+        listToMap(
+            eapSectorOptions,
+            ({ key }) => key,
+            ({ value: label }) => label,
+        )
+    ), [eapSectorOptions]);
 
     const {
         setValue: onOperationChange,
@@ -73,51 +71,28 @@ function PlannedOperations(props: Props) {
         setFieldValue,
     );
 
-    const handleOperationSelect = useCallback((selectedKeys: EapSectorOption['key'][]) => {
-        const previousKeys = (value.planned_operations ?? [])
-            .map((op) => op.title)
-            .filter((key): key is EapSectorOption['key'] => key !== undefined);
+    const handleOperationChecklistChange = useCallback((sectors: EapSector[] | undefined) => {
+        setFieldValue((previousValue: PlannedOperationFormFields[] | undefined) => {
+            const previousValueMapping = listToMap(
+                previousValue,
+                ({ sector }) => sector,
+            );
 
-        const addedKeys = selectedKeys.filter((key) => !previousKeys.includes(key));
-        const removedKeys = previousKeys.filter((key) => !selectedKeys.includes(key));
+            return sectors?.map((sector) => {
+                const prevSectorValue = previousValueMapping?.[sector];
 
-        if (addedKeys.length > 0) {
-            const newOperations = addedKeys.map((key) => ({
-                client_id: randomString(),
-                title: key,
-            }));
+                if (prevSectorValue) {
+                    return prevSectorValue;
+                }
 
-            setFieldValue(
-                (oldValue: PlannedOperationFormFields[] = []) => [...oldValue, ...newOperations],
-                'planned_operations',
-            );
-        }
+                return {
+                    sector,
+                } satisfies PlannedOperationFormFields;
+            });
+        }, 'planned_operations');
+    }, [setFieldValue]);
 
-        removedKeys.forEach((key) => {
-            const index = value.planned_operations?.findIndex(
-                (op) => op.title === key,
-            );
-
-            if (index !== undefined && index >= 0) {
-                onOperationRemove(index);
-            }
-        });
-    }, [
-        value.planned_operations,
-        setFieldValue,
-        onOperationRemove,
-    ]);
-
-    const eapSectorTitleMap = useMemo(
-        () => (
-            listToMap(
-                eapSectorOptions,
-                (sector) => sector.key,
-                (sector) => sector.value,
-            )
-        ),
-        [eapSectorOptions],
-    );
+    const selectedSectors = value?.planned_operations?.map(({ sector }) => sector);
 
     return (
         <TabPage>
@@ -136,8 +111,8 @@ function PlannedOperations(props: Props) {
                         <Checklist
                             name={undefined}
                             options={eapSectorOptions}
-                            value={selectedOperations}
-                            onChange={handleOperationSelect}
+                            value={selectedSectors}
+                            onChange={handleOperationChecklistChange}
                             disabled={disabled}
                             keySelector={sectorKeySelector}
                             labelSelector={stringValueSelector}
@@ -148,14 +123,14 @@ function PlannedOperations(props: Props) {
                     </InputSection>
                     {value?.planned_operations?.map((operation, index) => (
                         <OperationInput
-                            key={operation.client_id}
+                            operationTitle={eapSectorLabelMapping?.[operation.sector]}
+                            key={operation.sector}
                             index={index}
                             value={operation}
                             onChange={onOperationChange}
                             onRemove={onOperationRemove}
                             error={getErrorObject(error?.planned_operations)}
                             disabled={disabled}
-                            titleMap={eapSectorTitleMap}
                         />
                     ))}
                 </ListView>
diff --git a/app/src/views/SimplifiedEapForm/common.tsx b/app/src/views/SimplifiedEapForm/common.tsx
index eb9dce9d8..39413c4f8 100644
--- a/app/src/views/SimplifiedEapForm/common.tsx
+++ b/app/src/views/SimplifiedEapForm/common.tsx
@@ -9,7 +9,7 @@ import { type PartialSimplifiedEapType } from './schema';
 
 type TabKeys = 'overview' | 'riskAnalysis' | 'earlyAction' | 'plannedOperations' | 'approaches' | 'deliverBudget';
 
-export const overviewTabFields: (keyof PartialSimplifiedEapType)[] = [
+const overviewTabFields: (keyof PartialSimplifiedEapType)[] = [
     'cover_image_file',
     'seap_timeframe',
     'national_society_contact_name',
@@ -49,7 +49,7 @@ export const overviewTabFields: (keyof PartialSimplifiedEapType)[] = [
     'ifrc_global_ops_coordinator_phone_number',
 ] satisfies (keyof PartialSimplifiedEapType)[];
 
-export const riskAnalysisTabFields: (keyof PartialSimplifiedEapType)[] = [
+const riskAnalysisTabFields: (keyof PartialSimplifiedEapType)[] = [
     'prioritized_hazard_and_impact',
     'hazard_impact_images',
     'risks_selected_protocols',
@@ -58,7 +58,7 @@ export const riskAnalysisTabFields: (keyof PartialSimplifiedEapType)[] = [
     'selected_early_actions_images',
 ] satisfies (keyof PartialSimplifiedEapType)[];
 
-export const earlyActionTabFields: (keyof PartialSimplifiedEapType)[] = [
+const earlyActionTabFields: (keyof PartialSimplifiedEapType)[] = [
     'overall_objective_intervention',
     'potential_geographical_high_risk_areas',
     'admin2',
@@ -74,15 +74,15 @@ export const earlyActionTabFields: (keyof PartialSimplifiedEapType)[] = [
     'next_step_towards_full_eap',
 ] satisfies (keyof PartialSimplifiedEapType)[];
 
-export const plannedOperationsTabFields: (keyof PartialSimplifiedEapType)[] = [
+const plannedOperationsTabFields: (keyof PartialSimplifiedEapType)[] = [
     'planned_operations',
 ] satisfies (keyof PartialSimplifiedEapType)[];
 
-export const approachesTabFields: (keyof PartialSimplifiedEapType)[] = [
+const approachesTabFields: (keyof PartialSimplifiedEapType)[] = [
     'enable_approaches',
 ] satisfies (keyof PartialSimplifiedEapType)[];
 
-export const deliverBudgetTabFields: (keyof PartialSimplifiedEapType)[] = [
+const deliverBudgetTabFields: (keyof PartialSimplifiedEapType)[] = [
     'early_action_capability',
     'rcrc_movement_involvement',
     'total_budget',
@@ -101,8 +101,11 @@ const tabToFieldsMap = {
     deliverBudget: deliverBudgetTabFields,
 };
 
-export function checkTabErrors(error: Error<PartialSimplifiedEapType>
-    | undefined, tabKey: TabKeys) {
+// eslint-disable-next-line import/prefer-default-export
+export function checkTabErrors(
+    error: Error<PartialSimplifiedEapType> | undefined,
+    tabKey: TabKeys,
+) {
     if (isNotDefined(analyzeErrors(error))) {
         return false;
     }
diff --git a/app/src/views/SimplifiedEapForm/index.tsx b/app/src/views/SimplifiedEapForm/index.tsx
index e2685a936..f22de7805 100644
--- a/app/src/views/SimplifiedEapForm/index.tsx
+++ b/app/src/views/SimplifiedEapForm/index.tsx
@@ -190,7 +190,7 @@ export function Component() {
     });
 
     // FIXME: get the latest simplified instead of using 0
-    const latestSimplifiedEapId = eapDetailResponse?.simplified_eap_details[0]?.id;
+    const latestSimplifiedEapId = eapDetailResponse?.simplified_eap_details?.[0]?.id;
 
     // FIXME: handle errors
     useRequest({
@@ -274,7 +274,7 @@ export function Component() {
                     match = matchArray(locations, ['planned_operations', NUM]);
                     if (isDefined(match)) {
                         const [poIndex] = match;
-                        return value?.planned_operations?.[poIndex!]?.client_id;
+                        return value?.planned_operations?.[poIndex!]?.sector;
                     }
                     match = matchArray(locations, ['enable_approaches', NUM, 'early_action_activities', NUM]);
                     if (isDefined(match)) {
@@ -297,7 +297,7 @@ export function Component() {
                     match = matchArray(locations, ['enable_approaches', NUM]);
                     if (isDefined(match)) {
                         const [eaIndex] = match;
-                        return value?.enable_approaches?.[eaIndex!]?.client_id;
+                        return value?.enable_approaches?.[eaIndex!]?.approach;
                     }
                     return undefined;
                 },
@@ -338,7 +338,7 @@ export function Component() {
                 },
             } = err;
 
-            setError(transformObjectError(
+            const transformedError = transformObjectError(
                 formErrors,
                 (locations) => {
                     let match = matchArray(locations, ['cover_image_file']);
@@ -388,7 +388,7 @@ export function Component() {
                     match = matchArray(locations, ['planned_operations', NUM]);
                     if (isDefined(match)) {
                         const [poIndex] = match;
-                        return value?.planned_operations?.[poIndex!]?.client_id;
+                        return value?.planned_operations?.[poIndex!]?.sector;
                     }
 
                     match = matchArray(locations, ['enable_approaches', NUM, 'early_action_activities', NUM]);
@@ -416,11 +416,13 @@ export function Component() {
                     if (isDefined(match)) {
                         const [eaIndex] = match;
                         return value?.enable_approaches
-                            ?.[eaIndex!]?.client_id;
+                            ?.[eaIndex!]?.approach;
                     }
                     return undefined;
                 },
-            ));
+            );
+
+            setError(transformedError);
 
             alert.show(
                 strings.eapSimplifiedFailure,
diff --git a/app/src/views/SimplifiedEapForm/schema.ts b/app/src/views/SimplifiedEapForm/schema.ts
index abbe9151e..4b46d8b3f 100644
--- a/app/src/views/SimplifiedEapForm/schema.ts
+++ b/app/src/views/SimplifiedEapForm/schema.ts
@@ -5,6 +5,7 @@ import {
     type LiteralSchema,
     type ObjectSchema,
     type PartialForm,
+    type PurgeNull,
     undefinedValue,
 } from '@togglecorp/toggle-form';
 
@@ -23,7 +24,7 @@ function maxOperationalTimeframeCondition(value: number | undefined) {
         : undefined;
 }
 
-type EapSimplifiedRequestBody = GoApiBody<'/api/v2/simplified-eap/', 'POST'>;
+type EapSimplifiedRequestBody = PurgeNull<GoApiBody<'/api/v2/simplified-eap/', 'POST'>>;
 
 type EnableApproachesResponse = NonNullable<EapSimplifiedRequestBody['enable_approaches']>[number];
 type EarlyActionApproachesResponse = NonNullable<EnableApproachesResponse['early_action_activities']>[number];
@@ -68,7 +69,7 @@ type EnableApproachesResponseFormFields = (
         ReadinessApproachesResponse,
         ReadinessApproachesFormFields
     >
-) & { client_id: string, title: number | undefined }
+);
 
 type OperationsResponseFormFields = (
     DeepReplace<
@@ -84,7 +85,7 @@ type OperationsResponseFormFields = (
         ReadinessResponse,
         ReadinessFormFields
     >
-) & { client_id: string, title: number | undefined }
+);
 
 type FormFields = (
     DeepReplace<
@@ -114,7 +115,7 @@ type FormFields = (
     >
 );
 
-export type PartialSimplifiedEapType = PartialForm<FormFields, 'client_id'>;
+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']>;
@@ -143,7 +144,7 @@ export type ValidContactFieldPrefixes = ExtractContactPrefix<FieldKeys>;
 
 function getContactSchema<KEY extends ValidContactFieldPrefixes>(key: KEY) {
     type ContactSchema = {
-        [K in `${KEY}_${ContactFieldSuffix}`]: LiteralSchema<string | undefined | null, PartialSimplifiedEapType>
+        [K in `${KEY}_${ContactFieldSuffix}`]: LiteralSchema<string | undefined, PartialSimplifiedEapType>
     }
 
     return {
@@ -242,12 +243,10 @@ export const formSchema: FormSchema = {
         // Planned Operations
 
         planned_operations: {
-            keySelector: (item) => item.client_id,
+            keySelector: (item) => item.sector,
             member: () => ({
                 fields: (): PlannedOperationalFields => ({
-                    client_id: {},
                     id: { defaultValue: undefinedValue },
-                    title: {},
                     sector: {},
                     budget_per_sector: {},
                     ap_code: {},
@@ -271,12 +270,10 @@ export const formSchema: FormSchema = {
         // Enabling Approaches
 
         enable_approaches: {
-            keySelector: (item) => item.client_id,
+            keySelector: (item) => item.approach,
             member: () => ({
                 fields: (): EnableApproachesFields => ({
-                    client_id: {},
                     id: { defaultValue: undefinedValue },
-                    title: {},
                     approach: {},
                     budget_per_approach: {},
                     ap_code: {},
diff --git a/knip.jsonc b/knip.jsonc
index e1f6617ab..8b249e1a0 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/TabLayout/index.tsx b/packages/ui/src/components/TabLayout/index.tsx
index 6ab2dfdb3..85374a4bc 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 2892c1264..4ed14f25c 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);
     }

From c2ecdb8ca9f129ecc056f852b764f4164dc7388a Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Thu, 11 Dec 2025 23:07:00 +0545
Subject: [PATCH 14/19] feat(eap): add status transition

---
 .../PrintableContainer/styles.module.css      |   3 +-
 .../printable/PrintablePage/index.tsx         |  58 ++++++-
 app/src/hooks/useWaitForImages.ts             |  72 ++++++++
 .../AccountMyFormsEap/EapStatus/index.tsx     | 154 ++++++++++++++++++
 app/src/views/AccountMyFormsEap/index.tsx     |  12 +-
 app/src/views/EapRegistration/index.tsx       |  51 +++---
 .../views/EapRegistration/styles.module.css   |   5 -
 app/src/views/SimplifiedEapExport/index.tsx   |  19 ++-
 8 files changed, 336 insertions(+), 38 deletions(-)
 create mode 100644 app/src/hooks/useWaitForImages.ts
 create mode 100644 app/src/views/AccountMyFormsEap/EapStatus/index.tsx
 delete mode 100644 app/src/views/EapRegistration/styles.module.css

diff --git a/app/src/components/printable/PrintableContainer/styles.module.css b/app/src/components/printable/PrintableContainer/styles.module.css
index 1d23b6813..904bf35cd 100644
--- a/app/src/components/printable/PrintableContainer/styles.module.css
+++ b/app/src/components/printable/PrintableContainer/styles.module.css
@@ -7,7 +7,8 @@
     }
 }
 
-.heading:has(+ :empty) {
+.heading:has(+ :empty),
+.heading:has(+ .heading + :empty) {
     display: none;
 }
 
diff --git a/app/src/components/printable/PrintablePage/index.tsx b/app/src/components/printable/PrintablePage/index.tsx
index 62d152adb..66c958345 100644
--- a/app/src/components/printable/PrintablePage/index.tsx
+++ b/app/src/components/printable/PrintablePage/index.tsx
@@ -1,4 +1,8 @@
-import React from 'react';
+import React, {
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
 import { Heading } from '@ifrc-go/ui/printable';
 import { _cs } from '@togglecorp/fujs';
 
@@ -11,6 +15,7 @@ interface Props {
     children: React.ReactNode;
     heading: React.ReactNode;
     description: React.ReactNode;
+    dataReady?: boolean;
 }
 
 function PrintablePage(props: Props) {
@@ -19,10 +24,58 @@ function PrintablePage(props: Props) {
         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)}>
+        <main
+            className={_cs(styles.printablePage, className)}
+            ref={mainRef}
+        >
             <div className={styles.headerSection}>
                 <img
                     className={styles.ifrcLogo}
@@ -40,6 +93,7 @@ function PrintablePage(props: Props) {
                 </div>
             </div>
             {children}
+            {previewReady && <div id="pdf-preview-ready" />}
         </main>
     );
 }
diff --git a/app/src/hooks/useWaitForImages.ts b/app/src/hooks/useWaitForImages.ts
new file mode 100644
index 000000000..6533a51bf
--- /dev/null
+++ b/app/src/hooks/useWaitForImages.ts
@@ -0,0 +1,72 @@
+import {
+    useEffect,
+    useState,
+} from 'react';
+
+function useWaitForImages() {
+    const [imagesReady, setImagesReady] = useState(false);
+
+    useEffect(() => {
+        let isCancelled = false;
+
+        async function waitForImages() {
+            const images = Array.from(document.querySelectorAll('img'));
+
+            if (images.length === 0) {
+                if (!isCancelled) {
+                    setImagesReady(true);
+                }
+                return;
+            }
+
+            const listeners: Array<{
+                img: HTMLImageElement;
+                handler: () => void;
+            }> = [];
+
+            const promises = images.map((image) => {
+                if (image.complete) {
+                    // Already loaded, nothing to wait for
+                    return undefined;
+                }
+
+                return new Promise<void>((resolve) => {
+                    const handler = () => {
+                        image.removeEventListener('load', handler);
+                        image.removeEventListener('error', handler);
+                        resolve();
+                    };
+
+                    image.addEventListener('load', handler);
+                    image.addEventListener('error', handler); // treat error as "done"
+
+                    listeners.push({ img: image, handler });
+                });
+            }).filter((p): p is Promise<void> => p !== undefined);
+
+            if (promises.length === 0) {
+                if (!isCancelled) {
+                    setImagesReady(true);
+                }
+                return;
+            }
+
+            await Promise.all(promises);
+
+            if (!isCancelled) {
+                setImagesReady(true);
+            }
+        }
+
+        waitForImages();
+
+        return () => {
+            // avoid setting state after unmount
+            isCancelled = true;
+        };
+    }, []);
+
+    return imagesReady;
+}
+
+export default useWaitForImages;
diff --git a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
new file mode 100644
index 000000000..8e4a945f5
--- /dev/null
+++ b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
@@ -0,0 +1,154 @@
+import {
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+import { ArrowRightFillIcon } from '@ifrc-go/icons';
+import {
+    Button,
+    DropdownMenu,
+    ListView,
+    Modal,
+} 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 {
+    type GoApiBody,
+    useLazyRequest,
+} from '#utils/restRequest';
+
+type EapStatus = components['schemas']['EapEapStatusEnumKey'];
+type EapStatusBody = GoApiBody<'/api/v2/eap-registration/{id}/status/', 'POST'>;
+
+const EAP_STATUS_UNDER_DEVELOPMENT = 10 satisfies EapStatus;
+const EAP_STATUS_UNDER_REVIEW = 20 satisfies EapStatus;
+const EAP_STATUS_NS_ADDRESSING_COMMENTS = 30 satisfies EapStatus;
+const EAP_STATUS_TECHNICALLY_VALIDATED = 40 satisfies EapStatus;
+const EAP_STATUS_APPROVED = 50 satisfies EapStatus;
+const EAP_STATUS_PFA_SIGNED = 60 satisfies EapStatus;
+const EAP_STATUS_ACTIVATED = 70 satisfies EapStatus;
+
+const validStatusTransition: Record<EapStatus, EapStatus[]> = {
+    [EAP_STATUS_UNDER_DEVELOPMENT]: [EAP_STATUS_UNDER_REVIEW],
+    [EAP_STATUS_UNDER_REVIEW]: [EAP_STATUS_NS_ADDRESSING_COMMENTS],
+    [EAP_STATUS_NS_ADDRESSING_COMMENTS]: [
+        EAP_STATUS_UNDER_REVIEW,
+        EAP_STATUS_TECHNICALLY_VALIDATED,
+    ],
+    [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 { eap_eap_status: eapStatusOptions } = useGlobalEnums();
+    const [newStatus, setNewStatus] = useState<EapStatus | 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();
+            }
+            // TODO alert on status update
+        },
+    });
+
+    // FIXME: fix typings in the server
+    const requestBody = useMemo<EapStatusBody>(() => ({
+        status: newStatus,
+        review_checklist_file: undefined,
+    }), [newStatus]);
+
+    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>
+                    </ListView>
+                </Modal>
+            )}
+        </>
+    );
+}
+
+export default EapStatus;
diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
index c662013f5..1f9d0c66b 100644
--- a/app/src/views/AccountMyFormsEap/index.tsx
+++ b/app/src/views/AccountMyFormsEap/index.tsx
@@ -32,6 +32,7 @@ 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';
 
@@ -65,6 +66,7 @@ export function Component() {
     const {
         response: eapListResponse,
         pending: eapListPending,
+        retrigger: reloadEapList,
     } = useRequest({
         url: '/api/v2/eap-registration/',
         preserveResponse: true,
@@ -113,10 +115,15 @@ export function Component() {
                 strings.eapType,
                 (item) => item.eap_type_display,
             ),
-            createStringColumn<EapListItem, number>(
+            createElementColumn<EapListItem, number, EapStatusProps>(
                 'status_display',
                 strings.eapStatus,
-                (item) => item.status_display,
+                EapStatus,
+                (key, row) => ({
+                    eapId: key,
+                    status: row.status,
+                    onStatusUpdate: reloadEapList,
+                }),
             ),
             createExpandColumn<EapListItem, Key>(
                 'expandRow',
@@ -134,6 +141,7 @@ export function Component() {
             strings.eapStatus,
             expandedRow,
             handleExpandClick,
+            reloadEapList,
         ],
     );
 
diff --git a/app/src/views/EapRegistration/index.tsx b/app/src/views/EapRegistration/index.tsx
index 82c44ec6a..698e6a4c9 100644
--- a/app/src/views/EapRegistration/index.tsx
+++ b/app/src/views/EapRegistration/index.tsx
@@ -30,6 +30,7 @@ import {
 import {
     createSubmitHandler,
     getErrorObject,
+    getErrorString,
     useForm,
 } from '@togglecorp/toggle-form';
 
@@ -57,7 +58,6 @@ import {
 } from './schema';
 
 import i18n from './i18n.json';
-import styles from './styles.module.css';
 
 type EapRegisterRequestBody = GoApiBody<'/api/v2/eap-registration/', 'POST'>;
 type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
@@ -252,6 +252,11 @@ export function Component() {
 
     const disabled = eapRegistrationPending || fetchingEap || updateEapRegistrationPending;
 
+    const handleNationalSocietyInputChange = useCallback((newValue: number | undefined) => {
+        setFieldValue(newValue, 'national_society');
+        setFieldValue(newValue, 'country');
+    }, [setFieldValue]);
+
     if (isDefined(eapError)) {
         return (
             <FormFailedToLoadMessage
@@ -287,21 +292,18 @@ export function Component() {
             elementRef={formContentRef}
             withBackgroundColorInMainSection
         >
-            <Container
-                heading={strings.eapApplicationDetails}
-            >
-                <ListView
-                    layout="block"
-                >
+            <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={setFieldValue}
+                            onChange={handleNationalSocietyInputChange}
                             value={value?.national_society}
                             disabled={disabled}
                             readOnly={isReadOnly}
@@ -311,6 +313,7 @@ export function Component() {
                         title={strings.eapCountry}
                         description={strings.eapCountryDescription}
                         withAsteriskOnTitle
+                        numPreferredColumns={2}
                     >
                         <CountrySelectInput
                             error={error?.country}
@@ -325,6 +328,7 @@ export function Component() {
                         title={strings.eapDisasterType}
                         description={strings.eapDisasterTypeDescription}
                         withAsteriskOnTitle
+                        numPreferredColumns={2}
                     >
                         <DisasterTypeSelectInput
                             name="disaster_type"
@@ -354,7 +358,7 @@ export function Component() {
                             />
                             <Radio
                                 name="eap_type"
-                                value={value?.eap_type === null}
+                                value={isNotDefined(value?.eap_type)}
                                 onClick={handleEapTypeClick}
                                 readOnly={isReadOnly}
                             >
@@ -371,13 +375,13 @@ export function Component() {
                         <DateInput
                             name="expected_submission_time"
                             onChange={setFieldValue}
-                            value={value?.expected_submission_time ?? undefined}
+                            value={value?.expected_submission_time}
                             error={error?.expected_submission_time}
                             readOnly={isReadOnly}
                         />
                         <Radio
                             name="expected_submission_time"
-                            value={value?.expected_submission_time === null}
+                            value={isNotDefined(value?.expected_submission_time)}
                             onClick={handleSubmissionTimeClick}
                             readOnly={isReadOnly}
                         >
@@ -392,6 +396,7 @@ export function Component() {
                         <NationalSocietyMultiSelectInput
                             name="partners"
                             value={value.partners}
+                            error={getErrorString(error?.partners)}
                             onChange={setFieldValue}
                             disabled={disabled}
                             readOnly={isReadOnly}
@@ -534,19 +539,17 @@ export function Component() {
                     </InputSection>
                 </ListView>
             </Container>
-            <div className={styles.footer}>
-                {!isReadOnly && (
-                    <ConfirmButton
-                        name={undefined}
-                        confirmHeading={strings.eapDevelopmentRegistrationHeading}
-                        confirmMessage={strings.eapDevelopmentRegistrationDescription}
-                        onConfirm={handleEapRegistration}
-                        disabled={disabled}
-                    >
-                        {strings.eapSubmitButton}
-                    </ConfirmButton>
-                )}
-            </div>
+            <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/styles.module.css b/app/src/views/EapRegistration/styles.module.css
deleted file mode 100644
index fdeaccbca..000000000
--- a/app/src/views/EapRegistration/styles.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
diff --git a/app/src/views/SimplifiedEapExport/index.tsx b/app/src/views/SimplifiedEapExport/index.tsx
index 803e9735b..a3c939673 100644
--- a/app/src/views/SimplifiedEapExport/index.tsx
+++ b/app/src/views/SimplifiedEapExport/index.tsx
@@ -48,7 +48,10 @@ export function Component() {
 
     const strings = useTranslation(i18n);
 
-    const { response: eapRegistrationResponse } = useRequest({
+    const {
+        pending: eapRegistrationPending,
+        response: eapRegistrationResponse,
+    } = useRequest({
         skip: isFalsyString(eapId),
         url: '/api/v2/eap-registration/{id}/',
         pathVariables: isTruthyString(eapId) ? {
@@ -58,7 +61,10 @@ export function Component() {
 
     const latestSimplifiedEap = eapRegistrationResponse?.simplified_eap_details[0];
 
-    const { response: simplifiedEapResponse } = useRequest({
+    const {
+        pending: simplifiedEapPending,
+        response: simplifiedEapResponse,
+    } = useRequest({
         skip: isNotDefined(latestSimplifiedEap?.id),
         url: '/api/v2/simplified-eap/{id}/',
         pathVariables: isDefined(latestSimplifiedEap?.id) ? {
@@ -125,6 +131,8 @@ export function Component() {
         disaster_type_details?.name,
     ].filter(isTruthyString).join(' | ');
 
+    const previewReady = !eapRegistrationPending && !simplifiedEapPending;
+
     return (
         <PrintablePage
             heading={(
@@ -135,6 +143,7 @@ export function Component() {
                 </>
             )}
             description={eapTitle ?? '--'}
+            dataReady={previewReady}
         >
             {isDefined(cover_image_file?.file) && (
                 <PrintableContainer>
@@ -149,7 +158,7 @@ export function Component() {
                 <div className={styles.metaItems}>
                     <PrintableDataDisplay
                         label={strings.sEapNoLabel}
-                        value="sEAP2024NP01"
+                        value="--"
                         strongValue
                         variant="block"
                         withPadding
@@ -521,7 +530,9 @@ export function Component() {
                 heading={strings.budgetHeading}
                 headingLevel={2}
             >
-                Budget details
+                <DescriptionText>
+                    Budget details
+                </DescriptionText>
             </PrintableContainer>
             <PrintableContainer
                 heading={strings.contactInformationHeading}

From 6f16bd3178e046968b1de023721026856a5ada9f Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Thu, 11 Dec 2025 23:31:06 +0545
Subject: [PATCH 15/19] feat(eap): add eap export modal

---
 .../domain/EapExportModal/i18n.json           |  13 ++
 .../domain/EapExportModal/index.tsx           | 191 ++++++++++++++++++
 .../domain/EapExportModal/styles.module.css   |   5 +
 app/src/hooks/useWaitForImages.ts             |  72 -------
 .../AccountMyFormsEap/EapStatus/index.tsx     |   2 +-
 .../EapTableActions/index.tsx                 |  45 ++++-
 6 files changed, 249 insertions(+), 79 deletions(-)
 create mode 100644 app/src/components/domain/EapExportModal/i18n.json
 create mode 100644 app/src/components/domain/EapExportModal/index.tsx
 create mode 100644 app/src/components/domain/EapExportModal/styles.module.css
 delete mode 100644 app/src/hooks/useWaitForImages.ts

diff --git a/app/src/components/domain/EapExportModal/i18n.json b/app/src/components/domain/EapExportModal/i18n.json
new file mode 100644
index 000000000..19fee027c
--- /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 000000000..68a2031a9
--- /dev/null
+++ b/app/src/components/domain/EapExportModal/index.tsx
@@ -0,0 +1,191 @@
+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;
+    onClose: () => void;
+}
+
+function EapExportModal(props: Props) {
+    const {
+        eapId,
+        eapType,
+        onClose,
+    } = 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-eap' : 'full-eap',
+            selector: '#pdf-preview-ready',
+            is_pga: false,
+            per_country: undefined,
+        }),
+        [eapId, eapType],
+    );
+
+    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 000000000..2de1f5fc8
--- /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/hooks/useWaitForImages.ts b/app/src/hooks/useWaitForImages.ts
deleted file mode 100644
index 6533a51bf..000000000
--- a/app/src/hooks/useWaitForImages.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
-    useEffect,
-    useState,
-} from 'react';
-
-function useWaitForImages() {
-    const [imagesReady, setImagesReady] = useState(false);
-
-    useEffect(() => {
-        let isCancelled = false;
-
-        async function waitForImages() {
-            const images = Array.from(document.querySelectorAll('img'));
-
-            if (images.length === 0) {
-                if (!isCancelled) {
-                    setImagesReady(true);
-                }
-                return;
-            }
-
-            const listeners: Array<{
-                img: HTMLImageElement;
-                handler: () => void;
-            }> = [];
-
-            const promises = images.map((image) => {
-                if (image.complete) {
-                    // Already loaded, nothing to wait for
-                    return undefined;
-                }
-
-                return new Promise<void>((resolve) => {
-                    const handler = () => {
-                        image.removeEventListener('load', handler);
-                        image.removeEventListener('error', handler);
-                        resolve();
-                    };
-
-                    image.addEventListener('load', handler);
-                    image.addEventListener('error', handler); // treat error as "done"
-
-                    listeners.push({ img: image, handler });
-                });
-            }).filter((p): p is Promise<void> => p !== undefined);
-
-            if (promises.length === 0) {
-                if (!isCancelled) {
-                    setImagesReady(true);
-                }
-                return;
-            }
-
-            await Promise.all(promises);
-
-            if (!isCancelled) {
-                setImagesReady(true);
-            }
-        }
-
-        waitForImages();
-
-        return () => {
-            // avoid setting state after unmount
-            isCancelled = true;
-        };
-    }, []);
-
-    return imagesReady;
-}
-
-export default useWaitForImages;
diff --git a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
index 8e4a945f5..ec9697996 100644
--- a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
@@ -92,7 +92,7 @@ function EapStatus(props: Props) {
     const requestBody = useMemo<EapStatusBody>(() => ({
         status: newStatus,
         review_checklist_file: undefined,
-    }), [newStatus]);
+    } as EapStatusBody), [newStatus]);
 
     const handleStatusUpdateCancel = useCallback(() => {
         setNewStatus(undefined);
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
index acecbac94..02a75c347 100644
--- a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
@@ -1,22 +1,32 @@
-import { TableActions } from '@ifrc-go/ui';
-import { useTranslation } from '@ifrc-go/ui/hooks';
-import { isNotDefined } from '@togglecorp/fujs';
+import {
+    Button,
+    TableActions,
+} from '@ifrc-go/ui';
+import {
+    useBooleanState,
+    useTranslation,
+} from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
+import EapExportModal from '#components/domain/EapExportModal';
 import DropdownMenuItem from '#components/DropdownMenuItem';
 import Link from '#components/Link';
+import { type components } from '#generated/types';
 import {
     EAP_TYPE_FULL,
     EAP_TYPE_SIMPLIFIED,
 } from '#utils/constants';
-import { type GoApiResponse } from '#utils/restRequest';
 
 import i18n from './i18n.json';
 
-type EapResponse = GoApiResponse<'/api/v2/eap-registration/{id}/'>;
+type EapType = components['schemas']['EapEapTypeEnumKey'];
 
 export interface Props {
     eapId: number;
-    eapType: EapResponse['eap_type'];
+    eapType: EapType | null | undefined;
 }
 
 function EapTableActions(props: Props) {
@@ -26,6 +36,13 @@ function EapTableActions(props: Props) {
     } = props;
 
     const strings = useTranslation(i18n);
+    const [
+        showExportModal,
+        {
+            setTrue: setShowExportModalTrue,
+            setFalse: setShowExportModalFalse,
+        },
+    ] = useBooleanState(false);
 
     return (
         <TableActions
@@ -92,6 +109,22 @@ function EapTableActions(props: Props) {
                     {strings.eapEditSimplifiedLink}
                 </Link>
             )}
+            {eapType === EAP_TYPE_SIMPLIFIED && (
+                <Button
+                    name={undefined}
+                    onClick={setShowExportModalTrue}
+                    // FIXME: use strings
+                >
+                    Export
+                </Button>
+            )}
+            {showExportModal && isDefined(eapType) && (
+                <EapExportModal
+                    eapId={eapId}
+                    eapType={eapType}
+                    onClose={setShowExportModalFalse}
+                />
+            )}
         </TableActions>
     );
 }

From 012942a5733cb850116af773cc2fbde666cba577 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Fri, 12 Dec 2025 14:37:03 +0545
Subject: [PATCH 16/19] feat(eap): add expansion columns in eap table

---
 .../domain/EapExportModal/index.tsx           |   5 +-
 app/src/utils/constants.ts                    |  11 ++
 .../AccountMyFormsEap/EapStatus/index.tsx     |  52 ++++--
 .../EapTableActions/index.tsx                 | 109 ++++++------
 app/src/views/AccountMyFormsEap/index.tsx     | 161 +++++++++++++++---
 app/src/views/AccountMyFormsEap/utils.ts      |  34 ++++
 app/src/views/SimplifiedEapExport/index.tsx   |   8 +-
 app/src/views/SimplifiedEapForm/index.tsx     |   7 +-
 .../ExpansionIndicator/index.tsx              |   3 +
 .../ExpansionIndicator/styles.module.css      |  12 +-
 .../components/Table/ColumnShortcuts/index.ts |   6 +-
 .../Table/ColumnShortcuts/styles.module.css   |   1 +
 .../Table/TableBodyContent/index.tsx          |   3 +
 .../Table/TableBodyContent/styles.module.css  |   5 +
 14 files changed, 316 insertions(+), 101 deletions(-)
 create mode 100644 app/src/views/AccountMyFormsEap/utils.ts

diff --git a/app/src/components/domain/EapExportModal/index.tsx b/app/src/components/domain/EapExportModal/index.tsx
index 68a2031a9..7ebe2d17d 100644
--- a/app/src/components/domain/EapExportModal/index.tsx
+++ b/app/src/components/domain/EapExportModal/index.tsx
@@ -39,6 +39,7 @@ const EXPORT_STATUS_ERRORED = 2 satisfies ExportStatusEnum;
 interface Props {
     eapId: number;
     eapType: EapType;
+    version?: number;
     onClose: () => void;
 }
 
@@ -47,6 +48,7 @@ function EapExportModal(props: Props) {
         eapId,
         eapType,
         onClose,
+        version,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -61,8 +63,9 @@ function EapExportModal(props: Props) {
             selector: '#pdf-preview-ready',
             is_pga: false,
             per_country: undefined,
+            version,
         }),
-        [eapId, eapType],
+        [eapId, eapType, version],
     );
 
     const {
diff --git a/app/src/utils/constants.ts b/app/src/utils/constants.ts
index 562e7902c..a441b4ad4 100644
--- a/app/src/utils/constants.ts
+++ b/app/src/utils/constants.ts
@@ -212,3 +212,14 @@ 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
index ec9697996..ac8736e1e 100644
--- a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
@@ -7,8 +7,10 @@ import { ArrowRightFillIcon } from '@ifrc-go/icons';
 import {
     Button,
     DropdownMenu,
+    Label,
     ListView,
     Modal,
+    RawFileInput,
 } from '@ifrc-go/ui';
 import {
     isDefined,
@@ -18,25 +20,29 @@ import {
 import DropdownMenuItem from '#components/DropdownMenuItem';
 import { type components } from '#generated/types';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+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 EapStatus = components['schemas']['EapEapStatusEnumKey'];
 type EapStatusBody = GoApiBody<'/api/v2/eap-registration/{id}/status/', 'POST'>;
-
-const EAP_STATUS_UNDER_DEVELOPMENT = 10 satisfies EapStatus;
-const EAP_STATUS_UNDER_REVIEW = 20 satisfies EapStatus;
-const EAP_STATUS_NS_ADDRESSING_COMMENTS = 30 satisfies EapStatus;
-const EAP_STATUS_TECHNICALLY_VALIDATED = 40 satisfies EapStatus;
-const EAP_STATUS_APPROVED = 50 satisfies EapStatus;
-const EAP_STATUS_PFA_SIGNED = 60 satisfies EapStatus;
-const EAP_STATUS_ACTIVATED = 70 satisfies EapStatus;
+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_UNDER_REVIEW]: [
+        EAP_STATUS_NS_ADDRESSING_COMMENTS,
+        EAP_STATUS_TECHNICALLY_VALIDATED,
+    ],
     [EAP_STATUS_NS_ADDRESSING_COMMENTS]: [
         EAP_STATUS_UNDER_REVIEW,
         EAP_STATUS_TECHNICALLY_VALIDATED,
@@ -65,6 +71,7 @@ function EapStatus(props: Props) {
 
     const { eap_eap_status: eapStatusOptions } = useGlobalEnums();
     const [newStatus, setNewStatus] = useState<EapStatus | undefined>();
+    const [checklistFile, setChecklistFile] = useState<File | undefined>();
 
     const statusLabelMapping = listToMap(
         eapStatusOptions,
@@ -86,13 +93,17 @@ function EapStatus(props: Props) {
             }
             // TODO alert on status update
         },
+        formData: true,
     });
 
     // FIXME: fix typings in the server
-    const requestBody = useMemo<EapStatusBody>(() => ({
-        status: newStatus,
-        review_checklist_file: undefined,
-    } as EapStatusBody), [newStatus]);
+    const requestBody = useMemo<EapStatusBody>(
+        () => ({
+            status: newStatus,
+            review_checklist_file: checklistFile,
+        } as EapStatusBody),
+        [newStatus, checklistFile],
+    );
 
     const handleStatusUpdateCancel = useCallback(() => {
         setNewStatus(undefined);
@@ -144,6 +155,19 @@ function EapStatus(props: Props) {
                                 {statusLabelMapping?.[newStatus]}
                             </div>
                         </ListView>
+                        {newStatus === EAP_STATUS_NS_ADDRESSING_COMMENTS && (
+                            <>
+                                <RawFileInput
+                                    name="review_checklist_file"
+                                    onChange={setChecklistFile}
+                                >
+                                    Select review checklist file
+                                </RawFileInput>
+                                <Label>
+                                    {isDefined(checklistFile) && checklistFile.name}
+                                </Label>
+                            </>
+                        )}
                     </ListView>
                 </Modal>
             )}
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
index 02a75c347..a93dcb7c2 100644
--- a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
@@ -16,24 +16,28 @@ import DropdownMenuItem from '#components/DropdownMenuItem';
 import Link from '#components/Link';
 import { type components } from '#generated/types';
 import {
+    EAP_STATUS_UNDER_DEVELOPMENT,
+    EAP_STATUS_UNDER_REVIEW,
     EAP_TYPE_FULL,
     EAP_TYPE_SIMPLIFIED,
 } from '#utils/constants';
 
-import i18n from './i18n.json';
+import { type EapExpandedListItem } from '../utils';
 
-type EapType = components['schemas']['EapEapTypeEnumKey'];
+import i18n from './i18n.json';
 
 export interface Props {
-    eapId: number;
-    eapType: EapType | null | undefined;
+    expandedListItem: EapExpandedListItem;
 }
 
 function EapTableActions(props: Props) {
+    const { expandedListItem } = props;
+
     const {
-        eapId,
-        eapType,
-    } = props;
+        type,
+        eap,
+        details,
+    } = expandedListItem;
 
     const strings = useTranslation(i18n);
     const [
@@ -45,84 +49,85 @@ function EapTableActions(props: Props) {
     ] = useBooleanState(false);
 
     return (
-        <TableActions
-            extraActions={(
-                <>
-                    <DropdownMenuItem
-                        type="link"
-                        to="eapDevelopmentRegistrationForm"
-                        urlParams={{ eapId }}
-                        // FIXME: we should use the route for read-only view
-                        state={{ mode: 'view' }}
-                    >
-                        {strings.eapViewLabel}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                        type="link"
-                        to="eapDevelopmentRegistrationForm"
-                        urlParams={{ eapId }}
-                        // FIXME: we should use separate route for edit view
-                        state={{ mode: 'edit' }}
-                    >
-                        {strings.eapEditLabel}
-                    </DropdownMenuItem>
-                </>
+        <TableActions>
+            {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}
+                >
+                    Preview Export
+                </Link>
             )}
-        >
-            {isNotDefined(eapType) && (
+            {type === 'development' && eap.eap_type === EAP_TYPE_SIMPLIFIED && (
+                <Button
+                    name={undefined}
+                    onClick={setShowExportModalTrue}
+                    // FIXME: use strings
+                >
+                    Export
+                </Button>
+            )}
+            {type === 'development' && !details?.data.is_locked && eap.eap_type === EAP_TYPE_SIMPLIFIED && (
                 <Link
-                    to="fullEapForm"
-                    urlParams={{ eapId }}
+                    to="simplifiedEapForm"
+                    urlParams={{ eapId: eap.id }}
                     styleVariant="outline"
                     colorVariant="primary"
                 >
-                    {strings.eapStartFullLink}
+                    {strings.eapEditSimplifiedLink}
                 </Link>
             )}
-            {isNotDefined(eapType) && (
+            {type === 'development' && !details?.data.is_locked && eap.eap_type === EAP_TYPE_FULL && (
                 <Link
-                    to="simplifiedEapForm"
-                    urlParams={{ eapId }}
+                    to="fullEapForm"
+                    urlParams={{ eapId: eap.id }}
                     styleVariant="outline"
                     colorVariant="primary"
                 >
-                    {strings.eapStartSimplifiedLink}
+                    {strings.eapEditFullLink}
                 </Link>
             )}
-            {eapType === EAP_TYPE_FULL && (
+            {/*
+            {isNotDefined(eapType) && (
                 <Link
                     to="fullEapForm"
                     urlParams={{ eapId }}
                     styleVariant="outline"
                     colorVariant="primary"
                 >
-                    {strings.eapEditFullLink}
+                    {strings.eapStartFullLink}
                 </Link>
             )}
-            {eapType === EAP_TYPE_SIMPLIFIED && (
+            {isNotDefined(eapType) && (
                 <Link
                     to="simplifiedEapForm"
                     urlParams={{ eapId }}
                     styleVariant="outline"
                     colorVariant="primary"
                 >
-                    {strings.eapEditSimplifiedLink}
+                    {strings.eapStartSimplifiedLink}
                 </Link>
             )}
-            {eapType === EAP_TYPE_SIMPLIFIED && (
-                <Button
-                    name={undefined}
-                    onClick={setShowExportModalTrue}
-                    // FIXME: use strings
+            {eapType === EAP_TYPE_FULL && (
+                <Link
+                    to="fullEapForm"
+                    urlParams={{ eapId }}
+                    styleVariant="outline"
+                    colorVariant="primary"
                 >
-                    Export
-                </Button>
+                    {strings.eapEditFullLink}
+                </Link>
             )}
-            {showExportModal && isDefined(eapType) && (
+            */}
+            {showExportModal && isDefined(eap.eap_type) && (
                 <EapExportModal
-                    eapId={eapId}
-                    eapType={eapType}
+                    eapId={eap.id}
+                    eapType={eap.eap_type}
                     onClose={setShowExportModalFalse}
+                    version={details?.data.version}
                 />
             )}
         </TableActions>
diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
index 1f9d0c66b..954c2e4d4 100644
--- a/app/src/views/AccountMyFormsEap/index.tsx
+++ b/app/src/views/AccountMyFormsEap/index.tsx
@@ -20,27 +20,34 @@ import {
     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 {
-    type GoApiResponse,
-    useRequest,
-} from '#utils/restRequest';
+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 EapResponse = GoApiResponse<'/api/v2/eap-registration/'>;
-type EapListItem = NonNullable<EapResponse['results']>[number];
-
 type Key = EapListItem['id'];
 const ITEM_PER_PAGE = 6;
 
@@ -87,24 +94,28 @@ export function Component() {
         [],
     );
 
-    const baseColumns = useMemo(
+    const aggregatedColumns = useMemo(
         () => ([
+            createExpansionIndicatorColumn<EapListItem, number>(false),
             createDateColumn<EapListItem, number>(
                 'created_at',
                 strings.eapLastUpdated,
-                (item) => item.created_at,
+                (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}`;
@@ -145,27 +156,125 @@ export function Component() {
         ],
     );
 
+    const eapExpandedItems = useMemo(() => (
+        listToMap(
+            eapListResponse?.results,
+            (eapListItem) => eapListItem.id,
+            (eapListItem) => {
+                const {
+                    simplified_eap_details,
+                    full_eap_details,
+                    modified_at,
+                    eap_type,
+                    status,
+                } = eapListItem;
+
+                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)
+                        ? ({
+                            label: 'EAP Application v1',
+                            eap: eapListItem,
+                            type: 'development',
+                            details: undefined,
+                            disabled: false,
+                        } 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<EapListItem, number>(true),
-            createStringColumn<EapListItem, number>(
+            createExpansionIndicatorColumn<EapExpandedListItem, string>(
+                true,
+                (row) => !!row.disabled,
+            ),
+            createDateColumn<EapExpandedListItem, string>(
+                'created_at',
+                strings.eapLastUpdated,
+                (row) => row.lastUpdated,
+            ),
+            createStringColumn<EapExpandedListItem, string>(
                 'title',
                 '',
-                () => strings.eapRegistration,
+                (row) => row.label,
             ),
-            createEmptyColumn(),
-            createElementColumn<EapListItem, number, EapTableActionProps>(
+            createEmptyColumn<EapExpandedItem, string>(),
+            createElementColumn<EapExpandedListItem, string, EapTableActionProps>(
                 'actions',
                 '',
                 EapTableActions,
-                (eapId, eap) => ({
-                    eapId,
-                    eapType: eap.eap_type,
+                (_, row) => ({
+                    expandedListItem: row,
                 }),
             ),
-            createEmptyColumn(),
+            createEmptyColumn<EapExpandedItem, string>(),
         ]),
-        [strings.eapRegistration],
+        [strings.eapLastUpdated],
     );
 
     const rowModifier = useCallback(
@@ -174,17 +283,17 @@ export function Component() {
                 return row;
             }
 
-            const subRows = eapListResponse?.results?.filter(
-                (subRow) => subRow.id === datum.id,
-            );
+            const subRows = eapExpandedItems?.[expandedRow.id];
 
             return (
                 <>
                     {row}
                     <TableBodyContent
-                        keySelector={numericIdSelector}
-                        data={subRows}
+                        // FIXME: use better key
+                        keySelector={(expandedItem) => expandedItem.label}
+                        data={subRows?.expandedItems}
                         columns={detailColumns}
+                        expandedContent
                     />
                 </>
             );
@@ -192,7 +301,7 @@ export function Component() {
         [
             expandedRow,
             detailColumns,
-            eapListResponse,
+            eapExpandedItems,
         ],
     );
 
@@ -226,7 +335,7 @@ export function Component() {
         >
             <Table
                 data={eapListResponse?.results}
-                columns={baseColumns}
+                columns={aggregatedColumns}
                 rowModifier={rowModifier}
                 keySelector={numericIdSelector}
                 pending={eapListPending}
diff --git a/app/src/views/AccountMyFormsEap/utils.ts b/app/src/views/AccountMyFormsEap/utils.ts
new file mode 100644
index 000000000..4287a54b4
--- /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/SimplifiedEapExport/index.tsx b/app/src/views/SimplifiedEapExport/index.tsx
index a3c939673..d49ae18ea 100644
--- a/app/src/views/SimplifiedEapExport/index.tsx
+++ b/app/src/views/SimplifiedEapExport/index.tsx
@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import { Label } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -45,6 +45,8 @@ const sampleIndicators = [
 // 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 strings = useTranslation(i18n);
 
@@ -59,7 +61,9 @@ export function Component() {
         } : undefined,
     });
 
-    const latestSimplifiedEap = eapRegistrationResponse?.simplified_eap_details[0];
+    const latestSimplifiedEap = eapRegistrationResponse?.simplified_eap_details?.find(
+        (simplifiedEap) => String(simplifiedEap.version) === String(version),
+    );
 
     const {
         pending: simplifiedEapPending,
diff --git a/app/src/views/SimplifiedEapForm/index.tsx b/app/src/views/SimplifiedEapForm/index.tsx
index f22de7805..6e8b8e031 100644
--- a/app/src/views/SimplifiedEapForm/index.tsx
+++ b/app/src/views/SimplifiedEapForm/index.tsx
@@ -17,6 +17,7 @@ import {
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { injectClientId } from '@ifrc-go/ui/utils';
 import {
+    compareNumber,
     isDefined,
     isNotDefined,
     isTruthyString,
@@ -189,8 +190,10 @@ export function Component() {
         } : undefined,
     });
 
-    // FIXME: get the latest simplified instead of using 0
-    const latestSimplifiedEapId = eapDetailResponse?.simplified_eap_details?.[0]?.id;
+    // 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({
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/index.tsx b/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/index.tsx
index 134cafefb..5c0eeb69b 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 d9e86aa76..8db0e1224 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/styles.module.css
+++ b/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/styles.module.css
@@ -21,8 +21,9 @@
         flex-shrink: 0;
         border-radius: 50%;
         background-color: var(--go-ui-color-primary-red);
-        width: 0.8rem;
-        height: 0.8rem;
+        border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-primary-red);
+        width: 0.8125rem;
+        height: 0.8125rem;
     }
 
     &.start {
@@ -43,4 +44,11 @@
             background-color: transparent;
         }
     }
+
+    &.disabled {
+        .indicator {
+            background-color: var(--go-ui-color-white);
+            border-color: var(--go-ui-color-separator);
+        }
+    }
 }
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/index.ts b/packages/ui/src/components/Table/ColumnShortcuts/index.ts
index 8fcbcd27a..23e864f96 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/index.ts
+++ b/packages/ui/src/components/Table/ColumnShortcuts/index.ts
@@ -334,6 +334,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 +344,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,9 +358,10 @@ export function createExpansionIndicatorColumn<DATUM, KEY>(
             return {
                 isExpanded,
                 variant,
+                disabled: getDisabled?.(datum),
             };
         },
-        cellContainerClassName: styles.expansionIndicatorCellContainer,
+        cellContainerClassName: isExpanded ? styles.expansionIndicatorCellContainer : undefined,
         cellRendererClassName: styles.expansionIndicatorCell,
     };
 
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css b/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css
index 3d6c08232..489bb4010 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css
+++ b/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css
@@ -8,6 +8,7 @@
 
 .expansion-indicator-cell-container {
     position: relative;
+    border-bottom-color: transparent
 }
 
 .timeline-cell-container {
diff --git a/packages/ui/src/components/Table/TableBodyContent/index.tsx b/packages/ui/src/components/Table/TableBodyContent/index.tsx
index af0f41d44..7db45f046 100644
--- a/packages/ui/src/components/Table/TableBodyContent/index.tsx
+++ b/packages/ui/src/components/Table/TableBodyContent/index.tsx
@@ -19,6 +19,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 +35,7 @@ function TableBodyContent<
         rowClassName,
         cellClassName,
         rowModifier,
+        expandedContent,
     } = props;
 
     return (
@@ -65,6 +67,7 @@ function TableBodyContent<
                             className={_cs(
                                 styles.cell,
                                 cellContainerClassName,
+                                expandedContent && styles.expandedContentCell,
                                 typeof cellClassName === 'function'
                                     ? cellClassName(key, datum, id)
                                     : cellClassName,
diff --git a/packages/ui/src/components/Table/TableBodyContent/styles.module.css b/packages/ui/src/components/Table/TableBodyContent/styles.module.css
index eb0a51b09..c6932fe5f 100644
--- a/packages/ui/src/components/Table/TableBodyContent/styles.module.css
+++ b/packages/ui/src/components/Table/TableBodyContent/styles.module.css
@@ -5,6 +5,11 @@
         overflow-wrap: break-word;
     }
 
+    .expanded-content-cell {
+        border-bottom-color: var(--go-ui-color-separator-light);
+        background-color: var(--go-ui-color-background);
+    }
+
     /*
     &:hover {
         .cell {

From 30397c66a734b3ff39aeade6eb8d90f66d04eaba Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Fri, 12 Dec 2025 23:31:11 +0545
Subject: [PATCH 17/19] feat(eap): add indicators in simplified form

---
 .../components/domain/Admin2Input/index.tsx   |   1 +
 .../domain/ImageWithCaptionInput/i18n.json    |   7 +-
 .../domain/ImageWithCaptionInput/index.tsx    |  13 +-
 .../MultiImageWithCaptionInput/i18n.json      |   9 +-
 .../MultiImageWithCaptionInput/index.tsx      |  16 +-
 .../AccountMyFormsEap/EapStatus/index.tsx     |   8 +-
 .../EapTableActions/index.tsx                 | 100 +++--
 app/src/views/AccountMyFormsEap/index.tsx     |   5 +-
 app/src/views/SimplifiedEapExport/index.tsx   |  34 +-
 .../DeliveryAndBudget/index.tsx               | 121 +++---
 .../ApproachesInput/index.tsx                 |  77 +++-
 .../IndicatorInput/index.tsx                  |  98 +++++
 .../SimplifiedEapForm/Overview/i18n.json      |   1 -
 .../SimplifiedEapForm/Overview/index.tsx      |   1 -
 .../OperationsInput/index.tsx                 |  67 ++-
 .../PlannedOperations/index.tsx               |   4 +-
 .../SimplifiedEapForm/RiskAnalysis/index.tsx  |   3 -
 app/src/views/SimplifiedEapForm/common.tsx    |  13 +-
 app/src/views/SimplifiedEapForm/index.tsx     | 405 ++++++++----------
 app/src/views/SimplifiedEapForm/schema.ts     | 103 +++--
 go-api                                        |   2 +-
 .../components/RawFileInput/styles.module.css |   1 +
 .../ui/src/components/Table/Cell/index.tsx    |  17 +-
 .../components/Table/Cell/styles.module.css   |   5 +
 .../components/Table/ColumnShortcuts/index.ts |  12 +-
 .../Table/ColumnShortcuts/styles.module.css   |   1 -
 .../Table/TableBodyContent/index.tsx          |  18 +-
 .../Table/TableBodyContent/styles.module.css  |  20 -
 .../src/components/Table/TableData/index.tsx  |  16 +-
 .../Table/TableData/styles.module.css         |  16 +-
 packages/ui/src/components/Table/types.ts     |   8 +
 31 files changed, 724 insertions(+), 478 deletions(-)
 create mode 100644 app/src/views/SimplifiedEapForm/IndicatorInput/index.tsx
 create mode 100644 packages/ui/src/components/Table/Cell/styles.module.css
 delete mode 100644 packages/ui/src/components/Table/TableBodyContent/styles.module.css

diff --git a/app/src/components/domain/Admin2Input/index.tsx b/app/src/components/domain/Admin2Input/index.tsx
index 35a4f9487..a5be12349 100644
--- a/app/src/components/domain/Admin2Input/index.tsx
+++ b/app/src/components/domain/Admin2Input/index.tsx
@@ -236,6 +236,7 @@ function Admin2Input<const NAME>(props: Props<NAME>) {
                 >
                     {value?.map((admin2Id) => (
                         <ButtonLayout
+                            key={admin2Id}
                             spacing="2xs"
                             after={(
                                 <Button
diff --git a/app/src/components/domain/ImageWithCaptionInput/i18n.json b/app/src/components/domain/ImageWithCaptionInput/i18n.json
index 2ac3a6a3e..f10ddae40 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 a66380d0b..ce5df74d1 100644
--- a/app/src/components/domain/ImageWithCaptionInput/index.tsx
+++ b/app/src/components/domain/ImageWithCaptionInput/index.tsx
@@ -42,7 +42,7 @@ interface Props<NAME> {
     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;
@@ -52,6 +52,8 @@ interface Props<NAME> {
 
 // FIXME: Move this to components
 function ImageWithCaptionInput<const N extends string | number>(props: Props<N>) {
+    const strings = useTranslation(i18n);
+
     const {
         className,
         readOnly,
@@ -62,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,
@@ -119,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>
@@ -136,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 a9dca445a..d454e9df5 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 246c5c7c6..2222db54b 100644
--- a/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
+++ b/app/src/components/domain/MultiImageWithCaptionInput/index.tsx
@@ -50,7 +50,7 @@ interface Props<N> {
     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;
@@ -60,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,
@@ -69,7 +71,7 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
         setFileIdToUrlMap,
         onChange,
         error: formError,
-        label,
+        label = strings.defaultLabel,
         readOnly,
         before,
         after,
@@ -77,8 +79,6 @@ function MultiImageWithCaptionInput<const N extends string | number>(props: Prop
         useCurrentLanguageForMutation = false,
     } = props;
 
-    const strings = useTranslation(i18n);
-
     const error = getErrorObject(formError);
 
     const {
@@ -191,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}
@@ -203,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"
                                 />
@@ -212,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/views/AccountMyFormsEap/EapStatus/index.tsx b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
index ac8736e1e..98b11d56a 100644
--- a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
@@ -45,7 +45,6 @@ const validStatusTransition: Record<EapStatus, EapStatus[]> = {
     ],
     [EAP_STATUS_NS_ADDRESSING_COMMENTS]: [
         EAP_STATUS_UNDER_REVIEW,
-        EAP_STATUS_TECHNICALLY_VALIDATED,
     ],
     [EAP_STATUS_TECHNICALLY_VALIDATED]: [
         EAP_STATUS_UNDER_REVIEW,
@@ -156,7 +155,10 @@ function EapStatus(props: Props) {
                             </div>
                         </ListView>
                         {newStatus === EAP_STATUS_NS_ADDRESSING_COMMENTS && (
-                            <>
+                            <ListView
+                                layout="block"
+                                spacing="sm"
+                            >
                                 <RawFileInput
                                     name="review_checklist_file"
                                     onChange={setChecklistFile}
@@ -166,7 +168,7 @@ function EapStatus(props: Props) {
                                 <Label>
                                     {isDefined(checklistFile) && checklistFile.name}
                                 </Label>
-                            </>
+                            </ListView>
                         )}
                     </ListView>
                 </Modal>
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
index a93dcb7c2..d7582d7c8 100644
--- a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
@@ -1,3 +1,7 @@
+import {
+    DocumentPdfLineIcon,
+    DownloadTwoLineIcon,
+} from '@ifrc-go/icons';
 import {
     Button,
     TableActions,
@@ -12,12 +16,10 @@ import {
 } from '@togglecorp/fujs';
 
 import EapExportModal from '#components/domain/EapExportModal';
-import DropdownMenuItem from '#components/DropdownMenuItem';
 import Link from '#components/Link';
-import { type components } from '#generated/types';
 import {
+    EAP_STATUS_NS_ADDRESSING_COMMENTS,
     EAP_STATUS_UNDER_DEVELOPMENT,
-    EAP_STATUS_UNDER_REVIEW,
     EAP_TYPE_FULL,
     EAP_TYPE_SIMPLIFIED,
 } from '#utils/constants';
@@ -50,15 +52,13 @@ function EapTableActions(props: Props) {
 
     return (
         <TableActions>
-            {type === 'development' && eap.eap_type === EAP_TYPE_SIMPLIFIED && (
+            {type === 'development' && details?.data.is_locked && isDefined(eap.review_checklist_file) && (
                 <Link
-                    to="simplifiedEapExport"
-                    urlParams={{ eapId: eap.id }}
-                    urlSearch={isDefined(details?.data.version)
-                        ? `version=${details.data.version}`
-                        : undefined}
+                    external
+                    href={eap.review_checklist_file}
+                    before={<DownloadTwoLineIcon />}
                 >
-                    Preview Export
+                    Review Checklist
                 </Link>
             )}
             {type === 'development' && eap.eap_type === EAP_TYPE_SIMPLIFIED && (
@@ -70,16 +70,42 @@ function EapTableActions(props: Props) {
                     Export
                 </Button>
             )}
-            {type === 'development' && !details?.data.is_locked && eap.eap_type === EAP_TYPE_SIMPLIFIED && (
-                <Link
-                    to="simplifiedEapForm"
-                    urlParams={{ eapId: eap.id }}
-                    styleVariant="outline"
-                    colorVariant="primary"
-                >
-                    {strings.eapEditSimplifiedLink}
-                </Link>
+            {type === 'development' && isNotDefined(eap.eap_type) && isNotDefined(details) && (
+                <>
+                    <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>
+                </>
             )}
+            {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"
@@ -90,38 +116,18 @@ function EapTableActions(props: Props) {
                     {strings.eapEditFullLink}
                 </Link>
             )}
-            {/*
-            {isNotDefined(eapType) && (
-                <Link
-                    to="fullEapForm"
-                    urlParams={{ eapId }}
-                    styleVariant="outline"
-                    colorVariant="primary"
-                >
-                    {strings.eapStartFullLink}
-                </Link>
-            )}
-            {isNotDefined(eapType) && (
-                <Link
-                    to="simplifiedEapForm"
-                    urlParams={{ eapId }}
-                    styleVariant="outline"
-                    colorVariant="primary"
-                >
-                    {strings.eapStartSimplifiedLink}
-                </Link>
-            )}
-            {eapType === EAP_TYPE_FULL && (
+            {type === 'development' && eap.eap_type === EAP_TYPE_SIMPLIFIED && (
                 <Link
-                    to="fullEapForm"
-                    urlParams={{ eapId }}
-                    styleVariant="outline"
-                    colorVariant="primary"
+                    to="simplifiedEapExport"
+                    urlParams={{ eapId: eap.id }}
+                    urlSearch={isDefined(details?.data.version)
+                        ? `version=${details.data.version}`
+                        : undefined}
+                    title="Preview export"
                 >
-                    {strings.eapEditFullLink}
+                    <DocumentPdfLineIcon fontSize={18} />
                 </Link>
             )}
-            */}
             {showExportModal && isDefined(eap.eap_type) && (
                 <EapExportModal
                     eapId={eap.id}
diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
index 954c2e4d4..c049f13ef 100644
--- a/app/src/views/AccountMyFormsEap/index.tsx
+++ b/app/src/views/AccountMyFormsEap/index.tsx
@@ -169,6 +169,8 @@ export function Component() {
                     status,
                 } = eapListItem;
 
+                const eapStarted = simplified_eap_details.length > 0 || full_eap_details.length > 0;
+
                 const items = [
                     {
                         label: 'EAP Development Registration',
@@ -206,7 +208,7 @@ export function Component() {
                         } satisfies EapExpandedListItem)).toReversed()
                         : []
                     ),
-                    (isNotDefined(eap_type)
+                    ((isNotDefined(eap_type) || !eapStarted)
                         ? ({
                             label: 'EAP Application v1',
                             eap: eapListItem,
@@ -262,6 +264,7 @@ export function Component() {
                 'title',
                 '',
                 (row) => row.label,
+                { withLightText: (item) => !!item.disabled },
             ),
             createEmptyColumn<EapExpandedItem, string>(),
             createElementColumn<EapExpandedListItem, string, EapTableActionProps>(
diff --git a/app/src/views/SimplifiedEapExport/index.tsx b/app/src/views/SimplifiedEapExport/index.tsx
index d49ae18ea..9b41ab752 100644
--- a/app/src/views/SimplifiedEapExport/index.tsx
+++ b/app/src/views/SimplifiedEapExport/index.tsx
@@ -1,4 +1,7 @@
-import { useParams, useSearchParams } from 'react-router-dom';
+import {
+    useParams,
+    useSearchParams,
+} from 'react-router-dom';
 import { Label } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
@@ -22,25 +25,6 @@ import { useRequest } from '#utils/restRequest';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-// FIXME: indicators should come from the server (for each sector)
-const sampleIndicators = [
-    {
-        id: 1,
-        title: '# households would have improved access to drinking water in case of Karnali flooding.',
-        target: 420,
-    },
-    {
-        id: 2,
-        title: '# households would have improved access to drinking water in case of Babai flooding.',
-        target: 640,
-    },
-    {
-        id: 3,
-        title: '# households would have improved access to drinking water in case of West Rapti Flooding',
-        target: 440,
-    },
-];
-
 /** @knipignore */
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
@@ -360,7 +344,7 @@ export function Component() {
                                 >
                                     {strings.indicatorTargetLabel}
                                 </Label>
-                                {sampleIndicators.map((indicator) => (
+                                {operation.indicators.map((indicator) => (
                                     <PrintableDataDisplay
                                         key={indicator.id}
                                         label={indicator.title}
@@ -431,12 +415,6 @@ export function Component() {
                                 prefix="CHF "
                                 strongLabel
                             />
-                            <PrintableDataDisplay
-                                label={strings.operationPeopleTargetedLabel}
-                                value={approach.indicator_target}
-                                valueType="number"
-                                strongLabel
-                            />
                         </PrintableContainer>
                         <PrintableContainer
                             heading={strings.indicatorsHeading}
@@ -456,7 +434,7 @@ export function Component() {
                                 >
                                     {strings.indicatorTargetLabel}
                                 </Label>
-                                {sampleIndicators.map((indicator) => (
+                                {approach.indicators.map((indicator) => (
                                     <PrintableDataDisplay
                                         key={indicator.id}
                                         label={indicator.title}
diff --git a/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx
index 1613d5274..7e8eb9ed1 100644
--- a/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx
+++ b/app/src/views/SimplifiedEapForm/DeliveryAndBudget/index.tsx
@@ -80,68 +80,73 @@ function DeliveryAndBudget(props: Props) {
                 </ListView>
             </Container>
             <Container heading={strings.budgetHeading}>
-                <InputSection
-                    title={strings.deliverTotalBudget}
-                    description={strings.deliverTotalBudgetDescription}
-                    withAsteriskOnTitle
+                <ListView
+                    layout="block"
+                    spacing="sm"
                 >
-                    <ListView
-                        layout="grid"
-                        numPreferredGridColumns={4}
+                    <InputSection
+                        title={strings.deliverTotalBudget}
+                        description={strings.deliverTotalBudgetDescription}
+                        withAsteriskOnTitle
                     >
-                        <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}
+                        <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={error?.early_action_budget}
+                            error={getErrorString(error?.budget_file)}
+                            fileIdToUrlMap={fileIdToUrlMap}
+                            setFileIdToUrlMap={setFileIdToUrlMap}
                             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>
+                        >
+                            {strings.upload}
+                        </GoSingleFileInput>
+                    </InputSection>
+                </ListView>
             </Container>
         </TabPage>
     );
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
index 8d77e1c7b..dfc63cdc3 100644
--- a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/index.tsx
@@ -26,6 +26,7 @@ import {
 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';
@@ -34,6 +35,7 @@ type EnableApproachesFormFields = NonNullable<PartialSimplifiedEapType['enable_a
 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,
@@ -88,6 +90,13 @@ function OperationsBySectorInput(props: Props) {
         'readiness_activities' as const,
         onFieldChange,
     );
+    const {
+        setValue: onIndicatorChange,
+        removeValue: onIndicatorRemove,
+    } = useFormArray<'indicators', IndicatorFormFields>(
+        'indicators' as const,
+        onFieldChange,
+    );
 
     const handleEarlyActionAddButtonClick = useCallback(
         () => {
@@ -137,6 +146,22 @@ function OperationsBySectorInput(props: Props) {
         [onFieldChange],
     );
 
+    const handleIndicatorAddButtonClick = useCallback(
+        () => {
+            const newIndicator: IndicatorFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: IndicatorFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newIndicator]
+                ),
+                'indicators' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
     return (
         <ExpandableContainer
             heading={approachTitle ?? '--'}
@@ -176,16 +201,50 @@ function OperationsBySectorInput(props: Props) {
                         disabled={disabled}
                         error={error?.ap_code}
                     />
-                    <NumberInput
-                        label={strings.approachIndicatorTarget}
-                        name="indicator_target"
-                        value={value?.indicator_target}
-                        onChange={onFieldChange}
-                        disabled={disabled}
-                        error={error?.indicator_target}
-                    />
                 </ListView>
-                <ListView layout="block">
+                <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
diff --git a/app/src/views/SimplifiedEapForm/IndicatorInput/index.tsx b/app/src/views/SimplifiedEapForm/IndicatorInput/index.tsx
new file mode 100644
index 000000000..a0b49bb9d
--- /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
index 9de5ed5a2..2b71f756e 100644
--- a/app/src/views/SimplifiedEapForm/Overview/i18n.json
+++ b/app/src/views/SimplifiedEapForm/Overview/i18n.json
@@ -10,7 +10,6 @@
         "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.",
-        "uploadAnImageLabel": "Select an Image",
         "timeframe": "sEAP Timeframe",
         "timeframeDescription": "A simplified EAP has a timeframe of two years (unless the early actions are activiated)",
         "contacts": "Contacts",
diff --git a/app/src/views/SimplifiedEapForm/Overview/index.tsx b/app/src/views/SimplifiedEapForm/Overview/index.tsx
index c81157077..b4ce61e0a 100644
--- a/app/src/views/SimplifiedEapForm/Overview/index.tsx
+++ b/app/src/views/SimplifiedEapForm/Overview/index.tsx
@@ -118,7 +118,6 @@ function Overview(props: Props) {
                             error={getErrorObject(error?.cover_image_file)}
                             fileIdToUrlMap={fileIdToUrlMap}
                             setFileIdToUrlMap={setFileIdToUrlMap}
-                            label={strings.uploadAnImageLabel}
                             disabled={disabled}
                         />
                     </InputSection>
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
index a1244505d..626edc758 100644
--- a/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/OperationsInput/index.tsx
@@ -26,6 +26,7 @@ import {
 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';
@@ -34,6 +35,7 @@ type PlannedOperationFormFields = NonNullable<PartialSimplifiedEapType['planned_
 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,
@@ -88,6 +90,13 @@ function OperationsBySectorInput(props: Props) {
         'readiness_activities' as const,
         onFieldChange,
     );
+    const {
+        setValue: onIndicatorChange,
+        removeValue: onIndicatorRemove,
+    } = useFormArray<'indicators', IndicatorFormFields>(
+        'indicators' as const,
+        onFieldChange,
+    );
 
     const handleEarlyActionAddButtonClick = useCallback(
         () => {
@@ -137,6 +146,22 @@ function OperationsBySectorInput(props: Props) {
         [onFieldChange],
     );
 
+    const handleIndicatorAddButtonClick = useCallback(
+        () => {
+            const newIndicator: IndicatorFormFields = {
+                client_id: randomString(),
+            };
+
+            onFieldChange(
+                (oldValue: IndicatorFormFields[] | undefined) => (
+                    [...(oldValue ?? []), newIndicator]
+                ),
+                'indicators' as const,
+            );
+        },
+        [onFieldChange],
+    );
+
     return (
         <ExpandableContainer
             heading={operationTitle ?? '--'}
@@ -192,6 +217,45 @@ function OperationsBySectorInput(props: Props) {
                     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
@@ -201,7 +265,6 @@ function OperationsBySectorInput(props: Props) {
                         headingLevel={5}
                         footerActions={(
                             <Button
-                                styleVariant="outline"
                                 name={undefined}
                                 onClick={handleReadinessAddButtonClick}
                                 spacing="sm"
@@ -248,7 +311,6 @@ function OperationsBySectorInput(props: Props) {
                                 name={undefined}
                                 onClick={handlePrepositioningAddButtonClick}
                                 disabled={disabled}
-                                styleVariant="outline"
                                 spacing="sm"
                                 before={<AddLineIcon />}
                             >
@@ -292,7 +354,6 @@ function OperationsBySectorInput(props: Props) {
                                 name={undefined}
                                 onClick={handleEarlyActionAddButtonClick}
                                 disabled={disabled}
-                                styleVariant="outline"
                                 spacing="sm"
                                 before={<AddLineIcon />}
                             >
diff --git a/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx b/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
index 029c1bb20..436bdd6d2 100644
--- a/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
+++ b/app/src/views/SimplifiedEapForm/PlannedOperations/index.tsx
@@ -105,9 +105,7 @@ function PlannedOperations(props: Props) {
                         title={strings.plannedOperationsTitle}
                         description={strings.plannedOperationsDescription}
                     >
-                        <NonFieldError
-                            error={getErrorObject(error?.planned_operations)}
-                        />
+                        <NonFieldError error={getErrorObject(error?.planned_operations)} />
                         <Checklist
                             name={undefined}
                             options={eapSectorOptions}
diff --git a/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx b/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx
index 0350e0b7b..58e1c7ab9 100644
--- a/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx
+++ b/app/src/views/SimplifiedEapForm/RiskAnalysis/index.tsx
@@ -68,7 +68,6 @@ function RiskAnalysis(props: Props) {
                             error={getErrorObject(error?.hazard_impact_images)}
                             fileIdToUrlMap={fileIdToUrlMap}
                             setFileIdToUrlMap={setFileIdToUrlMap}
-                            label={strings.simplifiedFormUploadlabel}
                             disabled={disabled}
                         />
                     </InputSection>
@@ -93,7 +92,6 @@ function RiskAnalysis(props: Props) {
                             error={getErrorObject(error?.risk_selected_protocols_images)}
                             fileIdToUrlMap={fileIdToUrlMap}
                             setFileIdToUrlMap={setFileIdToUrlMap}
-                            label={strings.simplifiedFormUploadlabel}
                             disabled={disabled}
                         />
                     </InputSection>
@@ -125,7 +123,6 @@ function RiskAnalysis(props: Props) {
                             error={getErrorObject(error?.selected_early_actions_images)}
                             fileIdToUrlMap={fileIdToUrlMap}
                             setFileIdToUrlMap={setFileIdToUrlMap}
-                            label={strings.simplifiedFormUploadlabel}
                             disabled={disabled}
                         />
                     </InputSection>
diff --git a/app/src/views/SimplifiedEapForm/common.tsx b/app/src/views/SimplifiedEapForm/common.tsx
index 39413c4f8..b1acd4866 100644
--- a/app/src/views/SimplifiedEapForm/common.tsx
+++ b/app/src/views/SimplifiedEapForm/common.tsx
@@ -7,7 +7,7 @@ import {
 
 import { type PartialSimplifiedEapType } from './schema';
 
-type TabKeys = 'overview' | 'riskAnalysis' | 'earlyAction' | 'plannedOperations' | 'approaches' | 'deliverBudget';
+export type TabKeys = 'overview' | 'riskAnalysis' | 'earlyAction' | 'plannedOperations' | 'enablingApproaches' | 'deliveryAndBudget';
 
 const overviewTabFields: (keyof PartialSimplifiedEapType)[] = [
     'cover_image_file',
@@ -78,11 +78,11 @@ const plannedOperationsTabFields: (keyof PartialSimplifiedEapType)[] = [
     'planned_operations',
 ] satisfies (keyof PartialSimplifiedEapType)[];
 
-const approachesTabFields: (keyof PartialSimplifiedEapType)[] = [
+const enablingApproachesTabFields: (keyof PartialSimplifiedEapType)[] = [
     'enable_approaches',
 ] satisfies (keyof PartialSimplifiedEapType)[];
 
-const deliverBudgetTabFields: (keyof PartialSimplifiedEapType)[] = [
+const deliveryAndBudgetTabFields: (keyof PartialSimplifiedEapType)[] = [
     'early_action_capability',
     'rcrc_movement_involvement',
     'total_budget',
@@ -92,16 +92,15 @@ const deliverBudgetTabFields: (keyof PartialSimplifiedEapType)[] = [
     'budget_file',
 ] satisfies (keyof PartialSimplifiedEapType)[];
 
-const tabToFieldsMap = {
+const tabToFieldsMap: Record<TabKeys, (keyof PartialSimplifiedEapType)[]> = {
     overview: overviewTabFields,
     riskAnalysis: riskAnalysisTabFields,
     earlyAction: earlyActionTabFields,
     plannedOperations: plannedOperationsTabFields,
-    approaches: approachesTabFields,
-    deliverBudget: deliverBudgetTabFields,
+    enablingApproaches: enablingApproachesTabFields,
+    deliveryAndBudget: deliveryAndBudgetTabFields,
 };
 
-// eslint-disable-next-line import/prefer-default-export
 export function checkTabErrors(
     error: Error<PartialSimplifiedEapType> | undefined,
     tabKey: TabKeys,
diff --git a/app/src/views/SimplifiedEapForm/index.tsx b/app/src/views/SimplifiedEapForm/index.tsx
index 6e8b8e031..a217f57e3 100644
--- a/app/src/views/SimplifiedEapForm/index.tsx
+++ b/app/src/views/SimplifiedEapForm/index.tsx
@@ -21,6 +21,7 @@ import {
     isDefined,
     isNotDefined,
     isTruthyString,
+    listToMap,
 } from '@togglecorp/fujs';
 import {
     createSubmitHandler,
@@ -41,10 +42,14 @@ import {
 import {
     matchArray,
     NUM,
+    type ResponseObjectError,
     transformObjectError,
 } from '#utils/restRequest/error';
 
-import { checkTabErrors } from './common';
+import {
+    checkTabErrors,
+    type TabKeys,
+} from './common';
 import DeliveryAndBudget from './DeliveryAndBudget';
 import EarlyAction from './EarlyAction';
 import EnablingApproaches from './EnablingApproaches';
@@ -62,30 +67,19 @@ import styles from './styles.module.css';
 type EapSimplifiedRequestBody = GoApiBody<'/api/v2/simplified-eap/', 'POST'>;
 type GetSimplifiedResponse = GoApiResponse<'/api/v2/simplified-eap/{id}/'>;
 
-type TabKeys = 'overview' | 'riskAnalysis' | 'earlyAction' | 'plannedOperations' | 'enablingApproaches' | 'deliveryAndBudget';
-
 function getNextStep(current: TabKeys, direction: 1 | -1) {
-    if (direction === 1) {
-        const mapping: { [key in TabKeys]?: TabKeys } = {
-            overview: 'riskAnalysis',
-            riskAnalysis: 'earlyAction',
-            earlyAction: 'plannedOperations',
-            plannedOperations: 'enablingApproaches',
-            enablingApproaches: 'deliveryAndBudget',
-        };
-        return mapping[current];
-    }
-    if (direction === -1) {
-        const mapping: { [key in TabKeys]?: TabKeys } = {
-            deliveryAndBudget: 'enablingApproaches',
-            enablingApproaches: 'plannedOperations',
-            plannedOperations: 'earlyAction',
-            earlyAction: 'riskAnalysis',
-            riskAnalysis: 'overview',
-        };
-        return mapping[current];
-    }
-    return undefined;
+    const tabKeyList: TabKeys[] = [
+        'overview',
+        'riskAnalysis',
+        'earlyAction',
+        'plannedOperations',
+        'enablingApproaches',
+        'deliveryAndBudget',
+    ];
+
+    const currentIndex = tabKeyList.findIndex((key) => key === current);
+
+    return tabKeyList[currentIndex + direction];
 }
 
 /** @knipignore */
@@ -107,40 +101,57 @@ export function Component() {
     const [fileIdToUrlMap, setFileIdToUrlMap] = useState<Record<number, string>>({});
     const { eapId } = useParams<{ eapId: string }>();
 
-    const handleSimplifiedEapLoad = useCallback((response: GetSimplifiedResponse) => {
-        setFileIdToUrlMap((preMap) => {
-            const newMap = {
-                ...preMap,
-            };
-
+    const updateFileUrlMapping = useCallback((response: GetSimplifiedResponse) => {
+        setFileIdToUrlMap((prevMap) => {
             const {
-                budget_file_details,
                 cover_image_file,
+
+                hazard_impact_images,
+                risk_selected_protocols_images,
+                selected_early_actions_images,
+
+                budget_file_details,
             } = response;
 
-            if (
-                budget_file_details
-                && budget_file_details.id
-                && budget_file_details.file
-            ) {
-                newMap[
-                    budget_file_details.id
-                ] = budget_file_details.file;
-            }
-
-            if (
-                cover_image_file
-                && cover_image_file.id
-                && cover_image_file.file
-            ) {
-                newMap[cover_image_file.id] = cover_image_file.file;
-            }
-            return newMap;
+            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) => {
-        handleSimplifiedEapLoad(response);
+        updateFileUrlMapping(response);
 
         const {
             planned_operations,
@@ -164,20 +175,101 @@ export function Component() {
             risk_selected_protocols_images: risk_selected_protocols_images?.map(injectClientId),
 
             planned_operations: planned_operations?.map((intervention) => ({
-                ...injectClientId(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) => ({
-                ...injectClientId(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),
             })),
         });
-    }, [handleSimplifiedEapLoad, setValue]);
+    }, [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,
@@ -224,91 +316,18 @@ export function Component() {
             const {
                 value: {
                     formErrors,
+                    messageForNotification,
                 },
             } = err;
 
-            setError(transformObjectError(
-                formErrors,
-                (locations) => {
-                    // FIXME: this transformation is duplicated
-                    // let's create a function to reuse it
-
-                    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;
-                },
-            ));
+            processServerErrors(formErrors);
 
             alert.show(
                 strings.eapSimplifiedFailure,
-                { variant: 'danger' },
+                {
+                    variant: 'danger',
+                    description: messageForNotification,
+                },
             );
         },
     });
@@ -328,6 +347,8 @@ export function Component() {
                 strings.eapSimplifiedUpdateMessage,
                 { variant: 'success' },
             );
+
+            // FIXME: only navigate to accounts page for the submit action
             navigate(
                 'accountMyFormsEap',
                 { params: { eapId: response.id } },
@@ -341,91 +362,7 @@ export function Component() {
                 },
             } = err;
 
-            const transformedError = transformObjectError(
-                formErrors,
-                (locations) => {
-                    let match = matchArray(locations, ['cover_image_file']);
-                    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;
-                },
-            );
-
-            setError(transformedError);
+            processServerErrors(formErrors);
 
             alert.show(
                 strings.eapSimplifiedFailure,
@@ -498,13 +435,21 @@ export function Component() {
                 heading={strings.simplifiedEapHeading}
                 description={strings.simplifiedEapDescription}
                 actions={(
-                    <Link
-                        to="accountMyFormsEap"
-                        styleVariant="outline"
-                        colorVariant="primary"
-                    >
-                        {strings.simplifiedCancelButton}
-                    </Link>
+                    <>
+                        <Link
+                            to="accountMyFormsEap"
+                            styleVariant="outline"
+                            colorVariant="primary"
+                        >
+                            {strings.simplifiedCancelButton}
+                        </Link>
+                        <Button
+                            name={undefined}
+                            onClick={handleSave}
+                        >
+                            {strings.simplifiedSaveButton}
+                        </Button>
+                    </>
                 )}
                 info={(
                     <TabList>
@@ -537,16 +482,16 @@ export function Component() {
                             {strings.simplifiedPlannedOperations}
                         </Tab>
                         <Tab
-                            name="approaches"
+                            name="enablingApproaches"
                             step={5}
-                            errored={checkTabErrors(formError, 'approaches')}
+                            errored={checkTabErrors(formError, 'enablingApproaches')}
                         >
                             {strings.simplifiedEnablingApproaches}
                         </Tab>
                         <Tab
-                            name="deliverBudget"
+                            name="deliveryAndBudget"
                             step={6}
-                            errored={checkTabErrors(formError, 'deliverBudget')}
+                            errored={checkTabErrors(formError, 'deliveryAndBudget')}
                         >
                             {strings.simplifiedDeliverAndBudget}
                         </Tab>
@@ -593,7 +538,7 @@ export function Component() {
                         disabled={disabled}
                     />
                 </TabPanel>
-                <TabPanel name="approaches">
+                <TabPanel name="enablingApproaches">
                     <EnablingApproaches
                         value={value}
                         setFieldValue={setFieldValue}
@@ -601,7 +546,7 @@ export function Component() {
                         disabled={disabled}
                     />
                 </TabPanel>
-                <TabPanel name="deliverBudget">
+                <TabPanel name="deliveryAndBudget">
                     <DeliveryAndBudget
                         value={value}
                         setFieldValue={setFieldValue}
diff --git a/app/src/views/SimplifiedEapForm/schema.ts b/app/src/views/SimplifiedEapForm/schema.ts
index 4b46d8b3f..123477db9 100644
--- a/app/src/views/SimplifiedEapForm/schema.ts
+++ b/app/src/views/SimplifiedEapForm/schema.ts
@@ -10,6 +10,7 @@ import {
 } 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) {
@@ -27,14 +28,16 @@ function maxOperationalTimeframeCondition(value: number | undefined) {
 type EapSimplifiedRequestBody = PurgeNull<GoApiBody<'/api/v2/simplified-eap/', 'POST'>>;
 
 type EnableApproachesResponse = NonNullable<EapSimplifiedRequestBody['enable_approaches']>[number];
-type EarlyActionApproachesResponse = NonNullable<EnableApproachesResponse['early_action_activities']>[number];
-type PrepositioningApproachesResponse = NonNullable<EnableApproachesResponse['prepositioning_activities']>[number];
-type ReadinessApproachesResponse = NonNullable<EnableApproachesResponse['readiness_activities']>[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 OperationsResponse = NonNullable<EapSimplifiedRequestBody['planned_operations']>[number];
-type EarlyActionResponse = NonNullable<OperationsResponse['early_action_activities']>[number];
-type PrepositioningResponse = NonNullable<OperationsResponse['prepositioning_activities']>[number];
-type ReadinessResponse = NonNullable<OperationsResponse['readiness_activities']>[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']>;
 
@@ -42,14 +45,17 @@ type HazardImagesResponse = NonNullable<EapSimplifiedRequestBody['hazard_impact_
 type RiskImagesResponse = NonNullable<EapSimplifiedRequestBody['risk_selected_protocols_images']>[number];
 type EarlyActionImagesResponse = NonNullable<EapSimplifiedRequestBody['selected_early_actions_images']>[number];
 
-type EarlyActionApproachesFormFields = EarlyActionApproachesResponse & { client_id: string };
-type PrepositioningApproachesFormFields = PrepositioningApproachesResponse & { client_id: string };
-type ReadinessApproachesFormFields = ReadinessApproachesResponse & { client_id: string };
+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 };
@@ -59,15 +65,19 @@ type EnableApproachesResponseFormFields = (
     DeepReplace<
         DeepReplace<
             DeepReplace<
-                EnableApproachesResponse,
-                EarlyActionApproachesResponse,
-                EarlyActionApproachesFormFields
+                DeepReplace<
+                    EnableApproachesResponse,
+                    ApproachEarlyActionResponse,
+                    ApproachEarlyActionFormFields
+                >,
+                ApproachPrepositioningResponse,
+                ApproachPrepositioningFormFields
             >,
-            PrepositioningApproachesResponse,
-            PrepositioningApproachesFormFields
+            ApproachReadinessResponse,
+            ApproachReadinessFormFields
         >,
-        ReadinessApproachesResponse,
-        ReadinessApproachesFormFields
+        ApproachIndicatorResponse,
+        ApproachIndicatorFormFields
     >
 );
 
@@ -75,15 +85,19 @@ type OperationsResponseFormFields = (
     DeepReplace<
         DeepReplace<
             DeepReplace<
-                OperationsResponse,
-                EarlyActionResponse,
-                EarlyActionFormFields
+                DeepReplace<
+                    PlannedOperationsResponse,
+                    EarlyActionResponse,
+                    EarlyActionFormFields
+                >,
+                PrepositioningResponse,
+                PrepositioningFormFields
             >,
-            PrepositioningResponse,
-            PrepositioningFormFields
+            ReadinessResponse,
+            ReadinessFormFields
         >,
-        ReadinessResponse,
-        ReadinessFormFields
+        IndicatorResponse,
+        IndicatorFormFields
     >
 );
 
@@ -95,7 +109,7 @@ type FormFields = (
                     DeepReplace<
                         DeepReplace<
                             EapSimplifiedRequestBody,
-                            OperationsResponse,
+                            PlannedOperationsResponse,
                             OperationsResponseFormFields
                         >,
                         EnableApproachesResponse,
@@ -119,6 +133,18 @@ export type PartialSimplifiedEapType = PartialForm<FormFields, 'client_id' | 'se
 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']>;
@@ -225,7 +251,9 @@ export const formSchema: FormSchema = {
 
         overall_objective_intervention: {},
         potential_geographical_high_risk_areas: {},
-        admin2: {},
+        admin2: {
+            defaultValue: [],
+        },
         people_targeted: { required: true },
         assisted_through_operation: {},
         selection_criteria: {},
@@ -250,6 +278,17 @@ export const formSchema: FormSchema = {
                     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,
@@ -277,7 +316,17 @@ export const formSchema: FormSchema = {
                     approach: {},
                     budget_per_approach: {},
                     ap_code: {},
-                    indicator_target: {},
+                    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,
diff --git a/go-api b/go-api
index a68571881..abc20b941 160000
--- a/go-api
+++ b/go-api
@@ -1 +1 @@
-Subproject commit a685718813b968d48a7f00827048252dfc39d7d0
+Subproject commit abc20b94143333aa7ab713abda914374b8da0c34
diff --git a/packages/ui/src/components/RawFileInput/styles.module.css b/packages/ui/src/components/RawFileInput/styles.module.css
index 9c9ea05a0..f724c6bb1 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/Table/Cell/index.tsx b/packages/ui/src/components/Table/Cell/index.tsx
index 4dd91da0d..a8fcfa1f2 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 000000000..1caa482fc
--- /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/index.ts b/packages/ui/src/components/Table/ColumnShortcuts/index.ts
index 23e864f96..3e08fa108 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)),
@@ -361,8 +364,11 @@ export function createExpansionIndicatorColumn<DATUM, KEY>(
                 disabled: getDisabled?.(datum),
             };
         },
-        cellContainerClassName: isExpanded ? styles.expansionIndicatorCellContainer : undefined,
-        cellRendererClassName: styles.expansionIndicatorCell,
+        // cellRendererClassName: styles.expansionIndicatorCell,
+        cellContainerRendererParams: () => ({
+            withoutBorder: true,
+        }),
+        cellContainerClassName: styles.expansionIndicatorCellContainer,
     };
 
     return item;
diff --git a/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css b/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css
index 489bb4010..3d6c08232 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css
+++ b/packages/ui/src/components/Table/ColumnShortcuts/styles.module.css
@@ -8,7 +8,6 @@
 
 .expansion-indicator-cell-container {
     position: relative;
-    border-bottom-color: transparent
 }
 
 .timeline-cell-container {
diff --git a/packages/ui/src/components/Table/TableBodyContent/index.tsx b/packages/ui/src/components/Table/TableBodyContent/index.tsx
index 7db45f046..838216e21 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;
@@ -50,6 +48,7 @@ function TableBodyContent<
                         cellRendererClassName,
                         cellRendererParams,
                         cellContainerClassName,
+                        cellContainerRendererParams,
                     } = column;
 
                     const otherProps = cellRendererParams(key, datum, index, data);
@@ -61,17 +60,27 @@ function TableBodyContent<
                             name={id}
                         />
                     );
+
+                    const cellContainerAdditionalProps = cellContainerRendererParams?.(
+                        key,
+                        datum,
+                        index,
+                        data,
+                    ) ?? {};
+
                     return (
                         <TableData
                             key={id}
                             className={_cs(
-                                styles.cell,
                                 cellContainerClassName,
-                                expandedContent && styles.expandedContentCell,
                                 typeof cellClassName === 'function'
                                     ? cellClassName(key, datum, id)
                                     : cellClassName,
                             )}
+                            // eslint-disable-next-line react/jsx-props-no-spreading
+                            {...cellContainerAdditionalProps}
+                            expandedContentCell={cellContainerAdditionalProps.expandedContentCell
+                                ?? expandedContent}
                         >
                             {children}
                         </TableData>
@@ -81,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 c6932fe5f..000000000
--- a/packages/ui/src/components/Table/TableBodyContent/styles.module.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.row {
-    .cell {
-        padding: var(--go-ui-spacing-sm);
-        overflow: hidden;
-        overflow-wrap: break-word;
-    }
-
-    .expanded-content-cell {
-        border-bottom-color: var(--go-ui-color-separator-light);
-        background-color: var(--go-ui-color-background);
-    }
-
-    /*
-    &: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 c96f9a26b..cf5270e92 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 7e8d347ff..fcd5d8138 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 b33da8217..213653c30 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 (

From 56e1dcad831fcbf4673bd3bf21821a1de6b0b923 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Tue, 25 Nov 2025 11:48:00 +0545
Subject: [PATCH 18/19] feat(eap): add PrintableDescription component

- With support for the diff view
---
 app/package.json                              |   1 +
 app/src/components/PerExportModal/index.tsx   |  12 +-
 .../domain/DrefExportModal/index.tsx          |   8 +-
 .../domain/EapExportModal/index.tsx           |   9 +-
 .../printable/PrintableDescription/index.tsx  |  88 +++++++++++
 .../PrintableDescription/styles.module.css    |  18 +++
 app/src/utils/constants.ts                    |   1 -
 .../EapTableActions/i18n.json                 |   2 -
 app/src/views/AccountMyFormsEap/i18n.json     |   3 +-
 app/src/views/AccountMyFormsEap/index.tsx     |  12 +-
 app/src/views/SimplifiedEapExport/i18n.json   |   3 +-
 app/src/views/SimplifiedEapExport/index.tsx   | 144 ++++++++++++------
 .../ApproachesInput/i18n.json                 |   1 -
 .../SimplifiedEapForm/RiskAnalysis/i18n.json  |   1 -
 .../ExpansionIndicator/styles.module.css      |   4 +-
 pnpm-lock.yaml                                |  15 +-
 16 files changed, 251 insertions(+), 71 deletions(-)
 create mode 100644 app/src/components/printable/PrintableDescription/index.tsx
 create mode 100644 app/src/components/printable/PrintableDescription/styles.module.css

diff --git a/app/package.json b/app/package.json
index ea3ee7d2a..fd752598d 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/components/PerExportModal/index.tsx b/app/src/components/PerExportModal/index.tsx
index 732fbdb2b..0602d3938 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/DrefExportModal/index.tsx b/app/src/components/domain/DrefExportModal/index.tsx
index 0bcebcca0..837b67168 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/index.tsx b/app/src/components/domain/EapExportModal/index.tsx
index 7ebe2d17d..669d7a6b6 100644
--- a/app/src/components/domain/EapExportModal/index.tsx
+++ b/app/src/components/domain/EapExportModal/index.tsx
@@ -41,6 +41,7 @@ interface Props {
     eapType: EapType;
     version?: number;
     onClose: () => void;
+    diff?: boolean;
 }
 
 function EapExportModal(props: Props) {
@@ -49,6 +50,7 @@ function EapExportModal(props: Props) {
         eapType,
         onClose,
         version,
+        diff,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -59,13 +61,14 @@ function EapExportModal(props: Props) {
     const exportTriggerBody = useMemo<ExportBody>(
         () => ({
             export_id: eapId,
-            export_type: eapType === EAP_TYPE_SIMPLIFIED ? 'simplified-eap' : 'full-eap',
+            export_type: eapType === EAP_TYPE_SIMPLIFIED ? 'simplified' : 'full',
             selector: '#pdf-preview-ready',
-            is_pga: false,
+            is_pga: undefined,
             per_country: undefined,
             version,
+            diff,
         }),
-        [eapId, eapType, version],
+        [eapId, eapType, version, diff],
     );
 
     const {
diff --git a/app/src/components/printable/PrintableDescription/index.tsx b/app/src/components/printable/PrintableDescription/index.tsx
new file mode 100644
index 000000000..1843a9402
--- /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 000000000..a52f405f0
--- /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/utils/constants.ts b/app/src/utils/constants.ts
index a441b4ad4..08630617d 100644
--- a/app/src/utils/constants.ts
+++ b/app/src/utils/constants.ts
@@ -222,4 +222,3 @@ 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/EapTableActions/i18n.json b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
index e4d9e1211..1404c3e35 100644
--- a/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/i18n.json
@@ -1,8 +1,6 @@
 {
     "namespace":"accountMyFormsEap",
     "strings":{
-        "eapViewLabel": "View",
-        "eapEditLabel": "Edit",
         "eapStartFullLink": "Start Full EAP",
         "eapStartSimplifiedLink": "Start sEAP",
         "eapEditFullLink": "Edit Full EAP",
diff --git a/app/src/views/AccountMyFormsEap/i18n.json b/app/src/views/AccountMyFormsEap/i18n.json
index aa1d449b3..4fcb4dcfd 100644
--- a/app/src/views/AccountMyFormsEap/i18n.json
+++ b/app/src/views/AccountMyFormsEap/i18n.json
@@ -6,7 +6,6 @@
         "eapLastUpdated": "Last Updated",
         "eapName": "Name/Phase",
         "eapType": "EAP Type",
-        "eapStatus": "Status",
-        "eapRegistration": "EAP Registration"
+        "eapStatus": "Status"
     }
 }
diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
index c049f13ef..ac6b69c4f 100644
--- a/app/src/views/AccountMyFormsEap/index.tsx
+++ b/app/src/views/AccountMyFormsEap/index.tsx
@@ -251,23 +251,23 @@ export function Component() {
 
     const detailColumns = useMemo(
         () => ([
-            createExpansionIndicatorColumn<EapExpandedListItem, string>(
+            createExpansionIndicatorColumn<EapExpandedListItem, string | number>(
                 true,
                 (row) => !!row.disabled,
             ),
-            createDateColumn<EapExpandedListItem, string>(
+            createDateColumn<EapExpandedListItem, string | number>(
                 'created_at',
                 strings.eapLastUpdated,
                 (row) => row.lastUpdated,
             ),
-            createStringColumn<EapExpandedListItem, string>(
+            createStringColumn<EapExpandedListItem, string | number>(
                 'title',
                 '',
                 (row) => row.label,
                 { withLightText: (item) => !!item.disabled },
             ),
-            createEmptyColumn<EapExpandedItem, string>(),
-            createElementColumn<EapExpandedListItem, string, EapTableActionProps>(
+            createEmptyColumn<EapExpandedListItem, string | number>(),
+            createElementColumn<EapExpandedListItem, string | number, EapTableActionProps>(
                 'actions',
                 '',
                 EapTableActions,
@@ -275,7 +275,7 @@ export function Component() {
                     expandedListItem: row,
                 }),
             ),
-            createEmptyColumn<EapExpandedItem, string>(),
+            createEmptyColumn<EapExpandedListItem, string | number>(),
         ]),
         [strings.eapLastUpdated],
     );
diff --git a/app/src/views/SimplifiedEapExport/i18n.json b/app/src/views/SimplifiedEapExport/i18n.json
index 92ce6b17f..ab310c14a 100644
--- a/app/src/views/SimplifiedEapExport/i18n.json
+++ b/app/src/views/SimplifiedEapExport/i18n.json
@@ -1,6 +1,8 @@
 {
     "namespace": "simplifiedEapExport",
     "strings": {
+        "pageTitleSimplifiedText": "Simplified",
+        "pageTitleEapText": "Early Action Protocol",
         "sEapNoLabel": "sEAP No",
         "totalBudgetLabel": "Total Budget",
         "readinessLabel": "Readiness",
@@ -33,7 +35,6 @@
         "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",
-        "budgetHeading": "Budget",
         "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
index 9b41ab752..a8cd4afb2 100644
--- a/app/src/views/SimplifiedEapExport/index.tsx
+++ b/app/src/views/SimplifiedEapExport/index.tsx
@@ -4,10 +4,7 @@ import {
 } from 'react-router-dom';
 import { Label } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
-import {
-    DescriptionText,
-    Image,
-} from '@ifrc-go/ui/printable';
+import { Image } from '@ifrc-go/ui/printable';
 import {
     isDefined,
     isFalsyString,
@@ -18,6 +15,7 @@ import {
 
 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';
@@ -30,7 +28,9 @@ import styles from './styles.module.css';
 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);
 
@@ -45,18 +45,45 @@ export function Component() {
         } : undefined,
     });
 
-    const latestSimplifiedEap = eapRegistrationResponse?.simplified_eap_details?.find(
+    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(latestSimplifiedEap?.id),
+        skip: isNotDefined(currentSimplifiedEapId),
         url: '/api/v2/simplified-eap/{id}/',
-        pathVariables: isDefined(latestSimplifiedEap?.id) ? {
-            id: Number(latestSimplifiedEap.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,
     });
 
@@ -113,21 +140,36 @@ export function Component() {
         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;
+    const previewReady = !eapRegistrationPending
+        && !simplifiedEapPending
+        && !prevSimplifiedEapPending;
 
     return (
         <PrintablePage
             heading={(
                 <>
-                    Simplified
+                    {strings.pageTitleSimplifiedText}
                     <br />
-                    Early Action Protocol
+                    {strings.pageTitleEapText}
                 </>
             )}
             description={eapTitle ?? '--'}
@@ -235,17 +277,19 @@ export function Component() {
                     heading={strings.prioritizedHazardAndImpactHeading}
                     headingLevel={3}
                 >
-                    <DescriptionText>
-                        {prioritized_hazard_and_impact}
-                    </DescriptionText>
+                    <PrintableDescription
+                        value={prioritized_hazard_and_impact}
+                        prevValue={prev_prioritized_hazard_and_impact}
+                    />
                 </PrintableContainer>
                 <PrintableContainer
                     heading={strings.riskSelectedProtocolsHeading}
                     headingLevel={3}
                 >
-                    <DescriptionText>
-                        {risks_selected_protocols}
-                    </DescriptionText>
+                    <PrintableDescription
+                        value={risks_selected_protocols}
+                        prevValue={prev_risks_selected_protocols}
+                    />
                 </PrintableContainer>
             </PrintableContainer>
             <PrintableContainer
@@ -256,49 +300,55 @@ export function Component() {
                     heading={strings.overallObjectiveInterventionHeading}
                     headingLevel={3}
                 >
-                    <DescriptionText>
-                        {overall_objective_intervention}
-                    </DescriptionText>
+                    <PrintableDescription
+                        value={overall_objective_intervention}
+                        prevValue={prev_overall_objective_intervention}
+                    />
                 </PrintableContainer>
                 <PrintableContainer
                     heading={strings.potentialGeographicalHighRiskAreasHeading}
                     headingLevel={3}
                 >
-                    <DescriptionText>
-                        {potential_geographical_high_risk_areas}
-                    </DescriptionText>
+                    <PrintableDescription
+                        value={potential_geographical_high_risk_areas}
+                        prevValue={prev_potential_geographical_high_risk_areas}
+                    />
                 </PrintableContainer>
                 <PrintableContainer
                     heading={strings.assistedThroughOperationHeading}
                     headingLevel={3}
                 >
-                    <DescriptionText>
-                        {assisted_through_operation}
-                    </DescriptionText>
+                    <PrintableDescription
+                        value={assisted_through_operation}
+                        prevValue={prev_assisted_through_operation}
+                    />
                 </PrintableContainer>
                 <PrintableContainer
                     heading={strings.triggerStatementHeading}
                     headingLevel={3}
                 >
-                    <DescriptionText>
-                        {trigger_statement}
-                    </DescriptionText>
+                    <PrintableDescription
+                        value={trigger_statement}
+                        prevValue={prev_trigger_statement}
+                    />
                 </PrintableContainer>
                 <PrintableContainer
                     heading={strings.triggerThresholdJustificationHeading}
                     headingLevel={3}
                 >
-                    <DescriptionText>
-                        {trigger_threshold_justification}
-                    </DescriptionText>
+                    <PrintableDescription
+                        value={trigger_threshold_justification}
+                        prevValue={prev_trigger_threshold_justification}
+                    />
                 </PrintableContainer>
                 <PrintableContainer
                     heading={strings.nextStepsTowardsFullEapHeading}
                     headingLevel={3}
                 >
-                    <DescriptionText>
-                        {next_step_towards_full_eap}
-                    </DescriptionText>
+                    <PrintableDescription
+                        value={next_step_towards_full_eap}
+                        prevValue={prev_next_step_towards_full_eap}
+                    />
                 </PrintableContainer>
             </PrintableContainer>
             <PrintableContainer
@@ -495,30 +545,36 @@ export function Component() {
                     heading={strings.earlyActionCapacityHeading}
                     headingLevel={3}
                 >
-                    <DescriptionText>
-                        {early_action_capability}
-                    </DescriptionText>
+                    <PrintableDescription
+                        value={early_action_capability}
+                        prevValue={prev_early_action_capability}
+                    />
                 </PrintableContainer>
                 <PrintableContainer
                     heading={strings.rcrcMovementInvolvementHeading}
                     headingLevel={3}
                 >
-                    <DescriptionText>
-                        {rcrc_movement_involvement}
-                    </DescriptionText>
+                    <PrintableDescription
+                        value={rcrc_movement_involvement}
+                        prevValue={prev_rcrc_movement_involvement}
+                    />
                 </PrintableContainer>
             </PrintableContainer>
+            {/*
             <PrintableContainer
                 heading={strings.budgetHeading}
                 headingLevel={2}
+                // FIXME: add budget details
             >
-                <DescriptionText>
-                    Budget details
-                </DescriptionText>
+                <PrintableDescription
+                    value="Budget details"
+                />
             </PrintableContainer>
+            */}
             <PrintableContainer
                 heading={strings.contactInformationHeading}
                 headingLevel={2}
+                // FIXME: add proper contact information
             >
                 <PrintableContainer headingLevel={5}>
                     <Label
diff --git a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
index 0726d9a19..bbf24b60e 100644
--- a/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
+++ b/app/src/views/SimplifiedEapForm/EnablingApproaches/ApproachesInput/i18n.json
@@ -3,7 +3,6 @@
     "strings": {
         "approachBudget": "Budget",
         "approachApCode": "AP Code",
-        "approachIndicatorTarget": "Indicator Target",
         "approachRemoveButton": "Remove",
         "approachAddActivityButton": "Add Activity",
         "approachReadinessActivities": "Readiness Activities",
diff --git a/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json b/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
index 944c7191b..ae276f6ad 100644
--- a/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
+++ b/app/src/views/SimplifiedEapForm/RiskAnalysis/i18n.json
@@ -4,7 +4,6 @@
         "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",
-        "simplifiedFormUploadlabel": "Upload",
         "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.",
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 8db0e1224..eddbd84ae 100644
--- a/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/styles.module.css
+++ b/packages/ui/src/components/Table/ColumnShortcuts/ExpansionIndicator/styles.module.css
@@ -19,9 +19,9 @@
 
     .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);
-        border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-primary-red);
         width: 0.8125rem;
         height: 0.8125rem;
     }
@@ -47,8 +47,8 @@
 
     &.disabled {
         .indicator {
-            background-color: var(--go-ui-color-white);
             border-color: var(--go-ui-color-separator);
+            background-color: var(--go-ui-color-white);
         }
     }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 17adc76b6..07b01e0ce 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
 

From 4c88096aad799fa629758135aa069573c343c069 Mon Sep 17 00:00:00 2001
From: frozenhelium <ankit.mehta@togglecorp.com>
Date: Mon, 15 Dec 2025 12:44:15 +0545
Subject: [PATCH 19/19] feat(eap): add option to export with changes

---
 .../AccountMyFormsEap/EapStatus/index.tsx     |  15 +-
 .../EapTableActions/index.tsx                 | 180 ++++++++++--------
 app/src/views/AccountMyFormsEap/index.tsx     |   2 +-
 go-api                                        |   2 +-
 4 files changed, 120 insertions(+), 79 deletions(-)

diff --git a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
index 98b11d56a..515dedf65 100644
--- a/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapStatus/index.tsx
@@ -20,6 +20,7 @@ import {
 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,
@@ -68,6 +69,8 @@ function EapStatus(props: Props) {
         onStatusUpdate,
     } = props;
 
+    const alert = useAlert();
+
     const { eap_eap_status: eapStatusOptions } = useGlobalEnums();
     const [newStatus, setNewStatus] = useState<EapStatus | undefined>();
     const [checklistFile, setChecklistFile] = useState<File | undefined>();
@@ -90,9 +93,19 @@ function EapStatus(props: Props) {
             if (onStatusUpdate) {
                 onStatusUpdate();
             }
-            // TODO alert on status update
+
+            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
diff --git a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
index d7582d7c8..c4bc42dc5 100644
--- a/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
+++ b/app/src/views/AccountMyFormsEap/EapTableActions/index.tsx
@@ -1,15 +1,16 @@
+import {
+    useCallback,
+    useState,
+} from 'react';
 import {
     DocumentPdfLineIcon,
     DownloadTwoLineIcon,
 } from '@ifrc-go/icons';
 import {
     Button,
-    TableActions,
+    ListView,
 } from '@ifrc-go/ui';
-import {
-    useBooleanState,
-    useTranslation,
-} from '@ifrc-go/ui/hooks';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     isDefined,
     isNotDefined,
@@ -41,102 +42,129 @@ function EapTableActions(props: Props) {
         details,
     } = expandedListItem;
 
+    const [exportWithDiffView, setExportWithDiffView] = useState(false);
+    const [showExportModal, setShowExportModal] = useState(false);
+
     const strings = useTranslation(i18n);
-    const [
-        showExportModal,
-        {
-            setTrue: setShowExportModalTrue,
-            setFalse: setShowExportModalFalse,
-        },
-    ] = useBooleanState(false);
+
+    const setShowExportModalTrue = useCallback((withDiff?: boolean) => {
+        setExportWithDiffView(!!withDiff);
+        setShowExportModal(true);
+    }, []);
+
+    const setShowExportModalFalse = useCallback(() => {
+        setExportWithDiffView(false);
+        setShowExportModal(false);
+    }, []);
 
     return (
-        <TableActions>
-            {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={undefined}
-                    onClick={setShowExportModalTrue}
-                    // FIXME: use strings
-                >
-                    Export
-                </Button>
-            )}
-            {type === 'development' && isNotDefined(eap.eap_type) && isNotDefined(details) && (
-                <>
+        <>
+            <ListView layout="block">
+                {type === 'development' && eap.eap_type === EAP_TYPE_SIMPLIFIED && (
                     <Link
-                        to="simplifiedEapForm"
+                        to="simplifiedEapExport"
                         urlParams={{ eapId: eap.id }}
-                        styleVariant="outline"
-                        colorVariant="primary"
+                        urlSearch={isDefined(details?.data.version)
+                            ? `version=${details.data.version}`
+                            : undefined}
+                        title="Preview export"
+                        before={<DocumentPdfLineIcon fontSize={18} />}
                     >
-                        {strings.eapStartSimplifiedLink}
+                        Preview export
                     </Link>
+                )}
+                {type === 'development' && details?.data.is_locked && isDefined(eap.review_checklist_file) && (
                     <Link
-                        to="fullEapForm"
-                        urlParams={{ eapId: eap.id }}
-                        styleVariant="outline"
-                        colorVariant="primary"
+                        external
+                        href={eap.review_checklist_file}
+                        before={<DownloadTwoLineIcon />}
                     >
-                        {strings.eapStartFullLink}
+                        Review Checklist
                     </Link>
-                </>
-            )}
-            {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))
-                && (
+                )}
+                {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="simplifiedEapForm"
+                        to="fullEapForm"
                         urlParams={{ eapId: eap.id }}
                         styleVariant="outline"
                         colorVariant="primary"
                     >
-                        {strings.eapEditSimplifiedLink}
+                        {strings.eapEditFullLink}
                     </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>
-            )}
-            {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"
-                >
-                    <DocumentPdfLineIcon fontSize={18} />
-                </Link>
-            )}
+            </ListView>
             {showExportModal && isDefined(eap.eap_type) && (
                 <EapExportModal
                     eapId={eap.id}
                     eapType={eap.eap_type}
                     onClose={setShowExportModalFalse}
                     version={details?.data.version}
+                    diff={exportWithDiffView}
                 />
             )}
-        </TableActions>
+        </>
     );
 }
 
diff --git a/app/src/views/AccountMyFormsEap/index.tsx b/app/src/views/AccountMyFormsEap/index.tsx
index ac6b69c4f..98c422042 100644
--- a/app/src/views/AccountMyFormsEap/index.tsx
+++ b/app/src/views/AccountMyFormsEap/index.tsx
@@ -214,7 +214,7 @@ export function Component() {
                             eap: eapListItem,
                             type: 'development',
                             details: undefined,
-                            disabled: false,
+                            disabled: true,
                         } satisfies EapExpandedListItem)
                         : undefined
                     ),
diff --git a/go-api b/go-api
index abc20b941..86af72836 160000
--- a/go-api
+++ b/go-api
@@ -1 +1 @@
-Subproject commit abc20b94143333aa7ab713abda914374b8da0c34
+Subproject commit 86af72836dc67a3811edbdbc2cb749e993abab58