diff --git a/i18n/en.pot b/i18n/en.pot
index c63f1ee4..b1a802fd 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: 2023-11-23T14:09:23.068Z\n"
-"PO-Revision-Date: 2023-11-23T14:09:23.068Z\n"
+"POT-Creation-Date: 2024-01-22T08:44:17.768Z\n"
+"PO-Revision-Date: 2024-01-22T08:44:17.768Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -612,9 +612,6 @@ msgstr "Name"
 msgid "Sharing"
 msgstr "Sharing"
 
-msgid "Value type"
-msgstr "Value type"
-
 msgid "Owner"
 msgstr "Owner"
 
@@ -627,21 +624,54 @@ msgstr "This field requires a unique value, please choose another one"
 msgid "Required"
 msgstr "Required"
 
-msgid "Custom attributes"
-msgstr "Custom attributes"
-
 msgid "Something went wrong when submitting the form"
 msgstr "Something went wrong when submitting the form"
 
-msgid "Save and close"
-msgstr "Save and close"
-
 msgid "Exit without saving"
 msgstr "Exit without saving"
 
 msgid "Create data element"
 msgstr "Create data element"
 
+msgid "Selected legends"
+msgstr "Selected legends"
+
+msgid "Refresh list"
+msgstr "Refresh list"
+
+msgid "Add new"
+msgstr "Add new"
+
+msgid "Description"
+msgstr "Description"
+
+msgid "Explain the purpose of this data element and how it's measured."
+msgstr "Explain the purpose of this data element and how it's measured."
+
+msgid "{{fieldLabel}} (required)"
+msgstr "{{fieldLabel}} (required)"
+
+msgid "A data element name should be concise and easy to recognize."
+msgstr "A data element name should be concise and easy to recognize."
+
+msgid "Often used in reports where space is limited"
+msgstr "Often used in reports where space is limited"
+
+msgid "Basic information"
+msgstr "Basic information"
+
+msgid "Set up the information for this data element group"
+msgstr "Set up the information for this data element group"
+
+msgid "@TODO"
+msgstr "@TODO"
+
+msgid "Custom attributes"
+msgstr "Custom attributes"
+
+msgid "Save and close"
+msgstr "Save and close"
+
 msgid "Choose how this data element is disaggregated"
 msgstr "Choose how this data element is disaggregated"
 
@@ -651,9 +681,6 @@ msgstr "The default way to aggregate this data element in analytics."
 msgid "Disabled for the selected value type."
 msgstr "Disabled for the selected value type."
 
-msgid "{{fieldLabel}} (required)"
-msgstr "{{fieldLabel}} (required)"
-
 msgid "Aggregation type"
 msgstr "Aggregation type"
 
@@ -673,12 +700,6 @@ msgstr "Loading custom attributes"
 msgid "Something went wrong with retrieving the custom attributes"
 msgstr "Something went wrong with retrieving the custom attributes"
 
-msgid "Description"
-msgstr "Description"
-
-msgid "Explain the purpose of this data element and how it's measured."
-msgstr "Explain the purpose of this data element and how it's measured."
-
 msgid "A data element can either be aggregated or tracked data."
 msgstr "A data element can either be aggregated or tracked data."
 
@@ -697,18 +718,6 @@ msgstr "StandardForm name"
 msgid "An alternative name used in section or automatic data entry forms."
 msgstr "An alternative name used in section or automatic data entry forms."
 
-msgid "Selected legends"
-msgstr "Selected legends"
-
-msgid "Refresh list"
-msgstr "Refresh list"
-
-msgid "Add new"
-msgstr "Add new"
-
-msgid "A data element name should be concise and easy to recognize."
-msgstr "A data element name should be concise and easy to recognize."
-
 msgid "Option set comment"
 msgstr "Option set comment"
 
@@ -718,9 +727,6 @@ msgstr "Choose a set of predefined comment for data entry"
 msgid "Choose a set of predefined options for data entry"
 msgstr "Choose a set of predefined options for data entry"
 
-msgid "Often used in reports where space is limited"
-msgstr "Often used in reports where space is limited"
-
 msgid "Url"
 msgstr "Url"
 
@@ -740,9 +746,6 @@ msgstr ""
 msgid "Store zero data values"
 msgstr "Store zero data values"
 
-msgid "Basic information"
-msgstr "Basic information"
-
 msgid "Set up the information for this data element"
 msgstr "Set up the information for this data element"
 
