diff --git a/i18n/en.pot b/i18n/en.pot
index b1a802fd..6708594d 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-01-22T08:44:17.768Z\n"
-"PO-Revision-Date: 2024-01-22T08:44:17.768Z\n"
+"POT-Creation-Date: 2024-01-23T00:34:26.716Z\n"
+"PO-Revision-Date: 2024-01-23T00:34:26.716Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -81,6 +81,9 @@ msgstr "Category combo"
 msgid "None"
 msgstr "None"
 
+msgid "Filter data elements"
+msgstr "Filter data elements"
+
 msgid "Filter legend sets"
 msgstr "Filter legend sets"
 
@@ -627,14 +630,17 @@ msgstr "Required"
 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 "Create data element group"
+msgstr "Create data element group"
 
-msgid "Selected legends"
-msgstr "Selected legends"
+msgid "Selected data elements"
+msgstr "Selected data elements"
 
 msgid "Refresh list"
 msgstr "Refresh list"
@@ -669,8 +675,8 @@ msgstr "@TODO"
 msgid "Custom attributes"
 msgstr "Custom attributes"
 
-msgid "Save and close"
-msgstr "Save and close"
+msgid "Create data element"
+msgstr "Create data element"
 
 msgid "Choose how this data element is disaggregated"
 msgstr "Choose how this data element is disaggregated"
@@ -718,6 +724,9 @@ 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 "Option set comment"
 msgstr "Option set comment"
 
diff --git a/src/components/metadataFormControls/DataElementGroupsTransfer/DataElementGroupsTransfer.tsx b/src/components/metadataFormControls/DataElementGroupsTransfer/DataElementGroupsTransfer.tsx
new file mode 100644
index 00000000..7ac44e19
--- /dev/null
+++ b/src/components/metadataFormControls/DataElementGroupsTransfer/DataElementGroupsTransfer.tsx
@@ -0,0 +1,154 @@
+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 DataElementGroupsSelectProps {
+    onChange: ({ selected }: { selected: string[] }) => void
+    selected: string[]
+    rightHeader?: ReactElement
+    rightFooter?: ReactElement
+    leftFooter?: ReactElement
+    leftHeader?: ReactElement
+}
+
+export const DataElementGroupsTransfer = forwardRef(
+    function DataElementGroupsSelect(
+        {
+            onChange,
+            selected,
+            rightHeader,
+            rightFooter,
+            leftFooter,
+            leftHeader,
+        }: DataElementGroupsSelectProps,
+        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 element groups')}
+                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/DataElementGroupsTransfer/index.ts b/src/components/metadataFormControls/DataElementGroupsTransfer/index.ts
new file mode 100644
index 00000000..759a93e2
--- /dev/null
+++ b/src/components/metadataFormControls/DataElementGroupsTransfer/index.ts
@@ -0,0 +1 @@
+export { DataElementGroupsTransfer } from './DataElementGroupsTransfer'
diff --git a/src/components/metadataFormControls/DataElementGroupsTransfer/types.ts b/src/components/metadataFormControls/DataElementGroupsTransfer/types.ts
new file mode 100644
index 00000000..a6743902
--- /dev/null
+++ b/src/components/metadataFormControls/DataElementGroupsTransfer/types.ts
@@ -0,0 +1,12 @@
+import {
+    DataElementGroup,
+    GistCollectionResponse,
+} from '../../../types/generated'
+
+const filterFields = ['id', 'displayName'] as const //(name is translated by default in /gist)
+export type FilteredDataElementGroup = Pick<
+    DataElementGroup,
+    (typeof filterFields)[number]
+>
+export type DataElementGroupsQueryResult =
+    GistCollectionResponse<FilteredDataElementGroup>
diff --git a/src/components/metadataFormControls/DataElementGroupsTransfer/useInitialOptionQuery.ts b/src/components/metadataFormControls/DataElementGroupsTransfer/useInitialOptionQuery.ts
new file mode 100644
index 00000000..7ba90e13
--- /dev/null
+++ b/src/components/metadataFormControls/DataElementGroupsTransfer/useInitialOptionQuery.ts
@@ -0,0 +1,44 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { useRef } from 'react'
+import { SelectOption } from '../../../types'
+import { FilteredDataElementGroup } from './types'
+
+type InitialDataElementGroupsQueryResult = {
+    dataElementGroups: {
+        dataElementGroups: FilteredDataElementGroup[]
+    }
+}
+
+export function useInitialOptionQuery({
+    selected,
+    onComplete,
+}: {
+    onComplete: (options: SelectOption[]) => void
+    selected: string[]
+}) {
+    const initialSelected = useRef(selected)
+    const query = {
+        dataElementGroups: {
+            resource: 'dataElementGroups',
+            params: {
+                paging: false,
+                fields: ['id', 'displayName'],
+                filter: `id:in:[${initialSelected.current.join(',')}]`,
+            },
+        },
+    }
+
+    return useDataQuery<InitialDataElementGroupsQueryResult>(query, {
+        lazy: !initialSelected.current,
+        variables: { id: selected },
+        onComplete: (data) => {
+            const { dataElementGroups } = data.dataElementGroups
+            const options = dataElementGroups.map(({ id, displayName }) => ({
+                value: id,
+                label: displayName,
+            }))
+
+            onComplete(options)
+        },
+    })
+}
diff --git a/src/components/metadataFormControls/DataElementGroupsTransfer/useOptionsQuery.ts b/src/components/metadataFormControls/DataElementGroupsTransfer/useOptionsQuery.ts
new file mode 100644
index 00000000..e4dacb77
--- /dev/null
+++ b/src/components/metadataFormControls/DataElementGroupsTransfer/useOptionsQuery.ts
@@ -0,0 +1,77 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { useEffect, useMemo, useState } from 'react'
+import { SelectOption } from '../../../types'
+import { DataElementGroup, Pager } from '../../../types/generated'
+
+type DataElementGroupsQueryResult = {
+    dataElementGroups: {
+        pager: Pager
+        dataElementGroups: DataElementGroup[]
+    }
+}
+
+const CATEGORY_COMBOS_QUERY = {
+    dataElementGroups: {
+        resource: 'dataElementGroups',
+        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<DataElementGroupsQueryResult>(
+        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?.dataElementGroups) {
+            const { pager, dataElementGroups } = data.dataElementGroups
+            // 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),
+                ...(dataElementGroups.map((catCombo) => {
+                    const { id, displayName } = catCombo
+                    return { value: id, label: displayName }
+                }) || []),
+            ])
+        }
+    }, [data])
+
+    return useMemo(
+        () => ({
+            ...queryResult,
+            data: {
+                pager: queryResult.data?.dataElementGroups.pager,
+                result: loadedOptions,
+            },
+        }),
+        [loadedOptions, queryResult]
+    )
+}
diff --git a/src/components/metadataFormControls/index.ts b/src/components/metadataFormControls/index.ts
index c3f72c11..cf20aca5 100644
--- a/src/components/metadataFormControls/index.ts
+++ b/src/components/metadataFormControls/index.ts
@@ -1,5 +1,6 @@
 export * from './AggregationLevelMultiSelect'
 export * from './CategoryComboSelect'
