diff --git a/i18n/en.pot b/i18n/en.pot
index eef4b4f9..76f0144c 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-07-01T02:04:44.570Z\n"
-"PO-Revision-Date: 2024-07-01T02:04:44.570Z\n"
+"POT-Creation-Date: 2024-08-05T08:04:28.112Z\n"
+"PO-Revision-Date: 2024-08-05T08:04:28.112Z\n"
 
 msgid "Low"
 msgstr ""
@@ -32,10 +32,14 @@ msgstr ""
 msgid "Within a province with more than one district affected"
 msgstr ""
 
-msgid "More than one province affected with high threat of spread locally and internationally"
+msgid ""
+"More than one province affected with high threat of spread locally and "
+"internationally"
 msgstr ""
 
-msgid "Available within the district with support from provincial and national level"
+msgid ""
+"Available within the district with support from provincial and national "
+"level"
 msgstr ""
 
 msgid "Available within the province with minimal support from national level"
@@ -62,10 +66,10 @@ msgstr ""
 msgid "Indicates required"
 msgstr ""
 
-msgid "Save"
+msgid "Cancel"
 msgstr ""
 
-msgid "Cancel"
+msgid "Save"
 msgstr ""
 
 msgid "Create Event"
@@ -80,6 +84,15 @@ msgstr ""
 msgid "Last updated: "
 msgstr ""
 
+msgid "Median"
+msgstr ""
+
+msgid "% Target Met"
+msgstr ""
+
+msgid "Status: "
+msgstr ""
+
 msgid "Dashboard"
 msgstr ""
 
@@ -89,6 +102,12 @@ msgstr ""
 msgid "Event Tracker"
 msgstr ""
 
+msgid "Page Not Found"
+msgstr ""
+
+msgid "Create Event form cannot be loaded"
+msgstr ""
+
 msgid "Incident Action Plan"
 msgstr ""
 
diff --git a/i18n/es.po b/i18n/es.po
index 2dc83d3b..d711cc9c 100644
--- a/i18n/es.po
+++ b/i18n/es.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-07-01T02:04:44.570Z\n"
+"POT-Creation-Date: 2024-08-05T08:04:28.112Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -65,10 +65,10 @@ msgstr ""
 msgid "Indicates required"
 msgstr ""
 
-msgid "Save"
+msgid "Cancel"
 msgstr ""
 
-msgid "Cancel"
+msgid "Save"
 msgstr ""
 
 msgid "Create Event"
@@ -83,6 +83,15 @@ msgstr ""
 msgid "Last updated: "
 msgstr ""
 
+msgid "Median"
+msgstr ""
+
+msgid "% Target Met"
+msgstr ""
+
+msgid "Status: "
+msgstr ""
+
 msgid "Dashboard"
 msgstr ""
 
@@ -92,6 +101,12 @@ msgstr ""
 msgid "Event Tracker"
 msgstr ""
 
+msgid "Page Not Found"
+msgstr ""
+
+msgid "Create Event form cannot be loaded"
+msgstr ""
+
 msgid "Incident Action Plan"
 msgstr ""
 
diff --git a/package.json b/package.json
index e01162d7..162aa94a 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "5.2.0",
         "real-cancellable-promise": "^1.1.2",
+        "string-ts": "2.2.0",
         "styled-components": "5.3.5",
         "styled-jsx": "3.4.5",
         "typed-immutable-map": "^0.1.1",
@@ -76,7 +77,7 @@
         "ts-node": "^10.9.1",
         "ts-prune": "^0.10.3",
         "typedoc": "^0.25.1",
-        "typescript": "5.2.2",
+        "typescript": "5.3.2",
         "vite": "^4.2.0",
         "vite-bundle-visualizer": "^0.6.0",
         "vite-plugin-checker": "^0.6.2",
diff --git a/src/utils/tests.tsx b/src/utils/tests.tsx
index b41cd9cb..ba4d1938 100644
--- a/src/utils/tests.tsx
+++ b/src/utils/tests.tsx
@@ -4,6 +4,11 @@ import { ReactNode } from "react";
 import { AppContext, AppContextState } from "../webapp/contexts/app-context";
 import { getTestCompositionRoot } from "../CompositionRoot";
 import { createAdminUser } from "../domain/entities/__tests__/userFixtures";