diff --git a/src/components/metadataFormControls/DataElementsTransfer/DataElementsTransfer.tsx b/src/components/metadataFormControls/DataElementsTransfer/DataElementsTransfer.tsx
new file mode 100644
index 00000000..b5e3481e
--- /dev/null
+++ b/src/components/metadataFormControls/DataElementsTransfer/DataElementsTransfer.tsx
@@ -0,0 +1,150 @@
+import i18n from '@dhis2/d2-i18n'
+import { Transfer } from '@dhis2/ui'
+import React, {
+    ReactElement,
+    forwardRef,
+    useCallback,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react'
+import { SelectOption } from '../../../types'
+import { useInitialOptionQuery } from './useInitialOptionQuery'
+import { useOptionsQuery } from './useOptionsQuery'
+
+function computeDisplayOptions({
+    selected,
+    selectedOptions,
+    options,
+}: {
+    options: SelectOption[]
+    selected: string[]
+    selectedOptions: SelectOption[]
+}): SelectOption[] {
+    // This happens only when we haven't fetched the lable for an initially
+    // selected value. Don't show anything to prevent error that an option is
+    // missing
+    if (!selectedOptions.length && selected.length) {
+        return []
+    }
+
+    const missingSelectedOptions = selectedOptions.filter((selectedOption) => {
+        return !options?.find((option) => option.value === selectedOption.value)
+    })
+
+    return [...options, ...missingSelectedOptions]
+}
+
+interface DataElementsSelectProps {
+    onChange: ({ selected }: { selected: string[] }) => void
+    selected: string[]
+    rightHeader?: ReactElement
+    rightFooter?: ReactElement
+    leftFooter?: ReactElement
+    leftHeader?: ReactElement
+}
+
+export const DataElementsTransfer = forwardRef(function DataElementsSelect(
+    {
+        onChange,
+        selected,
+        rightHeader,
+        rightFooter,
+        leftFooter,
+        leftHeader,
+    }: DataElementsSelectProps,
+    ref
+) {
+    // Using a ref because we don't want to react to changes.
+    // We're using this value only when imperatively calling `refetch`,
+    // nothing that depends on the render-cycle depends on this value
+    const [searchTerm, setSearchTerm] = useState('')
+    const pageRef = useRef(0)
+
+    // We need to persist the selected option so we can display an <Option />
+    // when the current list doesn't contain the selected option (e.g. when
+    // the page with the selected option hasn't been reached yet or when
+    // filtering)
+    const [selectedOptions, setSelectedOptions] = useState<SelectOption[]>([])
+
+    const optionsQuery = useOptionsQuery()
+    const initialOptionQuery = useInitialOptionQuery({
+        selected,
+        onComplete: setSelectedOptions,
+    })
+
+    const { refetch, data } = optionsQuery
+    const pager = data?.pager
+    const page = pager?.page || 0
+    const pageCount = pager?.pageCount || 0
+
+    const loading =
+        optionsQuery.fetching ||
+        optionsQuery.loading ||
+        initialOptionQuery.loading
+    const error =
+        optionsQuery.error || initialOptionQuery.error
+            ? // @TODO: Ask Joe what do do here!
+              'An error has occurred. Please try again'
+            : ''
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            refetch: () => {
+                pageRef.current = 1
+                refetch({ page: pageRef.current, filter: searchTerm })
+            },
+        }),
+        [refetch, searchTerm]
+    )
+
+    const adjustQueryParamsWithChangedFilter = useCallback(
+        ({ value }: { value: string | undefined }) => {
+            value = value ?? ''
+            setSearchTerm(value)
+            pageRef.current = 1
+            refetch({ page: pageRef.current, filter: value })
+        },
+        [refetch]
+    )
+
+    const incrementPage = useCallback(() => {
+        if (optionsQuery.loading || page === pageCount) {
+            return
+        }
+
+        pageRef.current = page + 1
+        refetch({ page: pageRef.current, filter: searchTerm })
+    }, [refetch, page, optionsQuery.loading, searchTerm, pageCount])
+
+    const displayOptions = computeDisplayOptions({
+        selected,
+        selectedOptions,
+        options: data?.result || [],
+    })
+
+    return (
+        <Transfer
+            filterable
+            filterPlaceholder={i18n.t('Filter data elements')}
+            searchTerm={searchTerm}
+            options={displayOptions}
+            selected={selected}
+            loading={loading}
+            onChange={({ selected }: { selected: string[] }) => {
+                const nextSelectedOptions = displayOptions.filter(({ value }) =>
+                    selected.includes(value)
+                )
+                setSelectedOptions(nextSelectedOptions)
+                onChange({ selected })
+            }}
+            onEndReached={incrementPage}
+            onFilterChange={adjustQueryParamsWithChangedFilter}
+            rightHeader={rightHeader}
+            rightFooter={rightFooter}
+            leftHeader={leftHeader}
+            leftFooter={leftFooter}
+        />
+    )
+})
diff --git a/src/components/metadataFormControls/DataElementsTransfer/index.ts b/src/components/metadataFormControls/DataElementsTransfer/index.ts
new file mode 100644
index 00000000..89a372e6
--- /dev/null
+++ b/src/components/metadataFormControls/DataElementsTransfer/index.ts
@@ -0,0 +1 @@
+export { DataElementsTransfer } from './DataElementsTransfer'
diff --git a/src/components/metadataFormControls/DataElementsTransfer/types.ts b/src/components/metadataFormControls/DataElementsTransfer/types.ts
new file mode 100644
index 00000000..ba409082
--- /dev/null
+++ b/src/components/metadataFormControls/DataElementsTransfer/types.ts
@@ -0,0 +1,9 @@
+import { DataElement, GistCollectionResponse } from '../../../types/generated'
+
+const filterFields = ['id', 'displayName'] as const //(name is translated by default in /gist)
+export type FilteredDataElement = Pick<
+    DataElement,
+    (typeof filterFields)[number]
+>
+export type DataElementsQueryResult =
+    GistCollectionResponse<FilteredDataElement>
diff --git a/src/components/metadataFormControls/DataElementsTransfer/useInitialOptionQuery.ts b/src/components/metadataFormControls/DataElementsTransfer/useInitialOptionQuery.ts
new file mode 100644
index 00000000..4a278505
--- /dev/null
+++ b/src/components/metadataFormControls/DataElementsTransfer/useInitialOptionQuery.ts
@@ -0,0 +1,44 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { useRef } from 'react'
+import { SelectOption } from '../../../types'
+import { FilteredDataElement } from './types'
+
+type InitialDataElementsQueryResult = {
+    dataElements: {
+        dataElements: FilteredDataElement[]
+    }
+}
+
+export function useInitialOptionQuery({
+    selected,
+    onComplete,
+}: {
+    onComplete: (options: SelectOption[]) => void
+    selected: string[]
+}) {
+    const initialSelected = useRef(selected)
+    const query = {
+        dataElements: {
+            resource: 'dataElements',
+            params: {
+                paging: false,
+                fields: ['id', 'displayName'],
+                filter: `id:in:[${initialSelected.current.join(',')}]`,
+            },
+        },
+    }
+
+    return useDataQuery<InitialDataElementsQueryResult>(query, {
+        lazy: !initialSelected.current,
+        variables: { id: selected },
+        onComplete: (data) => {
+            const { dataElements } = data.dataElements
+            const options = dataElements.map(({ id, displayName }) => ({
+                value: id,
+                label: displayName,
+            }))
+
+            onComplete(options)
+        },
+    })
+}
diff --git a/src/components/metadataFormControls/DataElementsTransfer/useOptionsQuery.ts b/src/components/metadataFormControls/DataElementsTransfer/useOptionsQuery.ts
new file mode 100644
index 00000000..25889a8f
--- /dev/null
+++ b/src/components/metadataFormControls/DataElementsTransfer/useOptionsQuery.ts
@@ -0,0 +1,77 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { useEffect, useMemo, useState } from 'react'
+import { SelectOption } from '../../../types'
+import { DataElement, Pager } from '../../../types/generated'
+
+type DataElementsQueryResult = {
+    dataElements: {
+        pager: Pager
+        dataElements: DataElement[]
+    }
+}
+
+const CATEGORY_COMBOS_QUERY = {
+    dataElements: {
+        resource: 'dataElements',
+        params: (variables: Record<string, string>) => {
+            const params = {
+                page: variables.page,
+                pageSize: 10,
+                fields: ['id', 'displayName'],
+                order: ['displayName'],
+            }
+
+            if (variables.filter) {
+                return {
+                    ...params,
+                    filter: `name:ilike:${variables.filter}`,
+                }
+            }
+
+            return params
+        },
+    },
+}
+
+export function useOptionsQuery() {
+    const [loadedOptions, setLoadedOptions] = useState<SelectOption[]>([])
+    const queryResult = useDataQuery<DataElementsQueryResult>(
+        CATEGORY_COMBOS_QUERY,
+        {
+            variables: {
+                page: 1,
+                filter: '',
+            },
+        }
+    )
+    const { data } = queryResult
+
+    // Must be done in `useEffect` and not in `onComplete`, as `onComplete`
+    // won't get called when useDataQuery has the values in cache already
+    useEffect(() => {
+        if (data?.dataElements) {
+            const { pager, dataElements } = data.dataElements
+            // We want to add new options to existing ones so we don't have to
+            // refetch existing options
+            setLoadedOptions((prevLoadedOptions) => [
+                // We only want to add when the current page is > 1
+                ...(pager.page === 1 ? [] : prevLoadedOptions),
+                ...(dataElements.map((catCombo) => {
+                    const { id, displayName } = catCombo
+                    return { value: id, label: displayName }
+                }) || []),
+            ])
+        }
+    }, [data])
+
+    return useMemo(
+        () => ({
+            ...queryResult,
+            data: {
+                pager: queryResult.data?.dataElements.pager,
+                result: loadedOptions,
+            },
+        }),
+        [loadedOptions, queryResult]
+    )
+}
diff --git a/src/components/metadataFormControls/index.ts b/src/components/metadataFormControls/index.ts
index 21ee6cac..c3f72c11 100644
--- a/src/components/metadataFormControls/index.ts
+++ b/src/components/metadataFormControls/index.ts
@@ -1,4 +1,5 @@
 export * from './AggregationLevelMultiSelect'
 export * from './CategoryComboSelect'