+export * from './DataElementGroupsTransfer'
 export * from './DataElementsTransfer'
 export * from './LegendSetTransfer'
 export * from './OptionSetSelect'
diff --git a/src/pages/dataElementGroupSets/Edit.module.css b/src/pages/dataElementGroupSets/Edit.module.css
new file mode 100644
index 00000000..de17044a
--- /dev/null
+++ b/src/pages/dataElementGroupSets/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/dataElementGroupSets/Edit.tsx b/src/pages/dataElementGroupSets/Edit.tsx
new file mode 100644
index 00000000..04470f49
--- /dev/null
+++ b/src/pages/dataElementGroupSets/Edit.tsx
@@ -0,0 +1,195 @@
+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 { DataElementGroupSet } from '../../types/generated'
+import { createJsonPatchOperations } from './edit/'
+import classes from './Edit.module.css'
+import { DataElementGroupSetFormFields, validate } from './form'
+import type { FormValues } from './form'
+
+type FinalFormFormApi = FormApi<FormValues>
+
+const { Form } = withTypes<FormValues>()
+
+type DataElementGroupSetQueryResponse = {
+    dataElementGroupSet: DataElementGroupSet
+}
+
+const listPath = `/${getSectionPath(SCHEMA_SECTIONS.dataElementGroupSet)}`
+
+function useDataElementGroupSetQuery(id: string) {
+    const DATA_ELEMENT_QUERY = {
+        dataElementGroupSet: {
+            resource: `dataElementGroupSets/${id}`,
+            params: {
+                fields: ['*', 'attributeValues[*]'],
+            },
+        },
+    }
+
+    return useDataQuery<DataElementGroupSetQueryResponse>(DATA_ELEMENT_QUERY, {
+        variables: { id },
+    })
+}
+
+function usePatchDirtyFields() {
+    const dataEngine = useDataEngine()
+
+    return async ({
+        values,
+        dirtyFields,
+        dataElementGroupSet,
+    }: {
+        values: FormValues
+        dirtyFields: { [name: string]: boolean }
+        dataElementGroupSet: DataElementGroupSet
+    }) => {
+        const jsonPatchPayload = createJsonPatchOperations({
+            values,
+            dirtyFields,
+            originalValue: dataElementGroupSet,
+        })
+
+        // 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: 'dataElementGroupSets',
+            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 dataElementGroupSetId = params.id as string
+    const dataElementGroupSetQuery = useDataElementGroupSetQuery(
+        dataElementGroupSetId
+    )
+    const patchDirtyFields = usePatchDirtyFields()
+
+    async function onSubmit(values: FormValues, form: FinalFormFormApi) {
+        const errors = await patchDirtyFields({
+            values,
+            dirtyFields: form.getState().dirtyFields,
+            dataElementGroupSet: dataElementGroupSetQuery.data
+                ?.dataElementGroupSet as DataElementGroupSet,
+        })
+
+        if (errors) {
+            return errors
+        }
+
+        navigate(listPath)
+    }
+
+    const dataElementGroupSet = dataElementGroupSetQuery.data
+        ?.dataElementGroupSet as DataElementGroupSet
+    const initialValues = dataElementGroupSet
+        ? {
+              id: dataElementGroupSetId,
+              name: dataElementGroupSet.name,
+              shortName: dataElementGroupSet.shortName,
+              code: dataElementGroupSet.code,
+              description: dataElementGroupSet.description,
+              compulsory: dataElementGroupSet.compulsory,
+              dataDimension: dataElementGroupSet.dataDimension,
+              dataElementGroups: dataElementGroupSet.dataElementGroups || [],
+          }
+        : {}
+
+    return (
+        <Loader
+            queryResponse={dataElementGroupSetQuery}
+            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}>
+                <DataElementGroupSetFormFields />
+            </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/dataElementGroupSets/New.module.css b/src/pages/dataElementGroupSets/New.module.css
new file mode 100644
index 00000000..331dde3d
--- /dev/null
+++ b/src/pages/dataElementGroupSets/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/dataElementGroupSets/New.tsx b/src/pages/dataElementGroupSets/New.tsx
new file mode 100644
index 00000000..ccef5e4e
--- /dev/null
+++ b/src/pages/dataElementGroupSets/New.tsx
@@ -0,0 +1,119 @@
+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 { DataElementGroupSetFormFields, validate } from './form'
+import type { FormValues } from './form'
+import classes from './New.module.css'
+
+const listPath = `/${getSectionPath(SCHEMA_SECTIONS.dataElementGroupSet)}`
+
+const initialValues = {
+    name: '',
+    shortName: '',
+    code: '',
+    description: '',
+    compulsory: false,
+    dataDimension: false,
+    dataElementGroups: [],
+}
+
+const ADD_NEW_DATA_ELEMENT_GROUP_MUTATION = {
+    resource: 'dataElementGroupSets',
+    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}>
+                <DataElementGroupSetFormFields />
+
+                {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/dataElementGroupSets/edit/createJsonPatchOperations.spec.ts b/src/pages/dataElementGroupSets/edit/createJsonPatchOperations.spec.ts
new file mode 100644
index 00000000..422cf33c
--- /dev/null
+++ b/src/pages/dataElementGroupSets/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/dataElementGroupSets/edit/createJsonPatchOperations.ts b/src/pages/dataElementGroupSets/edit/createJsonPatchOperations.ts
new file mode 100644
index 00000000..bfdb1dea
--- /dev/null
+++ b/src/pages/dataElementGroupSets/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/dataElementGroupSets/edit/index.ts b/src/pages/dataElementGroupSets/edit/index.ts
new file mode 100644
index 00000000..0069ca37
--- /dev/null
+++ b/src/pages/dataElementGroupSets/edit/index.ts
@@ -0,0 +1 @@
+export { createJsonPatchOperations } from './createJsonPatchOperations'
diff --git a/src/pages/dataElementGroupSets/fields/CodeField.tsx b/src/pages/dataElementGroupSets/fields/CodeField.tsx
new file mode 100644
index 00000000..fedc4eb8
--- /dev/null
+++ b/src/pages/dataElementGroupSets/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/dataElementGroupSets/fields/CompulsoryField.tsx b/src/pages/dataElementGroupSets/fields/CompulsoryField.tsx
new file mode 100644
index 00000000..922e6412
--- /dev/null
+++ b/src/pages/dataElementGroupSets/fields/CompulsoryField.tsx
@@ -0,0 +1,17 @@
+import i18n from '@dhis2/d2-i18n'
+import { CheckboxFieldFF } from '@dhis2/ui'
+import React from 'react'
+import { Field as FieldRFF } from 'react-final-form'
+
+export function CompulsoryField() {
+    return (
+        <FieldRFF
+            component={CheckboxFieldFF}
+            dataTest="dataelementsformfields-compulsory"
+            name="compulsory"
+            label={i18n.t('Compulsory')}
+            type="checkbox"
+            validateFields={[]}
+        />
+    )
+}
diff --git a/src/pages/dataElementGroupSets/fields/DataDimensionField.tsx b/src/pages/dataElementGroupSets/fields/DataDimensionField.tsx
new file mode 100644
index 00000000..ec7ebc51
--- /dev/null
+++ b/src/pages/dataElementGroupSets/fields/DataDimensionField.tsx
@@ -0,0 +1,17 @@
+import i18n from '@dhis2/d2-i18n'
+import { CheckboxFieldFF } from '@dhis2/ui'
+import React from 'react'
+import { Field as FieldRFF } from 'react-final-form'
+
+export function DataDimensionField() {
+    return (
+        <FieldRFF
+            component={CheckboxFieldFF}
+            dataTest="dataelementsformfields-datadimension"
+            name="dataDimension"
+            label={i18n.t('Data dimension')}
+            type="checkbox"
+            validateFields={[]}
+        />
+    )
+}
diff --git a/src/pages/dataElementGroupSets/fields/DataElementGroupsField.module.css b/src/pages/dataElementGroupSets/fields/DataElementGroupsField.module.css
new file mode 100644
index 00000000..f40ea288
--- /dev/null
+++ b/src/pages/dataElementGroupSets/fields/DataElementGroupsField.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/dataElementGroupSets/fields/DataElementGroupsField.tsx b/src/pages/dataElementGroupSets/fields/DataElementGroupsField.tsx
new file mode 100644
index 00000000..cce4dcf8
--- /dev/null
+++ b/src/pages/dataElementGroupSets/fields/DataElementGroupsField.tsx
@@ -0,0 +1,72 @@
+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 { DataElementGroupsTransfer } from '../../../components'
+import classes from './DataElementGroupsField.module.css'
+
+/**
+ *
+ * DataElementGroups
+ *
+ */
+export function DataElementGroupsField() {
+    const name = 'dataElementGroups'
+    const { input, meta } = useField(name, {
+        multiple: true,
+        format: (dataElementGroups: { id: string }[]) =>
+            dataElementGroups?.map((dataElementGroups) => dataElementGroups.id),
+        parse: (ids: string[]) => ids.map((id) => ({ id })),
+        validateFields: [],
+    })
+
+    const newDataElementGroupsLink = useHref('/dataElementGroups/new')
+    const dataElementGroupsHandle = useRef({
+        refetch: () => {
+            throw new Error('Not initialized')
+        },
+    })
+
+    const rightHeader = (
+        <p className={classes.dataElementGroupsPickedHeader}>
+            {i18n.t('Selected data element groups')}
+        </p>
+    )
+
+    const leftFooter = (
+        <div className={classes.dataElementGroupsOptionsFooter}>
+            <ButtonStrip>
+                <Button small onClick={dataElementGroupsHandle.current.refetch}>
+                    {i18n.t('Refresh list')}
+                </Button>
+
+                <Button
+                    small
+                    onClick={() =>
+                        window.open(newDataElementGroupsLink, '_blank')
+                    }
+                >
+                    {i18n.t('Add new')}
+                </Button>
+            </ButtonStrip>
+        </div>
+    )
+
+    return (
+        <Field
+            dataTest="dataelementsformfields-dataElementGroupsets"
+            error={!!meta.error}
+            validationText={meta.error?.toString()}
+            name={name}
+        >
+            <DataElementGroupsTransfer
+                ref={dataElementGroupsHandle}
+                selected={input.value}
+                onChange={({ selected }) => input.onChange(selected)}
+                rightHeader={rightHeader}
+                leftFooter={leftFooter}
+            />
+        </Field>
+    )
+}
diff --git a/src/pages/dataElementGroupSets/fields/DescriptionField.tsx b/src/pages/dataElementGroupSets/fields/DescriptionField.tsx
new file mode 100644
index 00000000..c11298b8
--- /dev/null
+++ b/src/pages/dataElementGroupSets/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/dataElementGroupSets/fields/NameField.tsx b/src/pages/dataElementGroupSets/fields/NameField.tsx
new file mode 100644
index 00000000..b6c38724
--- /dev/null
+++ b/src/pages/dataElementGroupSets/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/dataElementGroupSets/fields/ShortNameField.tsx b/src/pages/dataElementGroupSets/fields/ShortNameField.tsx
new file mode 100644
index 00000000..7e1845d5
--- /dev/null
+++ b/src/pages/dataElementGroupSets/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/dataElementGroupSets/fields/index.ts b/src/pages/dataElementGroupSets/fields/index.ts
new file mode 100644
index 00000000..a25ce40d
--- /dev/null
+++ b/src/pages/dataElementGroupSets/fields/index.ts
@@ -0,0 +1,7 @@
+export { CodeField } from './CodeField'
+export { CompulsoryField } from './CompulsoryField'
+export { DataDimensionField } from './DataDimensionField'
+export { DataElementGroupsField } from './DataElementGroupsField'
+export { DescriptionField } from './DescriptionField'
+export { NameField } from './NameField'
+export { ShortNameField } from './ShortNameField'
diff --git a/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx b/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx
new file mode 100644
index 00000000..af1911e6
--- /dev/null
+++ b/src/pages/dataElementGroupSets/form/DataElementGroupSetFormFields.tsx
@@ -0,0 +1,73 @@
+import i18n from '@dhis2/d2-i18n'
+import React from 'react'
+import {
+    StandardFormSection,
+    StandardFormSectionTitle,
+    StandardFormSectionDescription,
+    StandardFormField,
+} from '../../../components'
+import {
+    CodeField,
+    CompulsoryField,
+    DataDimensionField,
+    DataElementGroupsField,
+    DescriptionField,
+    NameField,
+    ShortNameField,
+} from '../fields'
+
+export function DataElementGroupSetFormFields() {
+    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>
+
+                <StandardFormField>
+                    <CompulsoryField />
+                </StandardFormField>
+
+                <StandardFormField>
+                    <DataDimensionField />
+                </StandardFormField>
+            </StandardFormSection>
+
+            <StandardFormSection>
+                <StandardFormSectionTitle>
+                    {i18n.t('Data elements')}
+                </StandardFormSectionTitle>
+
+                <StandardFormSectionDescription>
+                    {i18n.t('@TODO')}
+                </StandardFormSectionDescription>
+
+                <StandardFormField>
+                    <DataElementGroupsField />
+                </StandardFormField>
+            </StandardFormSection>
+        </>
+    )
+}
diff --git a/src/pages/dataElementGroupSets/form/dataElementGroupSetSchema.ts b/src/pages/dataElementGroupSets/form/dataElementGroupSetSchema.ts
new file mode 100644
index 00000000..ea1c9afe
--- /dev/null
+++ b/src/pages/dataElementGroupSets/form/dataElementGroupSetSchema.ts
@@ -0,0 +1,11 @@
+import { z } from 'zod'
+
+export const dataElementGroupSetSchema = 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/dataElementGroupSets/form/index.ts b/src/pages/dataElementGroupSets/form/index.ts
new file mode 100644
index 00000000..e12100af
--- /dev/null
+++ b/src/pages/dataElementGroupSets/form/index.ts
@@ -0,0 +1,3 @@
+export { DataElementGroupSetFormFields } from './DataElementGroupSetFormFields'
+export type { FormValues } from './types'
+export { validate } from './validate'
diff --git a/src/pages/dataElementGroupSets/form/types.ts b/src/pages/dataElementGroupSets/form/types.ts
new file mode 100644
index 00000000..a9466da4
--- /dev/null
+++ b/src/pages/dataElementGroupSets/form/types.ts
@@ -0,0 +1,3 @@
+import { DataElementGroupSet } from '../../../types/generated'
+
+export type FormValues = DataElementGroupSet
diff --git a/src/pages/dataElementGroupSets/form/validate.ts b/src/pages/dataElementGroupSets/form/validate.ts
new file mode 100644
index 00000000..efe2d856
--- /dev/null
+++ b/src/pages/dataElementGroupSets/form/validate.ts
@@ -0,0 +1,27 @@
+import { setIn } from 'final-form'
+import { dataElementGroupSetSchema } from './dataElementGroupSetSchema'
+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 = dataElementGroupSetSchema.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
+}