+import { MuiThemeProvider } from "@material-ui/core";
+import { ThemeProvider } from "styled-components";
+import OldMuiThemeProvider from "material-ui/styles/MuiThemeProvider";
+import muiThemeLegacy from "../webapp/pages/app/themes/dhis2-legacy.theme";
+import { muiTheme } from "../webapp/pages/app/themes/dhis2.theme";
 
 export function getTestContext() {
     const context: AppContextState = {
@@ -18,8 +23,14 @@ export function getReactComponent(children: ReactNode): RenderResult {
     const context = getTestContext();
 
     return render(
-        <AppContext.Provider value={context}>
-            <SnackbarProvider>{children}</SnackbarProvider>
-        </AppContext.Provider>
+        <MuiThemeProvider theme={muiTheme}>
+            <ThemeProvider theme={muiTheme}>
+                <OldMuiThemeProvider muiTheme={muiThemeLegacy}>
+                    <AppContext.Provider value={context}>
+                        <SnackbarProvider>{children}</SnackbarProvider>
+                    </AppContext.Provider>
+                </OldMuiThemeProvider>
+            </ThemeProvider>
+        </MuiThemeProvider>
     );
 }
diff --git a/src/webapp/components/checkbox/Checkbox.tsx b/src/webapp/components/checkbox/Checkbox.tsx
index 47634f61..2b686cc0 100644
--- a/src/webapp/components/checkbox/Checkbox.tsx
+++ b/src/webapp/components/checkbox/Checkbox.tsx
@@ -24,6 +24,9 @@ export const Checkbox: React.FC<CheckboxProps> = React.memo(
         helperText = "",
         disabled = false,
         indeterminate = false,
+        errorText = "",
+        error = false,
+        required = false,
     }) => {
         const handleChange = useCallback(
             (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -47,12 +50,20 @@ export const Checkbox: React.FC<CheckboxProps> = React.memo(
                         inputProps={inputProps}
                     />
 
-                    <Label htmlFor={id} disabled={disabled}>
-                        {label}
-                    </Label>
+                    {label && (
+                        <Label
+                            className={required ? "required" : ""}
+                            htmlFor={id}
+                            disabled={disabled}
+                        >
+                            {label}
+                        </Label>
+                    )}
                 </CheckboxWrapper>
 
-                <StyledFormHelperText id={`${id}-helper-text`}>{helperText}</StyledFormHelperText>
+                <StyledFormHelperText id={`${id}-helper-text`} error={error && !!errorText}>
+                    {error && !!errorText ? errorText : helperText}
+                </StyledFormHelperText>
             </Container>
         );
     }
@@ -76,8 +87,15 @@ const Label = styled(InputLabel)`
     &.Mui-disabled {
         color: ${props => props.theme.palette.common.grey600};
     }
+
+    &.required::after {
+        content: "*";
+        color: ${props => props.theme.palette.common.red};
+        margin-inline-start: 4px;
+    }
 `;
 
-const StyledFormHelperText = styled(FormHelperText)`
-    color: ${props => props.theme.palette.common.grey700};
+const StyledFormHelperText = styled(FormHelperText)<{ error?: boolean }>`
+    color: ${props =>
+        props.error ? props.theme.palette.common.red700 : props.theme.palette.common.grey700};
 `;
diff --git a/src/webapp/components/form/FieldWidget.tsx b/src/webapp/components/form/FieldWidget.tsx
new file mode 100644
index 00000000..2caf1113
--- /dev/null
+++ b/src/webapp/components/form/FieldWidget.tsx
@@ -0,0 +1,94 @@
+import React, { useCallback } from "react";
+
+import { TextInput } from "../text-input/TextInput";
+import { UserSelector } from "../user-selector/UserSelector";
+import { MultipleSelector } from "../selector/MultipleSelector";
+import { Selector } from "../selector/Selector";
+import { RadioButtonsGroup } from "../radio-buttons-group/RadioButtonsGroup";
+import { TextArea } from "../text-input/TextArea";
+import { DatePicker } from "../date-picker/DatePicker";
+import { Checkbox } from "../checkbox/Checkbox";
+import { FormFieldState, updateFieldState } from "./FormState";
+
+export type FieldWidgetProps = {
+    onChange: (updatedField: FormFieldState) => void;
+    field: FormFieldState;
+    disabled?: boolean;
+};
+
+export const FieldWidget: React.FC<FieldWidgetProps> = React.memo((props): JSX.Element => {
+    const { field, onChange, disabled = false } = props;
+
+    const handleChange = useCallback(
+        (newValue: FormFieldState["value"]) => {
+            onChange(updateFieldState(field, newValue));
+        },
+        [field, onChange]
+    );
+
+    const commonProps = {
+        id: field.id,
+        label: field.label,
+        onChange: handleChange,
+        helperText: field.helperText,
+        errorText: field.errors ? field.errors.join("\n") : "",
+        error: field.errors && field.errors.length > 0,
+        required: field.required && field.showIsRequired,
+        disabled: disabled,
+    };
+
+    switch (field.type) {
+        case "select": {
+            return field.multiple ? (
+                <MultipleSelector
+                    {...commonProps}
+                    placeholder={field.placeholder}
+                    selected={field.value}
+                    options={field.options}
+                />
+            ) : (
+                <Selector
+                    {...commonProps}
+                    placeholder={field.placeholder}
+                    selected={field.value}
+                    options={field.options}
+                />
+            );
+        }
+
+        case "radio": {
+            return (
+                <RadioButtonsGroup
+                    {...commonProps}
+                    selected={field.value}
+                    options={field.options}
+                />
+            );
+        }
+
+        case "text":
+            return field.multiline ? (
+                <TextArea {...commonProps} value={field.value} />
+            ) : (
+                <TextInput {...commonProps} value={field.value} />
+            );
+
+        case "date":
+            return <DatePicker {...commonProps} value={field.value} />;
+
+        case "boolean": {
+            return <Checkbox {...commonProps} checked={field.value} />;
+        }
+
+        case "user": {
+            return (
+                <UserSelector
+                    {...commonProps}
+                    placeholder={field.placeholder}
+                    selected={field.value}
+                    options={field.options}
+                />
+            );
+        }
+    }
+});
diff --git a/src/webapp/components/form/Form.tsx b/src/webapp/components/form/Form.tsx
new file mode 100644
index 00000000..fda79f44
--- /dev/null
+++ b/src/webapp/components/form/Form.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+import { useForm } from "./useForm";
+import { FormState, FormFieldState } from "./FormState";
+import { FormLayout } from "./FormLayout";
+import { FormSection } from "./FormSection";
+import { Layout } from "../layout/Layout";
+
+export type FormProps = {
+    formState: FormState;
+    onFormChange: (newFormState: FormState, updatedField: FormFieldState) => void;
+    onSave: () => void;
+    onCancel?: () => void;
+};
+
+export const Form: React.FC<FormProps> = React.memo(props => {
+    const { formState, onFormChange, onSave, onCancel } = props;
+
+    const { formLocalState, handleUpdateFormField } = useForm(formState, onFormChange);
+
+    return (
+        <Layout title={formLocalState.title} subtitle={formLocalState.subtitle} hideSideBarOptions>
+            <FormLayout
+                title={formLocalState.titleDescripton}
+                subtitle={formLocalState.subtitleDescripton}
+                onSave={onSave}
+                onCancel={onCancel}
+                saveLabel={formLocalState.saveButtonLabel}
+                cancelLabel={formLocalState.cancelButtonLabel}
+                disableSave={!formLocalState.isValid}
+            >
+                {formLocalState.sections.map(section => {
+                    if (!section.isVisible) return null;
+
+                    return (
+                        <FormSection
+                            key={section.id}
+                            id={section.id}
+                            title={section.title}
+                            hasSeparator
+                            required={section.required}
+                            direction={section.direction}
+                            subsections={section.subsections}
+                            fields={section.fields}
+                            onUpdateField={handleUpdateFormField}
+                            onClickInfo={section.onClickInfo}
+                        />
+                    );
+                })}
+            </FormLayout>
+        </Layout>
+    );
+});
diff --git a/src/webapp/components/form/FormLayout.tsx b/src/webapp/components/form/FormLayout.tsx
index 79b8124f..72fa5c36 100644
--- a/src/webapp/components/form/FormLayout.tsx
+++ b/src/webapp/components/form/FormLayout.tsx
@@ -13,10 +13,20 @@ type FormLayoutProps = {
     children: React.ReactNode;
     onSave: () => void;
     onCancel?: () => void;
+    disableSave?: boolean;
 };
 
 export const FormLayout: React.FC<FormLayoutProps> = React.memo(
-    ({ title, subtitle, saveLabel, cancelLabel, children, onSave, onCancel }) => {
+    ({
+        title,
+        subtitle,
+        saveLabel,
+        cancelLabel,
+        children,
+        onSave,
+        onCancel,
+        disableSave = false,
+    }) => {
         return (
             <StyledFormLayout>
                 <Header>
@@ -34,12 +44,14 @@ export const FormLayout: React.FC<FormLayoutProps> = React.memo(
                     <Separator margin="12px" />
 
                     <ButtonsFooter>
-                        <Button onClick={onSave}>{saveLabel || i18n.t("Save")}</Button>
                         {onCancel && (
                             <Button onClick={onCancel} variant="outlined" color="secondary">
                                 {cancelLabel || i18n.t("Cancel")}
                             </Button>
                         )}
+                        <Button onClick={onSave} disabled={disableSave}>
+                            {saveLabel || i18n.t("Save")}
+                        </Button>
                     </ButtonsFooter>
                 </Footer>
             </StyledFormLayout>
@@ -65,7 +77,7 @@ const Footer = styled.div``;
 const ButtonsFooter = styled.div`
     margin-block-start: 48px;
     display: flex;
-    gap: 48px;
+    justify-content: space-between;
 `;
 
 const TitleContainer = styled.div`
diff --git a/src/webapp/components/form/FormSection.tsx b/src/webapp/components/form/FormSection.tsx
index f5e7fae0..7be87177 100644
--- a/src/webapp/components/form/FormSection.tsx
+++ b/src/webapp/components/form/FormSection.tsx
@@ -4,24 +4,32 @@ import { IconInfo24 } from "@dhis2/ui";
 
 import { Separator } from "../separator/Separator";
 import { IconButton } from "../icon-button/IconButton";
+import { FieldWidget } from "./FieldWidget";
+import { FormFieldState, FormSectionState } from "./FormState";
 
 type FormSectionProps = {
+    id: string;
     title?: string;
     required?: boolean;
-    children: React.ReactNode;
     hasSeparator?: boolean;
-    onClickInfo?: () => void;
+    onClickInfo?: (id: string) => void;
     direction?: "row" | "column";
+    subsections?: FormSectionState[];
+    fields: FormFieldState[];
+    onUpdateField: (updatedField: FormFieldState) => void;
 };
 
 export const FormSection: React.FC<FormSectionProps> = React.memo(
     ({
+        id,
         title,
         hasSeparator = false,
-        children,
         onClickInfo,
         direction = "row",
         required = false,
+        subsections,
+        fields,
+        onUpdateField,
     }) => {
         return (
             <FormSectionContainer>
@@ -29,18 +37,60 @@ export const FormSection: React.FC<FormSectionProps> = React.memo(
 
                 <Container direction={direction}>
                     {title && (
-                        <TitleContainer direction={direction}>
+                        <TitleContainer>
                             <RequiredText className={required ? "required" : ""}>
                                 {title}
                             </RequiredText>
 
                             {onClickInfo && (
-                                <IconButton icon={<IconInfo24 />} onClick={onClickInfo} />
+                                <IconButton
+                                    icon={<IconInfo24 />}
+                                    ariaLabel="Section information"
+                                    onClick={() => onClickInfo(id)}
+                                />
                             )}
                         </TitleContainer>
                     )}
 
-                    <FormContainer fulWidth={!title}>{children}</FormContainer>
+                    <FormContainer fullWidth={!title || direction === "column"}>
+                        {fields.map(field => {
+                            if (!field.isVisible) return null;
+                            return (
+                                <FieldContainer key={field.id} width={field.width}>
+                                    <FieldWidget
+                                        field={field}
+                                        disabled={field.disabled}
+                                        onChange={onUpdateField}
+                                    />
+                                </FieldContainer>
+                            );
+                        })}
+                    </FormContainer>
+
+                    {subsections?.map(subsection => (
+                        <SubsectionContainer
+                            key={subsection.id}
+                            direction={subsection.direction || "row"}
+                        >
+                            {subsection.title && <Title>{subsection.title}</Title>}
+                            <FieldsContainer>
+                                {subsection.fields.map(field => {
+                                    if (!field.isVisible) return null;
+
+                                    return (
+                                        <FieldContainer key={field.id} width={field.width}>
+                                            <FieldWidget
+                                                key={field.id}
+                                                field={field}
+                                                disabled={field.disabled}
+                                                onChange={onUpdateField}
+                                            />
+                                        </FieldContainer>
+                                    );
+                                })}
+                            </FieldsContainer>
+                        </SubsectionContainer>
+                    ))}
                 </Container>
             </FormSectionContainer>
         );
@@ -61,18 +111,26 @@ const Container = styled.div<{ direction: string }>`
     @media (max-width: 600px) {
         flex-direction: column;
         align-items: flex-start;
+        gap: 24px;
     }
 `;
 
-const TitleContainer = styled.div<{ direction: string }>`
+const TitleContainer = styled.div`
     display: flex;
     align-items: center;
     gap: 4px;
-    width: 30%;
+    width: 20%;
 `;
 
-const FormContainer = styled.div<{ fulWidth: boolean }>`
-    width: ${props => (props.fulWidth ? "100%" : "70%")};
+const FormContainer = styled.div<{ fullWidth: boolean }>`
+    width: ${props => (props.fullWidth ? "100%" : "80%")};
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    align-items: flex-end;
+    @media (max-width: 600px) {
+        width: 100%;
+    }
 `;
 
 const RequiredText = styled.span`
@@ -86,4 +144,55 @@ const RequiredText = styled.span`
         color: ${props => props.theme.palette.common.red};
         margin-inline-start: 4px;
     }
+
+    @media (max-width: 600px) {
+        white-space: wrap;
+    }
+`;
+
+const FieldsContainer = styled.div`
+    display: flex;
+    width: 40%;
+    align-items: flex-end;
+    @media (max-width: 600px) {
+        width: 100%;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 12px;
+    }
+`;
+
+const SubsectionContainer = styled.div<{ direction: string }>`
+    display: flex;
+    justify-content: space-between;
+    flex-direction: ${props => props.direction};
+    width: 100%;
+    gap: ${props => (props.direction === "row" ? "48px" : "24px")};
+    align-items: ${props => (props.direction === "row" ? "center" : "flex-start")};
+    @media (max-width: 600px) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 24px;
+    }
+`;
+
+const Title = styled.div`
+    color: ${props => props.theme.palette.common.black};
+    font-size: 0.875rem;
+    font-weight: 400;
+    width: 60%;
+    @media (max-width: 600px) {
+        width: 100%;
+    }
+`;
+
+const FieldContainer = styled.div<{ width?: string }>`
+    display: flex;
+    width: ${props => props.width || "100%"};
+    justify-content: flex-end;
+    @media (max-width: 600px) {
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        width: 100%;
+    }
 `;
diff --git a/src/webapp/components/form/FormState.ts b/src/webapp/components/form/FormState.ts
new file mode 100644
index 00000000..087545d7
--- /dev/null
+++ b/src/webapp/components/form/FormState.ts
@@ -0,0 +1,135 @@
+import { Maybe } from "../../../utils/ts-utils";
+import { UserOption } from "../user-selector/UserSelector";
+import { Option } from "../utils/option";
+
+export type FormState = {
+    id: string;
+    title: string;
+    subtitle?: string;
+    titleDescripton?: string;
+    subtitleDescripton?: string;
+    saveButtonLabel?: string;
+    cancelButtonLabel?: string;
+    sections: FormSectionState[];
+    isValid: boolean;
+};
+
+export type FormSectionState = {
+    id: string;
+    title?: string;
+    isVisible?: boolean;
+    required?: boolean;
+    direction?: "row" | "column";
+    fields: FormFieldState[];
+    subsections?: FormSectionState[];
+    onClickInfo?: (id: string) => void;
+};
+
+type FieldTypes = "text" | "boolean" | "select" | "radio" | "date" | "user";
+
+type FormFieldStateBase<T> = {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    helperText?: string;
+    errors?: string[];
+    required?: boolean;
+    showIsRequired?: boolean;
+    disabled?: boolean;
+    isVisible?: boolean;
+    showNotApplicable?: boolean;
+    width?: string;
+    value: T;
+    type: FieldTypes;
+};
+
+export type FormTextFieldState = FormFieldStateBase<string> & {
+    type: "text";
+    multiline?: boolean;
+};
+
+export type FormBooleanFieldState = FormFieldStateBase<boolean> & {
+    type: "boolean";
+};
+
+export type FormMultipleOptionsFieldState = FormFieldStateBase<string[]> & {
+    type: "select";
+    options: Option[];
+    multiple: true;
+};
+
+export type FormOptionsFieldState = FormFieldStateBase<string> & {
+    type: "select" | "radio";
+    options: Option[];
+    multiple: false;
+};
+
+export type FormDateFieldState = FormFieldStateBase<Date | null> & {
+    type: "date";
+};
+
+export type FormAvatarFieldState = FormFieldStateBase<Maybe<string>> & {
+    type: "user";
+    options: UserOption[];
+};
+
+export type FormFieldState =
+    | FormTextFieldState
+    | FormOptionsFieldState
+    | FormMultipleOptionsFieldState
+    | FormBooleanFieldState
+    | FormDateFieldState
+    | FormAvatarFieldState;
+
+export function updateFormState(prevFormState: FormState, updatedField: FormFieldState): FormState {
+    return {
+        ...prevFormState,
+        sections: updateSectionsState(prevFormState.sections, updatedField),
+    };
+}
+
+export function updateSectionsState(
+    prevFormSectionsState: FormSectionState[],
+    updatedField: FormFieldState
+): FormSectionState[] {
+    const updatedSections = prevFormSectionsState.map(section => {
+        if (section?.subsections) {
+            return {
+                ...updateSectionState(section, updatedField),
+                subsections: updateSectionsState(section?.subsections, updatedField),
+            };
+        } else {
+            return updateSectionState(section, updatedField);
+        }
+    });
+
+    return updatedSections;
+}
+
+export function updateSectionState(
+    prevFormSectionState: FormSectionState,
+    updatedField: FormFieldState
+): FormSectionState {
+    return {
+        ...prevFormSectionState,
+        fields: updateFieldsState(prevFormSectionState.fields, updatedField),
+    };
+}
+
+export function updateFieldsState(
+    prevFormFields: FormFieldState[],
+    updatedField: FormFieldState
+): FormFieldState[] {
+    const updatedFields = prevFormFields.map(field => {
+        return field.id === updatedField.id ? updatedField : field;
+    });
+
+    return updatedFields;
+}
+
+export function updateFieldState<F extends FormFieldState>(
+    fieldToUpdate: F,
+    newValue: F["value"]
+): F {
+    return { ...fieldToUpdate, value: newValue };
+}
diff --git a/src/webapp/components/form/__tests__/Form.spec.tsx b/src/webapp/components/form/__tests__/Form.spec.tsx
new file mode 100644
index 00000000..a796e939
--- /dev/null
+++ b/src/webapp/components/form/__tests__/Form.spec.tsx
@@ -0,0 +1,494 @@
+import { getReactComponent } from "../../../../utils/tests";
+import { FormProps, Form } from "../Form";
+import { FormFieldState, FormState } from "../FormState";
+
+describe("Given Form component", () => {
+    describe("when render form and its layout", () => {
+        it("then shows form title", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(await view.findByText("Form Title")).toBeInTheDocument();
+        });
+
+        it("then shows form subtitle", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(await view.findByText("Form Subtitle")).toBeInTheDocument();
+        });
+
+        it("then shows save button label", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(await view.findByText("Save & continue")).toBeInTheDocument();
+        });
+
+        it("then shows save button disabled if form is not valid", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(view.getByRole("button", { name: /save & continue/i })).toBeDisabled();
+        });
+
+        it("then shows save button enabled if form is valid", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView({
+                ...formProps,
+                formState: {
+                    ...formProps.formState,
+                    isValid: true,
+                },
+            });
+
+            expect(view.getByRole("button", { name: /save & continue/i })).not.toBeDisabled();
+        });
+
+        it("then shows cancel button label and has to be enabled", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(await view.findByText("Cancel & back")).toBeInTheDocument();
+            expect(view.getByRole("button", { name: /cancel & back/i })).not.toBeDisabled();
+        });
+
+        it("then shows *indicates required text", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(await view.findByText("Indicates required")).toBeInTheDocument();
+        });
+    });
+
+    describe("when render form and its sections", () => {
+        it("then section is shown if it is visible", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(await view.findByText("Text section Title")).toBeInTheDocument();
+        });
+
+        it("then section is not shown if it is not visible", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(view.queryByText("Text section Title not visible")).toBeNull();
+        });
+
+        it("then section title has required class if it's required", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            const titleElement = await view.findByText("Text section Title");
+            expect(titleElement).toHaveClass("required");
+        });
+
+        it("then section title has not required class if it's not required", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            const titleElement = await view.findByText("Text section Title not required");
+            expect(titleElement).not.toHaveClass("required");
+        });
+
+        it("then section title has info icon button if there is a function", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            const sectionInfoButton = view.getByLabelText("Section information");
+
+            expect(sectionInfoButton).toBeInTheDocument();
+        });
+
+        it("then if section has a visible field, this has to be seen", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(await view.findByText("Field text visible required")).toBeInTheDocument();
+        });
+
+        it("then if section has a not visible field, this has not to be seen", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(view.queryByText("Field text not visible")).toBeNull();
+        });
+
+        it("then if section has subsections, show title", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(
+                await view.findByText(
+                    "1. Initiate investigation or deploy an investigation/response."
+                )
+            ).toBeInTheDocument();
+        });
+
+        it("then if section has a visible subsection field, this has to be seen", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(await view.findByText("Subsection field visible")).toBeInTheDocument();
+        });
+
+        it("then if section has a not visible subsection field, this has not to be seen", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(view.queryByText("Date Completed not visible")).toBeNull();
+        });
+    });
+
+    describe("when render form and a field", () => {
+        it("then field label has required class if it's required", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            const titleElement = await view.findByText("Field text visible required");
+            expect(titleElement).toHaveClass("required");
+        });
+
+        it("then field label has not required class if it's not required", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            const titleElement = await view.findByText("Field text visible not required");
+            expect(titleElement).not.toHaveClass("required");
+        });
+
+        it("then field helper text has to be visible", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            expect(await view.findByText("text field helper text required")).toBeInTheDocument();
+        });
+
+        it("then if a field has an error, it has to be red color", async () => {
+            const formProps = givenFormProps();
+
+            const view = getView(formProps);
+
+            const errorTextElement = await view.findByText("This is an error");
+            expect(errorTextElement).toHaveStyle("color: rgb(198, 40, 40)");
+        });
+    });
+});
+
+function getView(formProps: FormProps) {
+    return getReactComponent(<Form {...formProps} />);
+}
+
+function givenFormProps(): FormProps {
+    return {
+        formState: {
+            id: "Form Id",
+            title: "Form Title",
+            subtitle: "Form Subtitle",
+            saveButtonLabel: "Save & continue",
+            cancelButtonLabel: "Cancel & back",
+            isValid: false,
+            sections: [
+                {
+                    title: "Text section Title",
+                    id: "Text_section",
+                    isVisible: true,
+                    required: true,
+                    fields: [
+                        {
+                            id: "text required",
+                            label: "Field text visible required",
+                            isVisible: true,
+                            helperText: "text field helper text required",
+                            errors: [],
+                            type: "text",
+                            value: "text value required",
+                            multiline: false,
+                            required: true,
+                            showIsRequired: true,
+                        },
+                        {
+                            id: "text not required",
+                            label: "Field text visible not required",
+                            isVisible: true,
+                            helperText: "text field helper text not required",
+                            errors: ["This is an error"],
+                            type: "text",
+                            value: "text value not required",
+                            multiline: false,
+                            required: false,
+                        },
+                    ],
+                },
+                {
+                    title: "Text section Title with info icon",
+                    id: "Text_section",
+                    isVisible: true,
+                    required: true,
+                    onClickInfo: () => {},
+                    fields: [],
+                },
+                {
+                    title: "Text section Title not required",
+                    id: "Text_section",
+                    isVisible: true,
+                    required: false,
+                    fields: [],
+                },
+                {
+                    title: "Text section Title not visible",
+                    id: "Text_section_not_visible",
+                    isVisible: false,
+                    required: true,
+                    fields: [
+                        {
+                            id: "text_not_visible",
+                            label: "Field text not visible",
+                            isVisible: false,
+                            helperText: "helper text not visible",
+                            errors: [],
+                            type: "text",
+                            value: "text not visible",
+                            multiline: false,
+                        },
+                    ],
+                },
+                {
+                    title: "Radio section Title",
+                    id: "Radio_section",
+                    isVisible: true,
+                    required: true,
+                    fields: [
+                        {
+                            id: "radio",
+                            isVisible: true,
+                            errors: [],
+                            type: "radio",
+                            multiple: false,
+                            options: [
+                                {
+                                    value: "radio 1",
+                                    label: "radio 1",
+                                },
+                                {
+                                    value: "radio 2",
+                                    label: "radio 2",
+                                },
+                            ],
+                            value: "radio 1",
+                        },
+                    ],
+                },
+                {
+                    title: "Select section Title",
+                    id: "Select_section_not_visible",
+                    isVisible: true,
+                    required: true,
+                    fields: [
+                        {
+                            id: "Select_not_visible",
+                            isVisible: false,
+                            errors: [],
+                            type: "select",
+                            multiple: false,
+                            options: [
+                                {
+                                    value: "select 1 not visible",
+                                    label: "select 1 not visible",
+                                },
+                                {
+                                    value: "select 2 not visible",
+                                    label: "select 2 not visible",
+                                },
+                            ],
+                            value: "select 1 not visible",
+                        },
+                        {
+                            id: "Select",
+                            placeholder: "Select something",
+                            isVisible: true,
+                            errors: [],
+                            type: "select",
+                            multiple: false,
+                            options: [
+                                {
+                                    value: "select 1",
+                                    label: "select 1",
+                                },
+                                {
+                                    value: "select 2",
+                                    label: "select 2",
+                                },
+                            ],
+                            value: "select 1",
+                        },
+                    ],
+                },
+                {
+                    title: "Multiple Select section Title",
+                    id: "multipleselect_section",
+                    isVisible: true,
+                    required: true,
+                    fields: [
+                        {
+                            id: "multipleselect",
+                            label: "Provinces",
+                            isVisible: true,
+                            errors: [],
+                            type: "select",
+                            multiple: true,
+                            options: [
+                                {
+                                    value: "multipleselect 1",
+                                    label: "multipleselect 1",
+                                },
+                                {
+                                    value: "multipleselect 2",
+                                    label: "multipleselect 2",
+                                },
+                                {
+                                    value: "multipleselect 3",
+                                    label: "multipleselect 3",
+                                },
+                            ],
+                            value: ["multipleselect 2", "multipleselect 3"],
+                        },
+                    ],
+                },
+                {
+                    title: "Date section Title",
+                    id: "Date_section",
+                    isVisible: true,
+                    required: true,
+                    fields: [
+                        {
+                            id: "date",
+                            isVisible: true,
+                            errors: [],
+                            type: "date",
+                            value: null,
+                        },
+                    ],
+                },
+                {
+                    title: "checkbox section Title",
+                    id: "checkbox_section",
+                    isVisible: true,
+                    required: true,
+                    fields: [
+                        {
+                            label: "checkbox",
+                            id: "checkbox",
+                            isVisible: true,
+                            errors: [],
+                            type: "boolean",
+                            value: false,
+                        },
+                    ],
+                    subsections: [
+                        {
+                            title: "1. Initiate investigation or deploy an investigation/response.",
+                            id: "1. Initiate investigation or deploy an investigation/response.",
+                            isVisible: true,
+                            required: true,
+                            fields: [
+                                {
+                                    label: "Subsection field visible",
+                                    id: "1. Subsection field visible",
+                                    isVisible: true,
+                                    errors: [],
+                                    type: "date",
+                                    value: null,
+                                },
+                                {
+                                    label: "Date Completed not visible",
+                                    id: "2. Date Completed not visible",
+                                    isVisible: false,
+                                    errors: [],
+                                    type: "date",
+                                    value: null,
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    title: "User section Title",
+                    id: "User_section",
+                    isVisible: true,
+                    required: true,
+                    fields: [
+                        {
+                            id: "user",
+                            placeholder: "Select an user",
+                            isVisible: true,
+                            errors: [],
+                            type: "user",
+                            options: [
+                                {
+                                    value: "1",
+                                    label: "user 1",
+                                    workPosition: "Postion",
+                                    phone: "PhoneNumber",
+                                    email: "Email",
+                                    status: "Available",
+                                    src: "url 1",
+                                },
+                                {
+                                    value: "2",
+                                    label: "user 2",
+                                    workPosition: "Postion",
+                                    phone: "PhoneNumber",
+                                    email: "Email",
+                                    status: "Unavailable",
+                                    src: "url 2",
+                                },
+                            ],
+                            value: "2",
+                        },
+                    ],
+                },
+                {
+                    title: "Multiline Text section Title",
+                    id: "Multiline_Text_section",
+                    isVisible: true,
+                    required: false,
+                    fields: [
+                        {
+                            id: "Multiline_Text",
+                            isVisible: true,
+                            errors: [],
+                            type: "text",
+                            value: "Multiline Text value",
+                            multiline: true,
+                        },
+                    ],
+                },
+            ],
+        },
+        onFormChange: (_newFormState: FormState, _updatedField: FormFieldState) => {},
+        onSave: () => {},
+        onCancel: () => {},
+    };
+}
diff --git a/src/webapp/components/form/useForm.ts b/src/webapp/components/form/useForm.ts
new file mode 100644
index 00000000..5724199e
--- /dev/null
+++ b/src/webapp/components/form/useForm.ts
@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { updateFormState, FormState, FormFieldState } from "./FormState";
+
+type State = {
+    formLocalState: FormState;
+    handleUpdateFormField: (updatedField: FormFieldState) => void;
+};
+
+export function useForm(
+    formState: FormState,
+    onFormChange: (newFormState: FormState, updatedField: FormFieldState) => void
+): State {
+    const [formLocalState, setFormLocalState] = useState<FormState>(formState);
+
+    useEffect(() => {
+        setFormLocalState({
+            ...formState,
+        });
+    }, [formState]);
+
+    const handleUpdateFormField = useCallback(
+        (updatedField: FormFieldState) => {
+            const newFormState = updateFormState(formState, updatedField);
+            setFormLocalState(newFormState);
+            onFormChange(newFormState, updatedField);
+        },
+        [formState, onFormChange]
+    );
+
+    return {
+        formLocalState,
+        handleUpdateFormField,
+    };
+}
diff --git a/src/webapp/components/icon-button/IconButton.tsx b/src/webapp/components/icon-button/IconButton.tsx
index bdce855d..b654b679 100644
--- a/src/webapp/components/icon-button/IconButton.tsx
+++ b/src/webapp/components/icon-button/IconButton.tsx
@@ -6,12 +6,13 @@ type IconButtonProps = {
     icon: React.ReactNode;
     disabled?: boolean;
     onClick: () => void;
+    ariaLabel?: string;
 };
 
 export const IconButton: React.FC<IconButtonProps> = React.memo(
-    ({ icon, disabled = false, onClick }) => {
+    ({ icon, disabled = false, onClick, ariaLabel = "Icon button" }) => {
         return (
-            <StyledIconButton disabled={disabled} onClick={onClick}>
+            <StyledIconButton aria-label={ariaLabel} disabled={disabled} onClick={onClick}>
                 {icon}
             </StyledIconButton>
         );
diff --git a/src/webapp/components/layout/side-bar/SideBarContent.tsx b/src/webapp/components/layout/side-bar/SideBarContent.tsx
index 9444d017..21717a9d 100644
--- a/src/webapp/components/layout/side-bar/SideBarContent.tsx
+++ b/src/webapp/components/layout/side-bar/SideBarContent.tsx
@@ -1,11 +1,12 @@
 import { List, ListItem, ListItemText } from "@material-ui/core";
 import React, { useCallback } from "react";
 import styled from "styled-components";
-import { NavLink, useHistory } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { AddCircleOutline } from "@material-ui/icons";
 
 import i18n from "../../../../utils/i18n";
 import { Button } from "../../button/Button";
+import { RouteName, routes, useRoutes } from "../../../hooks/useRoutes";
 
 type SideBarContentProps = {
     children?: React.ReactNode;
@@ -13,41 +14,41 @@ type SideBarContentProps = {
     showCreateEvent?: boolean;
 };
 
-type SideBarOption = {
+export type SideBarOption = {
     text: string;
-    value: string;
+    value: RouteName;
 };
 
 const DEFAULT_SIDEBAR_OPTIONS: SideBarOption[] = [
     {
         text: "Dashboard",
-        value: "/dashboard",
+        value: RouteName.DASHBOARD,
     },
     {
         text: "Event Tracker",
-        value: "/event-tracker",
+        value: RouteName.EVENT_TRACKER,
     },
     {
         text: "IM Team Builder",
-        value: "/incident-management-team-builder",
+        value: RouteName.IM_TEAM_BUILDER,
     },
     {
         text: "Incident Action Plan",
-        value: "/incident-action-plan",
+        value: RouteName.INCIDENT_ACTION_PLAN,
     },
     {
         text: "Resources",
-        value: "/resources",
+        value: RouteName.RESOURCES,
     },
 ];
 
 export const SideBarContent: React.FC<SideBarContentProps> = React.memo(
     ({ children, hideOptions = false, showCreateEvent = false }) => {
-        const history = useHistory();
+        const { goTo } = useRoutes();
 
         const goToCreateEvent = useCallback(() => {
-            history.push(`/create/diseaseOutbreakEvent`);
-        }, [history]);
+            goTo(RouteName.CREATE_FORM, { formType: "disease-outbreak-event" });
+        }, [goTo]);
 
         return (
             <SideBarContainer hideOptions={hideOptions}>
@@ -62,7 +63,7 @@ export const SideBarContent: React.FC<SideBarContentProps> = React.memo(
                 ) : (
                     <StyledList>
                         {DEFAULT_SIDEBAR_OPTIONS.map(({ text, value }) => (
-                            <ListItem button key={text} component={NavLink} to={value}>
+                            <ListItem button key={text} component={NavLink} to={routes[value]}>
                                 <StyledText primary={i18n.t(text)} selected={false} />
                             </ListItem>
                         ))}
diff --git a/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx b/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx
index da9c44a8..e66cf0e4 100644
--- a/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx
+++ b/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx
@@ -8,7 +8,7 @@ type RadioButtonsGroupProps<Value extends string = string> = {
     id: string;
     selected: string;
     label?: string;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (value: string) => void;
     options: Option<Value>[];
     gap?: string;
     helperText?: string;
@@ -31,6 +31,13 @@ export function RadioButtonsGroup<Value extends string>({
     disabled = false,
     required = false,
 }: RadioButtonsGroupProps<Value>): JSX.Element {
+    const handleChange = React.useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            onChange(event.target.value);
+        },
+        [onChange]
+    );
+
     return (
         <Container>
             {label && (
@@ -43,7 +50,7 @@ export function RadioButtonsGroup<Value extends string>({
                 aria-label={id}
                 name={id}
                 value={selected}
-                onChange={onChange}
+                onChange={handleChange}
                 gap={gap}
             >
                 {options.map(option => (
diff --git a/src/webapp/components/search-input/SearchInput.tsx b/src/webapp/components/search-input/SearchInput.tsx
index e98be317..8172c565 100644
--- a/src/webapp/components/search-input/SearchInput.tsx
+++ b/src/webapp/components/search-input/SearchInput.tsx
@@ -4,6 +4,7 @@ import { IconSearch24 } from "@dhis2/ui";
 import styled from "styled-components";
 
 import i18n from "../../../utils/i18n";
+import { useDebounce } from "../../hooks/useDebounce";
 
 type SearchInputProps = {
     value: string;
@@ -17,25 +18,13 @@ const INPUT_PROPS = { "aria-label": "search" };
 export const SearchInput: React.FC<SearchInputProps> = React.memo(
     ({ value, onChange, placeholder = "", disabled = false }) => {
         const [stateValue, updateStateValue] = useState(value);
+        const debouncedValue = useDebounce(stateValue);
 
-        useEffect(() => updateStateValue(value), [value]);
-
-        const onChangeDebounced = React.useMemo(
-            () =>
-                debounce((value: string) => {
-                    if (onChange) onChange(value);
-                }, 400),
-            [onChange]
-        );
-
-        const handleChange = useCallback(
-            (event: React.ChangeEvent<HTMLInputElement>) => {
-                const value = event.target.value;
-                onChangeDebounced(value);
-                updateStateValue(value);
-            },
-            [onChangeDebounced, updateStateValue]
-        );
+        useEffect(() => {
+            if (debouncedValue !== value) {
+                onChange(debouncedValue);
+            }
+        }, [debouncedValue, onChange, value]);
 
         const handleKeydown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
             event.stopPropagation();
@@ -48,7 +37,7 @@ export const SearchInput: React.FC<SearchInputProps> = React.memo(
                 </IconContainer>
 
                 <StyledTextField
-                    onChange={handleChange}
+                    onChange={event => updateStateValue(event.target.value)}
                     placeholder={placeholder || i18n.t("Search")}
                     value={stateValue}
                     role="searchbox"
@@ -62,19 +51,6 @@ export const SearchInput: React.FC<SearchInputProps> = React.memo(
     }
 );
 
-function debounce<F extends (...args: any[]) => any>(func: F, delay: number) {
-    let timeout: ReturnType<typeof setTimeout> | null = null;
-
-    const debounced = (...args: Parameters<F>): void => {
-        if (timeout !== null) {
-            clearTimeout(timeout);
-        }
-        timeout = setTimeout(() => func(...args), delay);
-    };
-
-    return debounced;
-}
-
 const Container = styled.div`
     display: flex;
     flex-direction: column;
diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
new file mode 100644
index 00000000..ca3f2ed9
--- /dev/null
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@material-ui/core";
+import styled from "styled-components";
+import { Maybe } from "../../../utils/ts-utils";
+import i18n from "../../../utils/i18n";
+import { Option } from "../utils/option";
+import { Cell } from "./Cell";
+
+const noop = () => {};
+
+interface BaseColumn {
+    value: string;
+    label: string;
+}
+interface TextColumn extends BaseColumn {
+    type: "text";
+    underline?: boolean;
+    bold?: boolean;
+}
+interface LinkColumn extends BaseColumn {
+    type: "link";
+}
+interface SelectorColumn extends BaseColumn {
+    type: "selector";
+    options: Option[];
+}
+
+export type TableColumn = TextColumn | LinkColumn | SelectorColumn;
+interface BasicTableProps {
+    columns: TableColumn[];
+    rows: {
+        [key: TableColumn["value"]]: string;
+    }[];
+    onChange?: (cell: Maybe<string>, rowIndex: number, column: TableColumn["value"]) => void;
+    showRowIndex?: boolean;
+}
+
+export const BasicTable: React.FC<BasicTableProps> = React.memo(
+    ({ columns, rows, onChange = noop, showRowIndex = false }) => {
+        return (
+            <StyledTable stickyHeader>
+                <TableHead>
+                    <TableRow>
+                        {showRowIndex && <TableCell />}
+                        {columns.map(({ value, label }) => (
+                            <TableCell key={value}>{i18n.t(label)}</TableCell>
+                        ))}
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {rows.map((row, rowIndex) => (
+                        <TableRow key={rowIndex}>
+                            {showRowIndex && <IndexTableCell>{rowIndex + 1}</IndexTableCell>}
+                            {columns.map(column => (
+                                <Cell
+                                    key={`${rowIndex}-${column.value}`}
+                                    value={row[column.value] || ""}
+                                    rowIndex={rowIndex}
+                                    column={column}
+                                    onChange={onChange}
+                                />
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </StyledTable>
+        );
+    }
+);
+
+const StyledTable = styled(Table)`
+    border-collapse: collapse;
+    & .MuiTableHead-root {
+        color: ${props => props.theme.palette.common.grey1};
+        font-weight: 600;
+        height: 2.25rem;
+        & .MuiTableCell-root {
+            white-space: nowrap;
+            background-color: ${props => props.theme.palette.common.greyLight};
+        }
+    }
+    & .MuiTableBody-root {
+        color: ${props => props.theme.palette.common.grey};
+    }
+    & .MuiTableCell-root {
+        font-size: 0.75rem;
+        padding-block: 0.375rem;
+        border: 1px solid ${props => props.theme.palette.common.grey4};
+        height: 1.875rem;
+    }
+`;
+
+const IndexTableCell = styled(TableCell)`
+    min-width: 2.25rem;
+    padding-inline: 0.375rem;
+    text-align: center;
+`;
diff --git a/src/webapp/components/table/Cell.tsx b/src/webapp/components/table/Cell.tsx
new file mode 100644
index 00000000..eb96228c
--- /dev/null
+++ b/src/webapp/components/table/Cell.tsx
@@ -0,0 +1,67 @@
+import React, { useCallback } from "react";
+import { TableCell, Link } from "@material-ui/core";
+import styled from "styled-components";
+import { Selector } from "../selector/Selector";
+import { TableColumn } from "./BasicTable";
+
+const noop = () => {};
+
+type CellProps = {
+    value: string;
+    rowIndex: number;
+    column: TableColumn;
+    onChange?: (value: string, rowIndex: number, column: TableColumn["value"]) => void;
+};
+
+export const Cell: React.FC<CellProps> = React.memo(
+    ({ value, rowIndex, column, onChange = noop }) => {
+        const [selectorValue, setSelectorValue] = React.useState<string>(value);
+        const handleChange = useCallback(
+            (value: string) => {
+                setSelectorValue(value);
+                onChange(value, rowIndex, column.value);
+            },
+            [onChange, rowIndex, column.value]
+        );
+
+        switch (column.type) {
+            case "link":
+                return (
+                    <StyledTableCell>
+                        <StyledLink onClick={() => onChange(value, rowIndex, column.value)}>
+                            {value}
+                        </StyledLink>
+                    </StyledTableCell>
+                );
+            case "selector":
+                return (
+                    <StyledTableCell>
+                        <Selector
+                            id={`selector-${rowIndex}-${column.value}`}
+                            options={column.options}
+                            selected={selectorValue}
+                            onChange={handleChange}
+                        />
+                    </StyledTableCell>
+                );
+            case "text":
+            default:
+                return (
+                    <StyledTableCell $underline={column.underline} $bold={column.bold}>
+                        {value}
+                    </StyledTableCell>
+                );
+        }
+    }
+);
+
+const StyledTableCell = styled(TableCell)<{ $underline?: boolean; $bold?: boolean }>`
+    text-decoration: ${props => (props.$underline ? "underline" : "initial")};
+    font-weight: ${props => (props.$bold ? 700 : 400)};
+`;
+
+const StyledLink = styled(Link)`
+    color: ${props => props.theme.palette.common.blue600};
+    text-decoration: underline;
+    cursor: pointer;
+`;
diff --git a/src/webapp/components/table/statistic-table/CalculationRow.tsx b/src/webapp/components/table/statistic-table/CalculationRow.tsx
new file mode 100644
index 00000000..454dec22
--- /dev/null
+++ b/src/webapp/components/table/statistic-table/CalculationRow.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { TableCell, TableRow } from "@material-ui/core";
+import styled from "styled-components";
+import { TableColumn } from "./StatisticTable";
+
+type CalculationRowProps = {
+    columns: TableColumn[];
+    calculateColumns: string[];
+    label: string;
+    calculate: (column: string) => string | number;
+};
+
+export const CalculationRow: React.FC<CalculationRowProps> = React.memo(
+    ({ columns, calculateColumns, label, calculate }) => {
+        const [labelColumn, ...otherColumns] = columns;
+        return (
+            <TableRow>
+                <FooterTableCell key={`${label}-${labelColumn?.value}`} $boldUnderline>
+                    {label}
+                </FooterTableCell>
+                {otherColumns.map(column => (
+                    <FooterTableCell key={`${label}-${column.value}`}>
+                        {calculateColumns.includes(column.value) ? calculate(column.value) : ""}
+                    </FooterTableCell>
+                ))}
+            </TableRow>
+        );
+    }
+);
+
+const FooterTableCell = styled(TableCell)<{ $boldUnderline?: boolean }>`
+    background-color: ${props => props.theme.palette.common.greyLight};
+    text-decoration: ${props => props.$boldUnderline && "underline"};
+    font-weight: ${props => (props.$boldUnderline || !!props.color) && "600"};
+`;
diff --git a/src/webapp/components/table/statistic-table/ColoredCell.tsx b/src/webapp/components/table/statistic-table/ColoredCell.tsx
new file mode 100644
index 00000000..ce769c99
--- /dev/null
+++ b/src/webapp/components/table/statistic-table/ColoredCell.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+import { TableCell } from "@material-ui/core";
+import { CellStatus, CellStatusValues } from "./useTableCell";
+
+type ColoredCellProps = {
+    value: string;
+    color?: CellStatusValues;
+};
+
+const cellStatusColor = {
+    [CellStatus.Valid]: "green",
+    [CellStatus.Alert]: "red",
+    [CellStatus.Warning]: "orange",
+};
+
+export const ColoredCell: React.FC<ColoredCellProps> = ({ value, color }) => {
+    return (
+        <StyledTableCell color={color ? cellStatusColor[color] : undefined}>
+            {value}
+        </StyledTableCell>
+    );
+};
+
+const StyledTableCell = styled(TableCell)<{ color?: string }>`
+    background-color: ${props =>
+        props.color ? props.theme.palette.common[props.color] : "initial"};
+    color: ${props => (props.color ? props.theme.palette.common.white : "initial")};
+    font-weight: ${props => (props.color ? "600" : "initial")};
+`;
diff --git a/src/webapp/components/table/statistic-table/StatisticTable.tsx b/src/webapp/components/table/statistic-table/StatisticTable.tsx
new file mode 100644
index 00000000..5b04edff
--- /dev/null
+++ b/src/webapp/components/table/statistic-table/StatisticTable.tsx
@@ -0,0 +1,175 @@
+import React from "react";
+import styled from "styled-components";
+import i18n from "../../../../utils/i18n";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    TableContainer,
+} from "@material-ui/core";
+import { SearchInput } from "../../search-input/SearchInput";
+import { MultipleSelector } from "../../selector/MultipleSelector";
+import { useTableFilters } from "./useTableFilters";
+import { useTableCell } from "./useTableCell";
+import { useStatisticCalculations } from "./useStatisticCalculations";
+import { ColoredCell } from "./ColoredCell";
+import { CalculationRow } from "./CalculationRow";
+
+export type TableColumn = {
+    value: string;
+    label: string;
+    dark?: boolean;
+};
+
+export type FilterType = {
+    value: TableColumn["value"];
+    label: TableColumn["label"];
+    type: "multiselector" | "datepicker";
+};
+
+export type FiltersValuesType = {
+    [key: TableColumn["value"]]: string[];
+};
+
+export type StatisticTableProps = {
+    columns: TableColumn[];
+    columnRules: {
+        [key: TableColumn["value"]]: number;
+    };
+    editRiskAssessmentColumns: TableColumn["value"][];
+    rows: {
+        [key: TableColumn["value"]]: string;
+    }[];
+    filters: FilterType[];
+};
+
+export const StatisticTable: React.FC<StatisticTableProps> = React.memo(
+    ({ rows, columns, columnRules, editRiskAssessmentColumns, filters: filtersConfig }) => {
+        const calculateColumns = [...editRiskAssessmentColumns, ...Object.keys(columnRules)];
+
+        const { searchTerm, setSearchTerm, filters, setFilters, filteredRows, filterOptions } =
+            useTableFilters(rows, filtersConfig);
+        const { getCellColor } = useTableCell(editRiskAssessmentColumns, columnRules);
+        const { calculateMedian, calculatePercentTargetMet } = useStatisticCalculations(
+            filteredRows,
+            columnRules
+        );
+
+        return (
+            <React.Fragment>
+                <Container>
+                    {filtersConfig.map(({ value, label }) => (
+                        <MultipleSelector
+                            id={`filters-${value}`}
+                            key={`filters-${value}`}
+                            selected={filters[value] || []}
+                            placeholder={i18n.t(label)}
+                            options={filterOptions(value)}
+                            onChange={(values: string[]) => {
+                                setFilters({ ...filters, [value]: values });
+                            }}
+                        />
+                    ))}
+                    <SearchInput value={searchTerm} onChange={value => setSearchTerm(value)} />
+                </Container>
+                <StyledTableContainer>
+                    <Table size="small">
+                        <TableHead>
+                            <TableRow>
+                                {columns.map(({ value, label, dark = false }) => (
+                                    <HeadTableCell key={value} $dark={dark}>
+                                        {label}
+                                    </HeadTableCell>
+                                ))}
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {filteredRows.map((row, rowIndex) => (
+                                <TableRow key={rowIndex}>
+                                    {columns.map((column, columnIndex) =>
+                                        calculateColumns.includes(column.value) ? (
+                                            <ColoredCell
+                                                key={`${rowIndex}-${column.value}`}
+                                                value={row[column.value] || ""}
+                                                color={getCellColor(
+                                                    row[column.value],
+                                                    column.value
+                                                )}
+                                            />
+                                        ) : (
+                                            <StyledTableCell
+                                                key={`${rowIndex}-${column.value}`}
+                                                boldUnderline={columnIndex === 0}
+                                            >
+                                                {row[column.value] || ""}
+                                            </StyledTableCell>
+                                        )
+                                    )}
+                                </TableRow>
+                            ))}
+                            <CalculationRow
+                                columns={columns}
+                                calculateColumns={calculateColumns}
+                                label={i18n.t("Median")}
+                                calculate={calculateMedian}
+                            />
+                            <CalculationRow
+                                columns={columns}
+                                calculateColumns={calculateColumns}
+                                label={i18n.t("% Target Met")}
+                                calculate={calculatePercentTargetMet}
+                            />
+                        </TableBody>
+                    </Table>
+                </StyledTableContainer>
+            </React.Fragment>
+        );
+    }
+);
+
+const StyledTableContainer = styled(TableContainer)`
+    border-radius: 4px;
+    border: 1px solid ${props => props.theme.palette.common.grey1};
+
+    & .MuiTable-root {
+        border-collapse: collapse;
+        border-style: hidden;
+    }
+    & .MuiTableHead-root {
+        color: ${props => props.theme.palette.common.greyBlack};
+        background-color: ${props => props.theme.palette.common.grey4};
+    }
+    & .MuiTableBody-root {
+        color: ${props => props.theme.palette.common.grey};
+    }
+    & .MuiTableCell-root {
+        min-width: 2rem;
+        font-size: 0.75rem;
+        white-space: nowrap;
+        border: 1px solid ${props => props.theme.palette.common.grey};
+        padding-inline: 0.5rem;
+        padding-block: 0.625rem;
+    }
+`;
+
+const HeadTableCell = styled(TableCell)<{ $dark?: boolean }>`
+    background-color: ${props => (props.$dark ? props.theme.palette.common.grey2 : "initial")};
+    color: ${props => (props.$dark ? props.theme.palette.common.white : "initial")};
+    font-weight: 600;
+`;
+
+const StyledTableCell = styled(TableCell)<{ boldUnderline?: boolean }>`
+    text-decoration: ${props => (props.boldUnderline ? "underline" : "none")};
+    font-weight: ${props => (props.boldUnderline ? "600" : "initial")};
+`;
+
+const Container = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    width: 100%;
+    gap: 1rem;
+`;
diff --git a/src/webapp/components/table/statistic-table/useStatisticCalculations.ts b/src/webapp/components/table/statistic-table/useStatisticCalculations.ts
new file mode 100644
index 00000000..e4fd1c88
--- /dev/null
+++ b/src/webapp/components/table/statistic-table/useStatisticCalculations.ts
@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { StatisticTableProps } from "./StatisticTable";
+
+export const useStatisticCalculations = (
+    rows: StatisticTableProps["rows"],
+    columnRules: { [key: string]: number }
+) => {
+    const calculateMedian = useCallback(
+        (column: string) => {
+            const values = rows.map(row => Number(row[column])).filter(value => !isNaN(value));
+            values.sort((a, b) => a - b);
+            const mid = Math.floor(values.length / 2);
+            return (
+                (values.length % 2 !== 0
+                    ? values[mid]
+                    : ((values[mid - 1] || 0) + (values[mid] || 0)) / 2) || 0
+            );
+        },
+        [rows]
+    );
+
+    const calculatePercentTargetMet = useCallback(
+        (column: string) => {
+            const target = columnRules[column] || 7;
+            const count = rows.filter(row => Number(row[column]) <= target).length;
+            const percentage = (count / rows.length) * 100 || 0;
+            return `${percentage.toFixed(0) || 0}%`;
+        },
+        [rows, columnRules]
+    );
+
+    return {
+        calculateMedian,
+        calculatePercentTargetMet,
+    };
+};
diff --git a/src/webapp/components/table/statistic-table/useTableCell.ts b/src/webapp/components/table/statistic-table/useTableCell.ts
new file mode 100644
index 00000000..161268c7
--- /dev/null
+++ b/src/webapp/components/table/statistic-table/useTableCell.ts
@@ -0,0 +1,42 @@
+import { useCallback } from "react";
+import { Maybe } from "../../../../utils/ts-utils";
+import _ from "../../../../domain/entities/generic/Collection";
+
+export const enum CellStatus {
+    Valid = "valid",
+    Alert = "alert",
+    Warning = "warning",
+}
+export type CellStatusValues = `${CellStatus}`;
+
+export const useTableCell = (
+    editRiskAssessmentColumns: string[],
+    columnRules: { [key: string]: number }
+) => {
+    const getCellColor = useCallback(
+        (cellValue: Maybe<string>, column: string) => {
+            if (!cellValue) {
+                return editRiskAssessmentColumns.includes(column) ? CellStatus.Warning : undefined;
+            }
+
+            const value = Number(cellValue);
+
+            if (editRiskAssessmentColumns.includes(column)) {
+                return columnRules.respond7d && value > columnRules.respond7d
+                    ? CellStatus.Alert
+                    : undefined;
+            }
+
+            const rule = columnRules[column];
+
+            if (rule === undefined) {
+                return undefined;
+            }
+
+            return value <= rule ? CellStatus.Valid : CellStatus.Alert;
+        },
+        [editRiskAssessmentColumns, columnRules]
+    );
+
+    return { getCellColor };
+};
diff --git a/src/webapp/components/table/statistic-table/useTableFilters.ts b/src/webapp/components/table/statistic-table/useTableFilters.ts
new file mode 100644
index 00000000..b1664791
--- /dev/null
+++ b/src/webapp/components/table/statistic-table/useTableFilters.ts
@@ -0,0 +1,55 @@
+import { useCallback, useMemo, useState } from "react";
+import _ from "../../../../domain/entities/generic/Collection";
+import { FiltersValuesType, FilterType, StatisticTableProps, TableColumn } from "./StatisticTable";
+
+export const useTableFilters = (rows: StatisticTableProps["rows"], filtersConfig: FilterType[]) => {
+    const [searchTerm, setSearchTerm] = useState<string>("");
+
+    const [filters, setFilters] = useState<FiltersValuesType>(
+        filtersConfig.reduce((acc: FiltersValuesType, filter) => {
+            acc[filter.value] = [];
+            return acc;
+        }, {})
+    );
+
+    const filteredRows = useMemo(() => {
+        const allFiltersEmpty = Object.keys(filters).every(
+            key => (filters[key] || []).length === 0
+        );
+
+        if (searchTerm === "" && allFiltersEmpty) {
+            return rows;
+        } else {
+            return _(rows)
+                .filter(row => {
+                    const matchesFilters = Object.keys(filters).every(key => {
+                        const filterValues = filters[key] || [];
+                        if (filterValues.length === 0) return true;
+                        return filterValues.includes(row[key] || "");
+                    });
+
+                    const matchesSearchTerm = _(Object.values(row)).some(cell =>
+                        (cell || "").toLowerCase().includes(searchTerm.toLowerCase())
+                    );
+
+                    return matchesFilters && matchesSearchTerm;
+                })
+                .value();
+        }
+    }, [rows, searchTerm, filters]);
+
+    const filterOptions = useCallback(
+        (column: TableColumn["value"]) => {
+            return _(rows)
+                .map(row => ({
+                    value: row[column] || "",
+                    label: row[column] || "",
+                }))
+                .uniqBy(filter => filter.value)
+                .value();
+        },
+        [rows]
+    );
+
+    return { searchTerm, setSearchTerm, filters, setFilters, filteredRows, filterOptions };
+};
diff --git a/src/webapp/components/text-input/TextArea.tsx b/src/webapp/components/text-input/TextArea.tsx
index 576ebaa5..a676910d 100644
--- a/src/webapp/components/text-input/TextArea.tsx
+++ b/src/webapp/components/text-input/TextArea.tsx
@@ -1,6 +1,7 @@
-import React, { useCallback } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { FormHelperText, TextareaAutosize } from "@material-ui/core";
+import { useDebounce } from "../../hooks/useDebounce";
 
 type TextAreaProps = {
     id: string;
@@ -26,12 +27,14 @@ export const TextArea: React.FC<TextAreaProps> = React.memo(
         error = false,
         required = false,
     }) => {
-        const handleChange = useCallback(
-            (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-                onChange(event.target.value);
-            },
-            [onChange]
-        );
+        const [textFieldValue, setTextFieldValue] = useState(value || "");
+        const debouncedTextFieldValue = useDebounce(textFieldValue);
+
+        useEffect(() => {
+            if (debouncedTextFieldValue !== value) {
+                onChange(debouncedTextFieldValue);
+            }
+        }, [debouncedTextFieldValue, onChange, value]);
 
         return (
             <Container>
@@ -44,8 +47,8 @@ export const TextArea: React.FC<TextAreaProps> = React.memo(
                 <StyledTextareaAutosize
                     id={id}
                     aria-label={label || `${id}-label`}
-                    value={value}
-                    onChange={handleChange}
+                    value={textFieldValue}
+                    onChange={event => setTextFieldValue(event.target.value)}
                     minRows={3}
                     disabled={disabled}
                     $hasError={error}
diff --git a/src/webapp/components/text-input/TextInput.tsx b/src/webapp/components/text-input/TextInput.tsx
index 2b86b63c..037877a4 100644
--- a/src/webapp/components/text-input/TextInput.tsx
+++ b/src/webapp/components/text-input/TextInput.tsx
@@ -1,12 +1,13 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { TextField, InputLabel } from "@material-ui/core";
 import styled from "styled-components";
+import { useDebounce } from "../../hooks/useDebounce";
 
 type TextInputProps = {
     id: string;
     label?: string;
     value: string;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (newValue: string) => void;
     helperText?: string;
     errorText?: string;
     required?: boolean;
@@ -26,6 +27,15 @@ export const TextInput: React.FC<TextInputProps> = React.memo(
         disabled = false,
         error = false,
     }) => {
+        const [textFieldValue, setTextFieldValue] = useState<string>(value || "");
+        const debouncedTextFieldValue = useDebounce(textFieldValue);
+
+        useEffect(() => {
+            if (debouncedTextFieldValue !== value) {
+                onChange(debouncedTextFieldValue);
+            }
+        }, [debouncedTextFieldValue, onChange, value]);
+
         return (
             <Container>
                 {label && (
@@ -36,8 +46,8 @@ export const TextInput: React.FC<TextInputProps> = React.memo(
 
                 <StyledTextField
                     id={id}
-                    value={value}
-                    onChange={onChange}
+                    value={textFieldValue}
+                    onChange={event => setTextFieldValue(event.target.value)}
                     helperText={error && !!errorText ? errorText : helperText}
                     error={error}
                     disabled={disabled}
diff --git a/src/webapp/components/user-selector/UserSelector.tsx b/src/webapp/components/user-selector/UserSelector.tsx
new file mode 100644
index 00000000..d50a561c
--- /dev/null
+++ b/src/webapp/components/user-selector/UserSelector.tsx
@@ -0,0 +1,170 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+import { Link } from "@material-ui/core";
+
+import i18n from "../../../utils/i18n";
+import { Selector } from "../selector/Selector";
+import { AvatarCard } from "../avatar-card/AvatarCard";
+
+export type UserOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    workPosition?: string;
+    phone: string;
+    email: string;
+    status?: string;
+    src?: string;
+    alt?: string;
+};
+
+type UserSelectorProps = {
+    id: string;
+    selected?: string;
+    onChange: (value: string) => void;
+    options: UserOption[];
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    helperText?: string;
+    errorText?: string;
+    error?: boolean;
+    required?: boolean;
+};
+
+export const UserSelector: React.FC<UserSelectorProps> = React.memo(props => {
+    const {
+        id,
+        label,
+        placeholder = "",
+        selected = "",
+        onChange,
+        options,
+        disabled = false,
+        helperText = "",
+        errorText = "",
+        error = false,
+        required = false,
+    } = props;
+
+    const selectedUser = useMemo(() => {
+        return options.find(option => option.value === selected);
+    }, [options, selected]);
+
+    return (
+        <ComponentContainer>
+            <SelectorContainer>
+                <Selector
+                    id={id}
+                    placeholder={placeholder}
+                    label={label}
+                    selected={selected}
+                    onChange={value => onChange(value)}
+                    options={options}
+                    helperText={helperText}
+                    errorText={errorText}
+                    error={error}
+                    required={required}
+                    disabled={disabled}
+                />
+            </SelectorContainer>
+
+            {selectedUser && (
+                <AvatarContainer>
+                    <AvatarCard avatarSize="medium" alt={selectedUser?.alt} src={selectedUser?.src}>
+                        <Container>
+                            <Content>
+                                <TextBold>{selectedUser?.label}</TextBold>
+
+                                {selectedUser?.workPosition && (
+                                    <Text>{selectedUser?.workPosition}</Text>
+                                )}
+                            </Content>
+
+                            <Content>
+                                <Text>{selectedUser?.phone}</Text>
+
+                                <StyledLink href={`mailto:${selectedUser?.email}`}>
+                                    {selectedUser?.email}
+                                </StyledLink>
+                            </Content>
+
+                            <div>
+                                <TextBold>{i18n.t("Status: ", { nsSeparator: false })}</TextBold>
+
+                                {selectedUser?.status && <Text>{selectedUser?.status}</Text>}
+                            </div>
+                        </Container>
+                    </AvatarCard>
+                </AvatarContainer>
+            )}
+        </ComponentContainer>
+    );
+});
+
+const ComponentContainer = styled.div`
+    display: flex;
+    gap: 12px;
+    width: 100%;
+    justify-content: flex-end;
+    @media (max-width: 800px) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+`;
+
+const AvatarContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex: 2;
+    max-width: 400px;
+    flex-basis: 0;
+    @media (max-width: 800px) {
+        align-self: center;
+    }
+`;
+
+const SelectorContainer = styled.div`
+    margin-block-start: 24px;
+    flex: 1;
+    max-width: 500px;
+    flex-basis: 0;
+    @media (max-width: 800px) {
+        flex: 1;
+        width: 100%;
+    }
+`;
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+`;
+
+const Content = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+`;
+
+const TextBold = styled.span`
+    color: ${props => props.theme.palette.common.black};
+    font-size: 0.875rem;
+    font-weight: 700;
+`;
+
+const Text = styled.span`
+    color: ${props => props.theme.palette.common.black};
+    font-size: 0.875rem;
+    font-weight: 400;
+`;
+
+const StyledLink = styled(Link)`
+    &.MuiTypography-colorPrimary {
+        font-size: 0.875rem;
+        font-weight: 400;
+        text-decoration: underline;
+        color: ${props => props.theme.palette.common.black};
+    }
+`;
diff --git a/src/webapp/hooks/useDebounce.ts b/src/webapp/hooks/useDebounce.ts
new file mode 100644
index 00000000..aa014326
--- /dev/null
+++ b/src/webapp/hooks/useDebounce.ts
@@ -0,0 +1,30 @@
+import React from "react";
+
+export function useDebounce<T>(value: T, delay = 300): T {
+    const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+
+    React.useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+
+    return debouncedValue;
+}
+
+export function debounce<F extends (...args: any[]) => any>(func: F, delay: number) {
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+
+    const debounced = (...args: Parameters<F>): void => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(() => func(...args), delay);
+    };
+
+    return debounced;
+}
diff --git a/src/webapp/hooks/useRoutes.ts b/src/webapp/hooks/useRoutes.ts
new file mode 100644
index 00000000..e232b2b6
--- /dev/null
+++ b/src/webapp/hooks/useRoutes.ts
@@ -0,0 +1,53 @@
+import React from "react";
+import { join } from "string-ts";
+import { generatePath, useHistory } from "react-router-dom";
+
+import { FormType } from "../pages/form-page/FormPage";
+
+export enum RouteName {
+    CREATE_FORM = "CREATE_FORM",
+    EDIT_FORM = "EDIT_FORM",
+    EVENT_TRACKER = "EVENT_TRACKER",
+    IM_TEAM_BUILDER = "IM_TEAM_BUILDER",
+    INCIDENT_ACTION_PLAN = "INCIDENT_ACTION_PLAN",
+    RESOURCES = "RESOURCES",
+    DASHBOARD = "DASHBOARD",
+}
+
+const formTypes = ["disease-outbreak-event"] as const satisfies FormType[];
+
+const formType = `:formType(${join(formTypes, "|")})` as const;
+
+export const routes: Record<RouteName, string> = {
+    [RouteName.CREATE_FORM]: `/create/${formType}`,
+    [RouteName.EDIT_FORM]: `/edit/${formType}/:id`,
+    [RouteName.EVENT_TRACKER]: "/event-tracker",
+    [RouteName.IM_TEAM_BUILDER]: "/incident-management-team-builder",
+    [RouteName.INCIDENT_ACTION_PLAN]: "/incident-action-plan",
+    [RouteName.RESOURCES]: "/resources",
+    [RouteName.DASHBOARD]: "/",
+} as const;
+
+type RouteParams = {
+    [RouteName.CREATE_FORM]: { formType: FormType };
+    [RouteName.EDIT_FORM]: { formType: FormType; id: string };
+    [RouteName.EVENT_TRACKER]: undefined;
+    [RouteName.IM_TEAM_BUILDER]: undefined;
+    [RouteName.INCIDENT_ACTION_PLAN]: undefined;
+    [RouteName.RESOURCES]: undefined;
+    [RouteName.DASHBOARD]: undefined;
+};
+
+export function useRoutes() {
+    const history = useHistory();
+
+    const goTo = React.useCallback(
+        <T extends RouteName>(route: T, params?: RouteParams[T]) => {
+            const path = generatePath(routes[route], params as any);
+            history.push(path);
+        },
+        [history]
+    );
+
+    return { goTo };
+}
diff --git a/src/webapp/pages/Router.tsx b/src/webapp/pages/Router.tsx
index 060884a2..447b3891 100644
--- a/src/webapp/pages/Router.tsx
+++ b/src/webapp/pages/Router.tsx
@@ -6,24 +6,25 @@ import { EventTrackerPage } from "./event-tracker/EventTrackerPage";
 import { IncidentActionPlanPage } from "./incident-action-plan/IncidentActionPlanPage";
 import { ResourcesPage } from "./resources/ResourcesPage";
 import { IMTeamBuilderPage } from "./incident-management-team-builder/IMTeamBuilderPage";
-import { FormPage } from "./form/FormPage";
+import { FormPage } from "./form-page/FormPage";
+import { RouteName, routes } from "../hooks/useRoutes";
 
 export function Router() {
     return (
         <HashRouter>
             <Switch>
-                <Route path="/create/:formType" render={() => <FormPage />} />
-                <Route path="/edit/:formType/:id" render={() => <FormPage />} />
-                <Route path="/event-tracker" render={() => <EventTrackerPage />} />
+                <Route path={routes[RouteName.CREATE_FORM]} render={() => <FormPage />} />
+                <Route path={routes[RouteName.EDIT_FORM]} render={() => <FormPage />} />
+                <Route path={routes[RouteName.EVENT_TRACKER]} render={() => <EventTrackerPage />} />
                 <Route
-                    path="/incident-management-team-builder"
+                    path={routes[RouteName.IM_TEAM_BUILDER]}
                     render={() => <IMTeamBuilderPage />}
                 />
                 <Route
-                    path="/incident-action-plan/:incidentActionPlanId"
+                    path={routes[RouteName.INCIDENT_ACTION_PLAN]}
                     render={() => <IncidentActionPlanPage />}
                 />
-                <Route path="/resources" render={() => <ResourcesPage />} />
+                <Route path={routes[RouteName.RESOURCES]} render={() => <ResourcesPage />} />
                 {/* Default route */}
                 <Route render={() => <DashboardPage />} />
             </Switch>
diff --git a/src/webapp/pages/form-page/FormPage.tsx b/src/webapp/pages/form-page/FormPage.tsx
new file mode 100644
index 00000000..f7729ef7
--- /dev/null
+++ b/src/webapp/pages/form-page/FormPage.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+
+import i18n from "../../../utils/i18n";
+import { DiseaseOutbreakEventForm } from "./disease-outbreak-event/DiseaseOutbreakEventForm";
+
+export type FormType = "disease-outbreak-event";
+
+export const FormPage: React.FC = React.memo(() => {
+    const { formType, id } = useParams<{
+        formType: FormType;
+        id?: string;
+    }>();
+
+    switch (formType) {
+        case "disease-outbreak-event":
+            return <DiseaseOutbreakEventForm diseaseOutbreakEventId={id} formType={formType} />;
+        default:
+            return <div>{i18n.t("Page Not Found")}</div>;
+    }
+});
diff --git a/src/webapp/pages/form-page/disease-outbreak-event/DiseaseOutbreakEventForm.tsx b/src/webapp/pages/form-page/disease-outbreak-event/DiseaseOutbreakEventForm.tsx
new file mode 100644
index 00000000..a792c6e7
--- /dev/null
+++ b/src/webapp/pages/form-page/disease-outbreak-event/DiseaseOutbreakEventForm.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import { useSnackbar } from "@eyeseetea/d2-ui-components";
+import styled from "styled-components";
+
+import { useDiseaseOutbreakEventForm } from "./useDiseaseOutbreakEventForm";
+import { Form } from "../../../components/form/Form";
+import { Id } from "../../../../domain/entities/Ref";
+import { FormType } from "../FormPage";
+import { Layout } from "../../../components/layout/Layout";
+import { Loader } from "../../../components/loader/Loader";
+
+type DiseaseOutbreakEventFormProps = {
+    formType: FormType;
+    diseaseOutbreakEventId?: Id;
+};
+
+export const DiseaseOutbreakEventForm: React.FC<DiseaseOutbreakEventFormProps> = React.memo(
+    props => {
+        const { diseaseOutbreakEventId, formType } = props;
+
+        const snackbar = useSnackbar();
+        const { globalMessage, formState, handleFormChange, onSaveForm, onCancelForm } =
+            useDiseaseOutbreakEventForm(formType, diseaseOutbreakEventId);
+
+        useEffect(() => {
+            if (!globalMessage) return;
+
+            snackbar[globalMessage.type](globalMessage.text);
+        }, [globalMessage, snackbar]);
+
+        return formState.kind === "loading" ? (
+            <Layout hideSideBarOptions>
+                <Loader />
+            </Layout>
+        ) : formState.kind === "loaded" ? (
+            <Form
+                formState={formState.data}
+                onFormChange={handleFormChange}
+                onSave={onSaveForm}
+                onCancel={onCancelForm}
+            />
+        ) : (
+            formState.message && <ErrorMessageContainer>{formState.message}</ErrorMessageContainer>
+        );
+    }
+);
+
+const ErrorMessageContainer = styled.div`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
diff --git a/src/webapp/pages/form-page/disease-outbreak-event/useDiseaseOutbreakEventForm.ts b/src/webapp/pages/form-page/disease-outbreak-event/useDiseaseOutbreakEventForm.ts
new file mode 100644
index 00000000..d8763ae7
--- /dev/null
+++ b/src/webapp/pages/form-page/disease-outbreak-event/useDiseaseOutbreakEventForm.ts
@@ -0,0 +1,701 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { Maybe } from "../../../../utils/ts-utils";
+import i18n from "../../../../utils/i18n";
+import { useAppContext } from "../../../contexts/app-context";
+import { Id } from "../../../../domain/entities/Ref";
+import { FormFieldState, FormState } from "../../../components/form/FormState";
+import { FormType } from "../FormPage";
+
+import { RouteName, useRoutes } from "../../../hooks/useRoutes";
+import { DiseaseOutbreakEvent } from "../../../../domain/entities/disease-outbreak-event/DiseaseOutbreakEvent";
+
+export type GlobalMessage = {
+    text: string;
+    type: "warning" | "success" | "error";
+};
+
+export type DiseaseOutbreakEventFormStateLoaded = {
+    kind: "loaded";
+    data: FormState;
+};
+
+export type DiseaseOutbreakEventFormStateLoading = {
+    kind: "loading";
+};
+
+export type DiseaseOutbreakEventFormStateError = {
+    kind: "error";
+    message: string;
+};
+
+export type DiseaseOutbreakEventFormState =
+    | DiseaseOutbreakEventFormStateLoaded
+    | DiseaseOutbreakEventFormStateLoading
+    | DiseaseOutbreakEventFormStateError;
+
+// NOTICE: This hook is just an approximation, it will be modified when the real use cases are implemented
+export function useDiseaseOutbreakEventForm(
+    formType: FormType,
+    diseaseOutbreakEventId?: Id
+): {
+    globalMessage: Maybe<GlobalMessage>;
+    formState: DiseaseOutbreakEventFormState;
+    handleFormChange: (newFormState: FormState, updatedField: FormFieldState) => void;
+    onSaveForm: () => void;
+    onCancelForm: () => void;
+} {
+    const { compositionRoot } = useAppContext();
+    const { goTo } = useRoutes();
+
+    const [globalMessage, setGlobalMessage] = useState<Maybe<GlobalMessage>>();
+    const [formState, setFormState] = useState<DiseaseOutbreakEventFormState>({ kind: "loading" });
+    const [diseaseOutbreakEvent, setDiseaseOutbreakEvent] = useState<DiseaseOutbreakEvent>();
+
+    useEffect(() => {
+        if (diseaseOutbreakEventId) {
+            compositionRoot.diseaseOutbreakEvent.get.execute(diseaseOutbreakEventId).run(
+                diseaseOutbreakEventData => {
+                    setDiseaseOutbreakEvent(diseaseOutbreakEventData);
+                },
+                error => {
+                    setFormState({
+                        kind: "error",
+                        message: i18n.t(`Create Event form cannot be loaded`),
+                    });
+                    setGlobalMessage({
+                        text: i18n.t(
+                            `An error occurred while loading Create Event form: ${error.message}`
+                        ),
+                        type: "error",
+                    });
+                }
+            );
+        }
+    }, [compositionRoot.diseaseOutbreakEvent.get, diseaseOutbreakEventId]);
+
+    useEffect(() => {
+        if ((diseaseOutbreakEventId && diseaseOutbreakEvent) || !diseaseOutbreakEventId) {
+            // TODO: create state using also data from useCase
+            setFormState({
+                kind: "loaded",
+                data: mapDataToState(diseaseOutbreakEvent),
+            });
+        }
+    }, [diseaseOutbreakEvent, diseaseOutbreakEventId]);
+
+    const handleFormChange = useCallback(
+        (newFormState: FormState, _updatedField: FormFieldState) => {
+            // TODO: Validate and update state
+            setFormState({
+                kind: "loaded",
+                data: newFormState,
+            });
+        },
+        []
+    );
+
+    const onSaveForm = useCallback(() => {}, []);
+
+    const onCancelForm = useCallback(() => {
+        goTo(RouteName.DASHBOARD);
+    }, [goTo]);
+
+    return {
+        globalMessage,
+        formState,
+        handleFormChange,
+        onSaveForm,
+        onCancelForm,
+    };
+}
+
+function mapDataToState(diseaseOutbreakEvent?: DiseaseOutbreakEvent): FormState {
+    // TODO: create real form state, this is an example
+    return {
+        id: diseaseOutbreakEvent?.id || "",
+        title: "Create Event",
+        saveButtonLabel: "Save & continue",
+        isValid: false,
+        sections: [
+            {
+                title: "Event Name",
+                id: "name_section",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "name",
+                        isVisible: true,
+                        helperText: "Be specific. Include disease, date, and region",
+                        errors: [],
+                        type: "text",
+                        value: diseaseOutbreakEvent?.name || "",
+                        multiline: false,
+                    },
+                ],
+            },
+            {
+                title: "Hazard Type",
+                id: "hazardType_section",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "hazardType",
+                        isVisible: true,
+                        errors: [],
+                        type: "radio",
+                        multiple: false,
+                        options: [
+                            {
+                                value: "Biological:Human",
+                                label: "Biological: Human",
+                            },
+                            {
+                                value: "Biological:Animal",
+                                label: "Biological: Animal",
+                            },
+                            {
+                                value: "Chemical",
+                                label: "Chemical",
+                            },
+                            {
+                                value: "Environmental",
+                                label: "Environmental",
+                            },
+                            {
+                                value: "Unknown",
+                                label: "Unknown",
+                            },
+                        ],
+                        value: diseaseOutbreakEvent?.hazardType || "",
+                    },
+                ],
+            },
+            {
+                title: "Main Syndrome",
+                id: "mainSyndrome_section",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "mainSyndrome",
+                        placeholder: "Select a syndrome",
+                        isVisible: true,
+                        errors: [],
+                        type: "select",
+                        multiple: false,
+                        options: [
+                            {
+                                value: "Syndrome 1",
+                                label: "Syndrome 1",
+                            },
+                            {
+                                value: "Syndrome 2",
+                                label: "Syndrome 2",
+                            },
+                        ],
+                        value: diseaseOutbreakEvent?.mainSyndrome.id || "",
+                        width: "300px",
+                    },
+                    {
+                        id: "mainSyndrome_other",
+                        isVisible: false,
+                        helperText: "Add new option",
+                        errors: [],
+                        type: "text",
+                        value: "",
+                        multiline: false,
+                        width: "300px",
+                    },
+                ],
+            },
+            {
+                title: "Suspected Disease",
+                id: "suspectedDisease_section",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "suspectedDisease",
+                        placeholder: "Select a disease",
+                        isVisible: true,
+                        errors: [],
+                        type: "select",
+                        multiple: false,
+                        options: [
+                            {
+                                value: "Disease 1",
+                                label: "Disease 1",
+                            },
+                            {
+                                value: "Disease 2",
+                                label: "Disease 2",
+                            },
+                        ],
+                        value: diseaseOutbreakEvent?.suspectedDisease.id || "",
+                        width: "300px",
+                    },
+                    {
+                        id: "suspectedDisease_other",
+                        isVisible: false,
+                        required: false,
+                        helperText: "Add new option",
+                        errors: [],
+                        type: "text",
+                        value: "",
+                        multiline: false,
+                        width: "300px",
+                    },
+                ],
+            },
+            {
+                title: "Notification Source",
+                id: "notificationSource_section",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "notificationSource",
+                        placeholder: "Select source",
+                        isVisible: true,
+                        errors: [],
+                        type: "select",
+                        multiple: false,
+                        options: [
+                            {
+                                value: "Source 1",
+                                label: "Source 1",
+                            },
+                            {
+                                value: "Source 2",
+                                label: "Source 2",
+                            },
+                        ],
+                        value: diseaseOutbreakEvent?.notificationSource.id || "",
+                        width: "300px",
+                    },
+                    {
+                        id: "notificationSource_other",
+                        isVisible: false,
+                        helperText: "Add new option",
+                        errors: [],
+                        type: "text",
+                        value: "",
+                        multiline: false,
+                        width: "300px",
+                    },
+                ],
+            },
+            {
+                title: "Areas Affected",
+                id: "areasAffected_section",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "areasAffected_provinces",
+                        label: "Provinces",
+                        isVisible: true,
+                        errors: [],
+                        type: "select",
+                        multiple: true,
+                        options: [
+                            {
+                                value: "Province 1",
+                                label: "Province 1",
+                            },
+                            {
+                                value: "Province 2",
+                                label: "Province 2",
+                            },
+                        ],
+                        value:
+                            diseaseOutbreakEvent?.areasAffectedProvinces.map(
+                                province => province.id
+                            ) || [],
+                        width: "400px",
+                    },
+                    {
+                        id: "areasAffected_districts",
+                        label: "Districts",
+                        isVisible: true,
+                        errors: [],
+                        type: "select",
+                        multiple: true,
+                        options: [
+                            {
+                                value: "District 1",
+                                label: "District 1",
+                            },
+                            {
+                                value: "District 2",
+                                label: "District 2",
+                            },
+                        ],
+                        value:
+                            diseaseOutbreakEvent?.areasAffectedDistricts.map(
+                                district => district.id
+                            ) || [],
+                        width: "400px",
+                    },
+                ],
+            },
+            {
+                title: "Incident Status",
+                id: "incidentStatus_section",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "incidentStatus",
+                        isVisible: true,
+                        errors: [],
+                        type: "radio",
+                        multiple: false,
+                        options: [
+                            {
+                                value: "Watch",
+                                label: "Watch",
+                            },
+                            {
+                                value: "Alert",
+                                label: "Alert",
+                            },
+                            {
+                                value: "Respond",
+                                label: "Respond",
+                            },
+                            {
+                                value: "Closed",
+                                label: "Closed",
+                            },
+                            {
+                                value: "Discarded",
+                                label: "Discarded",
+                            },
+                        ],
+                        value: diseaseOutbreakEvent?.incidentStatus || "",
+                    },
+                ],
+            },
+            {
+                title: "Date Emerged",
+                id: "emerged_section",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "emerged_date",
+                        isVisible: true,
+                        errors: [],
+                        type: "date",
+                        value: diseaseOutbreakEvent?.emerged.date || null,
+                        width: "200px",
+                    },
+                    {
+                        id: "emerged_narrative",
+                        isVisible: true,
+                        label: "Narrative",
+                        helperText: "Provide concise details",
+                        errors: [],
+                        type: "text",
+                        value: diseaseOutbreakEvent?.emerged.narrative || "",
+                        multiline: false,
+                        width: "600px",
+                    },
+                ],
+            },
+            {
+                title: "Date Detected",
+                id: "detected_section",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "detected_date",
+                        isVisible: true,
+                        errors: [],
+                        type: "date",
+                        value: diseaseOutbreakEvent?.detected.date || null,
+                        width: "200px",
+                    },
+                    {
+                        id: "detected_narrative",
+                        isVisible: true,
+                        label: "Narrative",
+                        helperText: "Provide concise details",
+                        errors: [],
+                        type: "text",
+                        value: diseaseOutbreakEvent?.detected.narrative || "",
+                        multiline: false,
+                        width: "600px",
+                    },
+                ],
+            },
+            {
+                title: "Date Notified",
+                id: "notified",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "notified_date",
+                        isVisible: true,
+                        errors: [],
+                        type: "date",
+                        value: diseaseOutbreakEvent?.notified.date || null,
+                        width: "200px",
+                    },
+                    {
+                        id: "notified_narrative",
+                        isVisible: true,
+                        label: "Narrative",
+                        helperText: "Provide concise details",
+                        errors: [],
+                        type: "text",
+                        value: diseaseOutbreakEvent?.notified.narrative || "",
+                        multiline: false,
+                        width: "600px",
+                    },
+                ],
+            },
+            {
+                title: "What early response actions have been completed?",
+                id: "response_actions_completed_section",
+                isVisible: true,
+                required: true,
+                direction: "column",
+                fields: [],
+                subsections: [
+                    {
+                        title: "1. Initiate investigation or deploy an investigation/response.",
+                        id: "1. Initiate investigation or deploy an investigation/response.",
+                        isVisible: true,
+                        required: true,
+                        fields: [
+                            {
+                                label: "Date Completed",
+                                id: "1. Date Completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "date",
+                                value: null,
+                                width: "200px",
+                            },
+                        ],
+                    },
+                    {
+                        title: "2. Conduct epidemiological analysis of burden, severity, and risk factors, and perform initial risk assessment.",
+                        id: "2. Conduct epidemiological analysis of burden, severity, and risk factors, and perform initial risk assessment.",
+                        isVisible: true,
+                        required: true,
+                        fields: [
+                            {
+                                id: "2. Date Completed",
+                                label: "Date Completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "date",
+                                value: null,
+                                width: "200px",
+                            },
+                        ],
+                    },
+                    {
+                        id: "3. Obtain laboratory confirmation of the outbreak etiology.",
+                        title: "3. Obtain laboratory confirmation of the outbreak etiology.",
+                        isVisible: true,
+                        required: true,
+                        fields: [
+                            {
+                                id: "3_date_completed",
+                                label: "Date Completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "date",
+                                value: null,
+                                width: "200px",
+                            },
+                            {
+                                label: "N/A",
+                                id: "notApplicable_3_date_completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "boolean",
+                                value: false,
+                                width: "100px",
+                            },
+                        ],
+                    },
+                    {
+                        id: "4. Initiate appropriate case management and infection prevention and control (IPC) measures in health facilities.",
+                        title: "4. Initiate appropriate case management and infection prevention and control (IPC) measures in health facilities.",
+                        isVisible: true,
+                        required: true,
+                        fields: [
+                            {
+                                id: "4_date_completed",
+                                label: "Date Completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "date",
+                                value: null,
+                                width: "200px",
+                            },
+                            {
+                                label: "N/A",
+                                id: "notApplicable_4_date_completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "boolean",
+                                value: false,
+                                width: "100px",
+                            },
+                        ],
+                    },
+                    {
+                        id: "5. Initiate appropriate public health countermeasures in affected communities.",
+                        title: "5. Initiate appropriate public health countermeasures in affected communities.",
+                        isVisible: true,
+                        required: true,
+                        fields: [
+                            {
+                                id: "5_date_completed",
+                                label: "Date Completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "date",
+                                value: null,
+                                width: "200px",
+                            },
+                            {
+                                label: "N/A",
+                                id: "notApplicable_5_date_completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "boolean",
+                                value: false,
+                                width: "100px",
+                            },
+                        ],
+                    },
+                    {
+                        id: "6. Initiate appropriate risk communication and community engagement activities.",
+                        title: "6. Initiate appropriate risk communication and community engagement activities.",
+                        isVisible: true,
+                        required: true,
+                        fields: [
+                            {
+                                id: "6_date_completed",
+                                label: "Date Completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "date",
+                                value: null,
+                                width: "200px",
+                            },
+                            {
+                                label: "N/A",
+                                id: "notApplicable_6_date_completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "boolean",
+                                value: false,
+                                width: "100px",
+                            },
+                        ],
+                    },
+                    {
+                        title: "7. Establish a coordination mechanism.",
+                        id: "7. Establish a coordination mechanism.",
+                        isVisible: true,
+                        required: true,
+                        fields: [
+                            {
+                                id: "7. Date Completed",
+                                label: "Date Completed",
+                                isVisible: true,
+                                errors: [],
+                                type: "date",
+                                value: null,
+                                width: "200px",
+                            },
+                        ],
+                    },
+                    {
+                        title: "8. Response narrative",
+                        id: "8. Response narrative",
+                        isVisible: true,
+                        required: true,
+                        fields: [
+                            {
+                                id: "responseNarrative",
+                                isVisible: true,
+                                errors: [],
+                                type: "text",
+                                value:
+                                    diseaseOutbreakEvent?.earlyResponseActions.responseNarrative ||
+                                    "",
+                                multiline: true,
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                title: "Assign Incident Manager",
+                id: "incidentManager_section",
+                isVisible: true,
+                required: true,
+                fields: [
+                    {
+                        id: "incidentManager",
+                        placeholder: "Select a manager",
+                        isVisible: true,
+                        errors: [],
+                        type: "user",
+                        options: [
+                            {
+                                value: "1",
+                                label: "member 1",
+                                workPosition: "workPosition",
+                                phone: "PhoneNumber",
+                                email: "Email",
+                                status: "Available",
+                                src: "url 1",
+                            },
+                            {
+                                value: "2",
+                                label: "member 2",
+                                workPosition: "workPosition",
+                                phone: "PhoneNumber",
+                                email: "Email",
+                                status: "Unavailable",
+                                src: "url 2",
+                            },
+                        ],
+                        value: diseaseOutbreakEvent?.incidentManager?.id,
+                    },
+                ],
+            },
+            {
+                title: "Notes",
+                id: "notes_section",
+                isVisible: true,
+                required: false,
+                fields: [
+                    {
+                        id: "notes",
+                        isVisible: true,
+                        errors: [],
+                        type: "text",
+                        value: diseaseOutbreakEvent?.notes || "",
+                        multiline: true,
+                    },
+                ],
+            },
+        ],
+    };
+}
diff --git a/src/webapp/pages/form/FormPage.tsx b/src/webapp/pages/form/FormPage.tsx
deleted file mode 100644
index 0dadbb41..00000000
--- a/src/webapp/pages/form/FormPage.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-import { Layout } from "../../components/layout/Layout";
-
-export const FormPage: React.FC = React.memo(() => {
-    return <Layout title="Form Title" subtitle="Form Subtitle" hideSideBarOptions></Layout>;
-});
diff --git a/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx b/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
index 10cd1ac4..36728c67 100644
--- a/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
+++ b/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
@@ -3,8 +3,6 @@ import React from "react";
 import i18n from "../../../utils/i18n";
 import { Layout } from "../../components/layout/Layout";
 
-// TODO: Add every section here, first it's just an example
-
 export const IncidentActionPlanPage: React.FC = React.memo(() => {
     return (
         <Layout
diff --git a/yarn.lock b/yarn.lock
index 16d5c544..3dc3e373 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10491,6 +10491,11 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
+string-ts@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/string-ts/-/string-ts-2.2.0.tgz#46573f475f90f9b43c50cd01c9a603c83426bd25"
+  integrity sha512-VTP0LLZo4Jp9Gz5IiDVMS9WyLx/3IeYh0PXUn0NdPqusUFNgkHPWiEdbB9TU2Iv3myUskraD5WtYEdHUrQEIlQ==
+
 string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
@@ -11072,10 +11077,10 @@ typedoc@^0.25.1:
     minimatch "^9.0.3"
     shiki "^0.14.7"
 
-typescript@5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
-  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
+typescript@5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.2.tgz#00d1c7c1c46928c5845c1ee8d0cc2791031d4c43"
+  integrity sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==
 
 ua-parser-js@^0.7.30:
   version "0.7.38"