+export * from './DataElementsTransfer'
 export * from './LegendSetTransfer'
 export * from './OptionSetSelect'
diff --git a/src/pages/dataElementGroups/Edit.module.css b/src/pages/dataElementGroups/Edit.module.css
new file mode 100644
index 00000000..de17044a
--- /dev/null
+++ b/src/pages/dataElementGroups/Edit.module.css
@@ -0,0 +1,15 @@
+.form {
+    background: var(--colors-white);
+    padding: var(--spacers-dp16);
+    padding-bottom: var(--spacers-dp32);
+}
+
+.formActions {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+    padding: var(--spacers-dp16);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+    background: var(--colors-white);
+}
diff --git a/src/pages/dataElementGroups/Edit.tsx b/src/pages/dataElementGroups/Edit.tsx
new file mode 100644
index 00000000..e8c88889
--- /dev/null
+++ b/src/pages/dataElementGroups/Edit.tsx
@@ -0,0 +1,191 @@
+import { useDataEngine, useDataQuery } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import { NoticeBox } from '@dhis2/ui'
+import { FORM_ERROR, FormApi } from 'final-form'
+import React, { useEffect, useRef } from 'react'
+import { withTypes } from 'react-final-form'
+import { useNavigate, useParams } from 'react-router-dom'
+import {
+    Loader,
+    StandardFormActions,
+    StandardFormSection,
+} from '../../components'
+import { SCHEMA_SECTIONS, getSectionPath } from '../../lib'
+import { JsonPatchOperation } from '../../types'
+import { DataElementGroup } from '../../types/generated'
+import { createJsonPatchOperations } from './edit/'
+import classes from './Edit.module.css'
+import { DataElementGroupFormFields, validate } from './form'
+import type { FormValues } from './form'
+
+type FinalFormFormApi = FormApi<FormValues>
+
+const { Form } = withTypes<FormValues>()
+
+type DataElementGroupQueryResponse = {
+    dataElementGroup: DataElementGroup
+}
+
+const listPath = `/${getSectionPath(SCHEMA_SECTIONS.dataElementGroup)}`
+
+function useDataElementGroupQuery(id: string) {
+    const DATA_ELEMENT_QUERY = {
+        dataElementGroup: {
+            resource: `dataElementGroups/${id}`,
+            params: {
+                fields: ['*', 'attributeValues[*]'],
+            },
+        },
+    }
+
+    return useDataQuery<DataElementGroupQueryResponse>(DATA_ELEMENT_QUERY, {
+        variables: { id },
+    })
+}
+
+function usePatchDirtyFields() {
+    const dataEngine = useDataEngine()
+
+    return async ({
+        values,
+        dirtyFields,
+        dataElementGroup,
+    }: {
+        values: FormValues
+        dirtyFields: { [name: string]: boolean }
+        dataElementGroup: DataElementGroup
+    }) => {
+        const jsonPatchPayload = createJsonPatchOperations({
+            values,
+            dirtyFields,
+            originalValue: dataElementGroup,
+        })
+
+        // We want the promise so we know when submitting is done. The promise
+        // returned by the mutation function of useDataMutation will never
+        // resolve
+        const ADD_NEW_DATA_ELEMENT_MUTATION = {
+            resource: 'dataElementGroups',
+            id: values.id,
+            type: 'json-patch',
+            data: ({ operations }: { operations: JsonPatchOperation[] }) =>
+                operations,
+        } as const
+
+        try {
+            await dataEngine.mutate(ADD_NEW_DATA_ELEMENT_MUTATION, {
+                variables: { operations: jsonPatchPayload },
+            })
+        } catch (e) {
+            return { [FORM_ERROR]: (e as Error | string).toString() }
+        }
+    }
+}
+
+export const Component = () => {
+    const navigate = useNavigate()
+    const params = useParams()
+    const dataElementGroupId = params.id as string
+    const dataElementGroupQuery = useDataElementGroupQuery(dataElementGroupId)
+    const patchDirtyFields = usePatchDirtyFields()
+
+    async function onSubmit(values: FormValues, form: FinalFormFormApi) {
+        const errors = await patchDirtyFields({
+            values,
+            dirtyFields: form.getState().dirtyFields,
+            dataElementGroup: dataElementGroupQuery.data
+                ?.dataElementGroup as DataElementGroup,
+        })
+
+        if (errors) {
+            return errors
+        }
+
+        navigate(listPath)
+    }
+
+    const dataElementGroup = dataElementGroupQuery.data
+        ?.dataElementGroup as DataElementGroup
+    const initialValues = dataElementGroup
+        ? {
+              id: dataElementGroupId,
+              name: dataElementGroup.name,
+              shortName: dataElementGroup.shortName,
+              code: dataElementGroup.code,
+              description: dataElementGroup.description,
+              dataElements: dataElementGroup.dataElements || [],
+          }
+        : {}
+
+    return (
+        <Loader
+            queryResponse={dataElementGroupQuery}
+            label={i18n.t('Data element group')}
+        >
+            <Form
+                validateOnBlur
+                onSubmit={onSubmit}
+                validate={validate}
+                initialValues={initialValues}
+            >
+                {({ handleSubmit, submitting, submitError }) => (
+                    <form onSubmit={handleSubmit}>
+                        <FormContents
+                            submitError={submitError}
+                            submitting={submitting}
+                        />
+                    </form>
+                )}
+            </Form>
+        </Loader>
+    )
+}
+
+function FormContents({
+    submitError,
+    submitting,
+}: {
+    submitting: boolean
+    submitError?: string
+}) {
+    const formErrorRef = useRef<HTMLDivElement | null>(null)
+    const navigate = useNavigate()
+
+    useEffect(() => {
+        if (submitError) {
+            formErrorRef.current?.scrollIntoView({ behavior: 'smooth' })
+        }
+    }, [submitError])
+
+    return (
+        <>
+            {submitError && (
+                <StandardFormSection>
+                    <div ref={formErrorRef}>
+                        <NoticeBox
+                            error
+                            title={i18n.t(
+                                'Something went wrong when submitting the form'
+                            )}
+                        >
+                            {submitError}
+                        </NoticeBox>
+                    </div>
+                </StandardFormSection>
+            )}
+
+            <div className={classes.form}>
+                <DataElementGroupFormFields />
+            </div>
+
+            <div className={classes.formActions}>
+                <StandardFormActions
+                    cancelLabel={i18n.t('Cancel')}
+                    submitLabel={i18n.t('Save and close')}
+                    submitting={submitting}
+                    onCancelClick={() => navigate(listPath)}
+                />
+            </div>
+        </>
+    )
+}
diff --git a/src/pages/dataElementGroups/New.module.css b/src/pages/dataElementGroups/New.module.css
new file mode 100644
index 00000000..331dde3d
--- /dev/null
+++ b/src/pages/dataElementGroups/New.module.css
@@ -0,0 +1,5 @@
+.form {
+    background: var(--colors-white);
+    padding: var(--spacers-dp16);
+    padding-bottom: var(--spacers-dp32);
+}
diff --git a/src/pages/dataElementGroups/New.tsx b/src/pages/dataElementGroups/New.tsx
new file mode 100644
index 00000000..7b08af8f
--- /dev/null
+++ b/src/pages/dataElementGroups/New.tsx
@@ -0,0 +1,117 @@
+import { useDataEngine } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import { NoticeBox } from '@dhis2/ui'
+import { FORM_ERROR } from 'final-form'
+import React, { useEffect, useRef } from 'react'
+import { Form } from 'react-final-form'
+import { useNavigate } from 'react-router-dom'
+import { StandardFormActions, StandardFormSection } from '../../components'
+import { SCHEMA_SECTIONS, getSectionPath } from '../../lib'
+import { DataElementGroupFormFields, validate } from './form'
+import type { FormValues } from './form'
+import classes from './New.module.css'
+
+const listPath = `/${getSectionPath(SCHEMA_SECTIONS.dataElementGroup)}`
+
+const initialValues = {
+    name: '',
+    shortName: '',
+    code: '',
+    description: '',
+    dataElements: [],
+}
+
+const ADD_NEW_DATA_ELEMENT_GROUP_MUTATION = {
+    resource: 'dataElementGroups',
+    type: 'create',
+    data: (de: object) => de,
+} as const
+
+export function Component() {
+    const dataEngine = useDataEngine()
+    const navigate = useNavigate()
+
+    const onSubmit = async (payload: FormValues) => {
+        try {
+            // We want the promise so we know when submitting is done. The promise
+            // returned by the mutation function of useDataMutation will never
+            // resolve
+            await dataEngine.mutate(ADD_NEW_DATA_ELEMENT_GROUP_MUTATION, {
+                variables: payload,
+            })
+        } catch (e) {
+            return { [FORM_ERROR]: (e as Error | string).toString() }
+        }
+
+        navigate(listPath)
+    }
+
+    return (
+        <Form
+            validateOnBlur
+            onSubmit={onSubmit}
+            validate={validate}
+            initialValues={initialValues}
+        >
+            {({ handleSubmit, submitting, submitError }) => (
+                <form onSubmit={handleSubmit}>
+                    <FormContents
+                        submitError={submitError}
+                        submitting={submitting}
+                        onCancelClick={() => navigate(listPath)}
+                    />
+                </form>
+            )}
+        </Form>
+    )
+}
+
+function FormContents({
+    submitError,
+    onCancelClick,
+    submitting,
+}: {
+    submitting: boolean
+    onCancelClick: () => void
+    submitError?: string
+}) {
+    const formErrorRef = useRef<HTMLDivElement | null>(null)
+
+    useEffect(() => {
+        if (submitError) {
+            formErrorRef.current?.scrollIntoView({ behavior: 'smooth' })
+        }
+    }, [submitError])
+
+    return (
+        <>
+            <div className={classes.form}>
+                <DataElementGroupFormFields />
+
+                {submitError && (
+                    <StandardFormSection>
+                        <div ref={formErrorRef}>
+                            <NoticeBox
+                                error
+                                title={i18n.t(
+                                    'Something went wrong when submitting the form'
+                                )}
+                            >
+                                {submitError}
+                            </NoticeBox>
+                        </div>
+                    </StandardFormSection>
+                )}
+
+                <StandardFormSection>
+                    <StandardFormActions
+                        cancelLabel={i18n.t('Exit without saving')}
+                        submitLabel={i18n.t('Create data element group')}
+                        submitting={submitting}
+                        onCancelClick={onCancelClick}
+                    />
+                </StandardFormSection>
+            </div>
+        </>
+    )
+}
diff --git a/src/pages/dataElementGroups/edit/createJsonPatchOperations.spec.ts b/src/pages/dataElementGroups/edit/createJsonPatchOperations.spec.ts
new file mode 100644
index 00000000..422cf33c
--- /dev/null
+++ b/src/pages/dataElementGroups/edit/createJsonPatchOperations.spec.ts
@@ -0,0 +1,49 @@
+import { createJsonPatchOperations } from './createJsonPatchOperations'
+
+describe('createJsonPatchOperations', () => {
+    describe('createJsonPatchOperations', () => {
+        it('should return an empty array if no dirty fields', () => {
+            const actual = createJsonPatchOperations({
+                dirtyFields: {},
+                originalValue: { id: 'foo' },
+                values: {},
+            })
+            expect(actual).toEqual([])
+        })
+
+        it('should return a json-patch payload for a single field', () => {
+            const actual = createJsonPatchOperations({
+                dirtyFields: { name: true },
+                originalValue: {
+                    id: 'foo',
+                    name: 'bar',
+                },
+                values: { name: 'baz' },
+            })
+            const expected = [
+                {
+                    op: 'replace',
+                    path: '/name',
+                    value: 'baz',
+                },
+            ]
+            expect(actual).toEqual(expected)
+        })
+
+        it('should return a json-patch payload with add if value does not exist in originalValue', () => {
+            const actual = createJsonPatchOperations({
+                dirtyFields: { name: true },
+                originalValue: { id: 'foo' },
+                values: { name: 'baz' },
+            })
+            const expected = [
+                {
+                    op: 'add',
+                    path: '/name',
+                    value: 'baz',
+                },
+            ]
+            expect(actual).toEqual(expected)
+        })
+    })
+})
diff --git a/src/pages/dataElementGroups/edit/createJsonPatchOperations.ts b/src/pages/dataElementGroups/edit/createJsonPatchOperations.ts
new file mode 100644
index 00000000..bfdb1dea
--- /dev/null
+++ b/src/pages/dataElementGroups/edit/createJsonPatchOperations.ts
@@ -0,0 +1,20 @@
+import get from 'lodash/fp/get'
+import { JsonPatchOperation } from '../../../types'
+
+interface FormatFormValuesArgs<FormValues> {
+    originalValue: unknown
+    dirtyFields: { [key in keyof FormValues]?: boolean }
+    values: FormValues
+}
+
+export function createJsonPatchOperations<FormValues>({
+    dirtyFields,
+    originalValue,
+    values,
+}: FormatFormValuesArgs<FormValues>): JsonPatchOperation[] {
+    return Object.keys(dirtyFields).map((name) => ({
+        op: get(name, originalValue) ? 'replace' : 'add',
+        path: `/${name.replace(/[.]/g, '/')}`,
+        value: get(name, values) || '',
+    }))
+}
diff --git a/src/pages/dataElementGroups/edit/index.ts b/src/pages/dataElementGroups/edit/index.ts
new file mode 100644
index 00000000..0069ca37
--- /dev/null
+++ b/src/pages/dataElementGroups/edit/index.ts
@@ -0,0 +1 @@
+export { createJsonPatchOperations } from './createJsonPatchOperations'
diff --git a/src/pages/dataElementGroups/fields/CodeField.tsx b/src/pages/dataElementGroups/fields/CodeField.tsx
new file mode 100644
index 00000000..fedc4eb8
--- /dev/null
+++ b/src/pages/dataElementGroups/fields/CodeField.tsx
@@ -0,0 +1,25 @@
+import i18n from '@dhis2/d2-i18n'
+import { InputFieldFF } from '@dhis2/ui'
+import React from 'react'
+import { Field as FieldRFF } from 'react-final-form'
+import { useCheckMaxLengthFromSchema } from '../../../lib'
+import type { SchemaName } from '../../../types'
+
+export function CodeField() {
+    const validate = useCheckMaxLengthFromSchema(
+        'dataElement' as SchemaName,
+        'code'
+    )
+
+    return (
+        <FieldRFF
+            component={InputFieldFF}
+            dataTest="dataelementsformfields-code"
+            inputWidth="150px"
+            name="code"
+            label={i18n.t('Code')}
+            validateFields={[]}
+            validate={validate}
+        />
+    )
+}
diff --git a/src/pages/dataElementGroups/fields/DataElementsField.module.css b/src/pages/dataElementGroups/fields/DataElementsField.module.css
new file mode 100644
index 00000000..f40ea288
--- /dev/null
+++ b/src/pages/dataElementGroups/fields/DataElementsField.module.css
@@ -0,0 +1,8 @@
+.dataElementsOptionsFooter {
+    padding: var(--spacers-dp8) 0;
+}
+
+.dataElementsPickedHeader {
+    padding: var(--spacers-dp8) 0;
+    margin: 0;
+}
diff --git a/src/pages/dataElementGroups/fields/DataElementsField.tsx b/src/pages/dataElementGroups/fields/DataElementsField.tsx
new file mode 100644
index 00000000..391f7cba
--- /dev/null
+++ b/src/pages/dataElementGroups/fields/DataElementsField.tsx
@@ -0,0 +1,70 @@
+import i18n from '@dhis2/d2-i18n'
+import { ButtonStrip, Button, Field } from '@dhis2/ui'
+import React, { useRef } from 'react'
+import { useField } from 'react-final-form'
+import { useHref } from 'react-router'
+import { DataElementsTransfer } from '../../../components'
+import classes from './DataElementsField.module.css'
+
+/**
+ *
+ * DataElements
+ *
+ */
+export function DataElementsField() {
+    const name = 'dataElements'
+    const { input, meta } = useField(name, {
+        multiple: true,
+        format: (dataElements: { id: string }[]) =>
+            dataElements?.map((dataElements) => dataElements.id),
+        parse: (ids: string[]) => ids.map((id) => ({ id })),
+        validateFields: [],
+    })
+
+    const newDataElementsLink = useHref('/dataElements/new')
+    const dataElementsHandle = useRef({
+        refetch: () => {
+            throw new Error('Not initialized')
+        },
+    })
+
+    const rightHeader = (
+        <p className={classes.dataElementsPickedHeader}>
+            {i18n.t('Selected data elements')}
+        </p>
+    )
+
+    const leftFooter = (
+        <div className={classes.dataElementsOptionsFooter}>
+            <ButtonStrip>
+                <Button small onClick={dataElementsHandle.current.refetch}>
+                    {i18n.t('Refresh list')}
+                </Button>
+
+                <Button
+                    small
+                    onClick={() => window.open(newDataElementsLink, '_blank')}
+                >
+                    {i18n.t('Add new')}
+                </Button>
+            </ButtonStrip>
+        </div>
+    )
+
+    return (
+        <Field
+            dataTest="dataelementsformfields-dataElementsets"
+            error={!!meta.error}
+            validationText={meta.error?.toString()}
+            name={name}
+        >
+            <DataElementsTransfer
+                ref={dataElementsHandle}
+                selected={input.value}
+                onChange={({ selected }) => input.onChange(selected)}
+                rightHeader={rightHeader}
+                leftFooter={leftFooter}
+            />
+        </Field>
+    )
+}
diff --git a/src/pages/dataElementGroups/fields/DescriptionField.tsx b/src/pages/dataElementGroups/fields/DescriptionField.tsx
new file mode 100644
index 00000000..c11298b8
--- /dev/null
+++ b/src/pages/dataElementGroups/fields/DescriptionField.tsx
@@ -0,0 +1,28 @@
+import i18n from '@dhis2/d2-i18n'
+import { TextAreaFieldFF } from '@dhis2/ui'
+import React from 'react'
+import { Field as FieldRFF } from 'react-final-form'
+import { useCheckMaxLengthFromSchema } from '../../../lib'
+import type { SchemaName } from '../../../types'
+
+export function DescriptionField() {
+    const validate = useCheckMaxLengthFromSchema(
+        'dataElement' as SchemaName,
+        'formName'
+    )
+
+    return (
+        <FieldRFF
+            component={TextAreaFieldFF}
+            dataTest="dataelementsformfields-description"
+            inputWidth="400px"
+            name="description"
+            label={i18n.t('Description')}
+            helpText={i18n.t(
+                "Explain the purpose of this data element and how it's measured."
+            )}
+            validate={validate}
+            validateFields={[]}
+        />
+    )
+}
diff --git a/src/pages/dataElementGroups/fields/NameField.tsx b/src/pages/dataElementGroups/fields/NameField.tsx
new file mode 100644
index 00000000..b6c38724
--- /dev/null
+++ b/src/pages/dataElementGroups/fields/NameField.tsx
@@ -0,0 +1,64 @@
+import i18n from '@dhis2/d2-i18n'
+import { InputFieldFF } from '@dhis2/ui'
+import React, { useMemo } from 'react'
+import { Field as FieldRFF, useField } from 'react-final-form'
+import { useParams } from 'react-router-dom'
+import {
+    composeAsyncValidators,
+    required,
+    useCheckMaxLengthFromSchema,
+    useIsFieldValueUnique,
+} from '../../../lib'
+import { SchemaName } from '../../../types'
+import type { FormValues } from '../form'
+
+function useValidator() {
+    const params = useParams()
+    const dataElementId = params.id as string
+    const checkIsValueTaken = useIsFieldValueUnique({
+        model: 'dataElements',
+        field: 'name',
+        id: dataElementId,
+    })
+
+    const checkMaxLength = useCheckMaxLengthFromSchema(
+        SchemaName.dataElement,
+        'name'
+    )
+
+    return useMemo(
+        () =>
+            composeAsyncValidators<string, FormValues>([
+                checkIsValueTaken,
+                checkMaxLength,
+                required,
+            ]),
+        [checkIsValueTaken, checkMaxLength]
+    )
+}
+
+export function NameField() {
+    const validator = useValidator()
+    const { meta } = useField('name', {
+        subscription: { validating: true },
+    })
+
+    return (
+        <FieldRFF<string | undefined>
+            loading={meta.validating}
+            component={InputFieldFF}
+            dataTest="dataelementsformfields-name"
+            required
+            inputWidth="400px"
+            label={i18n.t('{{fieldLabel}} (required)', {
+                fieldLabel: i18n.t('Name'),
+            })}
+            name="name"
+            helpText={i18n.t(
+                'A data element name should be concise and easy to recognize.'
+            )}
+            validate={(name?: string) => validator(name)}
+            validateFields={[]}
+        />
+    )
+}
diff --git a/src/pages/dataElementGroups/fields/ShortNameField.tsx b/src/pages/dataElementGroups/fields/ShortNameField.tsx
new file mode 100644
index 00000000..7e1845d5
--- /dev/null
+++ b/src/pages/dataElementGroups/fields/ShortNameField.tsx
@@ -0,0 +1,62 @@
+import i18n from '@dhis2/d2-i18n'
+import { InputFieldFF } from '@dhis2/ui'
+import React, { useMemo } from 'react'
+import { Field as FieldRFF, useField } from 'react-final-form'
+import { useParams } from 'react-router-dom'
+import {
+    composeAsyncValidators,
+    required,
+    useCheckMaxLengthFromSchema,
+    useIsFieldValueUnique,
+} from '../../../lib'
+import type { SchemaName } from '../../../types'
+import type { FormValues } from '../form'
+
+function useValidator() {
+    const params = useParams()
+    const dataElementId = params.id as string
+    const checkIsValueTaken = useIsFieldValueUnique({
+        model: 'dataElements',
+        field: 'name',
+        id: dataElementId,
+    })
+
+    const checkMaxLength = useCheckMaxLengthFromSchema(
+        'dataElement' as SchemaName,
+        'formName'
+    )
+
+    return useMemo(
+        () =>
+            composeAsyncValidators<string, FormValues>([
+                checkIsValueTaken,
+                checkMaxLength,
+                required,
+            ]),
+        [checkIsValueTaken, checkMaxLength]
+    )
+}
+
+export function ShortNameField() {
+    const validator = useValidator()
+    const { meta } = useField('shortName', {
+        subscription: { validating: true },
+    })
+
+    return (
+        <FieldRFF<string | undefined>
+            loading={meta.validating}
+            component={InputFieldFF}
+            dataTest="dataelementsformfields-shortname"
+            required
+            inputWidth="400px"
+            label={i18n.t('{{fieldLabel}} (required)', {
+                fieldLabel: i18n.t('Short name'),
+            })}
+            name="shortName"
+            helpText={i18n.t('Often used in reports where space is limited')}
+            validate={(name?: string) => validator(name)}
+            validateFields={[]}
+        />
+    )
+}
diff --git a/src/pages/dataElementGroups/fields/index.ts b/src/pages/dataElementGroups/fields/index.ts
new file mode 100644
index 00000000..7907b2d4
--- /dev/null
+++ b/src/pages/dataElementGroups/fields/index.ts
@@ -0,0 +1,5 @@
+export { CodeField } from './CodeField'
+export { DataElementsField } from './DataElementsField'
+export { DescriptionField } from './DescriptionField'
+export { NameField } from './NameField'
+export { ShortNameField } from './ShortNameField'
diff --git a/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx b/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx
new file mode 100644
index 00000000..55fcdfc9
--- /dev/null
+++ b/src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx
@@ -0,0 +1,63 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import {
+    StandardFormSection,
+    StandardFormSectionTitle,
+    StandardFormSectionDescription,
+    StandardFormField,
+} from '../../../components'
+import {
+    CodeField,
+    DataElementsField,
+    DescriptionField,
+    NameField,
+    ShortNameField,
+} from '../fields'
+
+export function DataElementGroupFormFields() {
+    return (
+        <>
+            <StandardFormSection>
+                <StandardFormSectionTitle>
+                    {i18n.t('Basic information')}
+                </StandardFormSectionTitle>
+
+                <StandardFormSectionDescription>
+                    {i18n.t(
+                        'Set up the information for this data element group'
+                    )}
+                </StandardFormSectionDescription>
+
+                <StandardFormField>
+                    <NameField />
+                </StandardFormField>
+
+                <StandardFormField>
+                    <ShortNameField />
+                </StandardFormField>
+
+                <StandardFormField>
+                    <CodeField />
+                </StandardFormField>
+
+                <StandardFormField>
+                    <DescriptionField />
+                </StandardFormField>
+            </StandardFormSection>
+
+            <StandardFormSection>
+                <StandardFormSectionTitle>
+                    {i18n.t('Data elements')}
+                </StandardFormSectionTitle>
+
+                <StandardFormSectionDescription>
+                    {i18n.t('@TODO')}
+                </StandardFormSectionDescription>
+
+                <StandardFormField>
+                    <DataElementsField />
+                </StandardFormField>
+            </StandardFormSection>
+        </>
+    )
+}
diff --git a/src/pages/dataElementGroups/form/dataElementGroupSchema.ts b/src/pages/dataElementGroups/form/dataElementGroupSchema.ts
new file mode 100644
index 00000000..8e409109
--- /dev/null
+++ b/src/pages/dataElementGroups/form/dataElementGroupSchema.ts
@@ -0,0 +1,11 @@
+import { z } from 'zod'
+
+export const dataElementGroupSchema = z
+    .object({
+        name: z.string().trim(),
+        shortName: z.string().trim(),
+        code: z.string().trim(),
+        description: z.string().trim(),
+        dataElements: z.array(z.object({ id: z.string() })),
+    })
+    .partial()
diff --git a/src/pages/dataElementGroups/form/index.ts b/src/pages/dataElementGroups/form/index.ts
new file mode 100644
index 00000000..e1ecc676
--- /dev/null
+++ b/src/pages/dataElementGroups/form/index.ts
@@ -0,0 +1,3 @@
+export { DataElementGroupFormFields } from './DataElementGroupFormFields'
+export type { FormValues } from './types'
+export { validate } from './validate'
diff --git a/src/pages/dataElementGroups/form/types.ts b/src/pages/dataElementGroups/form/types.ts
new file mode 100644
index 00000000..824c4514
--- /dev/null
+++ b/src/pages/dataElementGroups/form/types.ts
@@ -0,0 +1,3 @@
+import { DataElementGroup } from '../../../types/generated'
+
+export type FormValues = DataElementGroup
diff --git a/src/pages/dataElementGroups/form/validate.ts b/src/pages/dataElementGroups/form/validate.ts
new file mode 100644
index 00000000..b9b9fcd5
--- /dev/null
+++ b/src/pages/dataElementGroups/form/validate.ts
@@ -0,0 +1,27 @@
+import { setIn } from 'final-form'
+import { dataElementGroupSchema } from './dataElementGroupSchema'
+import type { FormValues } from './types'
+
+// @TODO: Figure out if there's a utility for this? I couldn't find one
+function segmentsToPath(segments: Array<string | number>) {
+    return segments.reduce((path, segment) => {
+        return typeof segment === 'number'
+            ? `${path}[${segment}]`
+            : `${path}.${segment}`
+    }) as string
+}
+
+export function validate(values: FormValues) {
+    const zodResult = dataElementGroupSchema.safeParse(values)
+
+    if (zodResult.success !== false) {
+        return undefined
+    }
+
+    const allFormErrors = zodResult.error.issues.reduce((formErrors, error) => {
+        const errorPath = segmentsToPath(error.path)
+        return setIn(formErrors, errorPath, error.message)
+    }, {})
+
+    return allFormErrors
+}
diff --git a/src/pages/dataElements/New.tsx b/src/pages/dataElements/New.tsx
index b505aead..a97b3d3a 100644
--- a/src/pages/dataElements/New.tsx
+++ b/src/pages/dataElements/New.tsx
@@ -150,6 +150,7 @@ export const Component = () => {
                         <FormContents
                             submitError={submitError}
                             submitting={submitting}
+                            onCancelClick={() => navigate(listPath)}
                         />
                     </form>
                 )}
@@ -160,13 +161,14 @@ export const Component = () => {
 
 function FormContents({
     submitError,
+    onCancelClick,
     submitting,
 }: {
     submitting: boolean
+    onCancelClick: () => void
     submitError?: string
 }) {
     const formErrorRef = useRef<HTMLDivElement | null>(null)
-    const navigate = useNavigate()
 
     useEffect(() => {
         if (submitError) {
@@ -199,7 +201,7 @@ function FormContents({
                         cancelLabel={i18n.t('Exit without saving')}
                         submitLabel={i18n.t('Create data element')}
                         submitting={submitting}
-                        onCancelClick={() => navigate(listPath)}
+                        onCancelClick={onCancelClick}
                     />
                 </StandardFormSection>
             </div>
diff --git a/src/pages/dataElements/index.ts b/src/pages/dataElements/index.ts
new file mode 100644
index 00000000..e69de29b