diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e6fc6a44c..cc2c8c1be7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+# [100.42.0](https://github.com/dhis2/capture-app/compare/v100.41.4...v100.42.0) (2023-10-24)
+
+
+### Features
+
+* [DHIS2-12361] Tracked Entity Relationships widget ([cafed8d](https://github.com/dhis2/capture-app/commit/cafed8d8aac3fe9955739b1a8ee2cdde57722967))
+
+## [100.41.4](https://github.com/dhis2/capture-app/compare/v100.41.3...v100.41.4) (2023-10-22)
+
+
+### Bug Fixes
+
+* **translations:** sync translations from transifex (master) ([c82ce9f](https://github.com/dhis2/capture-app/commit/c82ce9f69159878f5ca9cc2e6ca9944544099368))
+
 ## [100.41.3](https://github.com/dhis2/capture-app/compare/v100.41.2...v100.41.3) (2023-10-16)
 
 
diff --git a/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js b/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js
index 7946b94e2e..07636c5de5 100644
--- a/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js
+++ b/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js
@@ -255,7 +255,7 @@ Then('the list should display data ordered descendingly by report date', () => {
     cy.get('input[placeholder="To"]').click();
 
     cy.contains('Update')
-        .click();
+        .click({ force: true });
 
     const rows = combineDataAndYear(lastYear, {
         '01-01': ['14 Female'],
diff --git a/docs/user/resources/images/enrollment-dash-relationship-widget-add-choose.png b/docs/user/resources/images/enrollment-dash-relationship-widget-add-choose.png
new file mode 100644
index 0000000000..59c052056b
Binary files /dev/null and b/docs/user/resources/images/enrollment-dash-relationship-widget-add-choose.png differ
diff --git a/docs/user/resources/images/enrollment-dash-relationship-widget-add-existing.png b/docs/user/resources/images/enrollment-dash-relationship-widget-add-existing.png
new file mode 100644
index 0000000000..467adef42c
Binary files /dev/null and b/docs/user/resources/images/enrollment-dash-relationship-widget-add-existing.png differ
diff --git a/docs/user/resources/images/enrollment-dash-relationship-widget-add-new.png b/docs/user/resources/images/enrollment-dash-relationship-widget-add-new.png
new file mode 100644
index 0000000000..6e64a2f58d
Binary files /dev/null and b/docs/user/resources/images/enrollment-dash-relationship-widget-add-new.png differ
diff --git a/docs/user/resources/images/enrollment-dash-relationship-widget-add.png b/docs/user/resources/images/enrollment-dash-relationship-widget-add.png
new file mode 100644
index 0000000000..78c0e82f83
Binary files /dev/null and b/docs/user/resources/images/enrollment-dash-relationship-widget-add.png differ
diff --git a/docs/user/resources/images/enrollment-dash-relationship-widget.png b/docs/user/resources/images/enrollment-dash-relationship-widget.png
new file mode 100644
index 0000000000..baf3c48666
Binary files /dev/null and b/docs/user/resources/images/enrollment-dash-relationship-widget.png differ
diff --git a/docs/user/using-the-capture-app.md b/docs/user/using-the-capture-app.md
index b335b3e7ce..138568e172 100644
--- a/docs/user/using-the-capture-app.md
+++ b/docs/user/using-the-capture-app.md
@@ -986,6 +986,39 @@ The enrollment comment widget displays comments and allows addition of comments,
 
 By clicking in the text field, you will be able to enter new text and see action buttons **Save comment** and **Cancel**. Note that Enrollment comments are attributed to a user and cannot be deleted. 
 
+### Relationship widget
+
+The Relationships widget on the enrollment dashboard is used for viewing the record’s linked relationships to other records.
+The number next to the title signifies the total number of relationships
+
+![](resources/images/enrollment-dash-relationship-widget.png)
+
+For tracked entity instance relationships, the key attributes shown in the widget are the attributes that have been selected to be displayed on the relationship type page in Maintenance.
+
+If no attributes are selected, it will just show a row per record with tracked entity type name and relationship creation date.
+
+When clicking a tracked entity instance you should be taken to the Enrollment Dashboard. If the relationship type includes a program, you should be taken to the latest enrollment for that program. If no program is specified, you should still be sent to the enrollment dashboard, but without a program.
+
+Click the **Add new** button to add a new relationship. Adding a new relationship opens a dialog where you can select the applicable relationship type.
+
+![](resources/images/enrollment-dash-relationship-widget-add.png)
+
+Choose between linking to an existing tracked entity instance or creating a new one.
+
+![](resources/images/enrollment-dash-relationship-widget-add-choose.png)
+
+#### Existing tracked entity instance
+
+Use the search form to find any existing record to link to.
+
+![](resources/images/enrollment-dash-relationship-widget-add-existing.png)
+
+#### New tracked entity instance
+
+Use the form to create a new record and link.
+
+![](resources/images/enrollment-dash-relationship-widget-add-new.png)
+
 ### Tracked entity instance profile widget
 
 On the enrollment dashboard, you can view the tracked entity instance profile widget. Inside the profile widget you can view the key attributes values. 
@@ -1226,4 +1259,4 @@ The attribute option combo selector will be displayed when you are adding or cha
 
 Example from new Tracker event:
 
-![](resources/images/attribute-option-combo-tracker.png)
\ No newline at end of file
+![](resources/images/attribute-option-combo-tracker.png)
diff --git a/i18n/en.pot b/i18n/en.pot
index 06e8de8d33..2396905e88 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-09-29T14:14:34.330Z\n"
-"PO-Revision-Date: 2023-09-29T14:14:34.330Z\n"
+"POT-Creation-Date: 2023-09-12T06:24:49.265Z\n"
+"PO-Revision-Date: 2023-09-12T06:24:49.265Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -947,6 +947,18 @@ msgstr "Event could not be loaded"
 msgid "Organisation unit could not be loaded"
 msgstr "Organisation unit could not be loaded"
 
+msgid "Selected program"
+msgstr "Selected program"
+
+msgid "Search {{uniqueAttrName}}"
+msgstr "Search {{uniqueAttrName}}"
+
+msgid "Search by attributes"
+msgstr "Search by attributes"
+
+msgid "Could not retrieve metadata. Please try again later."
+msgstr "Could not retrieve metadata. Please try again later."
+
 msgid "Possible duplicates found"
 msgstr "Possible duplicates found"
 
@@ -1010,9 +1022,6 @@ msgstr "Search {{name}}"
 msgid "Search by {{name}}"
 msgstr "Search by {{name}}"
 
-msgid "Search by attributes"
-msgstr "Search by attributes"
-
 msgid "all programs"
 msgstr "all programs"
 
@@ -1070,12 +1079,6 @@ msgstr "Missing search criteria"
 msgid "Results found"
 msgstr "Results found"
 
-msgid "Selected program"
-msgstr "Selected program"
-
-msgid "Search {{uniqueAttrName}}"
-msgstr "Search {{uniqueAttrName}}"
-
 msgid "Saved lists in this program"
 msgstr "Saved lists in this program"
 
@@ -1359,6 +1362,42 @@ msgstr "{{ scheduledEvents }} scheduled"
 msgid "Stages and Events"
 msgstr "Stages and Events"
 
+msgid "New TEI Relationship"
+msgstr "New TEI Relationship"
+
+msgid "Missing implementation step"
+msgstr "Missing implementation step"
+
+msgid "Go back without saving relationship"
+msgstr "Go back without saving relationship"
+
+msgid "New Relationship"
+msgstr "New Relationship"
+
+msgid "Link to an existing {{tetName}}"
+msgstr "Link to an existing {{tetName}}"
+
+msgid "An error occurred while adding the relationship"
+msgstr "An error occurred while adding the relationship"
+
+msgid "Something went wrong while loading relationships. Please try again later."
+msgstr "Something went wrong while loading relationships. Please try again later."
+
+msgid "{{trackedEntityTypeName}} relationships"
+msgstr "{{trackedEntityTypeName}} relationships"
+
+msgid "To open this relationship, please wait until saving is complete"
+msgstr "To open this relationship, please wait until saving is complete"
+
+msgid "Type"
+msgstr "Type"
+
+msgid "Created date"
+msgstr "Created date"
+
+msgid "Program stage name"
+msgstr "Program stage name"
+
 msgid "Working list could not be loaded"
 msgstr "Working list could not be loaded"
 
diff --git a/i18n/es.po b/i18n/es.po
index b74921f8ef..cd154429ff 100644
--- a/i18n/es.po
+++ b/i18n/es.po
@@ -17,7 +17,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2023-09-04T07:07:59.195Z\n"
+"POT-Creation-Date: 2023-09-29T14:14:34.330Z\n"
 "PO-Revision-Date: 2019-06-27 07:31+0000\n"
 "Last-Translator: Enzo Nicolas Rossi <enzo@dhis2.org>, 2023\n"
 "Language-Team: Spanish (https://app.transifex.com/hisp-uio/teams/100509/es/)\n"
@@ -172,6 +172,15 @@ msgstr "Coordenada"
 msgid "Enrollment"
 msgstr "Inscripción"
 
+msgid "Complete event"
+msgstr "Completar el evento"
+
+msgid "{{ stageName }} - Basic info"
+msgstr ""
+
+msgid "{{ stageName }} - Status"
+msgstr ""
+
 msgid "Please select {{categoryName}}"
 msgstr "Seleccione {{categoryName}}"
 
@@ -192,15 +201,18 @@ msgstr "Cancelar"
 msgid "Metadata error. see log for details"
 msgstr "Error de metadatos. ver registro para más detalles"
 
+msgid "{{ stageName }} - Details"
+msgstr ""
+
+msgid "{{ stageName }} - {{ sectionName }}"
+msgstr ""
+
 msgid "Assigned user"
 msgstr "Usuario asignado"
 
 msgid "Search for user"
 msgstr "Buscar usuario"
 
-msgid "Complete event"
-msgstr "Completar el evento"
-
 msgid "Basic info"
 msgstr "Información básica"
 
@@ -438,13 +450,13 @@ msgid "Days in the future"
 msgstr "Días en el futuro"
 
 msgid "From"
-msgstr "De"
+msgstr "Desde"
 
 msgid "Days in the past"
 msgstr "Días en el pasado"
 
 msgid "To"
-msgstr "Para"
+msgstr "Hasta"
 
 msgid "This week"
 msgstr "Esta semana"
@@ -791,7 +803,7 @@ msgid "There was an error loading the page"
 msgstr "Hubo un error al cargar la página"
 
 msgid "Choose a registering unit to start reporting"
-msgstr "Elija una unidad de registro para comenzar a informar"
+msgstr "Seleccione una unidad de registro para comenzar a informar"
 
 msgid "There are no feedbacks for this event"
 msgstr "No hay comentarios para este evento."
@@ -866,7 +878,7 @@ msgid "View enrollment"
 msgstr "Ver inscripción"
 
 msgid "Create for"
-msgstr "Crear para"
+msgstr "Crear"
 
 msgid ""
 "You can also choose a program from the top bar and create in that program"
diff --git a/i18n/nb.po b/i18n/nb.po
index 036767eb33..59b9da637b 100644
--- a/i18n/nb.po
+++ b/i18n/nb.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2023-09-04T07:07:59.195Z\n"
+"POT-Creation-Date: 2023-09-29T14:14:34.330Z\n"
 "PO-Revision-Date: 2019-06-27 07:31+0000\n"
 "Last-Translator: Karoline Tufte Lien <karoline@dhis2.org>, 2023\n"
 "Language-Team: Norwegian Bokmål (https://app.transifex.com/hisp-uio/teams/100509/nb/)\n"
@@ -82,6 +82,7 @@ msgstr "Feil"
 msgid ""
 "Plugins are not yet available - Please contact your system administrator"
 msgstr ""
+"Plugins er ikke tilgjengelig ennå - Ta kontakt med systemadministratoren din"
 
 msgid "This value is validating"
 msgstr "Denne verdien validerer"
@@ -158,8 +159,17 @@ msgstr "Koordinater"
 msgid "Enrollment"
 msgstr "Registrering"
 
+msgid "Complete event"
+msgstr "Fullfør hendelse"
+
+msgid "{{ stageName }} - Basic info"
+msgstr "{{ stageName }} - Grunnleggende informasjon"
+
+msgid "{{ stageName }} - Status"
+msgstr "{{ stageName }} - Status"
+
 msgid "Please select {{categoryName}}"
-msgstr ""
+msgstr "Velg {{categoryName}}"
 
 msgid "A future date is not allowed"
 msgstr "En fremtidig dato er ikke tillatt"
@@ -176,15 +186,18 @@ msgstr "Avbryt"
 msgid "Metadata error. see log for details"
 msgstr "Metadata feil, se logg for detaljer"
 
+msgid "{{ stageName }} - Details"
+msgstr "{{ stageName }} - Detaljer"
+
+msgid "{{ stageName }} - {{ sectionName }}"
+msgstr "{{ stageName }} - {{ sectionName }}"
+
 msgid "Assigned user"
 msgstr "Tildelt programbruker"
 
 msgid "Search for user"
 msgstr "Søk etter bruker"
 
-msgid "Complete event"
-msgstr "Fullfør hendelse"
-
 msgid "Basic info"
 msgstr "Grunnleggende informasjon"
 
@@ -281,7 +294,7 @@ msgstr ""
 "relasjon"
 
 msgid "Yes, discard changes"
-msgstr ""
+msgstr "Ja, forkast endringer"
 
 msgid "No, cancel"
 msgstr "Nei, avbryt"
@@ -385,6 +398,9 @@ msgid ""
 "This event has unsaved changes. Leaving this page without saving will lose "
 "these changes. Are you sure you want to discard unsaved changes?"
 msgstr ""
+"Denne hendelsen har ulagrede endringer. Hvis du forlater denne siden uten å "
+"lagre, mister du disse endringene. Er du sikker på at du vil forkaste "
+"ulagrede endringer?"
 
 msgid "No events to display"
 msgstr "Ingen hendelser å vise"
@@ -498,7 +514,7 @@ msgid "Type to filter options"
 msgstr "Skriv for å filtrere alternativer"
 
 msgid "No match found"
-msgstr ""
+msgstr "Ingen treff funnet"
 
 msgid "Search"
 msgstr "Søk"
@@ -597,13 +613,13 @@ msgid "Write comment"
 msgstr "Skriv kommentar"
 
 msgid "was blanked out and hidden by your last action"
-msgstr ""
+msgstr "ble tømt og skjult av den siste handlingen din"
 
 msgid "Notice"
-msgstr ""
+msgstr "Merknad"
 
 msgid "Close the notice"
-msgstr ""
+msgstr "Lukk merknaden"
 
 msgid "Use new Enrollment dashboard for {{programName}}"
 msgstr "Bruk nytt registreringsdashbord for {{programName}}"
@@ -619,18 +635,30 @@ msgid ""
 "functionality in Capture is ongoing and will be added in upcoming app "
 "releases."
 msgstr ""
+"Ved å klikke på \"meld på\" nedenfor, vil du begynne å bruke det nye "
+"registreringsdashbordet i Capture-appen for dette Tracker-programmet. For "
+"øyeblikket er det noe funksjonalitet fra Tracker Capture som ennå ikke er "
+"lagt til, inkludert relasjons- og henvisningsfunksjonalitet. Arbeidet med å "
+"inkludere denne Tracker-funksjonaliteten i Capture pågår og vil bli lagt til"
+" i kommende apputgivelser."
 
 msgid ""
 "The core team appreciates any feedback on this new functionality which is "
 "currently being beta tested, please report any issues and feedback in the "
 "DHIS2 JIRA project."
 msgstr ""
+"Kjerneteamet setter pris på all tilbakemelding på denne nye funksjonaliteten"
+" som for øyeblikket blir betatestet, vennligst rapporter eventuelle "
+"problemer og tilbakemeldinger i DHIS2 JIRA-prosjektet."
 
 msgid ""
 "Click the button below to opt-in to the new enrollment dashboard "
 "functionality in the Capture app (beta) for this Tracker program for all "
 "users."
 msgstr ""
+"Klikk på knappen nedenfor for å melde deg på den nye funksjonen for "
+"registreringsdashbord i Capture-appen (beta) for dette Tracker-programmet "
+"for alle brukere."
 
 msgid "Yes, opt in"
 msgstr "Ja, meld på"
@@ -653,6 +681,8 @@ msgstr ""
 msgid ""
 "An error occurred while fetching enrollments. Please enter a valid url."
 msgstr ""
+"Det oppsto en feil under henting av registreringer. Vennligst skriv inn en "
+"gyldig url."
 
 msgid "Enrollment Dashboard"
 msgstr "Registreringsdashbord"
@@ -694,19 +724,19 @@ msgstr ""
 "{{programName}} har kategorier. Velg alle kategorier for å se dashbordet."
 
 msgid "Invalid enrollment id {{enrollmentId}}."
-msgstr ""
+msgstr "Ugyldig registrerings-ID {{enrollmentId}}"
 
 msgid "Choose an enrollment to view the dashboard."
 msgstr "Velg en registrering for å se dashbordet."
 
 msgid "There are no active enrollments."
-msgstr ""
+msgstr "Det er ingen aktive registreringer."
 
 msgid "Add new enrollment for {{teiDisplayName}} in this program."
-msgstr ""
+msgstr "Legg til ny registrering for {{teiDisplayName}} i dette programmet."
 
 msgid "No access to program owner."
-msgstr ""
+msgstr "Ingen tilgang til programeier."
 
 msgid "{{teiDisplayName}} is not enrolled in this program."
 msgstr "{{teiDisplayName}} er ikke registrert i dette programmet."
@@ -774,7 +804,7 @@ msgid "Refer"
 msgstr "Henvis"
 
 msgid "You can't add any more {{ programStageName }} events"
-msgstr ""
+msgstr "Du kan ikke legge til flere {{ programStageName }}-hendelser"
 
 msgid "Cancel without saving"
 msgstr "Avbryt uten å lagre"
@@ -839,7 +869,7 @@ msgid "New Enrollment in program{{escape}} {{programName}}"
 msgstr "Ny registrering i programmet{{escape}} {{programName}}"
 
 msgid "Save {{trackedEntityTypeName}}"
-msgstr ""
+msgstr "Lagre {{trackedEntityTypeName}}"
 
 msgid "Save {{trackedEntityName}}"
 msgstr "Lagre {{trackedEntityName}}"
@@ -957,13 +987,13 @@ msgid "Add relationship"
 msgstr "Legg til relasjon"
 
 msgid "No results found for "
-msgstr ""
+msgstr "Ingen resultater funnet for"
 
 msgid "Registering unit"
 msgstr "Registreringsenhet"
 
 msgid "Choose a registering unit"
-msgstr ""
+msgstr "Velg en registreringsenhet"
 
 msgid "Clear selection"
 msgstr "Fjern valg"
@@ -972,13 +1002,13 @@ msgid "No programs available."
 msgstr "Ingen programmer tilgjengelig."
 
 msgid "Search for a program"
-msgstr ""
+msgstr "Søk for et program"
 
 msgid "Some programs are being filtered by the chosen registering unit"
-msgstr ""
+msgstr "Noen programmer blir filtrert av den valgte registreringsenheten"
 
 msgid "Show all programs"
-msgstr ""
+msgstr "Vis alle programmer"
 
 msgid "Choose a program"
 msgstr "Velg et program"
@@ -1055,7 +1085,7 @@ msgid "Cannot search in all programs"
 msgstr "Kan ikke søke i alle programmer"
 
 msgid "Missing search criteria"
-msgstr ""
+msgstr "Manglende søkekriterier"
 
 msgid "Results found"
 msgstr "Resultater funnet"
@@ -1096,23 +1126,27 @@ msgid "open the Tracker Capture app"
 msgstr "åpne Tracker Capture app"
 
 msgid "This program is protected"
-msgstr ""
+msgstr "Dette programmet er beskyttet"
 
 msgid "Reason to check for enrollments"
-msgstr ""
+msgstr "Grunn til å sjekke for registreringer"
 
 msgid ""
 "Describe the reason you are checking for enrollments in this protected "
 "program"
 msgstr ""
+"Beskriv årsaken til at du ser etter registreringer i dette beskyttede "
+"programmet"
 
 msgid "Check for enrollments"
-msgstr ""
+msgstr "Se etter registreringer"
 
 msgid ""
 "You must provide a reason to check for enrollments in this protected "
 "program. All activity will be logged."
 msgstr ""
+"Du må oppgi en grunn for å se etter registreringer i dette beskyttede "
+"programmet. All aktivitet vil bli logget."
 
 msgid "Save comment"
 msgstr "Lagre kommentar"
@@ -1159,6 +1193,8 @@ msgstr "Merk for oppfølging"
 
 msgid "Existing dates for auto-generated events will not be updated."
 msgstr ""
+"Eksisterende datoer for automatisk genererte hendelser vil ikke bli "
+"oppdatert."
 
 msgid "Enrollment date"
 msgstr "Registreringsdato"
@@ -1322,7 +1358,7 @@ msgid "New {{ eventName }} event"
 msgstr "Ny {{ eventName }} hendelse"
 
 msgid "To open this event, please wait until saving is complete"
-msgstr ""
+msgstr "For å åpne denne hendelsen, vennligst vent til lagringen er fullført"
 
 msgid "Show {{ rest }} more"
 msgstr "Vis {{ rest }} flere"
@@ -1388,19 +1424,19 @@ msgid "Choose a program stage to filter by {{label}}"
 msgstr "Velg en programfase å filtrere etter {{label}}"
 
 msgid "Active enrollments"
-msgstr ""
+msgstr "Aktive registreringer"
 
 msgid "Completed enrollments"
-msgstr ""
+msgstr "Fullførte registreringer"
 
 msgid "Cancelled enrollments"
-msgstr ""
+msgstr "Avbrutte registreringer"
 
 msgid "Working list could not be updated"
 msgstr "Arbeidslisten kunne ikke oppdateres"
 
 msgid "an error occurred loading the working lists"
-msgstr ""
+msgstr "det oppstod en feil ved lasting av arbeidslistene"
 
 msgid "an error occurred loading Tracked entity instance lists"
 msgstr "det oppstod en feil ved lasting av lister over sporede enheter"
@@ -1535,7 +1571,7 @@ msgid "Set area"
 msgstr "Sett område"
 
 msgid "Area on map saved"
-msgstr ""
+msgstr "Området på kartet er lagret"
 
 msgid "Compatibility mode"
 msgstr "Kompabilitetsmodus"
diff --git a/package.json b/package.json
index dfcf6bde57..9c2c1e3acd 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
     "name": "capture-app",
     "homepage": ".",
-    "version": "100.41.3",
-    "cacheVersion": "6",
+    "version": "100.42.0",
+    "cacheVersion": "7",
     "serverVersion": "38",
     "license": "BSD-3-Clause",
     "private": true,
@@ -10,7 +10,7 @@
         "packages/rules-engine"
     ],
     "dependencies": {
-        "@dhis2/rules-engine-javascript": "100.41.3",
+        "@dhis2/rules-engine-javascript": "100.42.0",
         "@dhis2/app-runtime": "^3.9.3",
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/d2-icons": "^1.0.1",
diff --git a/packages/rules-engine/package.json b/packages/rules-engine/package.json
index 2280715107..96f533f035 100644
--- a/packages/rules-engine/package.json
+++ b/packages/rules-engine/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/rules-engine-javascript",
-    "version": "100.41.3",
+    "version": "100.42.0",
     "license": "BSD-3-Clause",
     "main": "./build/cjs/index.js",
     "scripts": {
diff --git a/src/components/App/AppPages.component.js b/src/components/App/AppPages.component.js
index 2203baf361..0af49adb99 100644
--- a/src/components/App/AppPages.component.js
+++ b/src/components/App/AppPages.component.js
@@ -9,17 +9,21 @@ import { EnrollmentPage } from 'capture-core/components/Pages/Enrollment';
 import { StageEventListPage } from 'capture-core/components/Pages/StageEvent';
 import { EnrollmentEditEventPage } from 'capture-core/components/Pages/EnrollmentEditEvent';
 import { EnrollmentAddEventPage } from 'capture-core/components/Pages/EnrollmentAddEvent';
+import { ReactQueryDevtools } from 'react-query/devtools';
 
 export const AppPages = () => (
-    <Switch>
-        <Route path="/viewEvent" component={ViewEventPage} />
-        <Route path="/search" component={SearchPage} />
-        <Route path="/new" component={NewPage} />
-        <Route path="/enrollment/stageEvents" component={StageEventListPage} />
-        <Route path="/enrollmentEventEdit" component={EnrollmentEditEventPage} />
-        <Route path="/enrollmentEventNew" component={EnrollmentAddEventPage} />
-        <Route path="/enrollment" component={EnrollmentPage} />
-        <Route path="/:keys" component={MainPage} />
-        <Route path="/" component={MainPage} />
-    </Switch>
+    <>
+        <ReactQueryDevtools />
+        <Switch>
+            <Route path="/viewEvent" component={ViewEventPage} />
+            <Route path="/search" component={SearchPage} />
+            <Route path="/new" component={NewPage} />
+            <Route path="/enrollment/stageEvents" component={StageEventListPage} />
+            <Route path="/enrollmentEventEdit" component={EnrollmentEditEventPage} />
+            <Route path="/enrollmentEventNew" component={EnrollmentAddEventPage} />
+            <Route path="/enrollment" component={EnrollmentPage} />
+            <Route path="/:keys" component={MainPage} />
+            <Route path="/" component={MainPage} />
+        </Switch>
+    </>
 );
diff --git a/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.container.js b/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.container.js
index 623a16abce..e16304cf87 100644
--- a/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.container.js
+++ b/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.container.js
@@ -5,29 +5,38 @@ import { useSelector } from 'react-redux';
 import { EnrollmentRegistrationEntryComponent } from './EnrollmentRegistrationEntry.component';
 import type { OwnProps } from './EnrollmentRegistrationEntry.types';
 import { useLifecycle } from './hooks';
-import { useCurrentOrgUnitInfo } from '../../../hooks/useCurrentOrgUnitInfo';
 import { useRulesEngineOrgUnit } from '../../../hooks';
 import { dataEntryHasChanges } from '../../DataEntry/common/dataEntryHasChanges';
+import {
+    useBuildEnrollmentPayload,
+} from './hooks/useBuildEnrollmentPayload';
 
 export const EnrollmentRegistrationEntry: ComponentType<OwnProps> = ({
     selectedScopeId,
     id,
     saveButtonText,
     trackedEntityInstanceAttributes,
+    orgUnitId,
+    teiId,
     onSave,
     ...passOnProps
 }) => {
-    const orgUnitId = useCurrentOrgUnitInfo().id;
     const { orgUnit, error } = useRulesEngineOrgUnit(orgUnitId);
     const {
-        teiId,
         ready,
         skipDuplicateCheck,
         firstStageMetaData,
         formId,
         enrollmentMetadata,
         formFoundation,
-    } = useLifecycle(selectedScopeId, id, trackedEntityInstanceAttributes, orgUnit);
+    } = useLifecycle(selectedScopeId, id, trackedEntityInstanceAttributes, orgUnit, teiId, selectedScopeId);
+    const { buildTeiWithEnrollment } = useBuildEnrollmentPayload({
+        programId: selectedScopeId,
+        dataEntryId: id,
+        orgUnitId,
+        teiId,
+        trackedEntityTypeId: enrollmentMetadata?.trackedEntityType?.id,
+    });
 
     const isUserInteractionInProgress: boolean = useSelector(
         state =>
@@ -41,10 +50,16 @@ export const EnrollmentRegistrationEntry: ComponentType<OwnProps> = ({
     const isSavingInProgress = useSelector(({ possibleDuplicates, newPage }) =>
         possibleDuplicates.isLoading || possibleDuplicates.isUpdating || !!newPage.uid);
 
+
     if (error) {
         return error.errorComponent;
     }
 
+    const onSaveWithEnrollment = () => {
+        const teiWithEnrollment = buildTeiWithEnrollment();
+        onSave(teiWithEnrollment);
+    };
+
     return (
         <EnrollmentRegistrationEntryComponent
             {...passOnProps}
@@ -62,7 +77,7 @@ export const EnrollmentRegistrationEntry: ComponentType<OwnProps> = ({
             orgUnit={orgUnit}
             isUserInteractionInProgress={isUserInteractionInProgress}
             isSavingInProgress={isSavingInProgress}
-            onSave={() => onSave(formFoundation, firstStageMetaData)}
+            onSave={onSaveWithEnrollment}
         />
     );
 };
diff --git a/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.types.js b/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.types.js
index f1924c00b3..d58a42aff2 100644
--- a/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.types.js
+++ b/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.types.js
@@ -8,8 +8,32 @@ import type { ExistingUniqueValueDialogActionsComponent } from '../withErrorMess
 import type { InputAttribute } from './hooks/useFormValues';
 import { RenderFoundation, ProgramStage } from '../../../metaData';
 
+export type EnrollmentPayload = {|
+    trackedEntity: string,
+    trackedEntityType: string,
+    orgUnit: string,
+    geometry: any,
+    enrollments: [
+        {|
+            occurredAt: string,
+            orgUnit: string,
+            program: string,
+            status: string,
+            enrolledAt: string,
+            events: Array<{
+                orgUnit: string,
+            }>,
+            attributes: Array<{
+                attribute: string,
+                value: any,
+            }>,
+        |}
+    ]
+|}
+
 export type OwnProps = $ReadOnly<{|
     id: string,
+    orgUnitId: string,
     selectedScopeId: string,
     fieldOptions?: Object,
     onSave: SaveForDuplicateCheck,
diff --git a/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/hooks/useBuildEnrollmentPayload.js b/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/hooks/useBuildEnrollmentPayload.js
new file mode 100644
index 0000000000..95778162b0
--- /dev/null
+++ b/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/hooks/useBuildEnrollmentPayload.js
@@ -0,0 +1,188 @@
+// @flow
+import { useSelector } from 'react-redux';
+import { getDataEntryKey } from '../../../DataEntry/common/getDataEntryKey';
+import {
+    getTrackerProgramThrowIfNotFound,
+    Section,
+} from '../../../../metaData';
+import type { RenderFoundation } from '../../../../metaData';
+import { convertClientToServer, convertFormToClient } from '../../../../converters';
+import {
+    convertDataEntryValuesToClientValues,
+} from '../../../DataEntry/common/convertDataEntryValuesToClientValues';
+import { capitalizeFirstLetter } from '../../../../../capture-core-utils/string';
+import { generateUID } from '../../../../utils/uid/generateUID';
+import {
+    useBuildFirstStageRegistration,
+} from './useBuildFirstStageRegistration';
+import {
+    useMetadataForRegistrationForm,
+} from '../../common/TEIAndEnrollment/useMetadataForRegistrationForm';
+import {
+    useMergeFormFoundationsIfApplicable,
+} from './useMergeFormFoundationsIfApplicable';
+import {
+    deriveAutoGenerateEvents,
+    deriveFirstStageDuringRegistrationEvent,
+} from '../../../Pages/New/RegistrationDataEntry/helpers';
+import { FEATURETYPE } from '../../../../constants';
+import type { EnrollmentPayload } from '../EnrollmentRegistrationEntry.types';
+
+type DataEntryReduxConverterProps = {
+    programId: string;
+    dataEntryId: string;
+    itemId?: string;
+    orgUnitId: string;
+    teiId: ?string;
+    trackedEntityTypeId: string;
+};
+
+function getClientValuesForFormData(formValues: Object, formFoundation: RenderFoundation) {
+    const clientValues = formFoundation.convertValues(formValues, convertFormToClient);
+    return clientValues;
+}
+
+function getServerValuesForMainValues(
+    values: Object,
+    meta: Object,
+    formFoundation: RenderFoundation,
+) {
+    const clientValues = convertDataEntryValuesToClientValues(
+        values,
+        meta,
+        formFoundation,
+    ) || {};
+
+    // potientally run this through a server to client converter for enrollment, the same way as for event
+    const serverValues = Object
+        .keys(clientValues)
+        .reduce((acc, key) => {
+            const value = clientValues[key];
+            const type = meta[key].type;
+            acc[key] = convertClientToServer(value, type);
+            return acc;
+        }, {});
+
+    return serverValues;
+}
+
+function getPossibleTetFeatureTypeKey(serverValues: Object) {
+    return Object
+        .keys(serverValues)
+        .find(key => key.startsWith('FEATURETYPE_'));
+}
+
+function buildGeometryProp(key: string, serverValues: Object) {
+    if (!serverValues[key]) {
+        return undefined;
+    }
+    const type = capitalizeFirstLetter(key.replace('FEATURETYPE_', '').toLocaleLowerCase());
+    return {
+        type,
+        coordinates: serverValues[key],
+    };
+}
+
+const geometryType = formValuesKey => Object.values(FEATURETYPE).find(geometryKey => geometryKey === formValuesKey);
+
+const deriveAttributesFromFormValues = (formValues = {}) =>
+    Object.keys(formValues)
+        .filter(key => !geometryType(key))
+        .map<{ attribute: string, value: ?any }>(key => ({ attribute: key, value: formValues[key] }));
+
+export const useBuildEnrollmentPayload = ({
+    programId,
+    dataEntryId,
+    itemId = 'newEnrollment',
+    orgUnitId,
+    teiId,
+    trackedEntityTypeId,
+}: DataEntryReduxConverterProps) => {
+    const dataEntryKey = getDataEntryKey(dataEntryId, itemId);
+    const formValues = useSelector(({ formsValues }) => formsValues[dataEntryKey]);
+    const dataEntryFieldValues = useSelector(({ dataEntriesFieldsValue }) => dataEntriesFieldsValue[dataEntryKey]);
+    const dataEntryFieldsMeta = useSelector(({ dataEntriesFieldsMeta }) => dataEntriesFieldsMeta[dataEntryKey]);
+    const { formFoundation: scopeFormFoundation } = useMetadataForRegistrationForm({ selectedScopeId: programId });
+    const { firstStageMetaData } = useBuildFirstStageRegistration(programId);
+    const { formFoundation } = useMergeFormFoundationsIfApplicable(scopeFormFoundation, firstStageMetaData);
+
+    const buildTeiWithEnrollment = (): EnrollmentPayload => {
+        if (!formFoundation) throw Error('form foundation object not found');
+        const firstStage = firstStageMetaData && firstStageMetaData.stage;
+        const clientValues = getClientValuesForFormData(formValues, formFoundation);
+        const serverValuesForFormValues = formFoundation.convertAndGroupBySection(clientValues, convertClientToServer);
+        const serverValuesForMainValues = getServerValuesForMainValues(
+            dataEntryFieldValues,
+            dataEntryFieldsMeta,
+            formFoundation,
+        );
+        const { enrolledAt, occurredAt } = serverValuesForMainValues;
+
+        const { stages } = getTrackerProgramThrowIfNotFound(programId);
+
+        const attributeCategoryOptionsId = 'attributeCategoryOptions';
+        const attributeCategoryOptions = Object.keys(serverValuesForMainValues)
+            .filter(key => key.startsWith(attributeCategoryOptionsId))
+            .reduce((acc, key) => {
+                const categoryId = key.split('-')[1];
+                acc[categoryId] = serverValuesForMainValues[key];
+                return acc;
+            }, {});
+
+        const formServerValues = serverValuesForFormValues[Section.groups.ENROLLMENT];
+        const currentEventValues = serverValuesForFormValues[Section.groups.EVENT];
+
+
+        const firstStageDuringRegistrationEvent = deriveFirstStageDuringRegistrationEvent({
+            firstStageMetadata: firstStage,
+            programId,
+            orgUnitId,
+            currentEventValues,
+            fieldsValue: dataEntryFieldValues,
+            attributeCategoryOptions,
+        });
+
+        const autoGenerateEvents = deriveAutoGenerateEvents({
+            firstStageMetadata: firstStage,
+            stages,
+            enrolledAt,
+            occurredAt,
+            programId,
+            orgUnitId,
+            attributeCategoryOptions,
+        });
+
+        const allEventsToBeCreated = firstStageDuringRegistrationEvent
+            ? [firstStageDuringRegistrationEvent, ...autoGenerateEvents]
+            : autoGenerateEvents;
+
+        const enrollment = {
+            program: programId,
+            status: 'ACTIVE',
+            orgUnit: orgUnitId,
+            occurredAt,
+            enrolledAt,
+            attributes: deriveAttributesFromFormValues(formServerValues),
+            events: allEventsToBeCreated,
+        };
+
+        const tetFeatureTypeKey = getPossibleTetFeatureTypeKey(serverValuesForFormValues);
+        let geometry;
+        if (tetFeatureTypeKey) {
+            geometry = buildGeometryProp(tetFeatureTypeKey, serverValuesForFormValues);
+            delete serverValuesForFormValues[tetFeatureTypeKey];
+        }
+
+        return {
+            trackedEntity: teiId || generateUID(),
+            orgUnit: orgUnitId,
+            trackedEntityType: trackedEntityTypeId,
+            geometry,
+            enrollments: [enrollment],
+        };
+    };
+
+    return {
+        buildTeiWithEnrollment,
+    };
+};
diff --git a/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/hooks/useLifecycle.js b/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/hooks/useLifecycle.js
index 0c4a280bf6..4a84d7ccb7 100644
--- a/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/hooks/useLifecycle.js
+++ b/src/core_modules/capture-core/components/DataEntries/EnrollmentRegistrationEntry/hooks/useLifecycle.js
@@ -4,7 +4,6 @@ import { useEffect, useRef } from 'react';
 import type { OrgUnit } from '@dhis2/rules-engine-javascript';
 import { startNewEnrollmentDataEntryInitialisation } from '../EnrollmentRegistrationEntry.actions';
 import { scopeTypes, getProgramThrowIfNotFound } from '../../../../metaData';
-import { useLocationQuery } from '../../../../utils/routing';
 import { useScopeInfo } from '../../../../hooks/useScopeInfo';
 import { useFormValues } from './index';
 import type { InputAttribute } from './useFormValues';
@@ -18,8 +17,9 @@ export const useLifecycle = (
     dataEntryId: string,
     trackedEntityInstanceAttributes?: Array<InputAttribute>,
     orgUnit: ?OrgUnit,
+    teiId: ?string,
+    programId: string,
 ) => {
-    const { teiId, programId } = useLocationQuery();
     const dataEntryReadyRef = useRef(false);
     const dispatch = useDispatch();
     const program = programId && getProgramThrowIfNotFound(programId);
diff --git a/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.container.js b/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.container.js
index e35cfbb4ce..4c3b8badab 100644
--- a/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.container.js
+++ b/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.container.js
@@ -3,7 +3,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import React, { useEffect, useMemo } from 'react';
 import type { ComponentType } from 'react';
 import { useScopeInfo } from '../../../hooks/useScopeInfo';
-import { useCurrentOrgUnitInfo } from '../../../hooks/useCurrentOrgUnitInfo';
 import { Enrollment, scopeTypes } from '../../../metaData';
 import { startNewTeiDataEntryInitialisation } from './TeiRegistrationEntry.actions';
 import type { OwnProps } from './TeiRegistrationEntry.types';
@@ -11,11 +10,11 @@ import { TeiRegistrationEntryComponent } from './TeiRegistrationEntry.component'
 import { useFormValuesFromSearchTerms } from './hooks/useFormValuesFromSearchTerms';
 import { dataEntryHasChanges } from '../../DataEntry/common/dataEntryHasChanges';
 import { useMetadataForRegistrationForm } from '../common/TEIAndEnrollment/useMetadataForRegistrationForm';
+import { useBuildTeiPayload } from './hooks/useBuildTeiPayload';
 
-const useInitialiseTeiRegistration = (selectedScopeId, dataEntryId) => {
+const useInitialiseTeiRegistration = (selectedScopeId, dataEntryId, orgUnitId) => {
     const dispatch = useDispatch();
     const { scopeType, trackedEntityName } = useScopeInfo(selectedScopeId);
-    const { id: selectedOrgUnitId } = useCurrentOrgUnitInfo();
     const { formId, formFoundation } = useMetadataForRegistrationForm({ selectedScopeId });
     const formValues = useFormValuesFromSearchTerms();
     const registrationFormReady = !!formId;
@@ -24,18 +23,18 @@ const useInitialiseTeiRegistration = (selectedScopeId, dataEntryId) => {
         if (registrationFormReady && scopeType === scopeTypes.TRACKED_ENTITY_TYPE) {
             dispatch(
                 startNewTeiDataEntryInitialisation(
-                    { selectedOrgUnitId, selectedScopeId, dataEntryId, formFoundation, formValues },
+                    { selectedOrgUnitId: orgUnitId, selectedScopeId, dataEntryId, formFoundation, formValues },
                 ));
         }
     }, [
         scopeType,
         dataEntryId,
         selectedScopeId,
-        selectedOrgUnitId,
         registrationFormReady,
         formFoundation,
         formValues,
         dispatch,
+        orgUnitId,
     ]);
 
     return {
@@ -44,13 +43,18 @@ const useInitialiseTeiRegistration = (selectedScopeId, dataEntryId) => {
 };
 
 
-export const TeiRegistrationEntry: ComponentType<OwnProps> = ({ selectedScopeId, id, ...rest }) => {
-    const { trackedEntityName } = useInitialiseTeiRegistration(selectedScopeId, id);
+export const TeiRegistrationEntry: ComponentType<OwnProps> = ({ selectedScopeId, id, orgUnitId, onSave, ...rest }) => {
+    const { trackedEntityName } = useInitialiseTeiRegistration(selectedScopeId, id, orgUnitId);
     const ready = useSelector(({ dataEntries }) => (!!dataEntries[id]));
     const dataEntry = useSelector(({ dataEntries }) => (dataEntries[id]));
     const {
         registrationMetaData: teiRegistrationMetadata,
     } = useMetadataForRegistrationForm({ selectedScopeId });
+    const { buildTeiWithoutEnrollment } = useBuildTeiPayload({
+        trackedEntityTypeId: selectedScopeId,
+        dataEntryId: id,
+        orgUnitId,
+    });
 
     const dataEntryKey = useMemo(() => {
         if (dataEntry) {
@@ -68,14 +72,21 @@ export const TeiRegistrationEntry: ComponentType<OwnProps> = ({ selectedScopeId,
         return null;
     }
 
+    const onSaveWithoutEnrollment = () => {
+        const teiPayload = buildTeiWithoutEnrollment();
+        onSave(teiPayload);
+    };
+
     return (
         <TeiRegistrationEntryComponent
             id={id}
+            orgUnitId={orgUnitId}
             teiRegistrationMetadata={teiRegistrationMetadata}
             selectedScopeId={teiRegistrationMetadata.form?.id}
             ready={ready && !!teiRegistrationMetadata}
             trackedEntityName={trackedEntityName}
             isUserInteractionInProgress={isUserInteractionInProgress}
+            onSave={onSaveWithoutEnrollment}
             {...rest}
         />
     );
diff --git a/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.types.js b/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.types.js
index d73d49c473..43afd9adc8 100644
--- a/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.types.js
+++ b/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/TeiRegistrationEntry.types.js
@@ -2,23 +2,27 @@
 import type { Node } from 'react';
 import type { RegistrationFormMetadata } from '../common/TEIAndEnrollment/useMetadataForRegistrationForm/types';
 import type { RenderCustomCardActions } from '../../CardList';
-import type { SaveForDuplicateCheck } from '../common/TEIAndEnrollment/DuplicateCheckOnSave';
 import type { ExistingUniqueValueDialogActionsComponent } from '../withErrorMessagePostProcessor';
+import type {
+    TeiPayload,
+} from '../../Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types';
 
 export type OwnProps = $ReadOnly<{|
     id: string,
+    orgUnitId: string,
     selectedScopeId: string,
     saveButtonText: string,
     fieldOptions?: Object,
-    onSave: SaveForDuplicateCheck,
+    onSave: (TeiPayload) => void,
     duplicatesReviewPageSize: number,
     isSavingInProgress?: boolean,
     renderDuplicatesCardActions?: RenderCustomCardActions,
-    renderDuplicatesDialogActions?: (onCancel: () => void, onSave: SaveForDuplicateCheck) => Node,
+    renderDuplicatesDialogActions?: (onCancel: () => void, onSave: (TeiPayload) => void) => Node,
     ExistingUniqueValueDialogActions: ExistingUniqueValueDialogActionsComponent,
 |}>;
 
 type ContainerProps = {|
+    orgUnitId: string,
     teiRegistrationMetadata: RegistrationFormMetadata,
     ready: boolean,
     trackedEntityName: string,
@@ -37,9 +41,9 @@ type PropsAddedInHOC = {|
 |};
 type PropsRemovedInHOC = {|
     renderDuplicatesCardActions?: RenderCustomCardActions,
-    renderDuplicatesDialogActions?: (onCancel: () => void, onSave: SaveForDuplicateCheck) => Node,
+    renderDuplicatesDialogActions?: (onCancel: () => void, onSave: (TeiPayload) => void) => Node,
     duplicatesReviewPageSize: number,
-    onSave: SaveForDuplicateCheck,
+    onSave: (TeiPayload) => void,
 |};
 
 export type PlainProps = {|
diff --git a/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/hooks/useBuildTeiPayload.js b/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/hooks/useBuildTeiPayload.js
new file mode 100644
index 0000000000..0c4cd6da0d
--- /dev/null
+++ b/src/core_modules/capture-core/components/DataEntries/TeiRegistrationEntry/hooks/useBuildTeiPayload.js
@@ -0,0 +1,81 @@
+// @flow
+import { useSelector } from 'react-redux';
+import { useMetadataForRegistrationForm } from '../../common/TEIAndEnrollment/useMetadataForRegistrationForm';
+import type { RenderFoundation } from '../../../../metaData';
+import { convertClientToServer, convertFormToClient } from '../../../../converters';
+import { capitalizeFirstLetter } from '../../../../../capture-core-utils/string';
+import { generateUID } from '../../../../utils/uid/generateUID';
+import { getDataEntryKey } from '../../../DataEntry/common/getDataEntryKey';
+import type {
+    TeiPayload,
+} from '../../../Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types';
+
+type Props = {
+    trackedEntityTypeId: string,
+    dataEntryId: string,
+    orgUnitId: string,
+    itemId?: string,
+};
+
+function getClientValuesForFormData(formValues: Object, formFoundation: RenderFoundation) {
+    return formFoundation.convertValues(formValues, convertFormToClient);
+}
+
+function getPossibleTetFeatureTypeKey(serverValues: Object) {
+    return Object
+        .keys(serverValues)
+        .find(key => key.startsWith('FEATURETYPE_'));
+}
+
+function buildGeometryProp(key: string, serverValues: Object) {
+    if (!serverValues[key]) {
+        return undefined;
+    }
+    const type = capitalizeFirstLetter(key.replace('FEATURETYPE_', '').toLocaleLowerCase());
+    return {
+        type,
+        coordinates: serverValues[key],
+    };
+}
+
+export const useBuildTeiPayload = ({
+    trackedEntityTypeId,
+    dataEntryId,
+    itemId = 'newTei',
+    orgUnitId,
+}: Props) => {
+    const dataEntryKey = getDataEntryKey(dataEntryId, itemId);
+    const { formFoundation } = useMetadataForRegistrationForm({ selectedScopeId: trackedEntityTypeId });
+    const formValues = useSelector(({ formsValues }) => formsValues[dataEntryKey]);
+
+    const buildTeiWithoutEnrollment = (): TeiPayload => {
+        if (!formFoundation) throw Error('form foundation object not found');
+        const clientValues = getClientValuesForFormData(formValues, formFoundation);
+        const serverValuesForFormValues = formFoundation.convertValues(clientValues, convertClientToServer);
+
+        // $FlowFixMe
+        const attributes = Object.keys(serverValuesForFormValues)
+            .map(key => ({
+                attribute: key,
+                value: serverValuesForFormValues[key],
+            }));
+
+        const tetFeatureTypeKey = getPossibleTetFeatureTypeKey(serverValuesForFormValues);
+        let geometry;
+        if (tetFeatureTypeKey) {
+            geometry = buildGeometryProp(tetFeatureTypeKey, serverValuesForFormValues);
+            delete serverValuesForFormValues[tetFeatureTypeKey];
+        }
+
+        return {
+            attributes,
+            trackedEntity: generateUID(),
+            orgUnit: orgUnitId,
+            trackedEntityType: trackedEntityTypeId,
+            geometry,
+            enrollments: [],
+        };
+    };
+
+    return { buildTeiWithoutEnrollment };
+};
diff --git a/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/types/duplicateCheckOnSave.types.js b/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/types/duplicateCheckOnSave.types.js
index a727db9ec2..f55dc39c0e 100644
--- a/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/types/duplicateCheckOnSave.types.js
+++ b/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/types/duplicateCheckOnSave.types.js
@@ -1,7 +1,7 @@
 // @flow
-import { ProgramStage, RenderFoundation } from '../../../../../../metaData';
+import type { EnrollmentPayload } from '../../../../EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.types';
+import type { TeiPayload } from '../../../../../Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types';
 
 export type SaveForDuplicateCheck = (
-    formFoundation?: RenderFoundation,
-    firstStageMetaData?: { stage: ProgramStage },
+    teiWithEnrollment: EnrollmentPayload | TeiPayload,
 ) => void;
diff --git a/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/useDuplicateCheckerOnSave.types.js b/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/useDuplicateCheckerOnSave.types.js
index 98525d23d5..d74476bfee 100644
--- a/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/useDuplicateCheckerOnSave.types.js
+++ b/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/useDuplicateCheckerOnSave.types.js
@@ -1,9 +1,8 @@
 // @flow
 import { type InputSearchGroup } from '../../../../../metaData';
-import type { SaveForDuplicateCheck } from './types';
 
 export type Input = {|
-    onSave: SaveForDuplicateCheck,
+    onSave: () => void,
     hasDuplicate: ?boolean,
     onResetPossibleDuplicates: () => void,
     onReviewDuplicates: (duplicatesReviewPageSize: number) => void,
diff --git a/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/withDuplicateCheckOnSave.types.js b/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/withDuplicateCheckOnSave.types.js
index 87a3d4cffc..560dd0e9a2 100644
--- a/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/withDuplicateCheckOnSave.types.js
+++ b/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/DuplicateCheckOnSave/withDuplicateCheckOnSave.types.js
@@ -2,16 +2,15 @@
 import type { Node } from 'react';
 import type { Enrollment, TeiRegistration } from '../../../../../metaData';
 import type { RenderCustomCardActions } from '../../../../CardList';
-import type { SaveForDuplicateCheck } from './types';
 
 export type Props = {
     id: string,
     selectedScopeId: string,
-    onSave: SaveForDuplicateCheck,
+    onSave: () => void,
     enrollmentMetadata?: Enrollment,
     teiRegistrationMetadata?: TeiRegistration,
     duplicatesReviewPageSize: number,
     renderDuplicatesCardActions?: RenderCustomCardActions,
-    renderDuplicatesDialogActions?: (onCancel: () => void, onSave: SaveForDuplicateCheck) => Node,
+    renderDuplicatesDialogActions?: (onCancel: () => void, onSave: () => void) => Node,
     skipDuplicateCheck: ?boolean,
 };
diff --git a/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/useMetadataForRegistrationForm/hooks/useEnrollmentFormFoundation.js b/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/useMetadataForRegistrationForm/hooks/useEnrollmentFormFoundation.js
index 49a7b484be..0238087811 100644
--- a/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/useMetadataForRegistrationForm/hooks/useEnrollmentFormFoundation.js
+++ b/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/useMetadataForRegistrationForm/hooks/useEnrollmentFormFoundation.js
@@ -30,6 +30,7 @@ export const useEnrollmentFormFoundation = ({
     locale,
 }: Props) => {
     const { data: enrollment, isLoading, error } = useIndexedDBQuery(
+        // $FlowFixMe - QueryKey can be undefined
         ['enrollmentForm', program?.id],
         () => buildEnrollmentForm({
             // $FlowFixMe - Flow does not understand that the values are not null here
diff --git a/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/useMetadataForRegistrationForm/hooks/useTrackedEntityTypeCollection.js b/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/useMetadataForRegistrationForm/hooks/useTrackedEntityTypeCollection.js
index ae3d4c3e5a..05a173cfc8 100644
--- a/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/useMetadataForRegistrationForm/hooks/useTrackedEntityTypeCollection.js
+++ b/src/core_modules/capture-core/components/DataEntries/common/TEIAndEnrollment/useMetadataForRegistrationForm/hooks/useTrackedEntityTypeCollection.js
@@ -26,6 +26,7 @@ export const useTrackedEntityTypeCollection = ({
     locale,
 }: Props): ReturnValues => {
     const { data: trackedEntityAttributes } = useIndexedDBQuery(
+        // $FlowFixMe - QueryKey can be undefined
         ['trackedEntityAttributes', trackedEntityType?.id],
         () => getTrackedEntityAttributes(
             trackedEntityType
@@ -40,6 +41,7 @@ export const useTrackedEntityTypeCollection = ({
     );
 
     const { data: trackedEntityTypeCollection } = useIndexedDBQuery(
+        // $FlowFixMe - QueryKey can be undefined
         ['trackedEntityTypeCollection', trackedEntityType?.id],
         () => buildTrackedEntityTypeCollection({
             // $FlowFixMe
diff --git a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPage.epics.js b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPage.epics.js
index 99857025f9..6d905e0188 100644
--- a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPage.epics.js
+++ b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPage.epics.js
@@ -207,3 +207,4 @@ export const openEnrollmentPageEpic = (action$: InputObservable, store: ReduxSto
         },
         ),
     );
+
diff --git a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.component.js b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.component.js
index 0759fcd558..05be58a16e 100644
--- a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.component.js
+++ b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.component.js
@@ -1,5 +1,5 @@
 // @flow
-import React, { type ComponentType } from 'react';
+import React, { type ComponentType, useState, useCallback } from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { spacersNum, spacers, colors } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
@@ -13,8 +13,15 @@ import { WidgetError } from '../../../WidgetErrorAndWarning/WidgetError';
 import { WidgetIndicator } from '../../../WidgetIndicator';
 import { WidgetEnrollmentComment } from '../../../WidgetEnrollmentComment';
 import { EnrollmentQuickActions } from './EnrollmentQuickActions';
+import {
+    TrackedEntityRelationshipsWrapper,
+} from '../../common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper';
+import { AddRelationshipRefWrapper } from '../../EnrollmentEditEvent/AddRelationshipRefWrapper';
 
 const getStyles = () => ({
+    container: {
+        position: 'relative',
+    },
     columns: {
         display: 'flex',
     },
@@ -59,68 +66,96 @@ export const EnrollmentPageDefaultPlain = ({
     hideWidgets,
     classes,
     onEventClick,
+    onLinkedRecordClick,
     onUpdateTeiAttributeValues,
     onUpdateEnrollmentDate,
     onUpdateIncidentDate,
     onEnrollmentError,
     ruleEffects,
-}: PlainProps) => (
-    <>
-        <div className={classes.title}>{i18n.t('Enrollment Dashboard')}</div>
-        <div className={classes.columns}>
-            <div className={classes.leftColumn}>
-                <EnrollmentQuickActions
-                    stages={stages}
-                    events={events}
-                    ruleEffects={ruleEffects}
-                />
-                <WidgetStagesAndEvents
-                    programId={program.id}
-                    stages={stages}
-                    events={events}
-                    onViewAll={onViewAll}
-                    onCreateNew={onCreateNew}
-                    onEventClick={onEventClick}
-                    ruleEffects={ruleEffects}
-                />
-            </div>
-            <div className={classes.rightColumn}>
-                <WidgetEnrollmentComment />
-                <WidgetError error={widgetEffects?.errors} />
-                <WidgetWarning warning={widgetEffects?.warnings} />
-                {!hideWidgets.indicator && (
-                    <WidgetIndicator
-                        indicators={widgetEffects?.indicators}
-                        emptyText={i18n.t('No indicator output for this enrollment yet')}
-                    />
-                )}
-                {!hideWidgets.feedback && (
-                    <WidgetFeedback
-                        feedback={widgetEffects?.feedbacks}
-                        emptyText={i18n.t('No feedback for this enrollment yet')}
-                    />
-                )}
-                <WidgetProfile
-                    teiId={teiId}
-                    programId={program.id}
-                    orgUnitId={orgUnitId}
-                    onUpdateTeiAttributeValues={onUpdateTeiAttributeValues}
-                    showEdit
-                />
-                {enrollmentId !== 'AUTO' && <WidgetEnrollment
-                    teiId={teiId}
-                    enrollmentId={enrollmentId}
-                    programId={program.id}
-                    onDelete={onDelete}
-                    onAddNew={onAddNew}
-                    onUpdateEnrollmentDate={onUpdateEnrollmentDate}
-                    onUpdateIncidentDate={onUpdateIncidentDate}
-                    onError={onEnrollmentError}
-                />}
+}: PlainProps) => {
+    const [mainContentVisible, setMainContentVisibility] = useState(true);
+    const [addRelationShipContainerElement, setAddRelationshipContainerElement] =
+        useState<?HTMLDivElement>(undefined);
+
+    const toggleVisibility = useCallback(() => setMainContentVisibility(current => !current), []);
+
+    return (
+        <>
+            <AddRelationshipRefWrapper setRelationshipRef={setAddRelationshipContainerElement} />
+            <div
+                className={classes.container}
+                style={!mainContentVisible ? { display: 'none' } : undefined}
+            >
+                <div className={classes.title}>{i18n.t('Enrollment Dashboard')}</div>
+                <div className={classes.columns}>
+                    <div className={classes.leftColumn}>
+                        <EnrollmentQuickActions
+                            stages={stages}
+                            events={events}
+                            ruleEffects={ruleEffects}
+                        />
+                        <WidgetStagesAndEvents
+                            programId={program.id}
+                            stages={stages}
+                            events={events}
+                            onViewAll={onViewAll}
+                            onCreateNew={onCreateNew}
+                            onEventClick={onEventClick}
+                            ruleEffects={ruleEffects}
+                        />
+                    </div>
+                    <div className={classes.rightColumn}>
+                        {addRelationShipContainerElement &&
+                            <TrackedEntityRelationshipsWrapper
+                                trackedEntityTypeId={program.trackedEntityType.id}
+                                programId={program.id}
+                                orgUnitId={orgUnitId}
+                                addRelationshipRenderElement={addRelationShipContainerElement}
+                                onAddRelationship={() => {}}
+                                onOpenAddRelationship={toggleVisibility}
+                                onCloseAddRelationship={toggleVisibility}
+                                teiId={teiId}
+                                onLinkedRecordClick={onLinkedRecordClick}
+                            />
+                        }
+                        <WidgetEnrollmentComment />
+                        <WidgetError error={widgetEffects?.errors} />
+                        <WidgetWarning warning={widgetEffects?.warnings} />
+                        {!hideWidgets.indicator && (
+                            <WidgetIndicator
+                                indicators={widgetEffects?.indicators}
+                                emptyText={i18n.t('No indicator output for this enrollment yet')}
+                            />
+                        )}
+                        {!hideWidgets.feedback && (
+                            <WidgetFeedback
+                                feedback={widgetEffects?.feedbacks}
+                                emptyText={i18n.t('No feedback for this enrollment yet')}
+                            />
+                        )}
+                        <WidgetProfile
+                            teiId={teiId}
+                            programId={program.id}
+                            orgUnitId={orgUnitId}
+                            onUpdateTeiAttributeValues={onUpdateTeiAttributeValues}
+                            showEdit
+                        />
+                        {enrollmentId !== 'AUTO' && <WidgetEnrollment
+                            teiId={teiId}
+                            enrollmentId={enrollmentId}
+                            programId={program.id}
+                            onDelete={onDelete}
+                            onAddNew={onAddNew}
+                            onUpdateEnrollmentDate={onUpdateEnrollmentDate}
+                            onUpdateIncidentDate={onUpdateIncidentDate}
+                            onError={onEnrollmentError}
+                        />}
+                    </div>
+                </div>
             </div>
-        </div>
-    </>
-);
+        </>
+    );
+};
 
 
 export const EnrollmentPageDefaultComponent: ComponentType<Props> = withStyles(
diff --git a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js
index 2e7b8da1bc..d7f3ccdf85 100644
--- a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js
+++ b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js
@@ -28,12 +28,14 @@ import {
 } from './hooks';
 import { buildUrlQueryString, useLocationQuery } from '../../../../utils/routing';
 import { useFilteredWidgetData } from './hooks/useFilteredWidgetData';
+import { useLinkedRecordClick } from '../../common/TEIRelationshipsWidget';
 
 export const EnrollmentPageDefault = () => {
     const history = useHistory();
     const dispatch = useDispatch();
     const { enrollmentId, programId, teiId, orgUnitId } = useLocationQuery();
     const { orgUnit, error } = useRulesEngineOrgUnit(orgUnitId);
+    const { onLinkedRecordClick } = useLinkedRecordClick();
 
     const program = useTrackerProgram(programId);
     const {
@@ -102,6 +104,7 @@ export const EnrollmentPageDefault = () => {
     };
 
     const onEnrollmentError = message => dispatch(showEnrollmentError({ message }));
+
     if (error) {
         return error.errorComponent;
     }
@@ -122,6 +125,7 @@ export const EnrollmentPageDefault = () => {
             widgetEffects={outputEffects}
             hideWidgets={hideWidgets}
             onEventClick={onEventClick}
+            onLinkedRecordClick={onLinkedRecordClick}
             onUpdateTeiAttributeValues={onUpdateTeiAttributeValues}
             onUpdateEnrollmentDate={onUpdateEnrollmentDate}
             onUpdateIncidentDate={onUpdateIncidentDate}
diff --git a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types.js b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types.js
index 4e88f4a39b..143b9b8c28 100644
--- a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types.js
+++ b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types.js
@@ -1,12 +1,13 @@
 // @flow
 import { typeof effectActions } from '@dhis2/rules-engine-javascript';
-import type { Program } from 'capture-core/metaData';
+import type { TrackerProgram } from 'capture-core/metaData';
 import type { Stage } from 'capture-core/components/WidgetStagesAndEvents/types/common.types';
 import type { WidgetEffects, HideWidgets } from '../../common/EnrollmentOverviewDomain';
 import type { Event } from '../../common/EnrollmentOverviewDomain/useCommonEnrollmentDomainData';
+import type { LinkedRecordClick } from '../../../WidgetsRelationship/WidgetTrackedEntityRelationship';
 
 export type Props = {|
-    program: Program,
+    program: TrackerProgram,
     enrollmentId: string,
     teiId: string,
     events: ?Array<Event>,
@@ -20,6 +21,7 @@ export type Props = {|
     onCreateNew: (stageId: string) => void,
     onEventClick: (eventId: string) => void,
     onUpdateTeiAttributeValues: (attributes: Array<{ [key: string]: string }>, teiDisplayName: string) => void,
+    onLinkedRecordClick: LinkedRecordClick,
     onUpdateEnrollmentDate: (enrollmentDate: string) => void,
     onUpdateIncidentDate: (incidentDate: string) => void,
     onEnrollmentError: (message: string) => void,
diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/AddRelationshipRefWrapper/AddRelationshipRefWrapper.component.js b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/AddRelationshipRefWrapper/AddRelationshipRefWrapper.component.js
new file mode 100644
index 0000000000..7235bb1a14
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/AddRelationshipRefWrapper/AddRelationshipRefWrapper.component.js
@@ -0,0 +1,21 @@
+// @flow
+import React, { useEffect, useRef } from 'react';
+
+type Props = {
+    setRelationshipRef: (HTMLDivElement) => void,
+}
+
+export const AddRelationshipRefWrapper = ({ setRelationshipRef }: Props) => {
+    const renderRelationshipRef = useRef<?HTMLDivElement>(undefined);
+
+    // Extracting the logic to separate component because of the OrgUnitFetcher
+    useEffect(() => {
+        if (renderRelationshipRef.current) {
+            setRelationshipRef(renderRelationshipRef.current);
+        }
+    }, [setRelationshipRef]);
+
+    return (
+        <div ref={renderRelationshipRef} />
+    );
+};
diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/AddRelationshipRefWrapper/index.js b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/AddRelationshipRefWrapper/index.js
new file mode 100644
index 0000000000..7400ed7ff3
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/AddRelationshipRefWrapper/index.js
@@ -0,0 +1,3 @@
+// @flow
+
+export { AddRelationshipRefWrapper } from './AddRelationshipRefWrapper.component';
diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js
index 1add434b21..6137c49b32 100644
--- a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js
+++ b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js
@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import type { ComponentType } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { spacersNum } from '@dhis2/ui';
@@ -18,12 +18,19 @@ import { IncompleteSelectionsMessage } from '../../IncompleteSelectionsMessage';
 import { WidgetEventComment } from '../../WidgetEventComment';
 import { OrgUnitFetcher } from '../../OrgUnitFetcher';
 import { TopBar } from './TopBar.container';
+import {
+    TrackedEntityRelationshipsWrapper,
+} from '../common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper';
+import { AddRelationshipRefWrapper } from './AddRelationshipRefWrapper';
 import { NoticeBox } from '../../NoticeBox';
 
 const styles = ({ typography }) => ({
     page: {
         margin: spacersNum.dp16,
     },
+    addRelationshipContainer: {
+        margin: spacersNum.dp16,
+    },
     columns: {
         display: 'flex',
     },
@@ -52,6 +59,7 @@ const EnrollmentEditEventPagePain = ({
     programStage,
     teiId,
     enrollmentId,
+    trackedEntityTypeId,
     programId,
     enrollmentsAsOptions,
     trackedEntityName,
@@ -62,6 +70,7 @@ const EnrollmentEditEventPagePain = ({
     onAddNew,
     classes,
     onGoBack,
+    onLinkedRecordClick,
     orgUnitId,
     eventDate,
     scheduleDate,
@@ -71,85 +80,111 @@ const EnrollmentEditEventPagePain = ({
     onEnrollmentSuccess,
     onCancelEditEvent,
     onHandleScheduleSave,
-}: PlainProps) => (
-    <OrgUnitFetcher orgUnitId={orgUnitId}>
-        <TopBar
-            mode={mode}
-            programStage={programStage}
-            enrollmentId={enrollmentId}
-            programId={programId}
-            enrollmentsAsOptions={enrollmentsAsOptions}
-            trackedEntityName={trackedEntityName}
-            teiDisplayName={teiDisplayName}
-            orgUnitId={orgUnitId}
-            eventDate={eventDate}
-            teiId={teiId}
-            pageStatus={pageStatus}
-        />
-        <div className={classes.page}>
-            <div className={classes.title}>
-                {mode === dataEntryKeys.VIEW
-                    ? i18n.t('Enrollment{{escape}} View Event', { escape: ':' })
-                    : i18n.t('Enrollment{{escape}} Edit Event', { escape: ':' })}
+}: PlainProps) => {
+    const [mainContentVisible, setMainContentVisible] = useState(true);
+    const [addRelationShipContainerElement, setAddRelationShipContainerElement] = useState<?HTMLDivElement>(undefined);
+
+    const toggleVisibility = useCallback(() => setMainContentVisible(current => !current), []);
+
+    return (
+        <OrgUnitFetcher orgUnitId={orgUnitId}>
+            <TopBar
+                mode={mode}
+                programStage={programStage}
+                enrollmentId={enrollmentId}
+                programId={programId}
+                enrollmentsAsOptions={enrollmentsAsOptions}
+                trackedEntityName={trackedEntityName}
+                teiDisplayName={teiDisplayName}
+                orgUnitId={orgUnitId}
+                eventDate={eventDate}
+                teiId={teiId}
+                pageStatus={pageStatus}
+            />
+            <div className={classes.addRelationshipContainer}>
+                <AddRelationshipRefWrapper setRelationshipRef={setAddRelationShipContainerElement} />
             </div>
-            <div className={classes.columns}>
-                <div className={classes.leftColumn}>
-                    {pageStatus === pageStatuses.DEFAULT && programStage && (
-                        <WidgetEventEdit
-                            programStage={programStage}
-                            onGoBack={onGoBack}
-                            programId={programId}
-                            orgUnitId={orgUnitId}
+            <div
+                className={classes.page}
+                style={!mainContentVisible ? { display: 'none' } : undefined}
+            >
+                <div className={classes.title}>
+                    {mode === dataEntryKeys.VIEW
+                        ? i18n.t('Enrollment{{escape}} View Event', { escape: ':' })
+                        : i18n.t('Enrollment{{escape}} Edit Event', { escape: ':' })}
+                </div>
+                <div className={classes.columns}>
+                    <div className={classes.leftColumn}>
+                        {pageStatus === pageStatuses.DEFAULT && programStage && (
+                            <WidgetEventEdit
+                                programStage={programStage}
+                                onGoBack={onGoBack}
+                                programId={programId}
+                                orgUnitId={orgUnitId}
+                                teiId={teiId}
+                                enrollmentId={enrollmentId}
+                                eventStatus={eventStatus}
+                                initialScheduleDate={scheduleDate}
+                                onCancelEditEvent={onCancelEditEvent}
+                                onHandleScheduleSave={onHandleScheduleSave}
+                            />
+                        )}
+                        {pageStatus === pageStatuses.MISSING_DATA && (
+                            <span>{i18n.t('The enrollment event data could not be found')}</span>
+                        )}
+                        {pageStatus === pageStatuses.WITHOUT_ORG_UNIT_SELECTED && (
+                            <IncompleteSelectionsMessage>
+                                {i18n.t('Choose a registering unit to start reporting')}
+                            </IncompleteSelectionsMessage>
+                        )}
+                    </div>
+                    <div className={classes.rightColumn}>
+                        <WidgetEventComment dataEntryKey={mode} dataEntryId={dataEntryIds.ENROLLMENT_EVENT} />
+                        <WidgetError error={widgetEffects.errors} />
+                        <WidgetWarning warning={widgetEffects.warnings} />
+                        {!hideWidgets.feedback && (
+                            <WidgetFeedback
+                                emptyText={i18n.t('There are no feedback for this event')}
+                                feedback={widgetEffects.feedbacks}
+                            />
+                        )}
+                        {!hideWidgets.indicator && (
+                            <WidgetIndicator
+                                emptyText={i18n.t('There are no indicators for this event')}
+                                indicators={widgetEffects.indicators}
+                            />
+                        )}
+                        {addRelationShipContainerElement &&
+                            <TrackedEntityRelationshipsWrapper
+                                trackedEntityTypeId={trackedEntityTypeId}
+                                teiId={teiId}
+                                programId={programId}
+                                orgUnitId={orgUnitId}
+                                addRelationshipRenderElement={addRelationShipContainerElement}
+                                onOpenAddRelationship={toggleVisibility}
+                                onCloseAddRelationship={toggleVisibility}
+                                onAddRelationship={() => {}}
+                                onLinkedRecordClick={onLinkedRecordClick}
+                            />
+                        }
+                        <WidgetProfile teiId={teiId} programId={programId} />
+                        <WidgetEnrollment
                             teiId={teiId}
                             enrollmentId={enrollmentId}
-                            eventStatus={eventStatus}
-                            initialScheduleDate={scheduleDate}
-                            onCancelEditEvent={onCancelEditEvent}
-                            onHandleScheduleSave={onHandleScheduleSave}
-                        />
-                    )}
-                    {pageStatus === pageStatuses.MISSING_DATA && (
-                        <span>{i18n.t('The enrollment event data could not be found')}</span>
-                    )}
-                    {pageStatus === pageStatuses.WITHOUT_ORG_UNIT_SELECTED && (
-                        <IncompleteSelectionsMessage>
-                            {i18n.t('Choose a registering unit to start reporting')}
-                        </IncompleteSelectionsMessage>
-                    )}
-                </div>
-                <div className={classes.rightColumn}>
-                    <WidgetEventComment dataEntryKey={mode} dataEntryId={dataEntryIds.ENROLLMENT_EVENT} />
-                    <WidgetError error={widgetEffects.errors} />
-                    <WidgetWarning warning={widgetEffects.warnings} />
-                    {!hideWidgets.feedback && (
-                        <WidgetFeedback
-                            emptyText={i18n.t('There are no feedback for this event')}
-                            feedback={widgetEffects.feedbacks}
-                        />
-                    )}
-                    {!hideWidgets.indicator && (
-                        <WidgetIndicator
-                            emptyText={i18n.t('There are no indicators for this event')}
-                            indicators={widgetEffects.indicators}
+                            programId={programId}
+                            readOnlyMode
+                            onDelete={onDelete}
+                            onAddNew={onAddNew}
+                            onError={onEnrollmentError}
+                            onSuccess={onEnrollmentSuccess}
                         />
-                    )}
-                    <WidgetProfile teiId={teiId} programId={programId} />
-                    <WidgetEnrollment
-                        teiId={teiId}
-                        enrollmentId={enrollmentId}
-                        programId={programId}
-                        readOnlyMode
-                        onDelete={onDelete}
-                        onAddNew={onAddNew}
-                        onError={onEnrollmentError}
-                        onSuccess={onEnrollmentSuccess}
-                    />
+                    </div>
                 </div>
+                <NoticeBox formId={`${dataEntryIds.ENROLLMENT_EVENT}-${mode}`} />
             </div>
-            <NoticeBox formId={`${dataEntryIds.ENROLLMENT_EVENT}-${mode}`} />
-        </div>
-    </OrgUnitFetcher>
-);
+        </OrgUnitFetcher>
+    );
+};
 
 export const EnrollmentEditEventPageComponent: ComponentType<$Diff<PlainProps, CssClasses>> =
     withStyles(styles)(EnrollmentEditEventPagePain);
diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js
index b6a27e92bf..82ee3b9360 100644
--- a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js
+++ b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js
@@ -21,6 +21,7 @@ import { useEvent } from './hooks';
 import type { Props } from './EnrollmentEditEventPage.types';
 import { LoadingMaskForPage } from '../../LoadingMasks';
 import { cleanUpDataEntry } from '../../DataEntry';
+import { useLinkedRecordClick } from '../common/TEIRelationshipsWidget';
 import { pageKeys } from '../../App/withAppUrlSync';
 import { withErrorMessageHandler } from '../../../HOC';
 
@@ -90,6 +91,8 @@ const EnrollmentEditEventPageWithContextPlain = ({
     const history = useHistory();
     const dispatch = useDispatch();
 
+    const { onLinkedRecordClick } = useLinkedRecordClick();
+
     useEffect(() => () => {
         dispatch(cleanUpDataEntry(dataEntryIds.ENROLLMENT_EVENT));
     }, [dispatch]);
@@ -116,6 +119,7 @@ const EnrollmentEditEventPageWithContextPlain = ({
         }
     }, [initMode, enrollmentId, eventId, orgUnitId, history]);
 
+    const { enrollment: enrollmentSite } = useCommonEnrollmentDomainData(teiId, enrollmentId, programId);
     const onGoBack = () =>
         history.push(`/enrollment?${buildUrlQueryString({ enrollmentId })}`);
 
@@ -123,10 +127,9 @@ const EnrollmentEditEventPageWithContextPlain = ({
         dispatch(updateEnrollmentEvents(eventId, eventData));
         history.push(`enrollment?${buildUrlQueryString({ enrollmentId })}`);
     };
-    const enrollmentSite = useCommonEnrollmentDomainData(teiId, enrollmentId, programId).enrollment;
     const { teiDisplayName } = useTeiDisplayName(teiId, programId);
     // $FlowFixMe
-    const trackedEntityName = program?.trackedEntityType?.name;
+    const { name: trackedEntityName, id: trackedEntityTypeId } = program?.trackedEntityType;
     const enrollmentsAsOptions = buildEnrollmentsAsOptions([enrollmentSite || {}], programId);
     const event = enrollmentSite?.events?.find(item => item.event === eventId);
     const eventDate = getEventDate(event);
@@ -135,6 +138,7 @@ const EnrollmentEditEventPageWithContextPlain = ({
     const dataEntryKey = `${dataEntryIds.ENROLLMENT_EVENT}-${currentPageMode}`;
     const outputEffects = useWidgetDataFromStore(dataEntryKey);
 
+
     const pageStatus = getPageStatus({
         orgUnitId,
         enrollmentSite,
@@ -154,6 +158,7 @@ const EnrollmentEditEventPageWithContextPlain = ({
             hideWidgets={hideWidgets}
             teiId={teiId}
             enrollmentId={enrollmentId}
+            trackedEntityTypeId={trackedEntityTypeId}
             enrollmentsAsOptions={enrollmentsAsOptions}
             teiDisplayName={teiDisplayName}
             trackedEntityName={trackedEntityName}
@@ -162,6 +167,7 @@ const EnrollmentEditEventPageWithContextPlain = ({
             onAddNew={onAddNew}
             orgUnitId={orgUnitId}
             eventDate={eventDate}
+            onLinkedRecordClick={onLinkedRecordClick}
             onEnrollmentError={onEnrollmentError}
             onEnrollmentSuccess={onEnrollmentSuccess}
             eventStatus={event?.status}
diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js
index 8e16b09325..8f269fed00 100644
--- a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js
+++ b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js
@@ -1,6 +1,7 @@
 // @flow
 import type { ProgramStage } from '../../../metaData';
 import type { WidgetEffects, HideWidgets } from '../common/EnrollmentOverviewDomain';
+import type { LinkedRecordClick } from '../../WidgetsRelationship/WidgetTrackedEntityRelationship';
 
 export type PlainProps = {|
     programStage: ?ProgramStage,
@@ -9,6 +10,7 @@ export type PlainProps = {|
     teiId: string,
     enrollmentId: string,
     programId: string,
+    trackedEntityTypeId: string,
     mode: string,
     orgUnitId: string,
     trackedEntityName: string,
@@ -19,6 +21,7 @@ export type PlainProps = {|
     onDelete: () => void,
     onAddNew: () => void,
     onGoBack: () => void,
+    onLinkedRecordClick: LinkedRecordClick,
     onEnrollmentError: (message: string) => void,
     onEnrollmentSuccess: () => void,
     onCancelEditEvent: (isScheduled: boolean) => void,
diff --git a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.actions.js b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.actions.js
index e716f71741..6beb555bc6 100644
--- a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.actions.js
+++ b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.actions.js
@@ -1,7 +1,12 @@
 // @flow
-import type { ProgramStage, RenderFoundation } from '../../../../metaData';
 import { actionCreator } from '../../../../actions/actions.utils';
 import { effectMethods } from '../../../../trackerOffline';
+import type {
+    EnrollmentPayload,
+} from '../../../DataEntries/EnrollmentRegistrationEntry/EnrollmentRegistrationEntry.types';
+import type {
+    TeiPayload,
+} from '../../common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types';
 
 export const registrationFormActionTypes = {
     NEW_TRACKED_ENTITY_INSTANCE_SAVE_START: 'StartSavingNewTrackedEntityInstance',
@@ -16,8 +21,8 @@ export const registrationFormActionTypes = {
 };
 
 // without enrollment
-export const startSavingNewTrackedEntityInstance = (formFoundation: RenderFoundation) =>
-    actionCreator(registrationFormActionTypes.NEW_TRACKED_ENTITY_INSTANCE_SAVE_START)({ formFoundation });
+export const startSavingNewTrackedEntityInstance = (teiPayload: TeiPayload) =>
+    actionCreator(registrationFormActionTypes.NEW_TRACKED_ENTITY_INSTANCE_SAVE_START)({ teiPayload });
 
 export const saveNewTrackedEntityInstance = (candidateForRegistration: any) =>
     actionCreator(registrationFormActionTypes.NEW_TRACKED_ENTITY_INSTANCE_SAVE)(
@@ -41,11 +46,9 @@ export const saveNewTrackedEntityInstance = (candidateForRegistration: any) =>
     );
 
 // with enrollment
-export const startSavingNewTrackedEntityInstanceWithEnrollment = (formFoundation: RenderFoundation, teiId: string, uid: string, firstStage?: ProgramStage) =>
+export const startSavingNewTrackedEntityInstanceWithEnrollment = (enrollmentPayload: EnrollmentPayload, uid: string) =>
     actionCreator(registrationFormActionTypes.NEW_TRACKED_ENTITY_INSTANCE_WITH_ENROLLMENT_SAVE_START)({
-        formFoundation,
-        teiId,
-        firstStage,
+        enrollmentPayload,
         uid,
     });
 
diff --git a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
index cf14636450..d5d956f29d 100644
--- a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
+++ b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
@@ -15,9 +15,7 @@ import { ResultsPageSizeContext } from '../../shared-contexts';
 import { navigateToEnrollmentOverview } from '../../../../actions/navigateToEnrollmentOverview/navigateToEnrollmentOverview.actions';
 import { useLocationQuery } from '../../../../utils/routing';
 import { EnrollmentRegistrationEntryWrapper } from '../EnrollmentRegistrationEntryWrapper.component';
-import {
-    useMetadataForRegistrationForm,
-} from '../../../DataEntries/common/TEIAndEnrollment/useMetadataForRegistrationForm';
+import { useCurrentOrgUnitInfo } from '../../../../hooks/useCurrentOrgUnitInfo';
 
 const getStyles = ({ typography }) => ({
     container: {
@@ -99,7 +97,7 @@ const RegistrationDataEntryPlain = ({
     const { resultsPageSize } = useContext(ResultsPageSizeContext);
     const { scopeType, programName, trackedEntityName } = useScopeInfo(selectedScopeId);
     const titleText = useScopeTitleText(selectedScopeId);
-    const { formFoundation } = useMetadataForRegistrationForm({ selectedScopeId });
+    const { id: reduxOrgUnitId } = useCurrentOrgUnitInfo();
 
     const handleRegistrationScopeSelection = (id) => {
         setScopeId(id);
@@ -178,10 +176,10 @@ const RegistrationDataEntryPlain = ({
                             <Grid item md sm={9} xs={9} >
                                 <EnrollmentRegistrationEntryWrapper
                                     id={dataEntryId}
+                                    orgUnitId={reduxOrgUnitId}
+                                    teiId={teiId}
                                     selectedScopeId={selectedScopeId}
-                                    onSave={(customFormFoundation, firstStageMetaData) =>
-                                        onSaveWithEnrollment(customFormFoundation, firstStageMetaData?.stage)
-                                    }
+                                    onSave={onSaveWithEnrollment}
                                     saveButtonText={(trackedEntityTypeNameLC: string) => i18n.t('Save {{trackedEntityTypeName}}', {
                                         trackedEntityTypeName: trackedEntityTypeNameLC,
                                         interpolation: { escapeValue: false },
@@ -233,11 +231,12 @@ const RegistrationDataEntryPlain = ({
                                 <TeiRegistrationEntry
                                     id={dataEntryId}
                                     selectedScopeId={selectedScopeId}
+                                    orgUnitId={reduxOrgUnitId}
                                     saveButtonText={i18n.t('Save {{trackedEntityName}}', {
                                         trackedEntityName,
                                         interpolation: { escapeValue: false },
                                     })}
-                                    onSave={() => onSaveWithoutEnrollment(formFoundation)}
+                                    onSave={onSaveWithoutEnrollment}
                                     duplicatesReviewPageSize={resultsPageSize}
                                     renderDuplicatesDialogActions={renderDuplicatesDialogActions}
                                     renderDuplicatesCardActions={renderDuplicatesCardActions}
diff --git a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.container.js b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.container.js
index 41f5a864d5..8aeda04f1f 100644
--- a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.container.js
+++ b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.container.js
@@ -26,15 +26,15 @@ export const RegistrationDataEntry: ComponentType<OwnProps> = ({
     const { teiId } = useLocationQuery();
 
     const dispatchOnSaveWithoutEnrollment = useCallback(
-        (formFoundation) => { dispatch(startSavingNewTrackedEntityInstance(formFoundation)); },
+        (teiPayload) => { dispatch(startSavingNewTrackedEntityInstance(teiPayload)); },
         [dispatch]);
 
     const dispatchOnSaveWithEnrollment = useCallback(
-        (formFoundation, firstStage) => {
+        (enrollmentPayload) => {
             const uid = uuid();
-            dispatch(startSavingNewTrackedEntityInstanceWithEnrollment(formFoundation, teiId, uid, firstStage));
+            dispatch(startSavingNewTrackedEntityInstanceWithEnrollment(enrollmentPayload, uid));
         },
-        [dispatch, teiId]);
+        [dispatch]);
 
     const dataEntryIsReady = useSelector(({ dataEntries }) => (!!dataEntries[dataEntryId]));
 
diff --git a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.epics.js b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.epics.js
index 004adb75f7..be02acbcb5 100644
--- a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.epics.js
+++ b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.epics.js
@@ -1,59 +1,31 @@
 // @flow
 import { ofType } from 'redux-observable';
-import { pipe } from 'capture-core-utils';
 import { flatMap, map } from 'rxjs/operators';
 import { of, EMPTY } from 'rxjs';
-import { FEATURETYPE, dataEntryKeys } from 'capture-core/constants';
+import { dataEntryKeys } from 'capture-core/constants';
 import {
     registrationFormActionTypes,
     saveNewTrackedEntityInstance,
     saveNewTrackedEntityInstanceWithEnrollment,
 } from './RegistrationDataEntry.actions';
-import { getTrackerProgramThrowIfNotFound, dataElementTypes, Section } from '../../../../metaData';
+import { getTrackerProgramThrowIfNotFound } from '../../../../metaData';
 import {
     navigateToEnrollmentOverview,
 } from '../../../../actions/navigateToEnrollmentOverview/navigateToEnrollmentOverview.actions';
-import { convertFormToClient, convertClientToServer } from '../../../../converters';
 import { buildUrlQueryString, shouldUseNewDashboard } from '../../../../utils/routing';
 import {
-    deriveAutoGenerateEvents,
-    deriveFirstStageDuringRegistrationEvent,
     getStageWithOpenAfterEnrollment,
-    standardGeoJson,
     PAGES,
 } from './helpers';
 
-const convertFn = pipe(convertFormToClient, convertClientToServer);
-
-const geometryType = formValuesKey => Object.values(FEATURETYPE).find(geometryKey => geometryKey === formValuesKey);
-
-const deriveAttributesFromFormValues = (formValues = {}) =>
-    Object.keys(formValues)
-        .filter(key => !geometryType(key))
-        .map(key => ({ attribute: key, value: formValues[key] }));
-
-const deriveGeometryFromFormValues = (formValues = {}) =>
-    Object.keys(formValues)
-        .filter(key => geometryType(key))
-        .reduce((acc, currentKey) => (standardGeoJson(formValues[currentKey])), undefined);
-
-export const startSavingNewTrackedEntityInstanceEpic: Epic = (action$: InputObservable, store: ReduxStore) =>
+export const startSavingNewTrackedEntityInstanceEpic: Epic = (action$: InputObservable) =>
     action$.pipe(
         ofType(registrationFormActionTypes.NEW_TRACKED_ENTITY_INSTANCE_SAVE_START),
         map((action) => {
-            const { currentSelections: { orgUnitId, trackedEntityTypeId }, formsValues } = store.value;
-            const values = formsValues['newPageDataEntryId-newTei'];
-            const formFoundation = action.payload?.formFoundation;
-            const formServerValues = formFoundation?.convertValues(values, convertFn);
+            const { teiPayload } = action.payload;
             return saveNewTrackedEntityInstance(
                 {
-                    trackedEntities: [{
-                        attributes: deriveAttributesFromFormValues(formServerValues),
-                        geometry: deriveGeometryFromFormValues(values),
-                        enrollments: [],
-                        orgUnit: orgUnitId,
-                        trackedEntityType: trackedEntityTypeId,
-                    }],
+                    trackedEntities: [teiPayload],
                 });
         }),
     );
@@ -80,78 +52,26 @@ export const startSavingNewTrackedEntityInstanceWithEnrollmentEpic: Epic = (
     action$.pipe(
         ofType(registrationFormActionTypes.NEW_TRACKED_ENTITY_INSTANCE_WITH_ENROLLMENT_SAVE_START),
         map((action) => {
-            const formId = 'newPageDataEntryId-newEnrollment';
-            const { currentSelections: { orgUnitId, programId }, formsValues, dataEntriesFieldsValue } = store.value;
+            const { currentSelections: { programId } } = store.value;
             const { dataStore, userDataStore, temp } = store.value.useNewDashboard;
-            const { formFoundation, teiId: trackedEntity, firstStage: firstStageMetadata, uid } = action.payload;
-            const fieldsValue = dataEntriesFieldsValue[formId] || {};
-            const { occurredAt, enrolledAt, geometry } = fieldsValue;
-            const attributeCategoryOptionsId = 'attributeCategoryOptions';
-            const attributeCategoryOptions = Object.keys(fieldsValue)
-                .filter(key => key.startsWith(attributeCategoryOptionsId))
-                .reduce((acc, key) => {
-                    const categoryId = key.split('-')[1];
-                    acc[categoryId] = fieldsValue[key];
-                    return acc;
-                }, {});
-            const { trackedEntityType, stages } = getTrackerProgramThrowIfNotFound(programId);
-            const currentFormData = formsValues[formId] || {};
+            const { enrollmentPayload, uid } = action.payload;
+            const { stages, useFirstStageDuringRegistration } = getTrackerProgramThrowIfNotFound(programId);
+
             const shouldRedirect = shouldUseNewDashboard(userDataStore, dataStore, temp, programId);
             const { stageWithOpenAfterEnrollment, redirectTo } = getStageWithOpenAfterEnrollment(
                 stages,
-                firstStageMetadata,
+                useFirstStageDuringRegistration,
                 shouldRedirect,
             );
-            const convertedValues = formFoundation.convertAndGroupBySection(currentFormData, convertFn);
-            const formServerValues = convertedValues[Section.groups.ENROLLMENT];
-            const currentEventValues = convertedValues[Section.groups.EVENT];
-
-            const firstStageDuringRegistrationEvent = deriveFirstStageDuringRegistrationEvent({
-                firstStageMetadata,
-                programId,
-                orgUnitId,
-                currentEventValues,
-                fieldsValue,
-                attributeCategoryOptions,
-            });
-            const autoGenerateEvents = deriveAutoGenerateEvents({
-                stages,
-                enrolledAt,
-                occurredAt,
-                programId,
-                orgUnitId,
-                firstStageMetadata,
-                attributeCategoryOptions,
-            });
 
-            const allEventsToBeCreated = firstStageDuringRegistrationEvent
-                ? [firstStageDuringRegistrationEvent, ...autoGenerateEvents]
-                : autoGenerateEvents;
-            const eventIndex = allEventsToBeCreated.findIndex(
+            const eventIndex = enrollmentPayload.enrollments[0]?.events.findIndex(
                 eventsToBeCreated => eventsToBeCreated.programStage === stageWithOpenAfterEnrollment?.id,
             );
 
             return saveNewTrackedEntityInstanceWithEnrollment({
                 candidateForRegistration: {
                     trackedEntities: [
-                        {
-                            geometry: deriveGeometryFromFormValues(currentFormData),
-                            enrollments: [
-                                {
-                                    geometry: standardGeoJson(geometry),
-                                    occurredAt: convertFn(occurredAt, dataElementTypes.DATE),
-                                    enrolledAt: convertFn(enrolledAt, dataElementTypes.DATE),
-                                    program: programId,
-                                    orgUnit: orgUnitId,
-                                    attributes: deriveAttributesFromFormValues(formServerValues),
-                                    status: 'ACTIVE',
-                                    events: allEventsToBeCreated,
-                                },
-                            ],
-                            orgUnit: orgUnitId,
-                            trackedEntityType: trackedEntityType.id,
-                            ...(trackedEntity && { trackedEntity }),
-                        },
+                        enrollmentPayload,
                     ],
                 },
                 redirectTo,
diff --git a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/deriveAutoGenerateEvents.js b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/deriveAutoGenerateEvents.js
index a38c30e4e5..e36a6e10e6 100644
--- a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/deriveAutoGenerateEvents.js
+++ b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/deriveAutoGenerateEvents.js
@@ -24,7 +24,7 @@ export const deriveAutoGenerateEvents = ({
     occurredAt: string,
     programId: string,
     orgUnitId: string,
-    firstStageMetadata: ProgramStage,
+    firstStageMetadata: ?ProgramStage,
     attributeCategoryOptions: { [categoryId: string]: string } | string,
 }) => {
     // in case we have a program that does not have an incident date (occurredAt), such as Malaria case diagnosis,
diff --git a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/deriveFirstStageDuringRegistrationEvent.js b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/deriveFirstStageDuringRegistrationEvent.js
index bf40f45135..2e4f952f92 100644
--- a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/deriveFirstStageDuringRegistrationEvent.js
+++ b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/deriveFirstStageDuringRegistrationEvent.js
@@ -16,7 +16,7 @@ export const deriveFirstStageDuringRegistrationEvent = ({
     fieldsValue,
     attributeCategoryOptions,
 }: {
-    firstStageMetadata: ProgramStage,
+    firstStageMetadata: ?ProgramStage,
     programId: string,
     orgUnitId: string,
     currentEventValues?: { [id: string]: any },
diff --git a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/getStageWithOpenAfterEnrollment.js b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/getStageWithOpenAfterEnrollment.js
index 26bd03daad..23d9d1a610 100644
--- a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/getStageWithOpenAfterEnrollment.js
+++ b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/helpers/getStageWithOpenAfterEnrollment.js
@@ -12,7 +12,7 @@ export const PAGES = {
 // when the event will not be created redirect to enrollmentEventNew
 export const getStageWithOpenAfterEnrollment = (
     stages: Map<string, ProgramStage>,
-    firstStageMetadata: ProgramStage,
+    useFirstStageDuringRegistration: boolean,
     shouldRedirect: boolean,
 ) => {
     const stagesArray = [...stages.values()];
@@ -22,8 +22,8 @@ export const getStageWithOpenAfterEnrollment = (
         if (shouldRedirect && firstStageWithOpenAfterEnrollment) {
             // event will be created during first stage registration
             if (
-                firstStageMetadata &&
-                firstStageMetadata.id === firstStageWithOpenAfterEnrollment.id
+                useFirstStageDuringRegistration
+                && stagesArray[0].id === firstStageWithOpenAfterEnrollment.id
             ) {
                 return PAGES.enrollmentEventEdit;
             }
diff --git a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.component.js b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.component.js
index 0de7c46415..19d78a8c31 100644
--- a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.component.js
+++ b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.component.js
@@ -6,6 +6,7 @@ import { DATA_ENTRY_ID } from '../../registerTei.const';
 import enrollmentClasses from './enrollment.module.css';
 import { EnrollmentRegistrationEntry } from '../../../../../DataEntries';
 import type { Props } from './dataEntryEnrollment.types';
+import { useLocationQuery } from '../../../../../../utils/routing';
 
 const NewEnrollmentRelationshipPlain =
     ({
@@ -17,13 +18,15 @@ const NewEnrollmentRelationshipPlain =
         renderDuplicatesCardActions,
         ExistingUniqueValueDialogActions,
     }: Props) => {
+        const { orgUnitId, teiId } = useLocationQuery();
         const fieldOptions = { theme, fieldLabelMediaBasedClass: enrollmentClasses.fieldLabelMediaBased };
 
-
         return (
             <EnrollmentRegistrationEntry
                 id={DATA_ENTRY_ID}
                 selectedScopeId={programId}
+                orgUnitId={orgUnitId}
+                teiId={teiId}
                 fieldOptions={fieldOptions}
                 saveButtonText={(trackedEntityTypeName: string) => i18n.t('Save new {{trackedEntityTypeName}} and link', {
                     trackedEntityTypeName,
diff --git a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/TrackedEntityInstance/DataEntryTrackedEntityInstance.component.js b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/TrackedEntityInstance/DataEntryTrackedEntityInstance.component.js
index a7f1b1bea7..70f6bc76a2 100644
--- a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/TrackedEntityInstance/DataEntryTrackedEntityInstance.component.js
+++ b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/TrackedEntityInstance/DataEntryTrackedEntityInstance.component.js
@@ -6,38 +6,41 @@ import { DATA_ENTRY_ID } from '../../registerTei.const';
 import teiClasses from './trackedEntityInstance.module.css';
 import { TeiRegistrationEntry } from '../../../../../DataEntries';
 import type { Props } from './dataEntryTrackedEntityInstance.types';
+import { useCurrentOrgUnitInfo } from '../../../../../../hooks/useCurrentOrgUnitInfo';
 
 const RelationshipTrackedEntityInstancePlain =
-  ({
-      theme,
-      onSave,
-      teiRegistrationMetadata = {},
-      duplicatesReviewPageSize,
-      renderDuplicatesDialogActions,
-      renderDuplicatesCardActions,
-      ExistingUniqueValueDialogActions,
-  }: Props) => {
-      const fieldOptions = { theme, fieldLabelMediaBasedClass: teiClasses.fieldLabelMediaBased };
-      const { trackedEntityType } = teiRegistrationMetadata || {};
-      const trackedEntityTypeNameLC = trackedEntityType.name.toLocaleLowerCase();
+    ({
+        theme,
+        onSave,
+        teiRegistrationMetadata = {},
+        duplicatesReviewPageSize,
+        renderDuplicatesDialogActions,
+        renderDuplicatesCardActions,
+        ExistingUniqueValueDialogActions,
+    }: Props) => {
+        const { id: orgUnitId } = useCurrentOrgUnitInfo();
+        const fieldOptions = { theme, fieldLabelMediaBasedClass: teiClasses.fieldLabelMediaBased };
+        const { trackedEntityType } = teiRegistrationMetadata || {};
+        const trackedEntityTypeNameLC = trackedEntityType.name.toLocaleLowerCase();
 
-      return (
-          // $FlowFixMe - flow error will be resolved when rewriting relationship metadata fetching
-          <TeiRegistrationEntry
-              id={DATA_ENTRY_ID}
-              teiRegistrationMetadata={teiRegistrationMetadata}
-              selectedScopeId={teiRegistrationMetadata.form.id}
-              saveButtonText={i18n.t('Save new {{trackedEntityTypeName}} and link', {
-                  trackedEntityTypeName: trackedEntityTypeNameLC, interpolation: { escapeValue: false },
-              })}
-              fieldOptions={fieldOptions}
-              onSave={onSave}
-              duplicatesReviewPageSize={duplicatesReviewPageSize}
-              renderDuplicatesDialogActions={renderDuplicatesDialogActions}
-              renderDuplicatesCardActions={renderDuplicatesCardActions}
-              ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
-          />
-      );
-  };
+        return (
+            // $FlowFixMe - flow error will be resolved when rewriting relationship metadata fetching
+            <TeiRegistrationEntry
+                id={DATA_ENTRY_ID}
+                orgUnitId={orgUnitId}
+                teiRegistrationMetadata={teiRegistrationMetadata}
+                selectedScopeId={teiRegistrationMetadata.form.id}
+                saveButtonText={i18n.t('Save new {{trackedEntityTypeName}} and link', {
+                    trackedEntityTypeName: trackedEntityTypeNameLC, interpolation: { escapeValue: false },
+                })}
+                fieldOptions={fieldOptions}
+                onSave={onSave}
+                duplicatesReviewPageSize={duplicatesReviewPageSize}
+                renderDuplicatesDialogActions={renderDuplicatesDialogActions}
+                renderDuplicatesCardActions={renderDuplicatesCardActions}
+                ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
+            />
+        );
+    };
 
 export const RelationshipTrackedEntityInstance = withTheme()(RelationshipTrackedEntityInstancePlain);
diff --git a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types.js b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types.js
index a3ac0f0ae5..20f5463e75 100644
--- a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types.js
+++ b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types.js
@@ -3,16 +3,18 @@ import type { Node } from 'react';
 import type { TeiRegistration } from '../../../../../../metaData';
 import type { RenderCustomCardActions } from '../../../../../CardList';
 import type {
-    SaveForEnrollmentAndTeiRegistration,
     ExistingUniqueValueDialogActionsComponent,
 } from '../../../../../DataEntries';
+import type {
+    TeiPayload,
+} from '../../../../common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types';
 
 export type Props = {|
     theme: Theme,
-    onSave: SaveForEnrollmentAndTeiRegistration,
+    onSave: (TeiPayload) => void,
     teiRegistrationMetadata?: TeiRegistration,
     duplicatesReviewPageSize: number,
     renderDuplicatesCardActions?: RenderCustomCardActions,
-    renderDuplicatesDialogActions?: (onCancel: () => void, onSave: SaveForEnrollmentAndTeiRegistration) => Node,
+    renderDuplicatesDialogActions?: (onCancel: () => void, onSave: (TeiPayload) => void) => Node,
     ExistingUniqueValueDialogActions: ExistingUniqueValueDialogActionsComponent,
 |};
diff --git a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegisterTei.container.js b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegisterTei.container.js
index 991425a334..cf9de6695b 100644
--- a/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegisterTei.container.js
+++ b/src/core_modules/capture-core/components/Pages/NewRelationship/RegisterTei/RegisterTei.container.js
@@ -34,6 +34,7 @@ export const RegisterTei = ({ onLink, onSave, onGetUnsavedAttributeValues }: Own
             trackedEntityName={trackedEntityName}
             newRelationshipProgramId={newRelationshipProgramId}
             error={error}
-        />);
+        />
+    );
 };
 
diff --git a/src/core_modules/capture-core/components/Pages/NewRelationship/TeiRelationship/SearchResults/TeiRelationshipSearchResults.component.js b/src/core_modules/capture-core/components/Pages/NewRelationship/TeiRelationship/SearchResults/TeiRelationshipSearchResults.component.js
index b748347358..3cced06ccf 100644
--- a/src/core_modules/capture-core/components/Pages/NewRelationship/TeiRelationship/SearchResults/TeiRelationshipSearchResults.component.js
+++ b/src/core_modules/capture-core/components/Pages/NewRelationship/TeiRelationship/SearchResults/TeiRelationshipSearchResults.component.js
@@ -13,6 +13,7 @@ import { SearchResultsHeader } from '../../../../SearchResultsHeader';
 import { type SearchGroup } from '../../../../../metaData';
 import { ResultsPageSizeContext } from '../../../shared-contexts';
 import type { ListItem } from '../../../../CardList/CardList.types';
+import { convertClientValuesToServer } from '../../../../../converters/helpers/clientToServer';
 
 const SearchResultsPager = withNavigation()(Pagination);
 
@@ -77,7 +78,8 @@ class TeiRelationshipSearchResultsPlain extends React.Component<Props> {
     }
 
     onAddRelationship = (item) => {
-        this.props.onAddRelationship(item.id, item.values);
+        const serverValues = convertClientValuesToServer(item.values, this.props.searchGroup.searchForm);
+        this.props.onAddRelationship(item.id, serverValues);
     }
 
     renderResults = () => {
diff --git a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/useCommonEnrollmentDomainData/useCommonEnrollmentDomainData.types.js b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/useCommonEnrollmentDomainData/useCommonEnrollmentDomainData.types.js
index fb48b2a555..6ee03b475f 100644
--- a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/useCommonEnrollmentDomainData/useCommonEnrollmentDomainData.types.js
+++ b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/useCommonEnrollmentDomainData/useCommonEnrollmentDomainData.types.js
@@ -1,5 +1,4 @@
 // @flow
-
 export type DataValue = {
     dataElement: string,
     value: string,
@@ -49,6 +48,7 @@ export type AttributeValue = {|
     value: string,
 |};
 
+
 export type Output = {|
     error?: any,
     enrollment?: EnrollmentData,
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.component.js
new file mode 100644
index 0000000000..2dbf0c7a20
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.component.js
@@ -0,0 +1,42 @@
+// @flow
+import React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { withTheme } from '@material-ui/core/styles';
+import { DATA_ENTRY_ID } from '../../registerTei.const';
+import enrollmentClasses from './enrollment.module.css';
+import { EnrollmentRegistrationEntry } from '../../../../../../DataEntries';
+import type { Props } from './dataEntryEnrollment.types';
+
+const NewEnrollmentRelationshipPlain =
+    ({
+        theme,
+        onSave,
+        programId,
+        orgUnitId,
+        duplicatesReviewPageSize,
+        renderDuplicatesDialogActions,
+        renderDuplicatesCardActions,
+        ExistingUniqueValueDialogActions,
+    }: Props) => {
+        const fieldOptions = { theme, fieldLabelMediaBasedClass: enrollmentClasses.fieldLabelMediaBased };
+
+        return (
+            <EnrollmentRegistrationEntry
+                id={DATA_ENTRY_ID}
+                selectedScopeId={programId}
+                orgUnitId={orgUnitId}
+                fieldOptions={fieldOptions}
+                saveButtonText={(trackedEntityTypeName: string) => i18n.t('Save new {{trackedEntityTypeName}} and link', {
+                    trackedEntityTypeName,
+                    interpolation: { escapeValue: false },
+                })}
+                onSave={onSave}
+                duplicatesReviewPageSize={duplicatesReviewPageSize}
+                renderDuplicatesDialogActions={renderDuplicatesDialogActions}
+                renderDuplicatesCardActions={renderDuplicatesCardActions}
+                ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
+            />
+        );
+    };
+
+export const NewEnrollmentRelationship = withTheme()(NewEnrollmentRelationshipPlain);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.container.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.container.js
new file mode 100644
index 0000000000..507e09e61b
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/DataEntryEnrollment.container.js
@@ -0,0 +1,23 @@
+// @flow
+import { connect } from 'react-redux';
+import { makeEnrollmentMetadataSelector } from './enrollment.selectors';
+import { NewEnrollmentRelationship } from './DataEntryEnrollment.component';
+
+const makeMapStateToProps = () => {
+    const enrollmentMetadataSelector = makeEnrollmentMetadataSelector();
+
+    const mapStateToProps = (state: ReduxState) => {
+        const enrollmentMetadata = enrollmentMetadataSelector(state);
+
+        return {
+            enrollmentMetadata,
+            programId: state.newRelationshipRegisterTei.programId,
+            orgUnitId: state.newRelationshipRegisterTei.orgUnit.id,
+        };
+    };
+    // $FlowFixMe[not-an-object] automated comment
+    return mapStateToProps;
+};
+
+// $FlowFixMe
+export const DataEntryEnrollment = connect(makeMapStateToProps, () => ({}))(NewEnrollmentRelationship);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/dataEntryEnrollment.types.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/dataEntryEnrollment.types.js
new file mode 100644
index 0000000000..de3f6cee6f
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/dataEntryEnrollment.types.js
@@ -0,0 +1,20 @@
+// @flow
+import type { Node } from 'react';
+import type { Enrollment } from '../../../../../../../metaData';
+import type { RenderCustomCardActions } from '../../../../../../CardList';
+import type {
+    SaveForEnrollmentAndTeiRegistration,
+    ExistingUniqueValueDialogActionsComponent,
+} from '../../../../../../DataEntries';
+
+export type Props = {|
+    theme: Theme,
+    programId: string,
+    orgUnitId: string,
+    enrollmentMetadata?: Enrollment,
+    onSave: SaveForEnrollmentAndTeiRegistration,
+    duplicatesReviewPageSize: number,
+    renderDuplicatesCardActions?: RenderCustomCardActions,
+    renderDuplicatesDialogActions?: (onCancel: () => void, onSave: SaveForEnrollmentAndTeiRegistration) => Node,
+    ExistingUniqueValueDialogActions: ExistingUniqueValueDialogActionsComponent,
+|};
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/enrollment.module.css b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/enrollment.module.css
new file mode 100644
index 0000000000..953ddeae59
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/enrollment.module.css
@@ -0,0 +1,11 @@
+@media screen and (max-width: 811px) and (min-width: 564px) {
+    .fieldLabelMediaBased {
+        padding-top: 0px !important;
+    }
+}
+
+@media screen and (max-width: 451px) {
+    .fieldLabelMediaBased {
+        padding-top: 0px !important;
+    }
+}
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/enrollment.selectors.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/enrollment.selectors.js
new file mode 100644
index 0000000000..fd9331f6a6
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/enrollment.selectors.js
@@ -0,0 +1,23 @@
+// @flow
+import { createSelector } from 'reselect';
+import type { TrackerProgram } from '../../../../../../../metaData';
+import { getProgramFromProgramIdThrowIfNotFound } from '../../../../../../../metaData';
+
+const programIdSelector = state => state.newRelationshipRegisterTei.programId;
+
+// $FlowFixMe
+export const makeEnrollmentMetadataSelector = () => createSelector(
+    programIdSelector,
+    (programId: string) => {
+        let program: TrackerProgram;
+        try {
+            // $FlowFixMe[incompatible-type] automated comment
+            program = getProgramFromProgramIdThrowIfNotFound(programId);
+        } catch (error) {
+            return null;
+        }
+
+        // $FlowFixMe
+        return program.enrollment;
+    },
+);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/index.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/index.js
new file mode 100644
index 0000000000..0ecadd4fab
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/Enrollment/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { DataEntryEnrollment } from './DataEntryEnrollment.container';
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/RegisterTeiDataEntry.actions.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/RegisterTeiDataEntry.actions.js
new file mode 100644
index 0000000000..8cb9a9b5fa
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/RegisterTeiDataEntry.actions.js
@@ -0,0 +1,14 @@
+// @flow
+import { actionCreator } from '../../../../../../actions/actions.utils';
+
+export const actionTypes = {
+    DATA_ENTRY_OPEN: 'NewRelationshipRegisterTeiDataEntryOpen',
+    DATA_ENTRY_OPEN_CANCELLED: 'NewRelationshopRegisterTeiDataEntryOpenCancelled',
+    DATA_ENTRY_OPEN_FAILED: 'NewRelationshopRegisterTeiDataEntryOpenFailed',
+};
+
+export const openDataEntry = () =>
+    actionCreator(actionTypes.DATA_ENTRY_OPEN)();
+
+export const openDataEntryFailed = (errorMessage: string) =>
+    actionCreator(actionTypes.DATA_ENTRY_OPEN_FAILED)({ errorMessage });
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/RegisterTeiDataEntry.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/RegisterTeiDataEntry.component.js
new file mode 100644
index 0000000000..292a1d1530
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/RegisterTeiDataEntry.component.js
@@ -0,0 +1,37 @@
+// @flow
+import * as React from 'react';
+import { DataEntryEnrollment } from './Enrollment';
+import { DataEntryTrackedEntityInstance } from './TrackedEntityInstance';
+
+type Props = {
+    showDataEntry: boolean,
+    programId: string,
+    onSaveWithoutEnrollment: () => void,
+    onSaveWithEnrollment: () => void,
+};
+
+export class RegisterTeiDataEntryComponent extends React.Component<Props> {
+    render() {
+        const { showDataEntry, programId, onSaveWithoutEnrollment, onSaveWithEnrollment, ...passOnProps } = this.props;
+
+        if (!showDataEntry) {
+            return null;
+        }
+
+        if (programId) {
+            return (
+                <DataEntryEnrollment
+                    {...passOnProps}
+                    onSave={onSaveWithEnrollment}
+                />
+            );
+        }
+
+        return (
+            <DataEntryTrackedEntityInstance
+                {...passOnProps}
+                onSave={onSaveWithoutEnrollment}
+            />
+        );
+    }
+}
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/RegisterTeiDataEntry.container.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/RegisterTeiDataEntry.container.js
new file mode 100644
index 0000000000..e5e7d50e76
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/RegisterTeiDataEntry.container.js
@@ -0,0 +1,20 @@
+// @flow
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { RegisterTeiDataEntryComponent } from './RegisterTeiDataEntry.component';
+import { withErrorMessageHandler } from '../../../../../../HOC/withErrorMessageHandler';
+
+const mapStateToProps = (state: ReduxState) => ({
+    showDataEntry: state.newRelationshipRegisterTei.orgUnit,
+    error: state.newRelationshipRegisterTei.dataEntryError,
+    programId: state.newRelationshipRegisterTei.programId,
+});
+
+const mapDispatchToProps = () => ({});
+
+export const RegisterTeiDataEntry =
+  compose(
+      // $FlowFixMe[missing-annot] automated comment
+      connect(mapStateToProps, mapDispatchToProps),
+      withErrorMessageHandler(),
+  )(RegisterTeiDataEntryComponent);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/DataEntryTrackedEntityInstance.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/DataEntryTrackedEntityInstance.js
new file mode 100644
index 0000000000..c455e3616d
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/DataEntryTrackedEntityInstance.js
@@ -0,0 +1,52 @@
+// @flow
+import React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { withTheme } from '@material-ui/core';
+import { DATA_ENTRY_ID } from '../../registerTei.const';
+import teiClasses from './trackedEntityInstance.module.css';
+import { TeiRegistrationEntry } from '../../../../../../DataEntries';
+import type { Props } from './dataEntryTrackedEntityInstance.types';
+import { getTeiRegistrationMetadata } from './tei.selectors';
+import { useLocationQuery } from '../../../../../../../utils/routing';
+
+const RelationshipTrackedEntityInstancePlain =
+    ({
+        theme,
+        onSave,
+        trackedEntityTypeId,
+        duplicatesReviewPageSize,
+        renderDuplicatesDialogActions,
+        renderDuplicatesCardActions,
+        ExistingUniqueValueDialogActions,
+    }: Props) => {
+        const { orgUnitId } = useLocationQuery();
+        const fieldOptions = { theme, fieldLabelMediaBasedClass: teiClasses.fieldLabelMediaBased };
+        const teiRegistrationMetadata = getTeiRegistrationMetadata(trackedEntityTypeId);
+        const { trackedEntityType } = teiRegistrationMetadata || {};
+        const trackedEntityTypeNameLC = trackedEntityType.name.toLocaleLowerCase();
+
+        if (!teiRegistrationMetadata && !teiRegistrationMetadata?.form) {
+            return null;
+        }
+
+        return (
+            // $FlowFixMe - flow error will be resolved when rewriting relationship metadata fetching
+            <TeiRegistrationEntry
+                id={DATA_ENTRY_ID}
+                orgUnitId={orgUnitId}
+                teiRegistrationMetadata={teiRegistrationMetadata}
+                selectedScopeId={teiRegistrationMetadata.form.id}
+                saveButtonText={i18n.t('Save new {{trackedEntityTypeName}} and link', {
+                    trackedEntityTypeName: trackedEntityTypeNameLC, interpolation: { escapeValue: false },
+                })}
+                fieldOptions={fieldOptions}
+                onSave={onSave}
+                duplicatesReviewPageSize={duplicatesReviewPageSize}
+                renderDuplicatesDialogActions={renderDuplicatesDialogActions}
+                renderDuplicatesCardActions={renderDuplicatesCardActions}
+                ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
+            />
+        );
+    };
+
+export const DataEntryTrackedEntityInstance = withTheme()(RelationshipTrackedEntityInstancePlain);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types.js
new file mode 100644
index 0000000000..b4f9617052
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/dataEntryTrackedEntityInstance.types.js
@@ -0,0 +1,30 @@
+// @flow
+import type { Node } from 'react';
+import type { TeiRegistration } from '../../../../../../../metaData';
+import type { RenderCustomCardActions } from '../../../../../../CardList';
+import type {
+    ExistingUniqueValueDialogActionsComponent,
+} from '../../../../../../DataEntries';
+
+export type TeiPayload = {|
+    trackedEntity: string,
+    trackedEntityType: string,
+    enrollments: [],
+    orgUnit: string,
+    geometry: ?{ coordinates: any, type: any },
+    attributes: Array<{|
+        attribute: string,
+        value: any,
+    |}>,
+|}
+
+export type Props = {|
+    theme: Theme,
+    trackedEntityTypeId: string,
+    onSave: TeiPayload => void,
+    teiRegistrationMetadata?: TeiRegistration,
+    duplicatesReviewPageSize: number,
+    renderDuplicatesCardActions?: RenderCustomCardActions,
+    renderDuplicatesDialogActions?: (onCancel: () => void, onSave: (TeiPayload) => void) => Node,
+    ExistingUniqueValueDialogActions: ExistingUniqueValueDialogActionsComponent,
+|};
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/index.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/index.js
new file mode 100644
index 0000000000..5bb8975389
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { DataEntryTrackedEntityInstance } from './DataEntryTrackedEntityInstance';
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/tei.selectors.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/tei.selectors.js
new file mode 100644
index 0000000000..2363e24584
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/tei.selectors.js
@@ -0,0 +1,18 @@
+// @flow
+import log from 'loglevel';
+import { errorCreator } from 'capture-core-utils';
+import type { TrackedEntityType } from '../../../../../../../metaData';
+import { getTrackedEntityTypeThrowIfNotFound } from '../../../../../../../metaData';
+
+// $FlowFixMe
+export const getTeiRegistrationMetadata = (TETypeId: string) => {
+    let TEType: TrackedEntityType;
+    try {
+        TEType = getTrackedEntityTypeThrowIfNotFound(TETypeId);
+    } catch (error) {
+        log.error(errorCreator('Could not get TrackedEntityType for id')({ TETypeId }));
+        return null;
+    }
+
+    return TEType.teiRegistration;
+};
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/trackedEntityInstance.module.css b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/trackedEntityInstance.module.css
new file mode 100644
index 0000000000..8d899a1886
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/DataEntry/TrackedEntityInstance/trackedEntityInstance.module.css
@@ -0,0 +1,11 @@
+@media screen and (max-width: 811px) and (min-width: 564px) {
+    .fieldLabelMediaBased {
+        padding-top: 0px !important;
+    }
+}
+
+@media screen and (max-width: 451px) {
+    .fieldLabelMediaBased {
+        padding-top: 0px !important;
+    }
+}
\ No newline at end of file
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegisterTei.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegisterTei.component.js
new file mode 100644
index 0000000000..9a9a7070af
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegisterTei.component.js
@@ -0,0 +1,130 @@
+// @flow
+import React, { type ComponentType, useContext, useCallback } from 'react';
+import { compose } from 'redux';
+import { withStyles } from '@material-ui/core/styles';
+import i18n from '@dhis2/d2-i18n';
+import { Button } from '@dhis2/ui';
+import { RegisterTeiDataEntry } from './DataEntry/RegisterTeiDataEntry.container';
+import { RegistrationSection } from './RegistrationSection';
+import { DataEntryWidgetOutput } from '../../../../DataEntryWidgetOutput/DataEntryWidgetOutput.container';
+import { ResultsPageSizeContext } from '../../../shared-contexts';
+import type { ComponentProps } from './RegisterTei.types';
+import { withErrorMessageHandler } from '../../../../../HOC';
+
+const getStyles = () => ({
+    container: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    leftContainer: {
+        flexGrow: 10,
+        flexBasis: 0,
+        margin: 8,
+    },
+});
+
+const CardListButton = (({ teiId, values, handleOnClick }) => (
+    <Button
+        small
+        dataTest="view-dashboard-button"
+        onClick={() => { handleOnClick(teiId, values); }}
+    >
+        {i18n.t('Link')}
+    </Button>
+));
+
+const DialogButtons = ({ onCancel, onSave, trackedEntityName }) => (
+    <>
+        <Button
+            onClick={onCancel}
+            secondary
+        >
+            {i18n.t('Cancel')}
+        </Button>
+        <div style={{ marginLeft: 16 }}>
+            <Button
+                dataTest="create-as-new-person"
+                onClick={onSave}
+                primary
+            >
+                {i18n.t('Save as new {{trackedEntityName}}', {
+                    trackedEntityName, interpolation: { escapeValue: false },
+                })}
+            </Button>
+        </div>
+    </>
+);
+
+const RegisterTeiPlain = ({
+    dataEntryId,
+    onLink,
+    onSaveWithoutEnrollment,
+    onSaveWithEnrollment,
+    onGetUnsavedAttributeValues,
+    trackedEntityName,
+    trackedEntityTypeId,
+    selectedScopeId,
+    classes,
+}: ComponentProps) => {
+    const { resultsPageSize } = useContext(ResultsPageSizeContext);
+
+    const renderDuplicatesCardActions = useCallback(({ item }) => (
+        <CardListButton
+            teiId={item.id}
+            values={item.values}
+            handleOnClick={onLink}
+        />
+    ), [onLink]);
+
+    const renderDuplicatesDialogActions = useCallback((onCancel, onSaveArgument) => (
+        <DialogButtons
+            onCancel={onCancel}
+            onSave={onSaveArgument}
+            trackedEntityName={trackedEntityName}
+        />
+    ), [trackedEntityName]);
+
+    const ExistingUniqueValueDialogActions = useCallback(({ teiId, attributeValues }) => (
+        <Button
+            dataTest="existing-unique-value-link-tei-button"
+            primary
+            onClick={() => { onLink(teiId, attributeValues); }}
+        >
+            {i18n.t('Link')}
+        </Button>
+    ), [onLink]);
+
+    return (
+        <div className={classes.container}>
+            <div className={classes.leftContainer}>
+                <RegistrationSection
+                    trackedEntityTypeId={trackedEntityTypeId}
+                />
+                <RegisterTeiDataEntry
+                    onLink={onLink}
+                    onSaveWithoutEnrollment={onSaveWithoutEnrollment}
+                    onSaveWithEnrollment={onSaveWithEnrollment}
+                    trackedEntityTypeId={trackedEntityTypeId}
+                    onGetUnsavedAttributeValues={onGetUnsavedAttributeValues}
+                    duplicatesReviewPageSize={resultsPageSize}
+                    renderDuplicatesDialogActions={renderDuplicatesDialogActions}
+                    renderDuplicatesCardActions={renderDuplicatesCardActions}
+                    ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
+                />
+            </div>
+            <DataEntryWidgetOutput
+                dataEntryId={dataEntryId}
+                selectedScopeId={selectedScopeId}
+                renderCardActions={({ item }) =>
+                    <CardListButton teiId={item.id} values={item.values} handleOnClick={onLink} />
+                }
+            />
+        </div>
+    );
+};
+
+export const RegisterTeiComponent: ComponentType<$Diff<ComponentProps, CssClasses>> =
+  compose(
+      withErrorMessageHandler(),
+      withStyles(getStyles),
+  )(RegisterTeiPlain);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegisterTei.container.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegisterTei.container.js
new file mode 100644
index 0000000000..773d0c2778
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegisterTei.container.js
@@ -0,0 +1,34 @@
+// @flow
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { RegisterTeiComponent } from './RegisterTei.component';
+import type { ContainerProps } from './RegisterTei.types';
+import { useScopeInfo } from '../../../../../hooks';
+
+export const RegisterTei = ({
+    onLink,
+    onSave,
+    onGetUnsavedAttributeValues,
+    trackedEntityTypeId,
+    suggestedProgramId,
+}: ContainerProps) => {
+    const dataEntryId = 'relationship';
+    const error = useSelector(({ newRelationshipRegisterTei }) => (newRelationshipRegisterTei.error));
+    const selectedScopeId = suggestedProgramId || trackedEntityTypeId;
+    const { trackedEntityName } = useScopeInfo(selectedScopeId);
+
+    return (
+        <RegisterTeiComponent
+            dataEntryId={dataEntryId}
+            onLink={onLink}
+            onSaveWithoutEnrollment={onSave}
+            onSaveWithEnrollment={onSave}
+            onGetUnsavedAttributeValues={onGetUnsavedAttributeValues}
+            trackedEntityName={trackedEntityName}
+            selectedScopeId={selectedScopeId}
+            error={error}
+            trackedEntityTypeId={trackedEntityTypeId}
+        />
+    );
+};
+
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegisterTei.types.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegisterTei.types.js
new file mode 100644
index 0000000000..0de2b570ba
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegisterTei.types.js
@@ -0,0 +1,23 @@
+// @flow
+export type SharedProps = {|
+    onLink: (teiId: string, values: Object) => void,
+    onGetUnsavedAttributeValues?: ?Function,
+    trackedEntityTypeId: string,
+|};
+
+export type ContainerProps = {|
+    suggestedProgramId: string,
+    onSave: (teiPayload: Object) => void,
+    ...SharedProps,
+|};
+
+export type ComponentProps = {|
+    selectedScopeId: string,
+    error: string,
+    dataEntryId: string,
+    trackedEntityName: ?string,
+    onSaveWithEnrollment: () => void,
+    onSaveWithoutEnrollment: () => void,
+    ...SharedProps,
+    ...CssClasses,
+|};
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ComposedProgramSelector.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ComposedProgramSelector.component.js
new file mode 100644
index 0000000000..f815b36498
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ComposedProgramSelector.component.js
@@ -0,0 +1,157 @@
+// @flow
+import * as React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import i18n from '@dhis2/d2-i18n';
+import { LinkButton } from '../../../../../../Buttons/LinkButton.component';
+import { ProgramFilterer } from '../../../../../../ProgramFilterer';
+import type { Program } from '../../../../../../../metaData';
+import { TrackerProgram } from '../../../../../../../metaData';
+import {
+    VirtualizedSelectField,
+    withSelectTranslations,
+    withFocusSaver,
+    withDefaultFieldContainer,
+    withLabel,
+    withFilterProps,
+} from '../../../../../../FormFields/New';
+import { NonBundledDhis2Icon } from '../../../../../../NonBundledDhis2Icon';
+
+const getStyles = (theme: Theme) => ({
+    iconContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        paddingRight: 5,
+    },
+    icon: {
+        width: 22,
+        height: 22,
+        borderRadius: 2,
+    },
+    isFilteredContainer: {
+        fontSize: 12,
+        color: theme.palette.grey.dark,
+        paddingTop: 5,
+    },
+    isFilteredLink: {
+        paddingLeft: 2,
+        backgroundColor: 'inherit',
+    },
+});
+
+type Option = {
+    label: string,
+    value: string,
+    iconLeft?: ?React.Node,
+};
+
+type Props = {
+    orgUnitIds: ?Array<string>,
+    value: string,
+    trackedEntityTypeId: string,
+    classes: Object,
+    onUpdateSelectedProgram: (programId: string) => void,
+    onClearFilter: () => void,
+};
+
+class ProgramSelector extends React.Component<Props> {
+    baseLineFilter = (program: Program) => {
+        const { trackedEntityTypeId } = this.props;
+
+        const isValid = program instanceof TrackerProgram &&
+        program.trackedEntityType.id === trackedEntityTypeId &&
+        program.access.data.write;
+
+        return isValid;
+    }
+
+    getOptionsFromPrograms = (programs: Array<Program>): Array<Option> =>
+        programs
+            .map(program => ({
+                label: program.name,
+                value: program.id,
+                iconLeft: this.getProgramIcon(program),
+            }));
+
+    getProgramIcon({ icon: { color, name } = {}, name: programName }: Program) {
+        const { classes } = this.props;
+
+        return (
+            <div
+                className={classes.iconContainer}
+            >
+                <NonBundledDhis2Icon
+                    name={name || 'clinical_fe_outline'}
+                    color={color || '#e0e0e0'}
+                    alternativeText={programName}
+                    width={22}
+                    height={22}
+                    cornerRadius={2}
+                />
+            </div>
+        );
+    }
+
+    renderIsFilteredText() {
+        const { classes, onClearFilter } = this.props;
+        return (
+            <div
+                className={classes.isFilteredContainer}
+            >
+                {i18n.t('Some programs are being filtered.')}
+                <LinkButton
+                    className={classes.isFilteredLink}
+                    onClick={onClearFilter}
+                >
+                    {i18n.t('Show all')}
+                </LinkButton>
+            </div>
+        );
+    }
+
+    render() {
+        const { classes, orgUnitIds, onUpdateSelectedProgram, onClearFilter, ...passOnProps } = this.props;
+        return (
+            <ProgramFilterer
+                orgUnitIds={orgUnitIds}
+                baselineFilter={this.baseLineFilter}
+            >
+                {
+                    (programs, isFiltered) => (
+                        <div>
+                            {/* $FlowFixMe[cannot-spread-inexact] automated
+                              * comment */}
+                            <VirtualizedSelectField
+                                options={this.getOptionsFromPrograms(programs)}
+                                required={false}
+                                onSelect={onUpdateSelectedProgram}
+                                {...passOnProps}
+                            />
+                            {isFiltered ? this.renderIsFilteredText() : null }
+                        </div>
+                    )
+                }
+            </ProgramFilterer>
+        );
+    }
+}
+
+export const ComposedProgramSelector =
+    withFocusSaver()(
+        withDefaultFieldContainer()(
+            withLabel({
+                onGetCustomFieldLabeClass: (props: Object) =>
+                    props.programLabelClass,
+            })(
+                withFilterProps((props: Object) => {
+                    const { programLabelClass, ...passOnProps } = props;
+                    return passOnProps;
+                })(
+                    withSelectTranslations()(
+                        withStyles(getStyles)(
+                            ProgramSelector,
+                        ),
+                    ),
+                ),
+            ),
+        ),
+    );
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.component.js
new file mode 100644
index 0000000000..d8445f9570
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.component.js
@@ -0,0 +1,44 @@
+// @flow
+import * as React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import i18n from '@dhis2/d2-i18n';
+import { ComposedProgramSelector } from './ComposedProgramSelector.component';
+
+const getStyles = (theme: Theme) => ({
+    programLabel: {
+        paddingTop: '10px',
+        [theme.breakpoints.down(523)]: {
+            paddingTop: '0px !important',
+        },
+    },
+});
+
+type Props = {
+    classes: Object,
+};
+
+class ProgramSelectorPlain extends React.Component<Props> {
+    static baseComponentStyles = {
+        labelContainerStyle: {
+            flexBasis: 200,
+        },
+        inputContainerStyle: {
+            flexBasis: 150,
+        },
+    };
+
+    render() {
+        const { classes, ...passOnProps } = this.props;
+        return (
+            // $FlowFixMe[cannot-spread-inexact] automated comment
+            <ComposedProgramSelector
+                dataTest="relationship-register-tei-program-selector"
+                styles={ProgramSelectorPlain.baseComponentStyles}
+                programLabelClass={classes.programLabel}
+                label={i18n.t('Program')}
+                {...passOnProps}
+            />
+        );
+    }
+}
+export const ProgramSelectorComponent = withStyles(getStyles)(ProgramSelectorPlain);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.container.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.container.js
new file mode 100644
index 0000000000..000d9a9761
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/ProgramSelector.container.js
@@ -0,0 +1,22 @@
+// @flow
+import { connect } from 'react-redux';
+import { ProgramSelectorComponent } from './ProgramSelector.component';
+import { changeProgram, clearProgramFilter } from '../registrationSection.actions';
+
+const mapStateToProps = (state: ReduxState) => ({
+    orgUnitIds: state.newRelationshipRegisterTei.orgUnit ? [state.newRelationshipRegisterTei.orgUnit.id] : null,
+    value: state.newRelationshipRegisterTei.programId,
+});
+
+const mapDispatchToProps = (dispatch: ReduxDispatch) => ({
+    onUpdateSelectedProgram: (programId: string) => {
+        dispatch(changeProgram(programId));
+    },
+    onClearFilter: () => {
+        dispatch(clearProgramFilter());
+    },
+});
+
+// $FlowSuppress
+// $FlowFixMe[missing-annot] automated comment
+export const ProgramSelector = connect(mapStateToProps, mapDispatchToProps)(ProgramSelectorComponent);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/index.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/index.js
new file mode 100644
index 0000000000..bca22fa709
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/ProgramSelector/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { ProgramSelector } from './ProgramSelector.container';
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/ComposedRegUnitSelector.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/ComposedRegUnitSelector.component.js
new file mode 100644
index 0000000000..c512ac71fe
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/ComposedRegUnitSelector.component.js
@@ -0,0 +1,55 @@
+// @flow
+import * as React from 'react';
+import {
+    withDefaultShouldUpdateInterface,
+    withDefaultFieldContainer,
+    withLabel,
+    withInternalChangeHandler,
+    withFilterProps,
+    SingleOrgUnitSelectField,
+    withOrgUnitFieldImplicitRootsFilterHandler,
+    orgUnitFieldScopes,
+} from '../../../../../../FormFields/New';
+
+const OrgUnitFieldImplicitRootsFilterHandlerHOC =
+    withOrgUnitFieldImplicitRootsFilterHandler()(SingleOrgUnitSelectField);
+
+
+type Props = {
+    onUpdateSelectedOrgUnit: (orgUnit: ?Object) => void,
+};
+
+class OrgUnitFieldWrapper extends React.Component<Props> {
+    render() {
+        const { onUpdateSelectedOrgUnit, ...passOnProps } = this.props;
+        return (
+            // $FlowFixMe[cannot-spread-inexact] automated comment
+            <OrgUnitFieldImplicitRootsFilterHandlerHOC
+                onSelect={onUpdateSelectedOrgUnit}
+                scope={orgUnitFieldScopes.USER_CAPTURE}
+                maxTreeHeight={200}
+                {...passOnProps}
+            />
+        );
+    }
+}
+
+export const ComposedRegUnitSelector =
+    withDefaultShouldUpdateInterface()(
+        withDefaultFieldContainer()(
+            withLabel({
+                onGetUseVerticalOrientation: (props: Object) => props.formHorizontal,
+                onGetCustomFieldLabeClass: (props: Object) =>
+                    props.labelClass,
+            })(
+                withFilterProps((props: Object) => {
+                    const { labelClass, ...passOnProps } = props;
+                    return passOnProps;
+                })(
+                    withInternalChangeHandler()(
+                        OrgUnitFieldWrapper,
+                    ),
+                ),
+            ),
+        ),
+    );
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js
new file mode 100644
index 0000000000..e75b8513ea
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.component.js
@@ -0,0 +1,67 @@
+// @flow
+/* eslint-disable react/no-multi-comp */
+import * as React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { withStyles } from '@material-ui/core/styles';
+import { ComposedRegUnitSelector } from './ComposedRegUnitSelector.component';
+import { getProgramFromProgramIdThrowIfNotFound } from '../../../../../../../metaData';
+
+const getStyles = (theme: Theme) => ({
+    label: {
+        paddingTop: '10px',
+        [theme.breakpoints.down(523)]: {
+            paddingTop: '0px !important',
+        },
+    },
+});
+
+type Props = {
+    selectedProgramId: ?string,
+    classes: Object,
+    onUpdateSelectedOrgUnit: (orgUnit: ?Object, resetProgramSelection: boolean) => void,
+    programId: string,
+};
+
+class RegUnitSelectorPlain extends React.Component<Props> {
+    static baseComponentStyles = {
+        labelContainerStyle: {
+            flexBasis: 200,
+        },
+        inputContainerStyle: {
+            flexBasis: 150,
+        },
+    };
+
+    handleUpdateSelectedOrgUnit = (orgUnit: Object) => {
+        const { programId, onUpdateSelectedOrgUnit } = this.props;
+        if (!programId || !orgUnit) {
+            onUpdateSelectedOrgUnit(orgUnit, false);
+            return;
+        }
+
+        let program;
+        try {
+            program = getProgramFromProgramIdThrowIfNotFound(programId);
+        } catch (error) {
+            onUpdateSelectedOrgUnit(orgUnit, true);
+            return;
+        }
+
+        onUpdateSelectedOrgUnit(orgUnit, program.organisationUnits ? !program.organisationUnits[orgUnit.id] : false);
+    }
+
+    render() {
+        const { classes, onUpdateSelectedOrgUnit, programId, ...passOnProps } = this.props;
+        return (
+            // $FlowFixMe[cannot-spread-inexact] automated comment
+            <ComposedRegUnitSelector
+                labelClass={classes.label}
+                label={i18n.t('Organisation Unit')}
+                styles={RegUnitSelectorPlain.baseComponentStyles}
+                onUpdateSelectedOrgUnit={this.handleUpdateSelectedOrgUnit}
+                {...passOnProps}
+            />
+        );
+    }
+}
+export const RegUnitSelectorComponent = withStyles(getStyles)(RegUnitSelectorPlain);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.container.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.container.js
new file mode 100644
index 0000000000..2c5cf42268
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/RegUnitSelector.container.js
@@ -0,0 +1,22 @@
+// @flow
+import { connect } from 'react-redux';
+import { RegUnitSelectorComponent } from './RegUnitSelector.component';
+import { changeOrgUnit, searchOrgUnitFailed } from '../registrationSection.actions';
+
+const mapStateToProps = (state: ReduxState) => ({
+    value: state.newRelationshipRegisterTei.orgUnit,
+    programId: state.newRelationshipRegisterTei.programId,
+});
+
+const mapDispatchToProps = (dispatch: ReduxDispatch) => ({
+    onUpdateSelectedOrgUnit: (orgUnit: ?Object, resetProgramSelection: boolean) => {
+        dispatch(changeOrgUnit(orgUnit, resetProgramSelection));
+    },
+    onSearchError: () => {
+        dispatch(searchOrgUnitFailed());
+    },
+});
+
+// $FlowSuppress
+// $FlowFixMe[missing-annot] automated comment
+export const RegUnitSelector = connect(mapStateToProps, mapDispatchToProps)(RegUnitSelectorComponent);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/index.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/index.js
new file mode 100644
index 0000000000..ad85515b81
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegUnitSelector/index.js
@@ -0,0 +1,3 @@
+// @flow
+
+export { RegUnitSelector } from './RegUnitSelector.container';
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegistrationSection.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegistrationSection.component.js
new file mode 100644
index 0000000000..c1131132ec
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/RegistrationSection.component.js
@@ -0,0 +1,43 @@
+// @flow
+import * as React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import i18n from '@dhis2/d2-i18n';
+import { Section, SectionHeaderSimple } from '../../../../../Section';
+import { SectionContents } from './SectionContents.component';
+
+const getStyles = (theme: Theme) => ({
+    section: {
+        backgroundColor: 'white',
+        maxWidth: theme.typography.pxToRem(892),
+    },
+});
+
+type Props = {
+    trackedEntityTypeId: string,
+    classes: Object,
+};
+
+const renderSectionHeader = () => {
+    const title = i18n.t('Registration');
+    return (
+        <SectionHeaderSimple
+            title={title}
+        />
+    );
+};
+
+const RegistrationSectionPlain = (props: Props) => {
+    const { classes, trackedEntityTypeId } = props;
+    return (
+        <Section
+            header={renderSectionHeader()}
+            elevation={2}
+            className={classes.section}
+        >
+            <SectionContents
+                trackedEntityTypeId={trackedEntityTypeId}
+            />
+        </Section>
+    );
+};
+export const RegistrationSection = withStyles(getStyles)(RegistrationSectionPlain);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/SectionContents.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/SectionContents.component.js
new file mode 100644
index 0000000000..fa53a69a56
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/SectionContents.component.js
@@ -0,0 +1,17 @@
+// @flow
+import * as React from 'react';
+import { ProgramSelector } from './ProgramSelector';
+import { RegUnitSelector } from './RegUnitSelector';
+
+type Props = {
+    trackedEntityTypeId: string,
+};
+
+export const SectionContents = ({ trackedEntityTypeId }: Props) => (
+    <>
+        <RegUnitSelector />
+        <ProgramSelector
+            trackedEntityTypeId={trackedEntityTypeId}
+        />
+    </>
+);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/index.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/index.js
new file mode 100644
index 0000000000..32684da330
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/index.js
@@ -0,0 +1,3 @@
+// @flow
+export { RegistrationSection } from './RegistrationSection.component';
+export { actionTypes } from './registrationSection.actions';
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/registrationSection.actions.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/registrationSection.actions.js
new file mode 100644
index 0000000000..1155394636
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/RegistrationSection/registrationSection.actions.js
@@ -0,0 +1,22 @@
+
+// @flow
+import { actionCreator } from '../../../../../../actions/actions.utils';
+
+export const actionTypes = {
+    PROGRAM_CHANGE: 'NewRelationshipSingleEventRegisterTeiProgramChange',
+    ORG_UNIT_CHANGE: 'NewRelationshipSingleEventRegisterTeiOrgUnitChange',
+    ORG_UNIT_SEARCH_FAILED: 'NewRelationshipSingleEventRegisterTeiOrgUnitSearchFailed',
+    PROGRAM_FILTER_CLEAR: 'NewRelationshipSingleEventRegisterTeiProgramFilterClear',
+};
+
+export const changeProgram = (programId: string) =>
+    actionCreator(actionTypes.PROGRAM_CHANGE)({ programId });
+
+export const changeOrgUnit = (orgUnit: ?Object, resetProgramSelection: boolean) =>
+    actionCreator(actionTypes.ORG_UNIT_CHANGE)({ orgUnit, resetProgramSelection });
+
+export const searchOrgUnitFailed = () =>
+    actionCreator(actionTypes.ORG_UNIT_SEARCH_FAILED)();
+
+export const clearProgramFilter = () =>
+    actionCreator(actionTypes.PROGRAM_FILTER_CLEAR)();
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/exposedHelpers/getRelationshipNewTei.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/exposedHelpers/getRelationshipNewTei.js
new file mode 100644
index 0000000000..d5c862fcd6
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/exposedHelpers/getRelationshipNewTei.js
@@ -0,0 +1,141 @@
+// @flow
+import uuid from 'd2-utilizr/src/uuid';
+import moment from 'moment';
+import { getFormattedStringFromMomentUsingEuropeanGlyphs } from 'capture-core-utils/date';
+import { capitalizeFirstLetter } from 'capture-core-utils/string/capitalizeFirstLetter';
+import {
+    getTrackerProgramThrowIfNotFound,
+    getTrackedEntityTypeThrowIfNotFound,
+    type RenderFoundation,
+} from '../../../../../../metaData';
+import { convertFormToClient, convertClientToServer } from '../../../../../../converters';
+import { getDisplayName } from '../../../../../../trackedEntityInstances/getDisplayName';
+import {
+    convertDataEntryValuesToClientValues,
+} from '../../../../../DataEntry/common/convertDataEntryValuesToClientValues';
+import { getDataEntryKey } from '../../../../../DataEntry/common/getDataEntryKey';
+
+function getTrackerProgramMetadata(programId: string) {
+    const program = getTrackerProgramThrowIfNotFound(programId);
+    return {
+        form: program.enrollment.enrollmentForm,
+        attributes: program.trackedEntityType.attributes,
+        tetName: program.trackedEntityType.name,
+    };
+}
+
+function getTETMetadata(tetId: string) {
+    const tet = getTrackedEntityTypeThrowIfNotFound(tetId);
+    return {
+        form: tet.teiRegistration.form,
+        attributes: tet.attributes,
+        tetName: tet.name,
+    };
+}
+
+function getMetadata(programId: ?string, tetId: string) {
+    return programId ? getTrackerProgramMetadata(programId) : getTETMetadata(tetId);
+}
+
+
+function getClientValuesForFormData(formValues: Object, formFoundation: RenderFoundation) {
+    const clientValues = formFoundation.convertValues(formValues, convertFormToClient);
+    return clientValues;
+}
+
+function getServerValuesForMainValues(
+    values: Object,
+    meta: Object,
+    formFoundation: RenderFoundation,
+) {
+    const clientValues = convertDataEntryValuesToClientValues(
+        values,
+        meta,
+        formFoundation,
+    ) || {};
+
+    // potientally run this through a server to client converter for enrollment, the same way as for event
+    const serverValues = Object
+        .keys(clientValues)
+        .reduce((acc, key) => {
+            const value = clientValues[key];
+            const type = meta[key].type;
+            acc[key] = convertClientToServer(value, type);
+            return acc;
+        }, {});
+
+    return serverValues;
+}
+
+function getPossibleTetFeatureTypeKey(serverValues: Object) {
+    return Object
+        .keys(serverValues)
+        .find(key => key.startsWith('FEATURETYPE_'));
+}
+
+function buildGeometryProp(key: string, serverValues: Object) {
+    if (!serverValues[key]) {
+        return undefined;
+    }
+    const type = capitalizeFirstLetter(key.replace('FEATURETYPE_', '').toLocaleLowerCase());
+    return {
+        type,
+        coordinates: serverValues[key],
+    };
+}
+
+export function getRelationshipNewTei(dataEntryId: string, itemId: string, state: ReduxState) {
+    const dataEntryKey = getDataEntryKey(dataEntryId, itemId);
+    const formValues = state.formsValues[dataEntryKey];
+    const { programId, orgUnit } = state.newRelationshipRegisterTei;
+    const tetId = state.newRelationship.selectedRelationshipType.to.trackedEntityTypeId;
+
+    const { attributes: metaDataAttributes, form: formFoundation, tetName } = getMetadata(programId, tetId);
+    const clientValuesForFormData = getClientValuesForFormData(formValues, formFoundation);
+    const displayName = getDisplayName(clientValuesForFormData, metaDataAttributes, tetName);
+
+    const serverValuesForFormValues = formFoundation.convertValues(clientValuesForFormData, convertClientToServer);
+    const serverValuesForMainValues = getServerValuesForMainValues(
+        state.dataEntriesFieldsValue[dataEntryKey],
+        state.dataEntriesFieldsMeta[dataEntryKey],
+        formFoundation,
+    );
+
+    // $FlowFixMe
+    const attributes = Object.keys(serverValuesForFormValues)
+        .map(key => ({
+            attribute: key,
+            value: serverValuesForFormValues[key],
+        }));
+
+    const enrollment = programId ? {
+        program: programId,
+        status: 'ACTIVE',
+        orgUnit: orgUnit.id,
+        occurredAt: getFormattedStringFromMomentUsingEuropeanGlyphs(moment()),
+        attributes,
+        ...serverValuesForMainValues,
+    } : null;
+
+    const tetFeatureTypeKey = getPossibleTetFeatureTypeKey(serverValuesForFormValues);
+    let geometry;
+    if (tetFeatureTypeKey) {
+        geometry = buildGeometryProp(tetFeatureTypeKey, serverValuesForFormValues);
+        delete serverValuesForFormValues[tetFeatureTypeKey];
+    }
+
+    const teiPayload = {
+        // $FlowFixMe
+        attributes: !enrollment ? attributes : undefined,
+        orgUnit: orgUnit.id,
+        trackedEntityType: tetId,
+        geometry,
+        enrollments: enrollment ? [enrollment] : [],
+    };
+
+    return {
+        data: teiPayload,
+        name: displayName,
+        id: uuid(),
+    };
+}
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/index.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/index.js
new file mode 100644
index 0000000000..dea1f66c95
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/index.js
@@ -0,0 +1,12 @@
+// @flow
+export { RegisterTei } from './RegisterTei.container';
+export { actionTypes } from './registerTei.actions';
+export { actionTypes as registrationSectionActionTypes } from './RegistrationSection';
+export { actionTypes as dataEntryActionTypes } from './DataEntry/RegisterTeiDataEntry.actions';
+export {
+    actionTypes as searchGroupDuplicateActionTypes,
+} from '../../../../PossibleDuplicatesDialog/possibleDuplicatesDialog.actions';
+export {
+    loadSearchGroupDuplicatesForReviewEpic,
+} from '../../../../PossibleDuplicatesDialog/possibleDuplicatesDialog.epics';
+export { getRelationshipNewTei } from './exposedHelpers/getRelationshipNewTei';
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/registerTei.actions.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/registerTei.actions.js
new file mode 100644
index 0000000000..2f8e6da51b
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/registerTei.actions.js
@@ -0,0 +1,15 @@
+// @flow
+import { actionCreator } from '../../../../../actions/actions.utils';
+
+export const actionTypes = {
+    REGISTER_TEI_INITIALIZE: 'InitializeRegisterTei',
+    REGISTER_TEI_INITIALIZE_FAILED: 'InitializeRegisterTeiFailed',
+};
+
+export const initializeRegisterTei = (
+    programId: ?string,
+    orgUnit?: ?Object,
+) => actionCreator(actionTypes.REGISTER_TEI_INITIALIZE)({ programId, orgUnit });
+
+export const initializeRegisterTeiFailed = (errorMessage: string) =>
+    actionCreator(actionTypes.REGISTER_TEI_INITIALIZE_FAILED)({ errorMessage });
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/registerTei.const.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/registerTei.const.js
new file mode 100644
index 0000000000..02b2cfa217
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/registerTei.const.js
@@ -0,0 +1,3 @@
+// @flow
+
+export const DATA_ENTRY_ID = 'relationship';
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/registerTei.selectors.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/registerTei.selectors.js
new file mode 100644
index 0000000000..fb31ac7cd5
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/RegisterTei/registerTei.selectors.js
@@ -0,0 +1,23 @@
+// @flow
+
+import { createSelector } from 'reselect';
+import {
+    getTrackedEntityTypeThrowIfNotFound,
+} from '../../../../../metaData';
+
+const TETIdSelector = state => state.newRelationship.selectedRelationshipType.to.trackedEntityTypeId;
+
+// $FlowFixMe
+export const makeTETNameSelector = () => createSelector(
+    TETIdSelector,
+    (TETId: string) => {
+        let TEType;
+        try {
+            TEType = getTrackedEntityTypeThrowIfNotFound(TETId);
+        } catch (error) {
+            return null;
+        }
+
+        return TEType.name;
+    },
+);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/SearchOrgUnitSelector.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/SearchOrgUnitSelector.component.js
new file mode 100644
index 0000000000..9d69231c92
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/SearchOrgUnitSelector.component.js
@@ -0,0 +1,152 @@
+// @flow
+import * as React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import {
+    SelectionBoxes,
+    withDefaultFieldContainer,
+    withLabel,
+    withFocusSaver,
+    withCalculateMessages,
+    withDisplayMessages,
+    SingleOrgUnitSelectField,
+} from '../../../../../FormFields/New';
+
+const TeiSearchOrgUnitField = withFocusSaver()(withCalculateMessages()(withDefaultFieldContainer()(withLabel()(withDisplayMessages()(SingleOrgUnitSelectField)))));
+const TeiSearchSelectionBoxes = withDefaultFieldContainer()(withLabel()(SelectionBoxes));
+
+type Props = {
+    searchId: string,
+    selectedOrgUnit?: ?any,
+    selectedOrgUnitScope?: ?string,
+    treeRoots: ?Array<any>,
+    treeReady: ?boolean,
+    treeKey: ?string,
+    treeSearchText?: ?string,
+    onSelectOrgUnitScope: (searchId: string, orgUnitScope: string) => void,
+    onSetOrgUnit: (searchId: string, orgUnit: ?Object) => void,
+    onFilterOrgUnits: (searchId: string, searchText: ?string) => void,
+    searchAttempted: ?boolean,
+}
+
+const orgUnitFieldStyles = {
+    labelContainerStyle: {
+        paddingTop: 12,
+        flexBasis: 200,
+    },
+    inputContainerStyle: {
+        flexBasis: 150,
+    },
+};
+
+const selectionBoxesStyles = {
+    labelContainerStyle: {
+        paddingTop: 13,
+        flexBasis: 200,
+    },
+    inputContainerStyle: {
+        flexBasis: 150,
+    },
+};
+
+const options = [
+    {
+        name: 'All accessible',
+        value: 'ACCESSIBLE',
+    },
+    {
+        name: 'Selected',
+        value: 'SELECTED',
+    },
+];
+
+const errorMessage = 'Please select an organisation unit';
+
+export class SearchOrgUnitSelector extends React.Component<Props> {
+    gotoInstance: any;
+
+    onSelectOrgUnitScope = (value: any) => {
+        if (value) {
+            this.props.onSelectOrgUnitScope(this.props.searchId, value);
+        }
+    }
+    onSetOrgUnit = (orgUnit: ?Object) => {
+        this.props.onSetOrgUnit(this.props.searchId, orgUnit);
+    }
+    renderOrgUnitScopeSelector = () => {
+        const { selectedOrgUnitScope } = this.props;
+        return (
+            <TeiSearchSelectionBoxes
+                options={options}
+                label="Organisation unit scope"
+                styles={selectionBoxesStyles}
+                onSelect={this.onSelectOrgUnitScope}
+                value={selectedOrgUnitScope}
+            />
+        );
+    }
+
+    isValid = () => this.props.selectedOrgUnitScope === 'ACCESSIBLE' || this.props.selectedOrgUnit
+
+    validateAndScrollToIfFailed() {
+        const isValid = this.isValid();
+        if (!isValid) {
+            this.goto();
+        }
+
+        return isValid;
+    }
+
+    goto() {
+        if (this.gotoInstance) {
+            this.gotoInstance.scrollIntoView();
+
+            const scrolledY = window.scrollY;
+            if (scrolledY) {
+                // TODO: Set the modifier some other way (caused be the fixed header)
+                window.scroll(0, scrolledY - 48);
+            }
+        }
+    }
+
+    getErrorMessage = () => {
+        if (!this.isValid() && this.props.searchAttempted) {
+            return i18n.t(errorMessage);
+        }
+        return null;
+    }
+
+    handleFilterOrgUnits = (searchText: ?string) => {
+        this.props.onFilterOrgUnits(this.props.searchId, searchText);
+    }
+
+    renderOrgUnitField = () => {
+        const { selectedOrgUnit, treeRoots, treeReady, treeKey, treeSearchText } = this.props;
+        return (
+            <TeiSearchOrgUnitField
+                label="Organisation unit"
+                styles={orgUnitFieldStyles}
+                searchText={treeSearchText}
+                roots={treeRoots}
+                ready={treeReady}
+                treeKey={treeKey}
+                onBlur={this.onSetOrgUnit}
+                value={selectedOrgUnit}
+                validationAttempted={this.props.searchAttempted}
+                errorMessage={this.getErrorMessage()}
+                onSearch={this.handleFilterOrgUnits}
+            />
+        );
+    }
+
+    render() {
+        const { selectedOrgUnitScope } = this.props;
+        return (
+            <div
+                ref={(gotoInstance) => { this.gotoInstance = gotoInstance; }}
+            >
+                {this.renderOrgUnitScopeSelector()}
+                {selectedOrgUnitScope !== 'ACCESSIBLE' && this.renderOrgUnitField()}
+            </div>
+        );
+    }
+}
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/SearchOrgUnitSelector.container.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/SearchOrgUnitSelector.container.js
new file mode 100644
index 0000000000..08df2c9b8b
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/SearchOrgUnitSelector.container.js
@@ -0,0 +1,46 @@
+// @flow
+import { connect } from 'react-redux';
+import {
+    setOrgUnitScope,
+    setOrgUnit,
+    requestFilterOrgUnits,
+    clearOrgUnitsFilter,
+} from './searchOrgUnitSelector.actions';
+import { get as getOrgUnitRoots } from '../../../../../FormFields/New/Fields/OrgUnitField/orgUnitRoots.store';
+import { SearchOrgUnitSelectorRefHandler } from './SearchOrgUnitSelectorRefHandler.component';
+
+const mapStateToProps = (state: ReduxState, props: Object) => {
+    const searchId = props.searchId;
+
+    const filteredRoots = getOrgUnitRoots(searchId);
+    const roots = filteredRoots || getOrgUnitRoots('searchRoots');
+
+    return {
+        selectedOrgUnit: state.teiSearch[searchId].selectedOrgUnit,
+        selectedOrgUnitScope: state.teiSearch[searchId].selectedOrgUnitScope,
+        treeRoots: roots,
+        treeSearchText: state.teiSearch[searchId].orgUnitsSearchText,
+        treeReady: !state.teiSearch[searchId].orgUnitsLoading,
+        treeKey: state.teiSearch[searchId].orgUnitsSearchText || 'initial',
+    };
+};
+
+const mapDispatchToProps = (dispatch: ReduxDispatch) => ({
+    onFilterOrgUnits: (searchId: string, searchText: string) => {
+        const action = searchText ?
+            requestFilterOrgUnits(searchId, searchText) :
+            clearOrgUnitsFilter(searchId);
+        dispatch(action);
+    },
+    onSetOrgUnit: (searchId: string, orgUnit: ?any) => {
+        dispatch(setOrgUnit(searchId, orgUnit));
+    },
+    onSelectOrgUnitScope: (searchId: string, orgUnitScope: string) => {
+        dispatch(setOrgUnitScope(searchId, orgUnitScope));
+    },
+});
+
+// $FlowFixMe[missing-annot] automated comment
+export const SearchOrgUnitSelector = connect(mapStateToProps, mapDispatchToProps)(
+    SearchOrgUnitSelectorRefHandler,
+);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/SearchOrgUnitSelectorRefHandler.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/SearchOrgUnitSelectorRefHandler.component.js
new file mode 100644
index 0000000000..9374a93993
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/SearchOrgUnitSelectorRefHandler.component.js
@@ -0,0 +1,18 @@
+// @flow
+import * as React from 'react';
+import { SearchOrgUnitSelector } from './SearchOrgUnitSelector.component';
+
+type Props = {
+    innerRef: Function,
+};
+
+export const SearchOrgUnitSelectorRefHandler = (props: Props) => {
+    const { innerRef, ...passOnProps } = props;
+    return (
+        // $FlowFixMe[cannot-spread-inexact] automated comment
+        <SearchOrgUnitSelector
+            ref={innerRef}
+            {...passOnProps}
+        />
+    );
+};
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/searchOrgUnitSelector.actions.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/searchOrgUnitSelector.actions.js
new file mode 100644
index 0000000000..8479b578a5
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/searchOrgUnitSelector.actions.js
@@ -0,0 +1,30 @@
+// @flow
+
+import { actionCreator } from '../../../../../../actions/actions.utils';
+
+export const actionTypes = {
+    TEI_SEARCH_REQUEST_FILTER_ORG_UNITS: 'TeiSearchRequestFilterOrgUnits',
+    TEI_SEARCH_CLEAR_ORG_UNITS_FILTER: 'TeiSearchClearOrgUnitsFilter',
+    TEI_SEARCH_FILTERED_ORG_UNITS_RETRIEVED: 'TeiSearchFilteredOrgUnitsRetrieved',
+    TEI_SEARCH_FILTER_ORG_UNITS_FAILED: 'TeiSearchFilterOrgUnitsFailed',
+    TEI_SEARCH_SET_ORG_UNIT_SCOPE: 'TeiSearchSetOrgUnitScope',
+    TEI_SEARCH_SET_ORG_UNIT: 'TeiSearchSetOrgUnit',
+};
+
+export const setOrgUnitScope = (searchId: string, orgUnitScope: string) =>
+    actionCreator(actionTypes.TEI_SEARCH_SET_ORG_UNIT_SCOPE)({ searchId, orgUnitScope });
+
+export const setOrgUnit = (searchId: string, orgUnit: ?any) =>
+    actionCreator(actionTypes.TEI_SEARCH_SET_ORG_UNIT)({ searchId, orgUnit });
+
+export const requestFilterOrgUnits = (searchId: string, searchText: string) =>
+    actionCreator(actionTypes.TEI_SEARCH_REQUEST_FILTER_ORG_UNITS)({ searchId, searchText });
+
+export const filteredOrgUnitsRetrieved = (searchId: string, roots: ?Array<any>, searchText: string) =>
+    actionCreator(actionTypes.TEI_SEARCH_FILTERED_ORG_UNITS_RETRIEVED)({ searchId, roots, searchText });
+
+export const filterOrgUnitsFailed = (searchId: string, error: any) =>
+    actionCreator(actionTypes.TEI_SEARCH_FILTER_ORG_UNITS_FAILED)({ searchId, error });
+
+export const clearOrgUnitsFilter = (searchId: string) =>
+    actionCreator(actionTypes.TEI_SEARCH_CLEAR_ORG_UNITS_FILTER)({ searchId });
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/searchOrgUnitSelector.epics.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/searchOrgUnitSelector.epics.js
new file mode 100644
index 0000000000..83031a6ae8
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchOrgUnitSelector/searchOrgUnitSelector.epics.js
@@ -0,0 +1,77 @@
+// @flow
+import log from 'loglevel';
+import isArray from 'd2-utilizr/lib/isArray';
+import { from } from 'rxjs';
+import { errorCreator } from 'capture-core-utils';
+import { ofType } from 'redux-observable';
+import { map, concatMap, takeUntil, filter } from 'rxjs/operators';
+import {
+    actionTypes as teiSearchActionTypes,
+} from '../actions/teiSearch.actions';
+
+import {
+    actionTypes as searchOrgUnitActionTypes,
+    filterOrgUnitsFailed,
+    filteredOrgUnitsRetrieved,
+} from './searchOrgUnitSelector.actions';
+
+
+const RETRIEVE_ERROR = 'Could not retrieve registering unit list';
+
+
+const isInitializeTeiSearch = (action: Object, searchId: string) =>
+    action.type === teiSearchActionTypes.INITIALIZE_TEI_SEARCH &&
+  action.payload.searchId === searchId;
+
+const isRequestFilterOrgUnits = (action: Object, searchId: string) =>
+    action.type === searchOrgUnitActionTypes.TEI_SEARCH_REQUEST_FILTER_ORG_UNITS &&
+  action.payload.searchId === searchId;
+
+
+const cancelActionFilter = (action: Object, searchId: string) => {
+    if (isArray(action.payload)) {
+        return action.payload.some(innerAction => isInitializeTeiSearch(innerAction, searchId));
+    }
+    return isInitializeTeiSearch(action, searchId) || isRequestFilterOrgUnits(action, searchId);
+};
+
+// get organisation units based on search criteria
+export const teiSearchFilterOrgUnitsEpic = (action$: InputObservable, store: ReduxStore, { querySingleResource }: ApiUtils) =>
+    action$.pipe(
+        ofType(searchOrgUnitActionTypes.TEI_SEARCH_REQUEST_FILTER_ORG_UNITS),
+        concatMap((action) => {
+            const searchText = action.payload.searchText;
+            const searchId = action.payload.searchId;
+
+            return from(querySingleResource({
+                resource: 'organisationUnits',
+                params: {
+                    fields: [
+                        'id,displayName,path,publicAccess,access,lastUpdated',
+                        'children[id,displayName,publicAccess,access,path,children::isNotEmpty]',
+                    ].join(','),
+                    paging: true,
+                    withinUserSearchHierarchy: true,
+                    query: searchText,
+                    pageSize: 15,
+                },
+            }).then(({ organisationUnits }) => ({ regUnitArray: organisationUnits, searchText, searchId }))
+                .catch(error => ({ error, searchId })))
+                .pipe(takeUntil(action$.pipe(filter(a => cancelActionFilter(a, searchId)))));
+        }), map((resultContainer) => {
+            if (resultContainer.error) {
+                log.error(errorCreator(RETRIEVE_ERROR)(
+                    { error: resultContainer.error, method: 'searchRegisteringUnitListEpic' }),
+                );
+                return filterOrgUnitsFailed(resultContainer.searchId, RETRIEVE_ERROR);
+            }
+
+            const regUnits = resultContainer.regUnitArray
+                .map(unit => ({
+                    id: unit.id,
+                    path: unit.path,
+                    displayName: unit.displayName,
+                }));
+            return filteredOrgUnitsRetrieved(resultContainer.searchId, regUnits, resultContainer.searchText);
+        }));
+
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/SearchProgramSelector.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/SearchProgramSelector.component.js
new file mode 100644
index 0000000000..e72a391cda
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/SearchProgramSelector.component.js
@@ -0,0 +1,45 @@
+// @flow
+import * as React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import {
+    OptionsSelectVirtualized,
+} from '../../../../../FormFields/Options/SelectVirtualizedV2/OptionsSelectVirtualized.component';
+import type {
+    VirtualizedOptionConfig,
+} from '../../../../../FormFields/Options/SelectVirtualizedV2/OptionsSelectVirtualized.component';
+import { withDefaultFieldContainer, withLabel } from '../../../../../FormFields/New';
+
+const SearchProgramField = withDefaultFieldContainer()(withLabel()(OptionsSelectVirtualized));
+
+const programFieldStyles = {
+    labelContainerStyle: {
+        paddingTop: 12,
+        flexBasis: 200,
+    },
+    inputContainerStyle: {
+        flexBasis: 150,
+    },
+};
+
+type Props = {
+    searchId: string,
+    selectedProgramId: ?string,
+    onSetProgram: (searchId: string, programId: ?string) => void,
+    programOptions: Array<VirtualizedOptionConfig>,
+}
+export class SearchProgramSelectorComponent extends React.Component<Props> {
+    onSelectProgram = (programId: ?string) => {
+        this.props.onSetProgram(this.props.searchId, programId);
+    }
+    render() {
+        return (
+            <SearchProgramField
+                styles={programFieldStyles}
+                options={this.props.programOptions}
+                onSelect={this.onSelectProgram}
+                label={i18n.t('Selected program')}
+                value={this.props.selectedProgramId}
+            />
+        );
+    }
+}
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/SearchProgramSelector.container.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/SearchProgramSelector.container.js
new file mode 100644
index 0000000000..b596a23dc7
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/SearchProgramSelector.container.js
@@ -0,0 +1,20 @@
+// @flow
+import { connect } from 'react-redux';
+import { SearchProgramSelectorComponent } from './SearchProgramSelector.component';
+import { startSetProgram } from './searchProgramSelector.actions';
+import { getProgramOptions } from './getProgramOptions';
+
+const mapStateToProps = (state: ReduxState, props: Object) => ({
+    programOptions: getProgramOptions(props.selectedTrackedEntityTypeId),
+});
+
+const mapDispatchToProps = (dispatch: ReduxDispatch) => ({
+    onSetProgram: (searchId: string, programId: ?string) => {
+        dispatch(startSetProgram(searchId, programId));
+    },
+});
+
+// $FlowFixMe[missing-annot] automated comment
+export const SearchProgramSelector = connect(mapStateToProps, mapDispatchToProps)(
+    SearchProgramSelectorComponent,
+);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/getProgramOptions.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/getProgramOptions.js
new file mode 100644
index 0000000000..e4ff179bc1
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/getProgramOptions.js
@@ -0,0 +1,12 @@
+// @flow
+import { programCollection } from '../../../../../../metaDataMemoryStores';
+import { TrackerProgram } from '../../../../../../metaData';
+
+// $FlowFixMe
+export const getProgramOptions = (trackedEntityTypeId: string) => Array.from(programCollection.values())
+    .filter(program =>
+        program instanceof TrackerProgram &&
+                program.trackedEntityType.id === trackedEntityTypeId &&
+                program.access.data.read,
+    )
+    .map(p => ({ value: p.id, label: p.name }));
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/searchProgramSelector.actions.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/searchProgramSelector.actions.js
new file mode 100644
index 0000000000..73a0c2ec2a
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/SearchProgramSelector/searchProgramSelector.actions.js
@@ -0,0 +1,15 @@
+// @flow
+
+import { actionCreator } from '../../../../../../actions/actions.utils';
+
+export const batchActionTypes = {
+    BATCH_SET_TEI_SEARCH_PROGRAM: 'BatchSetTeiSearchProgram',
+};
+
+export const actionTypes = {
+    TEI_SEARCH_SET_PROGRAM: 'TeiSearchSetProgram',
+    TEI_SEARCH_START_SET_PROGRAM: 'TeiSearchStartSetProgram',
+};
+
+export const startSetProgram = (searchId: string, programId: ?string) =>
+    actionCreator(actionTypes.TEI_SEARCH_START_SET_PROGRAM)({ searchId, programId });
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearch.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearch.component.js
new file mode 100644
index 0000000000..b4457973b6
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearch.component.js
@@ -0,0 +1,162 @@
+// @flow
+import React, { type ComponentType, useCallback, useState } from 'react';
+import i18n from '@dhis2/d2-i18n';
+import withStyles from '@material-ui/core/styles/withStyles';
+import { TeiSearchForm } from './TeiSearchForm/TeiSearchForm.container';
+import { TeiSearchResults } from './TeiSearchResults/TeiSearchResults.container';
+import { SearchProgramSelector } from './SearchProgramSelector/SearchProgramSelector.container';
+import { Section, SectionHeaderSimple } from '../../../../Section';
+import { ResultsPageSizeContext } from '../../../shared-contexts';
+import type { Props } from './TeiSearch.types';
+
+const getStyles = (theme: Theme) => ({
+    container: {
+        margin: theme.typography.pxToRem(10),
+    },
+    programSection: {
+        backgroundColor: 'white',
+        maxWidth: theme.typography.pxToRem(900),
+        marginBottom: theme.typography.pxToRem(20),
+    },
+    formContainerSection: {
+        maxWidth: theme.typography.pxToRem(900),
+        marginBottom: theme.typography.pxToRem(20),
+    },
+});
+
+const TeiSearchPlain = (props) => {
+    const [programSectionOpen, setProgramSectionOpen] = useState(true);
+
+    const getFormId = useCallback((searchGroupId) => {
+        const contextId = props.selectedProgramId || props.selectedTrackedEntityTypeId || '';
+        return `${props.id}-${contextId}-${searchGroupId}`;
+    }, [props.selectedProgramId, props.selectedTrackedEntityTypeId, props.id]);
+
+    const handleSearch = (formId, searchGroupId) => {
+        props.onSearch(formId, searchGroupId, props.id);
+    };
+
+    const handleSearchResultsChangePage = (pageNumber) => {
+        props.onSearchResultsChangePage(props.id, pageNumber);
+    };
+
+    const handleNewSearch = () => {
+        props.onNewSearch(props.id);
+    };
+
+    const handleEditSearch = () => {
+        props.onEditSearch(props.id);
+    };
+
+    const handleSearchValidationFailed = (...args) => {
+        props.onSearchValidationFailed(...args, props.id);
+    };
+
+    const renderSearchForms = searchGroups => (
+        <div className={props.classes.container}>
+            {renderProgramSection()}
+            {renderSearchGroups(searchGroups)}
+        </div>
+    );
+
+    const renderProgramSection = () => {
+        const isCollapsed = !programSectionOpen;
+        return (
+            <Section
+                className={props.classes.programSection}
+                isCollapsed={isCollapsed}
+                header={
+                    <SectionHeaderSimple
+                        containerStyle={{ borderBottom: '1px solid #ECEFF1' }}
+                        isCollapsed={isCollapsed}
+                        onChangeCollapseState={() => { setProgramSectionOpen(!isCollapsed); }}
+                        title={i18n.t('Program')}
+                    />
+                }
+            >
+                <SearchProgramSelector
+                    searchId={props.id}
+                    selectedProgramId={props.selectedProgramId}
+                    selectedTrackedEntityTypeId={props.selectedTrackedEntityTypeId}
+                />
+            </Section>
+        );
+    };
+
+    const onChangeSectionCollapseState = (id) => {
+        if (props.openSearchGroupSection === id) {
+            props.onSetOpenSearchGroupSection(props.id, null);
+            return;
+        }
+        props.onSetOpenSearchGroupSection(props.id, id);
+    };
+
+    const renderSearchGroups = searchGroups => searchGroups.map((sg, i) => {
+        const searchGroupId = i.toString();
+        const formId = getFormId(searchGroupId);
+        const header = sg.unique ? i18n.t('Search {{uniqueAttrName}}', { uniqueAttrName: sg.searchForm.getElements()[0].formName }) : i18n.t('Search by attributes');
+        const collapsed = props.openSearchGroupSection !== searchGroupId;
+        return (
+            <Section
+                data-test="search-by-attributes-forms"
+                key={formId}
+                isCollapsed={collapsed}
+                className={props.classes.formContainerSection}
+                header={
+                    <SectionHeaderSimple
+                        containerStyle={{ borderBottom: '1px solid #ECEFF1' }}
+                        onChangeCollapseState={() => { onChangeSectionCollapseState(searchGroupId); }}
+                        isCollapsed={collapsed}
+                        title={header}
+                    />
+                }
+            >
+                <TeiSearchForm
+                    id={formId}
+                    searchId={props.id}
+                    searchGroupId={searchGroupId}
+                    searchGroup={sg}
+                    onSearch={handleSearch}
+                    onSearchValidationFailed={handleSearchValidationFailed}
+                />
+            </Section>
+        );
+    });
+
+    const renderSearchResult = () => {
+        const {
+            id,
+            searchGroups,
+            getResultsView,
+            selectedProgramId,
+            selectedTrackedEntityTypeId,
+            trackedEntityTypeName,
+        } = props;
+
+        return (
+            <ResultsPageSizeContext.Provider value={{ resultsPageSize: 5 }}>
+                <TeiSearchResults
+                    id={id}
+                    onChangePage={handleSearchResultsChangePage}
+                    onNewSearch={handleNewSearch}
+                    onEditSearch={handleEditSearch}
+                    getResultsView={getResultsView}
+                    searchGroups={searchGroups}
+                    selectedProgramId={selectedProgramId}
+                    selectedTrackedEntityTypeId={selectedTrackedEntityTypeId}
+                    trackedEntityTypeName={trackedEntityTypeName}
+                />
+            </ResultsPageSizeContext.Provider>
+        );
+    };
+
+    const searchGroups = props.searchGroups;
+
+    if (props.showResults) {
+        return renderSearchResult();
+    }
+
+    return searchGroups ? renderSearchForms(searchGroups) : (<div />);
+};
+
+export const TeiSearchComponent: ComponentType<$Diff<Props, CssClasses>> = withStyles(getStyles)(TeiSearchPlain);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearch.container.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearch.container.js
new file mode 100644
index 0000000000..2480abe886
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearch.container.js
@@ -0,0 +1,53 @@
+// @flow
+import { type ComponentType } from 'react';
+import { connect } from 'react-redux';
+import { TeiSearchComponent } from './TeiSearch.component';
+import {
+    requestSearchTei,
+    searchFormValidationFailed,
+    teiNewSearch,
+    teiEditSearch,
+    teiSearchResultsChangePage,
+    setOpenSearchGroupSection,
+} from './actions/teiSearch.actions';
+import type { Props, OwnProps } from './TeiSearch.types';
+import { getSearchGroups } from './getSearchGroups';
+import { getTrackedEntityTypeThrowIfNotFound } from '../../../../../metaData';
+
+const mapStateToProps = (state: ReduxState, props: OwnProps) => {
+    const currentTeiSearch = state.teiSearch[props.id] ?? {};
+    const { selectedTrackedEntityTypeId } = props;
+    const searchGroups = getSearchGroups(selectedTrackedEntityTypeId, currentTeiSearch.selectedProgramId);
+    const { name } = getTrackedEntityTypeThrowIfNotFound(selectedTrackedEntityTypeId);
+    return {
+        searchGroups,
+        showResults: !!currentTeiSearch.searchResults,
+        openSearchGroupSection: currentTeiSearch.openSearchGroupSection,
+        trackedEntityTypeName: name.toLowerCase(),
+        selectedProgramId: currentTeiSearch.selectedProgramId,
+    };
+};
+
+const mapDispatchToProps = (dispatch: ReduxDispatch, ownProps: OwnProps) => ({
+    onSearch: (formId: string, searchGroupId: string, searchId: string) => {
+        dispatch(requestSearchTei(formId, searchGroupId, searchId, ownProps.resultsPageSize));
+    },
+    onSearchResultsChangePage: (searchId: string, pageNumber: number) => {
+        dispatch(teiSearchResultsChangePage(searchId, pageNumber, ownProps.resultsPageSize));
+    },
+    onSearchValidationFailed: (formId: string, searchGroupId: string, searchId: string) => {
+        dispatch(searchFormValidationFailed(formId, searchGroupId, searchId));
+    },
+    onNewSearch: (searchId: string) => {
+        dispatch(teiNewSearch(searchId));
+    },
+    onEditSearch: (searchId: string) => {
+        dispatch(teiEditSearch(searchId));
+    },
+    onSetOpenSearchGroupSection: (searchId: string, searchGroupId: ?string) => {
+        dispatch(setOpenSearchGroupSection(searchId, searchGroupId));
+    },
+});
+
+export const TeiSearch: ComponentType<OwnProps> =
+  connect<$Diff<Props, CssClasses>, OwnProps, _, _, _, _>(mapStateToProps, mapDispatchToProps)(TeiSearchComponent);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearch.types.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearch.types.js
new file mode 100644
index 0000000000..f1d3321375
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearch.types.js
@@ -0,0 +1,28 @@
+// @flow
+import { type SearchGroup } from '../../../../../metaData';
+
+type PropsFromRedux = {|
+    searchGroups: ?Array<SearchGroup>,
+    showResults?: ?boolean,
+    openSearchGroupSection: ?string,
+    trackedEntityTypeName: string,
+    selectedProgramId: ?string,
+|}
+
+type DispatchersFromRedux = {|
+    onSearch: Function,
+    onSearchValidationFailed: Function,
+    onSetOpenSearchGroupSection: (searchId: string, searchGroupId: ?string) => void,
+    onSearchResultsChangePage: (searchId: string, pageNumber: number) => void,
+    onNewSearch: (searchId: string) => void,
+    onEditSearch: (searchId: string) => void,
+|}
+
+export type OwnProps = {|
+    id: string,
+    getResultsView: Function,
+    resultsPageSize: number,
+    selectedTrackedEntityTypeId: string,
+|}
+
+export type Props = {| ...OwnProps, ...DispatchersFromRedux, ...PropsFromRedux, ...CssClasses |}
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchForm/TeiSearchForm.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchForm/TeiSearchForm.component.js
new file mode 100644
index 0000000000..4e753bdfe8
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchForm/TeiSearchForm.component.js
@@ -0,0 +1,181 @@
+// @flow
+import * as React from 'react';
+import log from 'loglevel';
+import { withStyles } from '@material-ui/core/styles';
+import i18n from '@dhis2/d2-i18n';
+import classNames from 'classnames';
+import { errorCreator } from 'capture-core-utils';
+import { Button } from '@dhis2/ui';
+import { D2Form } from '../../../../../D2Form';
+import { SearchOrgUnitSelector } from '../SearchOrgUnitSelector/SearchOrgUnitSelector.container';
+import type { SearchGroup } from '../../../../../../metaData';
+import { withGotoInterface } from '../../../../../FormFields/New';
+
+const TeiSearchOrgUnitSelector = withGotoInterface()(SearchOrgUnitSelector);
+
+const getStyles = (theme: Theme) => ({
+    orgUnitSection: {
+        backgroundColor: 'white',
+        padding: theme.typography.pxToRem(8),
+        maxWidth: theme.typography.pxToRem(892),
+    },
+    searchButtonContainer: {
+        padding: theme.typography.pxToRem(10),
+        display: 'flex',
+        alignItems: 'center',
+    },
+    minAttributesRequired: {
+        flexGrow: 1,
+        textAlign: 'right',
+        fontSize: theme.typography.pxToRem(14),
+    },
+    minAttribtuesRequiredInvalid: {
+        color: theme.palette.error.main,
+    },
+});
+
+type Props = {
+    id: string,
+    searchGroupId: string,
+    onSearch: (formId: string, searchGroupId: string) => void,
+    onSearchValidationFailed: (formId: string, SearchGroupId: string) => void,
+    searchAttempted: boolean,
+    searchId: string,
+    searchGroup: SearchGroup,
+    attributesWithValuesCount: number,
+    classes: {
+        container: string,
+        searchButtonContainer: string,
+        orgUnitSection: string,
+        minAttributesRequired: string,
+        minAttribtuesRequiredInvalid: string,
+    },
+};
+
+class SearchFormPlain extends React.Component<Props> {
+    formInstance: any;
+    orgUnitSelectorInstance: SearchOrgUnitSelector;
+
+    static errorMessages = {
+        NO_ITEM_SELECTED: 'No item selected',
+        SEARCH_FORM_MISSING: 'search form is missing. see log for details',
+    };
+
+    validNumberOfAttributes = () => {
+        const attributesWithValuesCount = this.props.attributesWithValuesCount;
+        const minAttributesRequiredToSearch = this.props.searchGroup.minAttributesRequiredToSearch;
+        return attributesWithValuesCount >= minAttributesRequiredToSearch;
+    }
+
+    validateForm() {
+        if (!this.formInstance) {
+            log.error(
+                errorCreator(
+                    SearchFormPlain.errorMessages.SEARCH_FORM_MISSING)({ Search: this }),
+            );
+            return {
+                error: true,
+                isValid: false,
+            };
+        }
+
+        let isValid = this.formInstance.validateFormScrollToFirstFailedField({});
+
+        // $FlowFixMe[prop-missing] automated comment
+        if (isValid && !this.props.searchGroup.unique) isValid = this.orgUnitSelectorInstance.validateAndScrollToIfFailed();
+
+        if (isValid && !this.props.searchGroup.unique) isValid = this.validNumberOfAttributes();
+
+        return {
+            isValid,
+            error: false,
+        };
+    }
+
+    handleSearchAttempt = () => {
+        const { error: validateFormError, isValid: isFormValid } = this.validateForm();
+        if (validateFormError || !isFormValid) {
+            this.props.onSearchValidationFailed(this.props.id, this.props.searchGroupId);
+            return;
+        }
+        this.props.onSearch(this.props.id, this.props.searchGroupId);
+    }
+
+    getUniqueSearchButtonText = (searchForm) => {
+        const attributeName = searchForm.getElements()[0].formName;
+        return `Search ${attributeName}`;
+    }
+
+    renderOrgUnitSelector = () => (
+        <TeiSearchOrgUnitSelector
+            innerRef={(instance) => {
+                this.orgUnitSelectorInstance = instance;
+            }}
+            searchId={this.props.searchId}
+            searchAttempted={this.props.searchAttempted}
+        />
+    );
+
+    renderMinAttributesRequired = () => {
+        const { classes, searchAttempted, searchGroup } = this.props;
+        const displayInvalidNumberOfAttributes = searchAttempted && !this.validNumberOfAttributes();
+        const minAttributesRequiredClass = classNames(
+            classes.minAttributesRequired, {
+                [classes.minAttribtuesRequiredInvalid]: displayInvalidNumberOfAttributes,
+            },
+        );
+
+        return (
+            <div className={minAttributesRequiredClass}>
+                {
+                    i18n.t('Fill in at least {{count}} attribute to search', {
+                        count: searchGroup.minAttributesRequiredToSearch,
+                        defaultValue: 'Fill in at least {{count}} attribute to search',
+                        defaultValue_plural: 'Fill in at least {{count}} attributes to search',
+                    })
+                }
+            </div>
+        );
+    }
+
+    render() {
+        const { searchGroup, classes, id } = this.props;
+
+        const searchForm = searchGroup && searchGroup.searchForm;
+
+        if (!searchForm) {
+            return (
+                <div>
+                    {SearchFormPlain.errorMessages.SEARCH_FORM_MISSING}
+                </div>
+            );
+        }
+        const searchButtonText = searchGroup.unique ? this.getUniqueSearchButtonText(searchForm) : i18n.t('Search by attributes');
+        return (
+            <div
+                data-test="d2-form-area"
+                className={classes.container}
+            >
+                <D2Form
+                    formRef={(formInstance) => { this.formInstance = formInstance; }}
+                    formFoundation={searchGroup.searchForm}
+                    id={id}
+                />
+                {!searchGroup.unique && this.renderOrgUnitSelector()}
+                <div
+                    className={classes.searchButtonContainer}
+                >
+                    <Button
+                        dataTest={`relationship-tei-search-button-${id}`}
+                        onClick={this.handleSearchAttempt}
+                    >
+                        {searchButtonText}
+                    </Button>
+                    {!searchGroup.unique && this.renderMinAttributesRequired()}
+                </div>
+            </div>
+        );
+    }
+}
+
+export const TeiSearchFormComponent = withStyles(getStyles)(SearchFormPlain);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchForm/TeiSearchForm.container.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchForm/TeiSearchForm.container.js
new file mode 100644
index 0000000000..898d2db20c
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchForm/TeiSearchForm.container.js
@@ -0,0 +1,23 @@
+// @flow
+import { connect } from 'react-redux';
+import { TeiSearchFormComponent } from './TeiSearchForm.component';
+
+const getAttributesWithValuesCount = (state: ReduxState, formId: string) => {
+    const formValues = state.formsValues[formId] || {};
+    return Object.keys(formValues).filter(key => formValues[key]).length;
+};
+
+const mapStateToProps = (state: ReduxState, props: Object) => {
+    const searchId = props.searchId;
+    const formId = props.id;
+    const formState = state.teiSearch[searchId] && state.teiSearch[searchId][formId] ? state.teiSearch[searchId][formId] : {};
+
+    return {
+        searchAttempted: formState.validationFailed,
+        attributesWithValuesCount: getAttributesWithValuesCount(state, formId),
+    };
+};
+
+// $FlowSuppress
+// $FlowFixMe[missing-annot] automated comment
+export const TeiSearchForm = connect(mapStateToProps, () => ({}))(TeiSearchFormComponent);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchResults/TeiSearchResults.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchResults/TeiSearchResults.component.js
new file mode 100644
index 0000000000..0ca0ad0668
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchResults/TeiSearchResults.component.js
@@ -0,0 +1,11 @@
+// @flow
+import React from 'react';
+import type { Props } from './TeiSearchResults.types';
+
+
+export const TeiSearchResultsComponent = ({ getResultsView, ...passOnProps }: Props) => (
+    <div>
+        { getResultsView && getResultsView(passOnProps)}
+    </div>
+);
+
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchResults/TeiSearchResults.container.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchResults/TeiSearchResults.container.js
new file mode 100644
index 0000000000..0f939cab82
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchResults/TeiSearchResults.container.js
@@ -0,0 +1,29 @@
+// @flow
+import { type ComponentType } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { TeiSearchResultsComponent } from './TeiSearchResults.component';
+import { withLoadingIndicator } from '../../../../../../HOC';
+import type { OwnProps, Props } from './TeiSearchResults.types';
+
+const mapStateToProps = (state: ReduxState, props: OwnProps) => {
+    const currentTeiSearch = state.teiSearch[props.id] || {};
+    const searchResults = currentTeiSearch.searchResults || {};
+    const searchValues = state.formsValues[searchResults.formId];
+    const searchGroup = props.searchGroups[parseInt(searchResults.searchGroupId, 10)];
+    return {
+        resultsLoading: searchResults.resultsLoading,
+        teis: searchResults.teis || [],
+        currentPage: searchResults.currentPage,
+        searchValues,
+        searchGroup,
+    };
+};
+
+const mapDispatchToProps = () => ({});
+
+export const TeiSearchResults: ComponentType<OwnProps> =
+  compose(
+      connect<Props, OwnProps, _, _, _, _>(mapStateToProps, mapDispatchToProps),
+      withLoadingIndicator(() => ({ padding: '100px 0' }), null, props => (!props.resultsLoading)),
+  )(TeiSearchResultsComponent);
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchResults/TeiSearchResults.types.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchResults/TeiSearchResults.types.js
new file mode 100644
index 0000000000..a55e711d15
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/TeiSearchResults/TeiSearchResults.types.js
@@ -0,0 +1,24 @@
+// @flow
+import { type SearchGroup } from '../../../../../../metaData';
+
+export type OwnProps = {|
+    id: string,
+    searchGroups: any,
+    onChangePage: Function,
+    onNewSearch: Function,
+    onEditSearch: Function,
+    getResultsView: Function,
+    selectedProgramId: ?string,
+    selectedTrackedEntityTypeId: string,
+    trackedEntityTypeName: string,
+|}
+
+type PropsFromRedux = {|
+    resultsLoading: boolean,
+    teis: any,
+    currentPage: number,
+    searchValues: any,
+    searchGroup: SearchGroup
+|}
+
+export type Props = {|...OwnProps, ...PropsFromRedux |}
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/actions/teiSearch.actions.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/actions/teiSearch.actions.js
new file mode 100644
index 0000000000..3b83a097fd
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/actions/teiSearch.actions.js
@@ -0,0 +1,70 @@
+// @flow
+
+import { actionCreator } from '../../../../../../actions/actions.utils';
+
+export const batchActionTypes = {
+    BATCH_SET_TEI_SEARCH_PROGRAM_AND_TET: 'BatchSetTeiSearchProgramAndTet',
+    RESET_SEARCH_FORMS: 'ResetSearchForms',
+};
+
+export const actionTypes = {
+    INITIALIZE_TEI_SEARCH: 'InitializeTeiSearch',
+    REQUEST_SEARCH_TEI: 'RequestSearchTei',
+    SEARCH_FORM_VALIDATION_FAILED: 'SearchFormValidationFailed',
+    SEARCH_TEI_FAILED: 'SearchTeiFailed',
+    SEARCH_TEI_RESULT_RETRIEVED: 'SearchTeiResultRetrieved',
+    SET_TEI_SEARCH_PROGRAM_AND_TET: 'SetTeiSearchProgramAndTet',
+    TEI_NEW_SEARCH: 'TeiNewSearch',
+    TEI_EDIT_SEARCH: 'TeiEditSearch',
+    TEI_SEARCH_RESULTS_CHANGE_PAGE: 'TeiSearchResultsChangePage',
+    TEI_SEARCH_SET_OPEN_SEARCH_GROUP_SECTION: 'TeiSearchSetOpenSearchGroupSection',
+};
+
+
+export const initializeTeiSearch = (searchId: string, programId: ?string, trackedEntityTypeId: ?string) =>
+    actionCreator(actionTypes.INITIALIZE_TEI_SEARCH)({ searchId, programId, trackedEntityTypeId });
+
+export const requestSearchTei = (
+    formId: string,
+    searchGroupId: string,
+    searchId: string,
+    resultsPageSize: number,
+) =>
+    actionCreator(actionTypes.REQUEST_SEARCH_TEI)({ formId, searchGroupId, searchId, resultsPageSize });
+
+export const searchTeiFailed = (
+    formId: string,
+    searchGroupId: string,
+    searchId: string,
+) =>
+    actionCreator(actionTypes.SEARCH_TEI_FAILED)({ formId, searchGroupId, searchId });
+
+export const searchTeiResultRetrieved = (
+    data: any,
+    formId: string,
+    searchGroupId: string,
+    searchId: string,
+) =>
+    actionCreator(actionTypes.SEARCH_TEI_RESULT_RETRIEVED)({ data, formId, searchGroupId, searchId });
+
+export const setProgramAndTrackedEntityType = (searchId: string, programId: ?string, trackedEntityTypeId: ?string) =>
+    actionCreator(actionTypes.SET_TEI_SEARCH_PROGRAM_AND_TET)({ searchId, programId, trackedEntityTypeId });
+
+export const searchFormValidationFailed = (
+    formId: string,
+    searchGroupId: string,
+    searchId: string,
+) =>
+    actionCreator(actionTypes.SEARCH_FORM_VALIDATION_FAILED)({ formId, searchGroupId, searchId });
+
+export const teiNewSearch = (searchId: string) =>
+    actionCreator(actionTypes.TEI_NEW_SEARCH)({ searchId });
+
+export const teiEditSearch = (searchId: string) =>
+    actionCreator(actionTypes.TEI_EDIT_SEARCH)({ searchId });
+
+export const teiSearchResultsChangePage = (searchId: string, pageNumber: number, resultsPageSize: number) =>
+    actionCreator(actionTypes.TEI_SEARCH_RESULTS_CHANGE_PAGE)({ searchId, pageNumber, resultsPageSize });
+
+export const setOpenSearchGroupSection = (searchId: string, searchGroupId: ?string) =>
+    actionCreator(actionTypes.TEI_SEARCH_SET_OPEN_SEARCH_GROUP_SECTION)({ searchId, searchGroupId });
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/epics/teiSearch.epics.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/epics/teiSearch.epics.js
new file mode 100644
index 0000000000..6c73d6d2ff
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/epics/teiSearch.epics.js
@@ -0,0 +1,223 @@
+// @flow
+import isArray from 'd2-utilizr/src/isArray';
+import { from, of } from 'rxjs';
+import { ofType } from 'redux-observable';
+import { map, takeUntil, switchMap, filter, catchError } from 'rxjs/operators';
+import { batchActions } from 'redux-batched-actions';
+import { convertValue as convertToClient } from '../../../../../../converters/formToClient';
+import { convertValue as convertToServer } from '../../../../../../converters/clientToServer';
+import {
+    convertValue as convertToFilters,
+    convertValueToEqual as convertToUniqueFilters,
+} from '../serverToFilters';
+import {
+    actionTypes,
+    batchActionTypes,
+    searchTeiResultRetrieved,
+    searchTeiFailed,
+    setProgramAndTrackedEntityType,
+} from '../actions/teiSearch.actions';
+import {
+    actionTypes as programSelectorActionTypes,
+} from '../SearchProgramSelector/searchProgramSelector.actions';
+import { getSearchGroups } from '../getSearchGroups';
+import { getTrackedEntityInstances } from '../../../../../../trackedEntityInstances/trackedEntityInstanceRequests';
+
+import {
+    addFormData,
+} from '../../../../../D2Form/actions/form.actions';
+import {
+    getTrackerProgramThrowIfNotFound as getTrackerProgram,
+    getTrackedEntityTypeThrowIfNotFound as getTrackedEntityType,
+} from '../../../../../../metaData';
+import { getSearchFormId } from '../getSearchFormId';
+import type { QuerySingleResource } from '../../../../../../utils/api';
+
+const getOuQueryArgs = (orgUnit: ?Object, orgUnitScope: string) =>
+    (orgUnitScope !== 'ACCESSIBLE' ?
+        { ou: orgUnit && orgUnit.id, ouMode: orgUnitScope } :
+        { ouMode: orgUnitScope });
+
+const getContextQueryArgs = (programId: ?string, trackedEntityTypeId: string) =>
+    (programId ? { program: programId } : { trackedEntityType: trackedEntityTypeId });
+
+const getPagingQueryArgs = (pageNumber: ?number = 1) => ({ page: pageNumber, pageSize: 5 });
+
+
+const searchTei = ({
+    state,
+    searchId,
+    formId,
+    searchGroupId,
+    pageNumber,
+    resultsPageSize,
+    absoluteApiPath,
+    querySingleResource,
+}: {
+    state: ReduxState,
+    searchId: string,
+    formId: string,
+    searchGroupId: any,
+    pageNumber?: ?number,
+    resultsPageSize: number,
+    absoluteApiPath: string,
+    querySingleResource: QuerySingleResource
+}) => {
+    const currentTeiSearch = state.teiSearch[searchId];
+    const formValues = state.formsValues[formId];
+
+    const {
+        selectedProgramId,
+        selectedTrackedEntityTypeId,
+        selectedOrgUnit,
+        selectedOrgUnitScope,
+    } = currentTeiSearch;
+
+    const searchGroups = getSearchGroups(selectedTrackedEntityTypeId, selectedProgramId);
+    const searchGroup = searchGroups[searchGroupId];
+    const filterConverter = searchGroup.unique ? convertToUniqueFilters : convertToFilters;
+
+    const filterValues = searchGroup.searchForm.convertValues(formValues,
+        (value, type, element) =>
+            filterConverter(convertToServer(convertToClient(value, type), type), type, element));
+
+    const filters = Object.keys(filterValues).reduce((accFilters, key) => {
+        const value = filterValues[key];
+        return isArray(value) ? [...accFilters, ...value] : [...accFilters, value];
+    }, []).filter(f => f !== null && f !== undefined);
+
+    const queryArgs = {
+        filter: filters,
+        fields: 'attributes,enrollments,trackedEntity,orgUnit',
+        ...getOuQueryArgs(selectedOrgUnit, selectedOrgUnitScope),
+        // $FlowFixMe[exponential-spread] automated comment
+        ...getContextQueryArgs(selectedProgramId, selectedTrackedEntityTypeId),
+        ...getPagingQueryArgs(pageNumber),
+        pageSize: resultsPageSize,
+    };
+
+    const attributes = selectedProgramId ?
+        getTrackerProgram(selectedProgramId).attributes :
+        getTrackedEntityType(selectedTrackedEntityTypeId).attributes;
+
+    return from(getTrackedEntityInstances(queryArgs, attributes, absoluteApiPath, querySingleResource)).pipe(
+        map(({ trackedEntityInstanceContainers, pagingData }) =>
+            searchTeiResultRetrieved(
+                { trackedEntityInstanceContainers, currentPage: pagingData.currentPage },
+                formId,
+                searchGroupId,
+                searchId,
+            )),
+        catchError(() => of(searchTeiFailed(formId, searchGroupId, searchId))),
+    );
+};
+
+export const teiSearchChangePageEpic = (action$: InputObservable, store: ReduxStore, { absoluteApiPath, querySingleResource }: ApiUtils) =>
+    action$.pipe(
+        ofType(actionTypes.TEI_SEARCH_RESULTS_CHANGE_PAGE),
+        switchMap((action) => {
+            const state = store.value;
+            const { pageNumber, searchId, resultsPageSize } = action.payload;
+            const currentTeiSearch = state.teiSearch[searchId];
+            const searchTeiStream = searchTei({
+                state,
+                searchId,
+                formId: currentTeiSearch.searchResults.formId,
+                searchGroupId: currentTeiSearch.searchResults.searchGroupId,
+                pageNumber,
+                resultsPageSize,
+                absoluteApiPath,
+                querySingleResource,
+            });
+
+            return from(searchTeiStream).pipe(
+                takeUntil(
+                    action$.pipe(ofType(
+                        actionTypes.REQUEST_SEARCH_TEI,
+                        actionTypes.TEI_SEARCH_RESULTS_CHANGE_PAGE,
+                    ))),
+                takeUntil(
+                    action$.pipe(
+                        filter(ab =>
+                            isArray(ab.payload) && ab.payload.some(a => a.type === actionTypes.INITIALIZE_TEI_SEARCH)))),
+            );
+        }));
+
+export const teiSearchEpic = (action$: InputObservable, store: ReduxStore, { absoluteApiPath, querySingleResource }: ApiUtils) =>
+    action$.pipe(
+        ofType(actionTypes.REQUEST_SEARCH_TEI),
+        switchMap((action) => {
+            const state = store.value;
+            const { formId, searchGroupId, searchId, resultsPageSize } = action.payload;
+            const searchTeiStream = searchTei({
+                state,
+                searchId,
+                formId,
+                searchGroupId,
+                pageNumber: 1,
+                resultsPageSize,
+                absoluteApiPath,
+                querySingleResource,
+            });
+            return from(searchTeiStream).pipe(
+                takeUntil(action$.pipe(
+                    ofType(
+                        actionTypes.REQUEST_SEARCH_TEI,
+                        actionTypes.TEI_SEARCH_RESULTS_CHANGE_PAGE,
+                    ))),
+                takeUntil(
+                    action$.pipe(
+                        filter(ab =>
+                            isArray(ab.payload) && ab.payload.some(a => a.type === actionTypes.INITIALIZE_TEI_SEARCH)))));
+        }));
+
+export const teiSearchSetProgramEpic = (action$: InputObservable, store: ReduxStore) =>
+    action$.pipe(
+        ofType(programSelectorActionTypes.TEI_SEARCH_START_SET_PROGRAM),
+        map((action) => {
+            const state = store.value;
+            const searchId = action.payload.searchId;
+            const programId = action.payload.programId;
+            let trackedEntityTypeId = state.teiSearch[searchId].selectedTrackedEntityTypeId;
+            const contextId = programId || trackedEntityTypeId;
+            if (programId) {
+                const program = getTrackerProgram(programId);
+                trackedEntityTypeId = program.trackedEntityType.id;
+            }
+            let searchGroups = [];
+            if (trackedEntityTypeId) {
+                searchGroups = getSearchGroups(trackedEntityTypeId, programId);
+            }
+
+            const addFormDataActions = searchGroups ? searchGroups.map((sg, i) => {
+                const key = getSearchFormId(searchId, contextId, i.toString());
+                return addFormData(key, {});
+            }) : [];
+
+            return batchActions([
+                ...addFormDataActions,
+                setProgramAndTrackedEntityType(searchId, programId, trackedEntityTypeId),
+            ], batchActionTypes.BATCH_SET_TEI_SEARCH_PROGRAM_AND_TET);
+        }));
+
+export const teiNewSearchEpic = (action$: InputObservable, store: ReduxStore) =>
+    action$.pipe(
+        ofType(actionTypes.TEI_NEW_SEARCH),
+        map((action) => {
+            const state = store.value;
+            const searchId = action.payload.searchId;
+            const currentTeiSearch = state.teiSearch[searchId];
+
+            const contextId = currentTeiSearch.selectedProgramId || currentTeiSearch.selectedTrackedEntityTypeId;
+
+            const searchGroups = getSearchGroups(currentTeiSearch.selectedTrackedEntityTypeId, currentTeiSearch.selectedProgramId);
+
+            const addFormDataActions = searchGroups ? searchGroups.map((sg, i) => {
+                const key = getSearchFormId(searchId, contextId, i.toString());
+                return addFormData(key, {});
+            }) : [];
+
+            return batchActions([
+                ...addFormDataActions,
+            ], batchActionTypes.RESET_SEARCH_FORMS);
+        }));
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/getSearchFormId.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/getSearchFormId.js
new file mode 100644
index 0000000000..21eaebfce3
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/getSearchFormId.js
@@ -0,0 +1,10 @@
+// @flow
+
+export function getSearchFormId(
+    searchId: string,
+    contextId: string,
+    searchGroupId: string,
+) {
+    return `${searchId}-${contextId}-${searchGroupId}`;
+}
+
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/getSearchGroups.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/getSearchGroups.js
new file mode 100644
index 0000000000..59ec69fdbf
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/getSearchGroups.js
@@ -0,0 +1,19 @@
+// @flow
+import {
+    getTrackedEntityTypeThrowIfNotFound,
+    getTrackerProgramThrowIfNotFound,
+} from '../../../../../metaData';
+import type {
+    SearchGroup,
+} from '../../../../../metaData';
+
+
+export function getSearchGroups(trackedEntityTypeId: string, programId: ?string): Array<SearchGroup> {
+    if (programId) {
+        const program = getTrackerProgramThrowIfNotFound(programId);
+        return program.searchGroups;
+    }
+    const trackedEntityType = getTrackedEntityTypeThrowIfNotFound(trackedEntityTypeId);
+    return trackedEntityType.searchGroups;
+}
+
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/serverToFilters.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/serverToFilters.js
new file mode 100644
index 0000000000..78763397f6
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TeiSearch/serverToFilters.js
@@ -0,0 +1,39 @@
+// @flow
+import { type DataElement, dataElementTypes } from '../../../../../metaData';
+import { escapeString } from '../../../../../utils/escapeString';
+
+type RangeValue = {
+    from: number,
+    to: number,
+}
+
+const equals = (value: any, elementId: string) => `${elementId}:eq:${escapeString(value)}`;
+const like = (value: any, elementId: string) => `${elementId}:like:${escapeString(value)}`;
+
+
+function convertRange(value: RangeValue, elementId: string) {
+    return `${elementId}:ge:${value.from}:le:${value.to}`;
+}
+
+const valueConvertersForType = {
+    [dataElementTypes.TEXT]: like,
+    [dataElementTypes.NUMBER_RANGE]: convertRange,
+    [dataElementTypes.DATE_RANGE]: convertRange,
+    [dataElementTypes.DATETIME_RANGE]: convertRange,
+    [dataElementTypes.TIME_RANGE]: convertRange,
+};
+
+export function convertValue(value: any, type: $Keys<typeof dataElementTypes>, metaElement: DataElement) {
+    if (!value && value !== 0 && value !== false) {
+        return value;
+    }
+    // $FlowFixMe dataElementTypes flow error
+    return valueConvertersForType[type] ? valueConvertersForType[type](value, metaElement.id) : equals(value, metaElement.id);
+}
+
+export function convertValueToEqual(value: any, type: $Keys<typeof dataElementTypes>, metaElement: DataElement) {
+    if (!value && value !== 0 && value !== false) {
+        return value;
+    }
+    return equals(value, metaElement.id);
+}
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.actions.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.actions.js
new file mode 100644
index 0000000000..bc5e85c1f6
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.actions.js
@@ -0,0 +1,13 @@
+// @flow
+import { actionCreator } from '../../../../../actions/actions.utils';
+
+export const actionTypes = {
+    WIDGET_SELECT_FIND_MODE: 'WidgetSelectFindMode',
+};
+
+export const batchActionTypes = {
+    BATCH_OPEN_TEI_SEARCH_WIDGET: 'batchOpenTeiSearchWidget',
+};
+
+export const selectFindMode = ({ findMode, orgUnit, relationshipConstraint }: Object) =>
+    actionCreator(actionTypes.WIDGET_SELECT_FIND_MODE)({ findMode, orgUnit, relationshipConstraint });
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.component.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.component.js
new file mode 100644
index 0000000000..df27fb1125
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.component.js
@@ -0,0 +1,104 @@
+// @flow
+import React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { useDispatch } from 'react-redux';
+import { selectFindMode } from './TrackedEntityRelationshipsWrapper.actions';
+import { useTEIRelationshipsWidgetMetadata } from '../useTEIRelationshipsWidgetMetadata';
+import {
+    WidgetTrackedEntityRelationship,
+} from '../../../../WidgetsRelationship/WidgetTrackedEntityRelationship';
+import type { OnSelectFindModeProps } from '../../../../WidgetsRelationship/WidgetTrackedEntityRelationship';
+import type { Props } from './TrackedEntityRelationshipsWrapper.types';
+import { TeiSearch } from '../TeiSearch/TeiSearch.container';
+import {
+    TeiRelationshipSearchResults,
+} from '../../../NewRelationship/TeiRelationship/SearchResults/TeiRelationshipSearchResults.component';
+import { ResultsPageSizeContext } from '../../../shared-contexts';
+import { RegisterTei } from '../RegisterTei';
+import { useOrganisationUnit } from '../../../../../dataQueries';
+
+export const TrackedEntityRelationshipsWrapper = ({
+    trackedEntityTypeId,
+    teiId,
+    programId,
+    orgUnitId,
+    addRelationshipRenderElement,
+    onOpenAddRelationship,
+    onCloseAddRelationship,
+    onLinkedRecordClick,
+}: Props) => {
+    const dispatch = useDispatch();
+    const { relationshipTypes, isError } = useTEIRelationshipsWidgetMetadata();
+    const { orgUnit: initialOrgUnit } = useOrganisationUnit(orgUnitId, 'id,displayName,code');
+
+    const onSelectFindMode = ({ findMode, relationshipConstraint }: OnSelectFindModeProps) => {
+        dispatch(selectFindMode({
+            findMode,
+            orgUnit: initialOrgUnit,
+            relationshipConstraint,
+        }));
+    };
+
+    if (isError) {
+        return (
+            <div>
+                {i18n.t('Could not retrieve metadata. Please try again later.')}
+            </div>
+        );
+    }
+
+    if (!relationshipTypes || !addRelationshipRenderElement) {
+        return null;
+    }
+
+    return (
+        <>
+            <WidgetTrackedEntityRelationship
+                programId={programId}
+                trackedEntityTypeId={trackedEntityTypeId}
+                teiId={teiId}
+                orgUnitId={orgUnitId}
+                onLinkedRecordClick={onLinkedRecordClick}
+                addRelationshipRenderElement={addRelationshipRenderElement}
+                onOpenAddRelationship={onOpenAddRelationship}
+                onCloseAddRelationship={onCloseAddRelationship}
+                // optional props
+                onSelectFindMode={onSelectFindMode}
+                relationshipTypes={relationshipTypes}
+                renderTrackedEntityRegistration={(
+                    selectedTrackedEntityTypeId,
+                    suggestedProgramId,
+                    onLinkToTrackedEntityFromRegistration,
+                    onLinkToTrackedEntityFromSearch,
+                ) => (
+                    <ResultsPageSizeContext.Provider value={{ resultsPageSize: 5 }}>
+                        <RegisterTei
+                            suggestedProgramId={suggestedProgramId}
+                            onLink={onLinkToTrackedEntityFromSearch}
+                            onSave={onLinkToTrackedEntityFromRegistration}
+                            onGetUnsavedAttributeValues={() => console.log('get unsaved')}
+                            trackedEntityTypeId={selectedTrackedEntityTypeId}
+                        />
+                    </ResultsPageSizeContext.Provider>
+                )}
+                renderTrackedEntitySearch={(
+                    searchTrackedEntityTypeId,
+                    searchProgramId,
+                    onLinkToTrackedEntityFromSearch,
+                ) => (
+                    <TeiSearch
+                        resultsPageSize={5}
+                        id="relationshipTeiSearchWidget"
+                        selectedTrackedEntityTypeId={searchTrackedEntityTypeId}
+                        getResultsView={viewProps => (
+                            <TeiRelationshipSearchResults
+                                onAddRelationship={onLinkToTrackedEntityFromSearch}
+                                {...viewProps}
+                            />
+                        )}
+                    />
+                )}
+            />
+        </>
+    );
+};
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.epics.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.epics.js
new file mode 100644
index 0000000000..488faf8e6f
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.epics.js
@@ -0,0 +1,87 @@
+// @flow
+import log from 'loglevel';
+import i18n from '@dhis2/d2-i18n';
+import { of } from 'rxjs';
+import { filter, map, switchMap } from 'rxjs/operators';
+import { ofType } from 'redux-observable';
+import { batchActions } from 'redux-batched-actions';
+import { actionTypes, batchActionTypes } from './TrackedEntityRelationshipsWrapper.actions';
+import { getSearchGroups } from '../../../../TeiSearch/getSearchGroups';
+import { getSearchFormId } from '../../../../TeiSearch/getSearchFormId';
+import { addFormData } from '../../../../D2Form/actions/form.actions';
+import { initializeTeiSearch } from '../../../../TeiSearch/actions/teiSearch.actions';
+import { findModes } from '../../../NewRelationship/findModes';
+import type { TrackerProgram } from '../../../../../metaData';
+import { initializeRegisterTei, initializeRegisterTeiFailed } from '../RegisterTei/registerTei.actions';
+import { getTrackerProgramThrowIfNotFound } from '../../../../../metaData';
+import { errorCreator } from '../../../../../../capture-core-utils';
+
+const searchId = 'relationshipTeiSearchWidget';
+
+// get tracker program if the suggested program id is valid for the current context
+function getTrackerProgram(suggestedProgramId: string) {
+    let trackerProgram: ?TrackerProgram;
+    try {
+        const program = getTrackerProgramThrowIfNotFound(suggestedProgramId);
+        if (program.access.data.write) {
+            trackerProgram = program;
+        }
+    } catch (error) {
+        log.error(
+            errorCreator('tracker program for id not found')({ suggestedProgramId, error }),
+        );
+        throw Error(i18n('Metadata error. see log for details'));
+    }
+    return trackerProgram;
+}
+
+export const openRelationshipTeiSearchWidgetEpic =
+    (action$: InputObservable) =>
+        action$.pipe(
+            ofType(actionTypes.WIDGET_SELECT_FIND_MODE),
+            filter(action => action.payload.findMode && action.payload.findMode === 'TEI_SEARCH'),
+            map((action) => {
+                const { relationshipConstraint } = action.payload;
+                const { trackedEntityTypeId, programId } = relationshipConstraint;
+
+                const contextId = programId || trackedEntityTypeId;
+
+                const searchGroups = getSearchGroups(trackedEntityTypeId, programId);
+
+
+                const addFormDataActions = searchGroups ? searchGroups.map((sg, i) => {
+                    const key = getSearchFormId(searchId, contextId, i.toString());
+                    return addFormData(key, {});
+                }) : [];
+
+                return batchActions([
+                    ...addFormDataActions,
+                    initializeTeiSearch(searchId, programId, trackedEntityTypeId),
+                ], batchActionTypes.BATCH_OPEN_TEI_SEARCH_WIDGET);
+            }),
+        );
+
+export const openRelationshipTeiRegisterWidgetEpic = (action$: InputObservable) =>
+    action$.pipe(
+        ofType(actionTypes.WIDGET_SELECT_FIND_MODE),
+        filter(action => action.payload.findMode && action.payload.findMode === findModes.TEI_REGISTER),
+        switchMap((action) => {
+            const { relationshipConstraint, orgUnit } = action.payload;
+            const { programId } = relationshipConstraint;
+
+            let trackerProgram: ?TrackerProgram;
+            if (programId) {
+                try {
+                    trackerProgram = getTrackerProgram(programId);
+                } catch (error) {
+                    return Promise.resolve(initializeRegisterTeiFailed(error));
+                }
+            }
+
+            // can't run rules when no valid organisation unit is specified, i.e. only the registration section will be visible
+            if (!orgUnit) {
+                return Promise.resolve(initializeRegisterTei(trackerProgram && trackerProgram.id));
+            }
+
+            return of(initializeRegisterTei(programId, orgUnit));
+        }));
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.types.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.types.js
new file mode 100644
index 0000000000..9fbb88f60b
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/TrackedEntityRelationshipsWrapper.types.js
@@ -0,0 +1,14 @@
+// @flow
+import type { LinkedRecordClick } from '../../../../WidgetsRelationship/WidgetTrackedEntityRelationship';
+
+export type Props = {|
+    trackedEntityTypeId: string,
+    teiId: string,
+    programId: string,
+    orgUnitId: string,
+    onAddRelationship: () => void,
+    addRelationshipRenderElement: HTMLDivElement,
+    onOpenAddRelationship: () => void,
+    onCloseAddRelationship: () => void,
+    onLinkedRecordClick: LinkedRecordClick,
+|};
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/index.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/index.js
new file mode 100644
index 0000000000..e73bf5578b
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper/index.js
@@ -0,0 +1,6 @@
+// @flow
+export { TrackedEntityRelationshipsWrapper } from './TrackedEntityRelationshipsWrapper.component';
+export {
+    openRelationshipTeiSearchWidgetEpic,
+    openRelationshipTeiRegisterWidgetEpic,
+} from './TrackedEntityRelationshipsWrapper.epics';
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/index.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/index.js
new file mode 100644
index 0000000000..0573777af3
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/index.js
@@ -0,0 +1,4 @@
+// @flow
+
+export { useTEIRelationshipsWidgetMetadata } from './useTEIRelationshipsWidgetMetadata';
+export { useLinkedRecordClick } from './useLinkedRecordClick';
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/useLinkedRecordClick.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/useLinkedRecordClick.js
new file mode 100644
index 0000000000..ad5bb77fce
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/useLinkedRecordClick.js
@@ -0,0 +1,43 @@
+// @flow
+import { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import type { NavigationArgs } from '../../../WidgetsRelationship/WidgetTrackedEntityRelationship';
+import { EventProgram, getProgramFromProgramIdThrowIfNotFound } from '../../../../metaData';
+import { useLocationQuery, buildUrlQueryString } from '../../../../utils/routing';
+
+export const useLinkedRecordClick = () => {
+    const history = useHistory();
+    const { orgUnitId } = useLocationQuery();
+
+    const onLinkedRecordClick = useCallback((navigationArgs: NavigationArgs) => {
+        let url;
+        if (navigationArgs.eventId) {
+            const { eventId, programId } = navigationArgs;
+            const recordProgram = getProgramFromProgramIdThrowIfNotFound(programId);
+            if (recordProgram instanceof EventProgram) {
+                url = `/viewEvent?viewEventId=${eventId}`;
+            } else {
+                url = `/enrollmentEventEdit?${buildUrlQueryString({
+                    orgUnitId,
+                    eventId,
+                })}`;
+            }
+        } else if (navigationArgs.trackedEntityId) {
+            const { trackedEntityId, programId } = navigationArgs;
+            url = `/enrollment?${buildUrlQueryString({
+                programId,
+                orgUnitId,
+                teiId: trackedEntityId,
+                enrollmentId: 'AUTO',
+            })}`;
+        }
+
+        if (url) {
+            history.push(url);
+        }
+    }, [history, orgUnitId]);
+
+    return {
+        onLinkedRecordClick,
+    };
+};
diff --git a/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/useTEIRelationshipsWidgetMetadata.js b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/useTEIRelationshipsWidgetMetadata.js
new file mode 100644
index 0000000000..4cb736b91f
--- /dev/null
+++ b/src/core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/useTEIRelationshipsWidgetMetadata.js
@@ -0,0 +1,47 @@
+// @flow
+import { useIndexedDBQuery } from '../../../../utils/reactQueryHelpers';
+import { getUserStorageController, userStores } from '../../../../storageControllers';
+import type { RelationshipTypes } from '../../../WidgetsRelationship';
+import {
+    extractElementIdsFromRelationshipTypes,
+    formatRelationshipTypes,
+} from '../../../WidgetsRelationship';
+
+const getRelationshipTypes = async (): Promise<RelationshipTypes> => {
+    const userStorageController = getUserStorageController();
+    const cachedRelationshipTypes = await userStorageController.getAll(userStores.RELATIONSHIP_TYPES);
+
+    const { dataElementIds, attributeIds } = extractElementIdsFromRelationshipTypes(cachedRelationshipTypes);
+
+    const attributes = (await userStorageController.getAll(userStores.TRACKED_ENTITY_ATTRIBUTES, {
+        predicate: ({ id }) => attributeIds[id],
+        project: ({ id, valueType, displayName }) => ({ id, valueType, displayName }),
+    }));
+
+    const dataElements = (await userStorageController.getAll(userStores.DATA_ELEMENTS, {
+        predicate: ({ id }) => dataElementIds[id],
+        project: ({ id, valueType, displayName }) => ({ id, valueType, displayName }),
+    }));
+
+    return formatRelationshipTypes({
+        relationshipTypes: cachedRelationshipTypes,
+        attributes,
+        dataElements,
+    });
+};
+
+export const useTEIRelationshipsWidgetMetadata = (): {
+    relationshipTypes: ?RelationshipTypes,
+    isError: boolean,
+} => {
+    const { data: relationshipTypes, isError } =
+    useIndexedDBQuery<RelationshipTypes>(
+        ['cachedRelationshipTypes'],
+        getRelationshipTypes,
+    );
+
+    return {
+        relationshipTypes,
+        isError,
+    };
+};
diff --git a/src/core_modules/capture-core/components/Relationships/Relationships.component.js b/src/core_modules/capture-core/components/Relationships/Relationships.component.js
index 2d218e8d22..1ee7f8af6c 100644
--- a/src/core_modules/capture-core/components/Relationships/Relationships.component.js
+++ b/src/core_modules/capture-core/components/Relationships/Relationships.component.js
@@ -117,7 +117,8 @@ class RelationshipsPlain extends React.Component<Props> {
         return numberOfChanges > 0;
     }
 
-    renderRelationships = () => this.props.relationships.map(r => this.renderRelationship(r))
+    renderRelationships = () => this.props.relationships.map(relationship => relationship &&
+        this.renderRelationship(relationship))
 
     renderRelationship = (relationship: Relationship) => {
         const { classes, onRemoveRelationship } = this.props;
diff --git a/src/core_modules/capture-core/components/SearchBox/SearchForm/SearchForm.component.js b/src/core_modules/capture-core/components/SearchBox/SearchForm/SearchForm.component.js
index 35e13c4ff3..84161942ef 100644
--- a/src/core_modules/capture-core/components/SearchBox/SearchForm/SearchForm.component.js
+++ b/src/core_modules/capture-core/components/SearchBox/SearchForm/SearchForm.component.js
@@ -286,8 +286,8 @@ const SearchFormIndex = ({
                                     header={
                                         <SectionHeaderSimple
                                             containerStyle={{ alignItems: 'center' }}
-                                            title={searchByText}
                                             titleStyle={{ background: 'transparent', paddingTop: 8, fontSize: 16 }}
+                                            title={searchByText}
                                             onChangeCollapseState={() => { setExpandedFormId(formId); }}
                                             isCollapseButtonEnabled={isSearchSectionCollapsed}
                                             isCollapsed={isSearchSectionCollapsed}
diff --git a/src/core_modules/capture-core/components/Section/SectionHeaderSimple.component.js b/src/core_modules/capture-core/components/Section/SectionHeaderSimple.component.js
index 8355acb967..9da358e20b 100644
--- a/src/core_modules/capture-core/components/Section/SectionHeaderSimple.component.js
+++ b/src/core_modules/capture-core/components/Section/SectionHeaderSimple.component.js
@@ -71,11 +71,13 @@ class SectionHeaderSimplePlain extends Component<Props> {
                 style={accContainerStyle}
                 {...containerProps}
             >
-                <div
-                    className={classes.title}
-                    style={titleStyle}
-                >
-                    {this.props.title}
+                <div>
+                    <div
+                        className={classes.title}
+                        style={titleStyle}
+                    >
+                        {this.props.title}
+                    </div>
                 </div>
                 <div
                     className={classes.children}
diff --git a/src/core_modules/capture-core/components/Widget/WidgetCollapsible.component.js b/src/core_modules/capture-core/components/Widget/WidgetCollapsible.component.js
index c097dc89c2..6d794477aa 100644
--- a/src/core_modules/capture-core/components/Widget/WidgetCollapsible.component.js
+++ b/src/core_modules/capture-core/components/Widget/WidgetCollapsible.component.js
@@ -39,7 +39,6 @@ const styles = {
         borderColor: colors.grey400,
         borderWidth: 1,
         borderTopWidth: 0,
-        overflow: 'hidden',
         '&.open': {
             animation: 'slidein 200ms normal forwards ease-in-out',
             transformOrigin: '50% 0%',
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/Breadcrumbs/Breadcrumbs.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/Breadcrumbs/Breadcrumbs.component.js
new file mode 100644
index 0000000000..5b6d46cb08
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/Breadcrumbs/Breadcrumbs.component.js
@@ -0,0 +1,86 @@
+// @flow
+import React, { type ComponentType, useMemo } from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { spacers } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core';
+import { LinkButton } from '../../../../Buttons/LinkButton.component';
+import { NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS } from '../wizardSteps.const';
+import type { PlainProps, Props } from './breadcrumbs.types';
+
+const styles = {
+    container: {
+        padding: `${spacers.dp8} 0`,
+    },
+};
+
+const Slash = withStyles({ slash: { padding: 5 } })(({ classes }) => <span className={classes.slash}>/</span>);
+
+const LinkedEntityMetadataSelectorStep = ({ currentStep, onNavigate }) => {
+    const initialText = i18n.t('New TEI Relationship');
+    return (currentStep.value > NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.SELECT_LINKED_ENTITY_METADATA.value ?
+        <LinkButton onClick={onNavigate}>{initialText}</LinkButton> :
+        <span>{initialText}</span>);
+};
+
+const RetrieverModeStep = ({ currentStep, onNavigate, linkedEntityMetadataName }) => {
+    if (currentStep.value < NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.SELECT_RETRIEVER_MODE.value) {
+        return null;
+    }
+
+    return (
+        <>
+            <Slash />
+            {currentStep.value > NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.SELECT_RETRIEVER_MODE.value ?
+                <LinkButton onClick={onNavigate}>{linkedEntityMetadataName}</LinkButton> :
+                <span>{linkedEntityMetadataName}</span>}
+        </>
+    );
+};
+
+const FindExistingStep = ({ currentStep }) => {
+    const stepText = useMemo(() => {
+        if (currentStep.id === NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.NEW_LINKED_ENTITY.id) {
+            return i18n.t('Register');
+        }
+        if (currentStep.id === NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.FIND_EXISTING_LINKED_ENTITY.id) {
+            return i18n.t('Search');
+        }
+        return null;
+    }, [currentStep.id]);
+
+    if (!stepText) {
+        return null;
+    }
+
+    return (
+        <>
+            <Slash />
+            <span>{stepText}</span>
+        </>
+    );
+};
+
+const BreadcrumbsPlain = ({
+    currentStep,
+    onNavigate,
+    linkedEntityMetadataName,
+    classes,
+}: PlainProps) => (
+    <div className={classes.container}>
+        <LinkedEntityMetadataSelectorStep
+            currentStep={currentStep}
+            onNavigate={() =>
+                onNavigate(NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.SELECT_LINKED_ENTITY_METADATA)}
+        />
+        <RetrieverModeStep
+            currentStep={currentStep}
+            linkedEntityMetadataName={linkedEntityMetadataName}
+            onNavigate={() => onNavigate(NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.SELECT_RETRIEVER_MODE)}
+        />
+        <FindExistingStep
+            currentStep={currentStep}
+        />
+    </div>
+);
+
+export const Breadcrumbs: ComponentType<Props> = withStyles(styles)(BreadcrumbsPlain);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/Breadcrumbs/breadcrumbs.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/Breadcrumbs/breadcrumbs.types.js
new file mode 100644
index 0000000000..5f59de427b
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/Breadcrumbs/breadcrumbs.types.js
@@ -0,0 +1,13 @@
+// @flow
+import { NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS } from '../wizardSteps.const';
+
+export type Props = {|
+    currentStep: $Values<typeof NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS>,
+    onNavigate: ($Values<typeof NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS>) => void,
+    linkedEntityMetadataName?: string,
+|};
+
+export type PlainProps = {|
+    ...Props,
+    ...CssClasses,
+|};
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/Breadcrumbs/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/Breadcrumbs/index.js
new file mode 100644
index 0000000000..fb78354934
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/Breadcrumbs/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { Breadcrumbs } from './Breadcrumbs.component';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/LinkedEntityMetadataSelector.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/LinkedEntityMetadataSelector.component.js
new file mode 100644
index 0000000000..286f7ea49e
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/LinkedEntityMetadataSelector.component.js
@@ -0,0 +1,28 @@
+// @flow
+import React from 'react';
+
+import { useApplicableTypesAndSides } from './useApplicableTypesAndSides';
+import {
+    LinkedEntityMetadataSelector,
+    type LinkedEntityMetadataSelectorType,
+} from '../../../common/LinkedEntityMetadataSelector';
+import type { Props, Side, LinkedEntityMetadata } from './linkedEntityMetadataSelector.types';
+
+export const LinkedEntityMetadataSelectorFromTrackedEntity = ({
+    relationshipTypes,
+    trackedEntityTypeId,
+    programId,
+    onSelectLinkedEntityMetadata,
+}: Props) => {
+    const applicableTypesInfo = useApplicableTypesAndSides(relationshipTypes, trackedEntityTypeId, [programId]);
+
+    const LinkedEntityMetadataSelectorCommon: LinkedEntityMetadataSelectorType<LinkedEntityMetadata, Side> =
+    LinkedEntityMetadataSelector;
+
+    return (
+        <LinkedEntityMetadataSelectorCommon
+            applicableTypesInfo={applicableTypesInfo}
+            onSelectLinkedEntityMetadata={onSelectLinkedEntityMetadata}
+        />
+    );
+};
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/index.js
new file mode 100644
index 0000000000..f4da8e02ea
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/index.js
@@ -0,0 +1,3 @@
+// @flow
+export { LinkedEntityMetadataSelectorFromTrackedEntity } from './LinkedEntityMetadataSelector.component';
+export type { LinkedEntityMetadata, Side } from './linkedEntityMetadataSelector.types';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/linkedEntityMetadataSelector.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/linkedEntityMetadataSelector.types.js
new file mode 100644
index 0000000000..7d089dbfa9
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/linkedEntityMetadataSelector.types.js
@@ -0,0 +1,37 @@
+// @flow
+import type { RelationshipTypes } from '../../../common/Types';
+import type { TargetSides } from '../../../common/LinkedEntityMetadataSelector';
+
+
+export type Side = $ReadOnly<{|
+    trackedEntityTypeId: string,
+    trackedEntityName: string,
+    programId?: string,
+    name: string,
+    targetSide: TargetSides,
+|}>;
+
+export type ApplicableTypeInfo = $ReadOnly<{|
+    id: string,
+    name: string,
+    sides: $ReadOnlyArray<Side>,
+|}>;
+
+export type ApplicableTypesInfo = $ReadOnlyArray<ApplicableTypeInfo>;
+
+export type LinkedEntityMetadata = $ReadOnly<{|
+    trackedEntityTypeId: string,
+    programId: string,
+    name: string,
+    targetSide: TargetSides,
+    relationshipId: string,
+    trackedEntityName: string,
+|}>;
+
+export type Props = $ReadOnly<{|
+    relationshipTypes: RelationshipTypes,
+    trackedEntityTypeId: string,
+    programId: string,
+    onSelectLinkedEntityMetadata: (linkedEntityMetadata: LinkedEntityMetadata) => void,
+
+|}>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/useApplicableTypesAndSides.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/useApplicableTypesAndSides.js
new file mode 100644
index 0000000000..60f6ab77f8
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/LinkedEntityMetadataSelector/useApplicableTypesAndSides.js
@@ -0,0 +1,179 @@
+// @flow
+import { useMemo } from 'react';
+import { TARGET_SIDES } from '../common';
+import type { ApplicableTypesInfo } from './linkedEntityMetadataSelector.types';
+import type { RelationshipType } from '../../../common/Types';
+import { RELATIONSHIP_ENTITIES } from '../../../common/constants';
+import type { TargetSides } from '../../../common/LinkedEntityMetadataSelector';
+
+const isApplicableProgram = (programId, sourceProgramIds) =>
+    (!sourceProgramIds || !programId || sourceProgramIds.includes(programId));
+
+const isApplicableUnidirectionalRelationshipType = (
+    { trackedEntityType, program },
+    sourceTrackedEntityTypeId,
+    sourceProgramIds,
+) => {
+    const trackedEntityTypeId = trackedEntityType.id;
+    const programId = program?.id;
+
+    return Boolean(
+        sourceTrackedEntityTypeId === trackedEntityTypeId &&
+        isApplicableProgram(programId, sourceProgramIds),
+    );
+};
+
+const computeTargetSidesDualMatchingTET = (() => {
+    const getProgramMatchInfo = (sourceProgramIds, programId) => {
+        if (!programId) {
+            return { noProgram: true, programMatch: false };
+        }
+
+        if (sourceProgramIds.includes(programId)) {
+            return { programMatch: true, noProgram: false };
+        }
+
+        return { programMatch: false, noProgram: false };
+    };
+
+    return (sourceProgramIds, fromProgramId, toProgramId): Array<TargetSides> => {
+        if (!sourceProgramIds) {
+            return [TARGET_SIDES.FROM, TARGET_SIDES.TO];
+        }
+        const { programMatch: fromProgramMatch, noProgram: fromNoProgram } =
+            getProgramMatchInfo(sourceProgramIds, fromProgramId);
+        const { programMatch: toProgramMatch, noProgram: toNoProgram } =
+            getProgramMatchInfo(sourceProgramIds, toProgramId);
+
+        if (fromProgramMatch) {
+            return [TARGET_SIDES.TO];
+        } else if (toProgramMatch) {
+            return [TARGET_SIDES.FROM];
+        } else if (fromNoProgram && toNoProgram) {
+            return [TARGET_SIDES.FROM, TARGET_SIDES.TO];
+        } else if (fromNoProgram) {
+            return [TARGET_SIDES.TO];
+        } else if (toNoProgram) {
+            return [TARGET_SIDES.FROM];
+        }
+
+        return [];
+    };
+})();
+
+const getApplicableTargetSidesForBidirectionalRelationshipType = ({
+    fromConstraint,
+    toConstraint,
+}, sourceTrackedEntityTypeId, sourceProgramIds): Array<TargetSides> => {
+    const { trackedEntityType: fromTrackedEntityType } = fromConstraint;
+    const { trackedEntityType: toTrackedEntityType } = toConstraint;
+
+    if (fromTrackedEntityType.id === sourceTrackedEntityTypeId &&
+        toTrackedEntityType.id === sourceTrackedEntityTypeId) {
+        return computeTargetSidesDualMatchingTET(
+            sourceProgramIds,
+            fromConstraint.program?.id,
+            toConstraint.program?.id,
+        );
+    }
+
+    if (fromTrackedEntityType.id === sourceTrackedEntityTypeId ||
+        toTrackedEntityType.id === sourceTrackedEntityTypeId) {
+        const { programId, targetSide } = fromTrackedEntityType.id === sourceTrackedEntityTypeId ?
+            { programId: fromConstraint.program?.id, targetSide: TARGET_SIDES.TO } :
+            { programId: toConstraint.program?.id, targetSide: TARGET_SIDES.FROM };
+        return isApplicableProgram(programId, sourceProgramIds) ? [targetSide] : [];
+    }
+
+    return [];
+};
+
+export const useApplicableTypesAndSides = (
+    relationshipTypes: $ReadOnlyArray<RelationshipType>,
+    sourceTrackedEntityTypeId: string,
+    sourceProgramIds: $ReadOnlyArray<string>,
+): ApplicableTypesInfo => useMemo(() =>
+    relationshipTypes.map(({
+        fromConstraint,
+        toConstraint,
+        bidirectional,
+        id,
+        displayName,
+        fromToName,
+        toFromName,
+    }) => {
+        if (fromConstraint.relationshipEntity === RELATIONSHIP_ENTITIES.TRACKED_ENTITY_INSTANCE &&
+                toConstraint.relationshipEntity === RELATIONSHIP_ENTITIES.TRACKED_ENTITY_INSTANCE) {
+            if (!bidirectional) {
+                const applicable = isApplicableUnidirectionalRelationshipType(
+                    fromConstraint,
+                    sourceTrackedEntityTypeId,
+                    sourceProgramIds,
+                );
+
+                if (!applicable) {
+                    // $FlowFixMe filter
+                    return null;
+                }
+                const { trackedEntityType, program } = toConstraint;
+
+                return {
+                    id,
+                    name: displayName,
+                    sides: [{
+                        programId: program?.id,
+                        trackedEntityTypeId: trackedEntityType.id,
+                        trackedEntityName: trackedEntityType.name.toLowerCase(),
+                        targetSide: TARGET_SIDES.TO,
+                        name: fromToName ?? displayName,
+                    }],
+                };
+            }
+
+            const targetSides = getApplicableTargetSidesForBidirectionalRelationshipType(
+                { fromConstraint, toConstraint },
+                sourceTrackedEntityTypeId,
+                sourceProgramIds,
+            );
+
+            if (!targetSides.length) {
+                // $FlowFixMe filter
+                return null;
+            }
+
+            return {
+                id,
+                name: displayName,
+                sides: targetSides.map((targetSide) => {
+                    const {
+                        trackedEntityTypeId,
+                        trackedEntityName,
+                        programId,
+                        name,
+                    } = targetSide === TARGET_SIDES.TO ? {
+                        trackedEntityTypeId: toConstraint.trackedEntityType.id,
+                        trackedEntityName: toConstraint.trackedEntityType.name.toLowerCase(),
+                        programId: toConstraint.program?.id,
+                        name: fromToName,
+                    } : {
+                        trackedEntityTypeId: fromConstraint.trackedEntityType.id,
+                        trackedEntityName: fromConstraint.trackedEntityType.name.toLowerCase(),
+                        programId: fromConstraint.program?.id,
+                        name: toFromName,
+                    };
+
+                    return {
+                        trackedEntityTypeId,
+                        trackedEntityName,
+                        programId,
+                        targetSide,
+                        // $FlowFixMe
+                        name,
+                    };
+                }),
+            };
+        }
+        // $FlowFixMe filter
+        return null;
+    }).filter(applicableType => applicableType),
+[relationshipTypes, sourceTrackedEntityTypeId, sourceProgramIds]);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.component.js
new file mode 100644
index 0000000000..66eae92b47
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.component.js
@@ -0,0 +1,286 @@
+// @flow
+import React, { useCallback, useState, type ComponentType, useMemo } from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { withStyles } from '@material-ui/core';
+import { Widget } from '../../../Widget';
+import { LinkButton } from '../../../Buttons/LinkButton.component';
+import { Breadcrumbs } from './Breadcrumbs';
+import { NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS } from './wizardSteps.const';
+import {
+    LinkedEntityMetadataSelectorFromTrackedEntity,
+    type LinkedEntityMetadata,
+} from './LinkedEntityMetadataSelector';
+import { RetrieverModeSelector } from './RetrieverModeSelector';
+import type { ComponentProps, StyledComponentProps } from './NewTrackedEntityRelationship.types';
+import { useAddRelationship } from './hooks/useAddRelationship';
+import { TARGET_SIDES } from './common';
+import { generateUID } from '../../../../utils/uid/generateUID';
+
+const styles = {
+    container: {
+        backgroundColor: '#FAFAFA',
+        maxWidth: 1200,
+    },
+    bar: {
+        color: '#494949',
+        padding: '8px',
+        display: 'inline-block',
+        fontSize: '14px',
+        borderRadius: '4px',
+        marginBottom: '10px',
+        backgroundColor: '#E9EEF4',
+    },
+    linkText: {
+        backgroundColor: 'transparent',
+        fontSize: 'inherit',
+        color: 'inherit',
+    },
+};
+
+const NewTrackedEntityRelationshipPlain = ({
+    relationshipTypes,
+    trackedEntityTypeId,
+    programId,
+    teiId,
+    orgUnitId,
+    onCancel,
+    onSave,
+    renderTrackedEntitySearch,
+    renderTrackedEntityRegistration,
+    onSelectFindMode,
+    classes,
+}: StyledComponentProps) => {
+    const [currentStep, setCurrentStep] =
+        useState(NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.SELECT_LINKED_ENTITY_METADATA);
+    const [selectedLinkedEntityMetadata: LinkedEntityMetadata, setSelectedLinkedEntityMetadata] = useState(undefined);
+    const { addRelationship } = useAddRelationship({
+        teiId,
+        onMutate: () => onSave && onSave(),
+    });
+
+
+    const onLinkToTrackedEntityFromSearch = useCallback(
+        (linkedTrackedEntityId: string, attributes?: { [attributeId: string]: string }) => {
+            if (!selectedLinkedEntityMetadata) return;
+            const { relationshipId: relationshipTypeId, targetSide } = selectedLinkedEntityMetadata;
+            const relationshipId = generateUID();
+
+            const apiData = targetSide === TARGET_SIDES.TO ?
+                { from: { trackedEntity: { trackedEntity: teiId } }, to: { trackedEntity: { trackedEntity: linkedTrackedEntityId } } } :
+                { from: { trackedEntity: { trackedEntity: linkedTrackedEntityId } }, to: { trackedEntity: { trackedEntity: teiId } } };
+
+            const clientData = {
+                createdAt: new Date().toISOString(),
+                pendingApiResponse: true,
+                ...apiData,
+            };
+
+            if (attributes) {
+                const targetSideLC = targetSide.toLowerCase();
+                clientData[targetSideLC].trackedEntity = {
+                    ...clientData[targetSideLC].trackedEntity,
+                    attributes: Object.keys(attributes).map(attributeId => ({
+                        attribute: attributeId,
+                        value: attributes[attributeId],
+                    })),
+                };
+            }
+
+            addRelationship({
+                apiData: {
+                    relationships: [{
+                        relationshipType: relationshipTypeId,
+                        relationship: relationshipId,
+                        ...apiData,
+                    }],
+                },
+                clientRelationship: {
+                    relationshipType: relationshipTypeId,
+                    relationship: relationshipId,
+                    ...clientData,
+                },
+            });
+        }, [addRelationship, selectedLinkedEntityMetadata, teiId]);
+
+    const onLinkToTrackedEntityFromRegistration = useCallback((trackedEntity: Object) => {
+        if (!selectedLinkedEntityMetadata) return;
+        const { relationshipId: relationshipTypeId, targetSide } = selectedLinkedEntityMetadata;
+        const relationshipId = generateUID();
+
+        const relationshipData = targetSide === TARGET_SIDES.TO ?
+            { from: { trackedEntity: { trackedEntity: teiId } }, to: { trackedEntity: { trackedEntity: trackedEntity.trackedEntity } } } :
+            { from: { trackedEntity: { trackedEntity: trackedEntity.trackedEntity } }, to: { trackedEntity: { trackedEntity: teiId } } };
+
+        const clientData = {
+            relationship: relationshipId,
+            relationshipType: relationshipTypeId,
+            createdAt: new Date().toISOString(),
+            pendingApiResponse: true,
+            ...relationshipData,
+            [targetSide.toLowerCase()]: {
+                trackedEntity: {
+                    attributes: trackedEntity.attributes ?? trackedEntity.enrollments?.[0]?.attributes,
+                    orgUnitId: trackedEntity.orgUnit,
+                    trackedEntity: trackedEntity.trackedEntity,
+                    trackedEntityType: trackedEntity.trackedEntityType,
+                },
+            },
+        };
+
+        const payload = {
+            apiData: {
+                trackedEntities: [trackedEntity],
+                relationships: [{
+                    relationship: relationshipId,
+                    relationshipType: relationshipTypeId,
+                    ...relationshipData,
+                }],
+            },
+            clientRelationship: clientData,
+        };
+
+        addRelationship(payload);
+    }, [addRelationship, selectedLinkedEntityMetadata, teiId]);
+
+    const handleNavigation = useCallback(
+        (destination: $Values<typeof NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS>) => {
+            setCurrentStep(destination);
+        }, []);
+
+    const handleLinkedEntityMetadataSelection = useCallback((linkedEntityMetadata: LinkedEntityMetadata) => {
+        setSelectedLinkedEntityMetadata(linkedEntityMetadata);
+        setCurrentStep(NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.SELECT_RETRIEVER_MODE);
+    }, []);
+
+    const handleSearchRetrieverModeSelected = useCallback(() => {
+        if (selectedLinkedEntityMetadata) {
+            onSelectFindMode && onSelectFindMode({
+                findMode: 'TEI_SEARCH',
+                orgUnitId,
+                relationshipConstraint: {
+                    programId: selectedLinkedEntityMetadata?.programId,
+                    trackedEntityTypeId: selectedLinkedEntityMetadata.trackedEntityTypeId,
+                },
+            });
+        }
+        setCurrentStep(NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.FIND_EXISTING_LINKED_ENTITY);
+    }, [onSelectFindMode, orgUnitId, selectedLinkedEntityMetadata]);
+
+    const handleNewRetrieverModeSelected = useCallback(() => {
+        if (selectedLinkedEntityMetadata) {
+            onSelectFindMode && onSelectFindMode({
+                findMode: 'TEI_REGISTER',
+                orgUnitId,
+                relationshipConstraint: {
+                    programId: selectedLinkedEntityMetadata?.programId,
+                    trackedEntityTypeId: selectedLinkedEntityMetadata.trackedEntityTypeId,
+                },
+            });
+        }
+        setCurrentStep(NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.NEW_LINKED_ENTITY);
+    }, [onSelectFindMode, orgUnitId, selectedLinkedEntityMetadata]);
+
+
+    const stepContents = useMemo(() => {
+        if (currentStep.id === NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.SELECT_LINKED_ENTITY_METADATA.id) {
+            return (
+                <LinkedEntityMetadataSelectorFromTrackedEntity
+                    relationshipTypes={relationshipTypes}
+                    trackedEntityTypeId={trackedEntityTypeId}
+                    programId={programId}
+                    onSelectLinkedEntityMetadata={handleLinkedEntityMetadataSelection}
+                />
+            );
+        }
+        if (
+            currentStep.id === NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.SELECT_RETRIEVER_MODE.id
+            && selectedLinkedEntityMetadata?.trackedEntityName
+        ) {
+            return (
+                <RetrieverModeSelector
+                    onSearchSelected={handleSearchRetrieverModeSelected}
+                    onNewSelected={handleNewRetrieverModeSelected}
+                    trackedEntityName={selectedLinkedEntityMetadata.trackedEntityName}
+                />
+            );
+        }
+
+        // Steps below will be implemented by new PR
+        if (currentStep.id === NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.FIND_EXISTING_LINKED_ENTITY.id) {
+            const {
+                trackedEntityTypeId: linkedEntityTrackedEntityTypeId,
+                programId: linkedEntityProgramId,
+                // $FlowFixMe business logic dictates that we will have the linkedEntityMetadata at this step
+            }: LinkedEntityMetadata = selectedLinkedEntityMetadata;
+
+            if (renderTrackedEntitySearch) {
+                return renderTrackedEntitySearch(
+                    linkedEntityTrackedEntityTypeId,
+                    linkedEntityProgramId,
+                    onLinkToTrackedEntityFromSearch,
+                );
+            }
+        }
+
+        if (currentStep.id === NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS.NEW_LINKED_ENTITY.id) {
+            const {
+                trackedEntityTypeId: linkedEntityTrackedEntityTypeId,
+                programId: linkedEntityProgramId,
+                // $FlowFixMe business logic dictates that we will have the linkedEntityMetadata at this step
+            }: LinkedEntityMetadata = selectedLinkedEntityMetadata;
+
+            if (renderTrackedEntityRegistration) {
+                return renderTrackedEntityRegistration(
+                    linkedEntityTrackedEntityTypeId,
+                    linkedEntityProgramId,
+                    onLinkToTrackedEntityFromRegistration,
+                    onLinkToTrackedEntityFromSearch,
+                );
+            }
+        }
+
+        return (
+            <div>
+                {i18n.t('Missing implementation step')}
+            </div>
+        );
+    }, [
+        currentStep.id,
+        handleLinkedEntityMetadataSelection,
+        handleNewRetrieverModeSelected,
+        handleSearchRetrieverModeSelected,
+        onLinkToTrackedEntityFromRegistration,
+        onLinkToTrackedEntityFromSearch,
+        programId,
+        relationshipTypes,
+        renderTrackedEntityRegistration,
+        renderTrackedEntitySearch,
+        selectedLinkedEntityMetadata,
+        trackedEntityTypeId,
+    ]);
+
+    return (
+        <div className={classes.container}>
+            <div className={classes.bar}>
+                <LinkButton onClick={onCancel} className={classes.linkText}>
+                    {i18n.t('Go back without saving relationship')}
+                </LinkButton>
+            </div>
+            <Widget
+                noncollapsible
+                header={(
+                    <Breadcrumbs
+                        currentStep={currentStep}
+                        onNavigate={handleNavigation}
+                        linkedEntityMetadataName={selectedLinkedEntityMetadata?.name}
+                    />
+                )}
+            >
+                {stepContents}
+            </Widget>
+        </div>
+    );
+};
+
+export const NewTrackedEntityRelationshipComponent: ComponentType<ComponentProps> =
+    withStyles(styles)(NewTrackedEntityRelationshipPlain);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.const.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.const.js
new file mode 100644
index 0000000000..5b0ee59804
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.const.js
@@ -0,0 +1,5 @@
+
+export const creationModeStatuses = Object.freeze({
+    SEARCH: 'search',
+    NEW: 'new',
+});
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.container.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.container.js
new file mode 100644
index 0000000000..03a05eb491
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.container.js
@@ -0,0 +1,73 @@
+// @flow
+import React, { useCallback, useState, type ComponentType } from 'react';
+import { Button, spacers } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core';
+import i18n from '@dhis2/d2-i18n';
+import { NewTrackedEntityRelationshipPortal } from './NewTrackedEntityRelationship.portal';
+import type { ContainerProps, StyledContainerProps } from './NewTrackedEntityRelationship.types';
+
+const styles = {
+    container: {
+        padding: `0 ${spacers.dp16} ${spacers.dp24} ${spacers.dp16}`,
+    },
+};
+
+export const NewTrackedEntityRelationshipPlain = ({
+    renderElement,
+    teiId,
+    orgUnitId,
+    programId,
+    relationshipTypes,
+    trackedEntityTypeId,
+    onCloseAddRelationship,
+    onOpenAddRelationship,
+    renderTrackedEntitySearch,
+    renderTrackedEntityRegistration,
+    onSelectFindMode,
+    classes,
+}: StyledContainerProps) => {
+    const [addWizardVisible, setAddWizardVisibility] = useState(false);
+
+    const closeAddWizard = useCallback(() => {
+        setAddWizardVisibility(false);
+        onCloseAddRelationship && onCloseAddRelationship();
+    }, [onCloseAddRelationship]);
+
+    const openAddWizard = useCallback(() => {
+        setAddWizardVisibility(true);
+        onOpenAddRelationship && onOpenAddRelationship();
+    }, [onOpenAddRelationship]);
+
+    return (
+        <div className={classes.container}>
+            <Button
+                onClick={openAddWizard}
+                small
+                secondary
+            >
+                {i18n.t('New Relationship')}
+            </Button>
+
+            {
+                addWizardVisible && (
+                    <NewTrackedEntityRelationshipPortal
+                        relationshipTypes={relationshipTypes}
+                        teiId={teiId}
+                        orgUnitId={orgUnitId}
+                        trackedEntityTypeId={trackedEntityTypeId}
+                        programId={programId}
+                        renderElement={renderElement}
+                        onSave={closeAddWizard}
+                        onCancel={closeAddWizard}
+                        renderTrackedEntitySearch={renderTrackedEntitySearch}
+                        renderTrackedEntityRegistration={renderTrackedEntityRegistration}
+                        onSelectFindMode={onSelectFindMode}
+                    />
+                )
+            }
+        </div>
+    );
+};
+
+export const NewTrackedEntityRelationship: ComponentType<ContainerProps> =
+    withStyles(styles)(NewTrackedEntityRelationshipPlain);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.portal.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.portal.js
new file mode 100644
index 0000000000..eec749787f
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.portal.js
@@ -0,0 +1,10 @@
+// @flow
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { NewTrackedEntityRelationshipComponent } from './NewTrackedEntityRelationship.component';
+import type { PortalProps } from './NewTrackedEntityRelationship.types';
+
+export const NewTrackedEntityRelationshipPortal = ({ renderElement, ...passOnProps }: PortalProps) =>
+    ReactDOM.createPortal((
+        <NewTrackedEntityRelationshipComponent {...passOnProps} />
+    ), renderElement);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.types.js
new file mode 100644
index 0000000000..95f24c4882
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/NewTrackedEntityRelationship.types.js
@@ -0,0 +1,76 @@
+// @flow
+import * as React from 'react';
+import type { RelationshipTypes } from '../../common/Types';
+import type {
+    OnLinkToTrackedEntityFromSearch,
+    OnLinkToTrackedEntityFromRegistration,
+    OnSelectFindMode,
+} from '../WidgetTrackedEntityRelationship.types';
+
+type RenderTrackedEntitySearch =
+    (trackedEntityTypeId: string, programId: string, onLinkToTrackedEntity: OnLinkToTrackedEntityFromSearch) => React.Element<any>
+
+type RenderTrackedEntityRegistration =
+     (
+         trackedEntityTypeId: string,
+         programId: string,
+         onLinkToTrackedEntityFromRegistration: OnLinkToTrackedEntityFromRegistration,
+         onLinkToTrackedEntity: OnLinkToTrackedEntityFromSearch,
+     ) => React.Element<any>
+
+export type ContainerProps = $ReadOnly<{|
+    teiId: string,
+    orgUnitId: string,
+    renderElement: HTMLElement,
+    relationshipTypes: RelationshipTypes,
+    trackedEntityTypeId: string,
+    programId: string,
+    renderTrackedEntitySearch?: RenderTrackedEntitySearch,
+    renderTrackedEntityRegistration: RenderTrackedEntityRegistration,
+    onCloseAddRelationship?: () => void,
+    onOpenAddRelationship?: () => void,
+    onSelectFindMode?: OnSelectFindMode,
+|}>;
+
+export type StyledContainerProps = $ReadOnly<{|
+    ...ContainerProps,
+    ...CssClasses,
+|}>;
+
+export type PortalProps = $ReadOnly<{|
+    renderElement: HTMLElement,
+    teiId: string,
+    orgUnitId: string,
+    relationshipTypes: RelationshipTypes,
+    trackedEntityTypeId: string,
+    programId: string,
+    onSave: () => void,
+    onCancel: () => void,
+    onSelectFindMode?: OnSelectFindMode,
+    renderTrackedEntitySearch?: RenderTrackedEntitySearch,
+    renderTrackedEntityRegistration?: RenderTrackedEntityRegistration,
+|}>;
+
+export type StyledPortalProps = $ReadOnly<{|
+    ...PortalProps,
+    ...CssClasses,
+|}>;
+
+
+export type ComponentProps = $ReadOnly<{|
+    teiId: string,
+    orgUnitId: string,
+    relationshipTypes: RelationshipTypes,
+    trackedEntityTypeId: string,
+    programId: string,
+    onSave: () => void,
+    onCancel: () => void,
+    renderTrackedEntitySearch?: RenderTrackedEntitySearch,
+    renderTrackedEntityRegistration?: RenderTrackedEntityRegistration,
+    onSelectFindMode?: OnSelectFindMode,
+|}>;
+
+export type StyledComponentProps = $ReadOnly<{|
+    ...ComponentProps,
+    ...CssClasses,
+|}>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/RetrieverModeSelector/RetrieverModeSelector.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/RetrieverModeSelector/RetrieverModeSelector.component.js
new file mode 100644
index 0000000000..a775fed023
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/RetrieverModeSelector/RetrieverModeSelector.component.js
@@ -0,0 +1,45 @@
+// @flow
+import React, { type ComponentType } from 'react';
+import { Button, IconSearch16, IconAdd16, spacersNum, spacers } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { withStyles } from '@material-ui/core';
+import type { PlainProps, Props } from './retrieverModeSelector.types';
+
+const styles = {
+    container: {
+        padding: spacersNum.dp16,
+        paddingTop: 0,
+    },
+    retrieverSelector: {
+        display: 'flex',
+        gap: spacers.dp8,
+    },
+};
+
+const RetrieverModeSelectorPlain = ({
+    classes,
+    onSearchSelected,
+    onNewSelected,
+    trackedEntityName,
+}: PlainProps) => (
+    <div className={classes.container}>
+        <div className={classes.retrieverSelector}>
+            <Button
+                className={classes.retrieverSelector}
+                onClick={onSearchSelected}
+            >
+                <IconSearch16 />
+                <p>{i18n.t('Link to an existing {{tetName}}', { tetName: trackedEntityName })}</p>
+            </Button>
+            <Button
+                className={classes.retrieverSelector}
+                onClick={onNewSelected}
+            >
+                <IconAdd16 />
+                <p>{i18n.t('Create new')}</p>
+            </Button>
+        </div>
+    </div>
+);
+
+export const RetrieverModeSelector: ComponentType<Props> = withStyles(styles)(RetrieverModeSelectorPlain);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/RetrieverModeSelector/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/RetrieverModeSelector/index.js
new file mode 100644
index 0000000000..f0d9af5395
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/RetrieverModeSelector/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { RetrieverModeSelector } from './RetrieverModeSelector.component';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/RetrieverModeSelector/retrieverModeSelector.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/RetrieverModeSelector/retrieverModeSelector.types.js
new file mode 100644
index 0000000000..8bf6c93de9
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/RetrieverModeSelector/retrieverModeSelector.types.js
@@ -0,0 +1,12 @@
+// @flow
+
+export type Props = $ReadOnly<{|
+    onSearchSelected: () => void,
+    onNewSelected: () => void,
+    trackedEntityName: string,
+|}>;
+
+export type PlainProps = $ReadOnly<{|
+    ...Props,
+    ...CssClasses,
+|}>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/common/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/common/index.js
new file mode 100644
index 0000000000..e5ad1f726a
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/common/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { TARGET_SIDES } from './targetSides';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/common/targetSides.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/common/targetSides.js
new file mode 100644
index 0000000000..3880543dc2
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/common/targetSides.js
@@ -0,0 +1,9 @@
+// @flow
+
+export const TARGET_SIDES: {|
+    FROM: 'FROM',
+    TO: 'TO',
+|} = Object.freeze({
+    FROM: 'FROM',
+    TO: 'TO',
+});
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/hooks/useAddRelationship.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/hooks/useAddRelationship.js
new file mode 100644
index 0000000000..9bdfd4b14d
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/hooks/useAddRelationship.js
@@ -0,0 +1,94 @@
+// @flow
+import i18n from '@dhis2/d2-i18n';
+import { useDataEngine, useAlert } from '@dhis2/app-runtime';
+import { useMutation, useQueryClient } from 'react-query';
+
+type Props = {
+    teiId: string;
+    onMutate?: () => void;
+    onSuccess?: (apiResponse: Object, requestData: Object) => void;
+}
+
+const ReactQueryAppNamespace = 'capture';
+
+const addRelationshipMutation = {
+    resource: '/tracker?async=false&importStrategy=CREATE',
+    type: 'create',
+    data: ({ apiData }) => apiData,
+};
+
+export const useAddRelationship = ({ teiId, onMutate, onSuccess }: Props) => {
+    const queryClient = useQueryClient();
+    const dataEngine = useDataEngine();
+    const { show: showSnackbar } = useAlert(
+        i18n.t('An error occurred while adding the relationship'),
+        { critical: true },
+    );
+
+    // $FlowFixMe
+    const { mutate } = useMutation(
+        ({ apiData }) => dataEngine.mutate(addRelationshipMutation, {
+            variables: {
+                apiData,
+            },
+        }),
+        {
+            onError: (_, requestData) => {
+                showSnackbar();
+                const apiRelationshipId = requestData.clientRelationship.relationship;
+                const currentRelationships = queryClient.getQueryData([ReactQueryAppNamespace, 'relationships', teiId]);
+
+                if (!currentRelationships?.instances) return;
+
+                const newRelationships = currentRelationships.instances.reduce((acc, relationship) => {
+                    if (relationship.relationship === apiRelationshipId) {
+                        return acc;
+                    }
+                    acc.push(relationship);
+                    return acc;
+                }, []);
+
+                queryClient.setQueryData(
+                    [ReactQueryAppNamespace, 'relationships', teiId],
+                    { instances: newRelationships },
+                );
+            },
+            onMutate: (...props) => {
+                onMutate && onMutate(...props);
+                const { clientRelationship } = props[0];
+                if (!clientRelationship) return;
+
+                queryClient.setQueryData([ReactQueryAppNamespace, 'relationships', teiId], (oldData) => {
+                    const instances = oldData?.instances || [];
+                    const updatedInstances = [clientRelationship, ...instances];
+                    return { instances: updatedInstances };
+                });
+            },
+            onSuccess: async (apiResponse, requestData) => {
+                const apiRelationshipId = apiResponse.bundleReport.typeReportMap.RELATIONSHIP.objectReports[0].uid;
+                const currentRelationships = queryClient.getQueryData([ReactQueryAppNamespace, 'relationships', teiId]);
+                if (!currentRelationships?.instances) return;
+
+                const newRelationships = currentRelationships.instances.map((relationship) => {
+                    if (relationship.relationship === apiRelationshipId) {
+                        return {
+                            ...relationship,
+                            pendingApiResponse: false,
+                        };
+                    }
+                    return relationship;
+                });
+
+                queryClient.setQueryData(
+                    [ReactQueryAppNamespace, 'relationships', teiId],
+                    { instances: newRelationships },
+                );
+                onSuccess && onSuccess(apiResponse, requestData);
+            },
+        },
+    );
+
+    return {
+        addRelationship: mutate,
+    };
+};
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/index.js
new file mode 100644
index 0000000000..18ce242d75
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { NewTrackedEntityRelationship } from './NewTrackedEntityRelationship.container';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/wizardSteps.const.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/wizardSteps.const.js
new file mode 100644
index 0000000000..55c01e50de
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/NewTrackedEntityRelationship/wizardSteps.const.js
@@ -0,0 +1,6 @@
+export const NEW_TRACKED_ENTITY_RELATIONSHIP_WIZARD_STEPS = Object.freeze({
+    SELECT_LINKED_ENTITY_METADATA: Object.freeze({ value: 1, id: 'selectLinkedEntityMetadata' }),
+    SELECT_RETRIEVER_MODE: Object.freeze({ value: 2, id: 'selectRetrieverMode' }),
+    FIND_EXISTING_LINKED_ENTITY: Object.freeze({ value: 3, id: 'findExistingLinkedEntity' }),
+    NEW_LINKED_ENTITY: Object.freeze({ value: 4, id: 'newLinkedEntity' }),
+});
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.component.js
new file mode 100644
index 0000000000..6037269107
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.component.js
@@ -0,0 +1,70 @@
+// @flow
+import React, { useMemo } from 'react';
+import i18n from '@dhis2/d2-i18n';
+import type { WidgetTrackedEntityRelationshipProps } from './WidgetTrackedEntityRelationship.types';
+import { RelationshipsWidget } from '../common/RelationshipsWidget';
+import { RelationshipSearchEntities, useRelationships } from '../common/useRelationships';
+import { NewTrackedEntityRelationship } from './NewTrackedEntityRelationship';
+import { useTrackedEntityTypeName } from './hooks/useTrackedEntityTypeName';
+
+export const WidgetTrackedEntityRelationship = ({
+    relationshipTypes: cachedRelationshipTypes,
+    teiId,
+    trackedEntityTypeId,
+    programId,
+    orgUnitId,
+    addRelationshipRenderElement,
+    onLinkedRecordClick,
+    onOpenAddRelationship,
+    onCloseAddRelationship,
+    onSelectFindMode,
+    renderTrackedEntitySearch,
+    renderTrackedEntityRegistration,
+}: WidgetTrackedEntityRelationshipProps) => {
+    const { data: relationships, isError, isLoading: isLoadingRelationships } = useRelationships(teiId, RelationshipSearchEntities.TRACKED_ENTITY);
+    const { data: trackedEntityTypeName, isLoading: isLoadingTEType } = useTrackedEntityTypeName(trackedEntityTypeId);
+
+    const isLoading = useMemo(() => isLoadingRelationships || isLoadingTEType,
+        [isLoadingRelationships, isLoadingTEType],
+    );
+
+    if (isError) {
+        return (
+            <div>
+                {i18n.t('Something went wrong while loading relationships. Please try again later.')}
+            </div>
+        );
+    }
+
+    return (
+        <RelationshipsWidget
+            title={i18n.t('{{trackedEntityTypeName}} relationships', {
+                trackedEntityTypeName,
+                interpolation: { escapeValue: false },
+            })}
+            isLoading={isLoading}
+            relationships={relationships}
+            cachedRelationshipTypes={cachedRelationshipTypes}
+            sourceId={teiId}
+            onLinkedRecordClick={onLinkedRecordClick}
+        >
+            {
+                relationshipTypes => (
+                    <NewTrackedEntityRelationship
+                        teiId={teiId}
+                        renderElement={addRelationshipRenderElement}
+                        relationshipTypes={relationshipTypes}
+                        trackedEntityTypeId={trackedEntityTypeId}
+                        programId={programId}
+                        orgUnitId={orgUnitId}
+                        onOpenAddRelationship={onOpenAddRelationship}
+                        onCloseAddRelationship={onCloseAddRelationship}
+                        onSelectFindMode={onSelectFindMode}
+                        renderTrackedEntitySearch={renderTrackedEntitySearch}
+                        renderTrackedEntityRegistration={renderTrackedEntityRegistration}
+                    />
+                )
+            }
+        </RelationshipsWidget>
+    );
+};
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.types.js
new file mode 100644
index 0000000000..da87a34f42
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/WidgetTrackedEntityRelationship.types.js
@@ -0,0 +1,47 @@
+// @flow
+import * as React from 'react';
+import type { RelationshipTypes } from '../common/Types';
+import type { LinkedRecordClick } from '../common/RelationshipsWidget';
+
+export type RelationshipConstraint = {|
+    trackedEntityTypeId: string,
+    programId: ?string,
+|}
+
+export type OnLinkToTrackedEntityFromSearch =
+    (linkedTrackedEntityId: string, attributes?: { [attributeId: string]: string }) => void;
+
+export type OnLinkToTrackedEntityFromRegistration =
+    (teiPayload: Object) => void;
+
+export type OnSelectFindModeProps = {|
+    findMode: string,
+    orgUnitId: string,
+    relationshipConstraint: RelationshipConstraint,
+|}
+
+export type OnSelectFindMode = (OnSelectFindModeProps) => void
+
+export type WidgetTrackedEntityRelationshipProps = {|
+    trackedEntityTypeId: string,
+    teiId: string,
+    programId: string,
+    orgUnitId: string,
+    addRelationshipRenderElement: HTMLElement,
+    onLinkedRecordClick: LinkedRecordClick,
+    onOpenAddRelationship?: () => void,
+    onCloseAddRelationship?: () => void,
+    relationshipTypes?: RelationshipTypes,
+    onSelectFindMode?: OnSelectFindMode,
+    renderTrackedEntityRegistration: (
+        trackedEntityTypeId: string,
+        programId: string,
+        onLinkToTrackedEntityFromRegistration: OnLinkToTrackedEntityFromRegistration,
+        onLinkToTrackedEntityFromSearch: OnLinkToTrackedEntityFromSearch,
+    ) => React.Element<any>,
+    renderTrackedEntitySearch?: (
+        trackedEntityTypeId: string,
+        programId: string,
+        onLinkToTrackedEntityFromSearch: OnLinkToTrackedEntityFromSearch,
+    ) => React.Element<any>,
+|};
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/hooks/useTrackedEntityTypeName.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/hooks/useTrackedEntityTypeName.js
new file mode 100644
index 0000000000..4ab4b8afb9
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/hooks/useTrackedEntityTypeName.js
@@ -0,0 +1,31 @@
+// @flow
+import { useMemo } from 'react';
+import { useApiDataQuery } from '../../../../utils/reactQueryHelpers';
+
+type ReturnData = {
+    displayName: string,
+}
+
+export const useTrackedEntityTypeName = (tetId: string) => {
+    const query = useMemo(() => ({
+        resource: 'trackedEntityTypes',
+        id: tetId,
+        params: {
+            fields: 'displayName',
+        },
+    }), [tetId]);
+
+    const { data, isLoading, error } = useApiDataQuery<ReturnData>(
+        ['trackedEntityTypeName', tetId],
+        query,
+        {
+            enabled: !!tetId,
+            select: ({ displayName }: any) => displayName,
+        });
+
+    return {
+        data,
+        isLoading,
+        error,
+    };
+};
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/index.js
new file mode 100644
index 0000000000..a1a65f2107
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/WidgetTrackedEntityRelationship/index.js
@@ -0,0 +1,16 @@
+// @flow
+export { WidgetTrackedEntityRelationship } from './WidgetTrackedEntityRelationship.component';
+export type {
+    WidgetTrackedEntityRelationshipProps,
+    RelationshipConstraint,
+    OnSelectFindModeProps,
+    OnSelectFindMode,
+} from './WidgetTrackedEntityRelationship.types';
+export type { RelationshipTypes } from '../common/Types';
+export type {
+    LinkedRecordClick,
+    NavigationArgs,
+    NavigationArgsEvent,
+    NavigationArgsTrackedEntity,
+} from '../common/RelationshipsWidget';
+export { useAddRelationship } from './NewTrackedEntityRelationship/hooks/useAddRelationship';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/LinkedEntityMetadataSelector/LinkedEntityMetadataSelector.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/LinkedEntityMetadataSelector/LinkedEntityMetadataSelector.component.js
new file mode 100644
index 0000000000..98c34a8cb6
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/LinkedEntityMetadataSelector/LinkedEntityMetadataSelector.component.js
@@ -0,0 +1,73 @@
+// @flow
+import React from 'react';
+import { Button, spacers } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core';
+import type { PlainProps, LinkedEntityMetadata, Side } from './linkedEntityMetadataSelector.types';
+
+const styles = {
+    container: {
+        padding: spacers.dp16,
+        paddingTop: 0,
+    },
+    typeSelector: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacers.dp8,
+        marginBottom: spacers.dp16,
+    },
+    selectorButton: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacers.dp4,
+        marginBottom: spacers.dp8,
+    },
+    title: {
+        fontWeight: 500,
+        marginBottom: spacers.dp4,
+    },
+    buttonContainer: {
+        display: 'flex',
+        gap: spacers.dp8,
+    },
+};
+
+export const LinkedEntityMetadataSelectorPlain = <TLinkedEntityMetadata: LinkedEntityMetadata, TSide: Side>({
+    applicableTypesInfo,
+    onSelectLinkedEntityMetadata,
+    classes }: PlainProps<TLinkedEntityMetadata, TSide>) => (
+        <div className={classes.container}>
+            <div className={classes.typeSelector}>
+                {applicableTypesInfo.map(({ id, name, sides }) => (
+                    <div
+                        key={id}
+                        className={classes.selectorButton}
+                    >
+                        <div className={classes.title}>
+                            {name}
+                        </div>
+                        <div>
+                            <div className={classes.buttonContainer}>
+                                {sides.map((side: TSide) => (
+                                    <Button
+                                        key={`${id}-${side.targetSide}`}
+                                        // $FlowFixMe
+                                        onClick={() => onSelectLinkedEntityMetadata({
+                                            ...side,
+                                            relationshipId: id,
+                                        })}
+                                        secondary
+                                    >
+                                        {side.name}
+                                    </Button>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+
+
+export const LinkedEntityMetadataSelector =
+    withStyles(styles)(LinkedEntityMetadataSelectorPlain);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/LinkedEntityMetadataSelector/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/LinkedEntityMetadataSelector/index.js
new file mode 100644
index 0000000000..3468a522b9
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/LinkedEntityMetadataSelector/index.js
@@ -0,0 +1,3 @@
+// @flow
+export { LinkedEntityMetadataSelector } from './LinkedEntityMetadataSelector.component';
+export type { TargetSides, LinkedEntityMetadataSelectorType } from './linkedEntityMetadataSelector.types';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/LinkedEntityMetadataSelector/linkedEntityMetadataSelector.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/LinkedEntityMetadataSelector/linkedEntityMetadataSelector.types.js
new file mode 100644
index 0000000000..d23c3d34ec
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/LinkedEntityMetadataSelector/linkedEntityMetadataSelector.types.js
@@ -0,0 +1,36 @@
+// @flow
+import type { ComponentType } from 'react';
+
+export type TargetSides = 'FROM' | 'TO';
+
+export type Side = $ReadOnly<{
+    name: string,
+    targetSide: TargetSides,
+}>;
+
+type ApplicableTypeInfo<TSide: Side> = $ReadOnly<{
+    id: string,
+    name: string,
+    sides: $ReadOnlyArray<TSide>,
+}>;
+
+type ApplicableTypesInfo<TSide> = $ReadOnlyArray<ApplicableTypeInfo<TSide>>;
+
+export type LinkedEntityMetadata = $ReadOnly<{
+    ...Side,
+    relationshipId: string,
+}>;
+
+export type Props<TLinkedEntityMetadata: LinkedEntityMetadata, TSide: Side> = $ReadOnly<{|
+    applicableTypesInfo: ApplicableTypesInfo<TSide>,
+    onSelectLinkedEntityMetadata: (linkedEntityMetadata: TLinkedEntityMetadata) => void,
+|}>;
+
+export type PlainProps<TLinkedEntityMetadata: LinkedEntityMetadata, TSide: Side> = $ReadOnly<{|
+    applicableTypesInfo: ApplicableTypesInfo<TSide>,
+    onSelectLinkedEntityMetadata: (linkedEntityMetadata: TLinkedEntityMetadata) => void,
+    ...CssClasses,
+|}>;
+
+export type LinkedEntityMetadataSelectorType<TLinkedEntityMetadata, TSide> =
+    ComponentType<Props<TLinkedEntityMetadata, TSide>>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntitiesViewer.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntitiesViewer.component.js
new file mode 100644
index 0000000000..072177e943
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntitiesViewer.component.js
@@ -0,0 +1,45 @@
+// @flow
+import React, { type ComponentType } from 'react';
+import { withStyles } from '@material-ui/core';
+import { spacersNum, spacers, colors } from '@dhis2/ui';
+import { LinkedEntityTable } from './LinkedEntityTable.component';
+import type { Props, StyledProps } from './linkedEntitiesViewer.types';
+
+const styles = {
+    container: {
+        padding: `0 ${spacers.dp16} ${spacers.dp12} ${spacers.dp16}`,
+    },
+    title: {
+        fontWeight: 500,
+        fontSize: 16,
+        color: colors.grey800,
+        paddingBottom: spacersNum.dp16,
+    },
+    wrapper: {
+        paddingBottom: spacersNum.dp16,
+    },
+};
+
+
+const LinkedEntitiesViewerPlain = ({ groupedLinkedEntities, onLinkedRecordClick, classes }: StyledProps) => (
+    <div
+        data-test="relationships"
+        className={classes.container}
+    >
+        {groupedLinkedEntities?.map((linkedEntityGroup) => {
+            const { id, name, linkedEntities, columns, context } = linkedEntityGroup;
+            return (
+                <div key={id} className={classes.wrapper}>
+                    <div className={classes.title}>{name}</div>
+                    <LinkedEntityTable
+                        linkedEntities={linkedEntities}
+                        columns={columns}
+                        onLinkedRecordClick={onLinkedRecordClick}
+                        context={context}
+                    />
+                </div>
+            );
+        })}
+    </div>);
+
+export const LinkedEntitiesViewer: ComponentType<Props> = withStyles(styles)(LinkedEntitiesViewerPlain);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTable.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTable.component.js
new file mode 100644
index 0000000000..a286b51ff4
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTable.component.js
@@ -0,0 +1,71 @@
+// @flow
+import React, { useState, useMemo, type ComponentType } from 'react';
+import { withStyles } from '@material-ui/core';
+import {
+    DataTable,
+    Button,
+    spacers,
+} from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { LinkedEntityTableHeader } from './LinkedEntityTableHeader.component';
+import { LinkedEntityTableBody } from './LinkedEntityTableBody.component';
+import type { Props, StyledProps } from './linkedEntityTable.types';
+
+const DEFAULT_VISIBLE_ROWS_COUNT = 5;
+
+const styles = {
+    button: {
+        marginTop: `${spacers.dp8}`,
+    },
+    dataTableWrapper: {
+        overflowY: 'auto',
+        whiteSpace: 'nowrap',
+    },
+};
+
+const LinkedEntityTablePlain = ({ linkedEntities, columns, onLinkedRecordClick, context, classes }: StyledProps) => {
+    const [visibleRowsCount, setVisibleRowsCount] = useState(DEFAULT_VISIBLE_ROWS_COUNT);
+
+    const visibleLinkedEntities = useMemo(() =>
+        linkedEntities.slice(0, visibleRowsCount),
+    [linkedEntities, visibleRowsCount]);
+
+    const showMoreButtonVisible = linkedEntities.length > visibleRowsCount;
+
+    return (
+        <div
+            className={classes.dataTableWrapper}
+        >
+            <DataTable>
+                <LinkedEntityTableHeader
+                    columns={columns}
+                />
+                <LinkedEntityTableBody
+                    linkedEntities={visibleLinkedEntities}
+                    columns={columns}
+                    onLinkedRecordClick={onLinkedRecordClick}
+                    context={context}
+                />
+            </DataTable>
+            {showMoreButtonVisible && (
+                <Button
+                    small
+                    secondary
+                    dataTest="show-more-button"
+                    className={classes.button}
+                    onClick={() => {
+                        const updatedRowsCount =
+                            Math.min(visibleRowsCount + DEFAULT_VISIBLE_ROWS_COUNT, linkedEntities.length);
+                        setVisibleRowsCount(updatedRowsCount);
+                    }}
+                >
+                    {i18n.t('Show {{ rest }} more', {
+                        rest: Math.min(linkedEntities.length - visibleRowsCount, DEFAULT_VISIBLE_ROWS_COUNT),
+                    })}
+                </Button>
+            )}
+        </div>
+    );
+};
+
+export const LinkedEntityTable: ComponentType<Props> = withStyles(styles)(LinkedEntityTablePlain);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTableBody.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTableBody.component.js
new file mode 100644
index 0000000000..898e2fec0a
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTableBody.component.js
@@ -0,0 +1,86 @@
+// @flow
+import React, { type ComponentType } from 'react';
+import { withStyles } from '@material-ui/core';
+import {
+    DataTableBody,
+    DataTableRow,
+    DataTableCell,
+    Tooltip,
+} from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { convertServerToClient, convertClientToList } from '../../../../converters';
+import type { Props, StyledProps } from './linkedEntityTableBody.types';
+
+const styles = {
+    row: {
+        cursor: 'pointer',
+    },
+    rowDisabled: {
+        cursor: 'not-allowed',
+        opacity: 0.5,
+    },
+};
+
+const LinkedEntityTableBodyPlain = ({
+    linkedEntities,
+    columns,
+    onLinkedRecordClick,
+    context,
+    classes,
+}: StyledProps) => (
+    <DataTableBody>
+        {
+            linkedEntities
+                .map(({ id: entityId, values, baseValues, navigation }) => {
+                    const { pendingApiResponse } = baseValues || {};
+                    return (
+                        <DataTableRow
+                            key={entityId}
+                            className={pendingApiResponse ? classes.rowDisabled : classes.row}
+                        >
+                            {
+                                // $FlowFixMe flow doesn't like destructering
+                                columns.map(({ id, type, convertValue }) => {
+                                    const value = type ?
+                                        convertClientToList(convertServerToClient(values[id], type), type) :
+                                        convertValue(baseValues?.[id] ?? context.display[id]);
+
+                                    return (
+                                        <Tooltip
+                                            key={`${entityId}-${id}`}
+                                            content={i18n.t('To open this relationship, please wait until saving is complete')}
+                                            closeDelay={50}
+                                        >
+                                            {({ onMouseOver, onMouseOut, ref }) => (
+                                                <DataTableCell
+                                                    className={classes.row}
+                                                    key={`${entityId}-${id}`}
+                                                    // $FlowFixMe flow doesn't like destructering
+                                                    onClick={() => !pendingApiResponse && onLinkedRecordClick({ ...context.navigation, ...navigation })}
+                                                    ref={(tableCell) => {
+                                                        if (tableCell) {
+                                                            if (pendingApiResponse) {
+                                                                tableCell.onmouseover = onMouseOver;
+                                                                tableCell.onmouseout = onMouseOut;
+                                                                ref.current = tableCell;
+                                                            } else {
+                                                                tableCell.onmouseover = null;
+                                                                tableCell.onmouseout = null;
+                                                            }
+                                                        }
+                                                    }}
+                                                >
+                                                    {value}
+                                                </DataTableCell>
+                                            )}
+                                        </Tooltip>
+                                    );
+                                })}
+                        </DataTableRow>
+                    );
+                })
+        }
+    </DataTableBody>
+);
+
+export const LinkedEntityTableBody: ComponentType<Props> = withStyles(styles)(LinkedEntityTableBodyPlain);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTableHeader.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTableHeader.component.js
new file mode 100644
index 0000000000..e7681a6867
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/LinkedEntityTableHeader.component.js
@@ -0,0 +1,25 @@
+// @flow
+import React from 'react';
+import {
+    DataTableHead,
+    DataTableRow,
+    DataTableColumnHeader,
+} from '@dhis2/ui';
+import type { Props } from './linkedEntityTableHeader.types';
+
+export const LinkedEntityTableHeader = ({ columns }: Props) => (
+    <DataTableHead>
+        <DataTableRow>
+            {
+                columns
+                    .map(({ id, displayName }) => (
+                        <DataTableColumnHeader
+                            key={id}
+                        >
+                            {displayName}
+                        </DataTableColumnHeader>
+                    ))
+            }
+        </DataTableRow>
+    </DataTableHead>
+);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/RelationshipsWidget.component.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/RelationshipsWidget.component.js
new file mode 100644
index 0000000000..c0ee94c29d
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/RelationshipsWidget.component.js
@@ -0,0 +1,94 @@
+// @flow
+import React, { type ComponentType, useState } from 'react';
+import { Chip, IconLink24, spacers } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core';
+import { Widget } from '../../../Widget';
+import { useGroupedLinkedEntities } from './useGroupedLinkedEntities';
+import { useRelationshipTypes } from './useRelationshipTypes';
+import { LinkedEntitiesViewer } from './LinkedEntitiesViewer.component';
+import type { Props, StyledProps } from './relationshipsWidget.types';
+import { LoadingMaskElementCenter } from '../../../LoadingMasks';
+
+const styles = {
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    icon: {
+        paddingRight: spacers.dp8,
+    },
+};
+
+const RelationshipsWidgetPlain = ({
+    title,
+    relationships,
+    isLoading,
+    cachedRelationshipTypes,
+    sourceId,
+    onLinkedRecordClick,
+    children,
+    classes,
+}: StyledProps) => {
+    const [open, setOpenStatus] = useState(true);
+    const { data: relationshipTypes } = useRelationshipTypes(cachedRelationshipTypes);
+    const groupedLinkedEntities = useGroupedLinkedEntities(sourceId, relationshipTypes, relationships);
+
+    if (isLoading) {
+        return (
+            <Widget
+                header={(
+                    <div className={classes.header}>
+                        <span className={classes.icon}>
+                            <IconLink24 />
+                        </span>
+                    </div>
+                )}
+                onOpen={() => setOpenStatus(true)}
+                onClose={() => setOpenStatus(false)}
+                open={open}
+            >
+                <LoadingMaskElementCenter
+                    containerStyle={{ height: '100px', marginBottom: '50px' }}
+                />
+            </Widget>
+        );
+    }
+
+    return (
+        <div
+            data-test="relationship-widget"
+        >
+            <Widget
+                header={(
+                    <div className={classes.header}>
+                        <span className={classes.icon}>
+                            <IconLink24 />
+                        </span>
+                        <span>{title}</span>
+                        {relationships && (
+                            <Chip dense>
+                                {relationships.length}
+                            </Chip>
+                        )}
+                    </div>
+                )}
+                onOpen={() => setOpenStatus(true)}
+                onClose={() => setOpenStatus(false)}
+                open={open}
+            >
+                {
+                    groupedLinkedEntities && (
+                        <LinkedEntitiesViewer
+                            groupedLinkedEntities={groupedLinkedEntities}
+                            onLinkedRecordClick={onLinkedRecordClick}
+                        />
+                    )
+                }{
+                    relationshipTypes && children(relationshipTypes)
+                }
+            </Widget>
+        </div>
+    );
+};
+
+export const RelationshipsWidget: ComponentType<Props> = withStyles(styles)(RelationshipsWidgetPlain);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/index.js
new file mode 100644
index 0000000000..0390efec9f
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/index.js
@@ -0,0 +1,3 @@
+// @flow
+export { RelationshipsWidget } from './RelationshipsWidget.component';
+export type { NavigationArgsTrackedEntity, NavigationArgsEvent, NavigationArgs, LinkedRecordClick } from './types';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntitiesViewer.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntitiesViewer.types.js
new file mode 100644
index 0000000000..93160917f9
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntitiesViewer.types.js
@@ -0,0 +1,12 @@
+// @flow
+import type { GroupedLinkedEntities, LinkedRecordClick } from './types';
+
+export type Props = $ReadOnly<{|
+    groupedLinkedEntities: GroupedLinkedEntities,
+    onLinkedRecordClick: LinkedRecordClick,
+|}>;
+
+export type StyledProps = $ReadOnly<{|
+    ...Props,
+    ...CssClasses,
+|}>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntityTable.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntityTable.types.js
new file mode 100644
index 0000000000..8d3fb8b72a
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntityTable.types.js
@@ -0,0 +1,14 @@
+// @flow
+import type { LinkedEntityData, TableColumn, LinkedRecordClick, Context } from './types';
+
+export type Props = $ReadOnly<{|
+    linkedEntities: $ReadOnlyArray<LinkedEntityData>,
+    columns: $ReadOnlyArray<TableColumn>,
+    onLinkedRecordClick: LinkedRecordClick,
+    context: Context,
+|}>;
+
+export type StyledProps = $ReadOnly<{|
+    ...Props,
+    ...CssClasses,
+|}>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntityTableBody.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntityTableBody.types.js
new file mode 100644
index 0000000000..1efc3202a5
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntityTableBody.types.js
@@ -0,0 +1,14 @@
+// @flow
+import type { LinkedEntityData, TableColumn, Context, LinkedRecordClick } from './types';
+
+export type Props = $ReadOnly<{|
+    linkedEntities: $ReadOnlyArray<LinkedEntityData>,
+    columns: $ReadOnlyArray<TableColumn>,
+    onLinkedRecordClick: LinkedRecordClick,
+    context: Context,
+|}>;
+
+export type StyledProps = $ReadOnly<{|
+    ...Props,
+    ...CssClasses,
+|}>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntityTableHeader.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntityTableHeader.types.js
new file mode 100644
index 0000000000..17def5ae63
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/linkedEntityTableHeader.types.js
@@ -0,0 +1,6 @@
+// @flow
+import type { TableColumn } from './types';
+
+export type Props = $ReadOnly<{|
+    columns: $ReadOnlyArray<TableColumn>,
+|}>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/relationshipsWidget.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/relationshipsWidget.types.js
new file mode 100644
index 0000000000..e7e8d306c3
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/relationshipsWidget.types.js
@@ -0,0 +1,19 @@
+// @flow
+import type { Node } from 'React';
+import type { InputRelationshipData, RelationshipTypes } from '../Types';
+import type { LinkedRecordClick } from './types';
+
+export type Props = $ReadOnly<{|
+    title: string,
+    relationships?: Array<InputRelationshipData>,
+    cachedRelationshipTypes?: RelationshipTypes,
+    isLoading: boolean,
+    sourceId: string,
+    onLinkedRecordClick: LinkedRecordClick,
+    children: (relationshipTypes: RelationshipTypes) => Node,
+|}>;
+
+export type StyledProps = $ReadOnly<{|
+    ...Props,
+    ...CssClasses,
+|}>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/types/GroupedLinkedEntities.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/types/GroupedLinkedEntities.types.js
new file mode 100644
index 0000000000..3f18f492c9
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/types/GroupedLinkedEntities.types.js
@@ -0,0 +1,51 @@
+// @flow
+import { dataElementTypes } from '../../../../../metaData';
+
+export type MetadataBasedColumn = $ReadOnly<{|
+    id: string,
+    displayName: string,
+    type: $Keys<typeof dataElementTypes>,
+|}>;
+
+export type ManualColumn = $ReadOnly<{|
+    id: string,
+    displayName: string,
+    convertValue: (value: any) => any,
+|}>;
+
+export type TableColumn = MetadataBasedColumn | ManualColumn;
+
+export type NavigationContextTrackedEntity = $ReadOnly<{|
+    programId?: string,
+|}>;
+
+export type NavigationContextEvent = $ReadOnly<{||}>;
+
+export type LinkedEntityData = $ReadOnly<{|
+    id: string,
+    values: $ReadOnly<{| [id: string]: ?string |}>,
+    baseValues?: {
+        relationshipCreatedAt?: string,
+        pendingApiResponse?: boolean,
+    },
+    navigation?: {
+        programId?: string,
+        eventId?: string,
+        trackedEntityId?: string,
+    },
+|}>;
+
+export type Context = $ReadOnly<{|
+    navigation: NavigationContextTrackedEntity | NavigationContextEvent,
+    display: Object,
+|}>;
+
+export type LinkedEntityGroup = $ReadOnly<{|
+    id: string,
+    name: string,
+    linkedEntities: $ReadOnlyArray<LinkedEntityData>,
+    columns: $ReadOnlyArray<TableColumn>,
+    context: Context,
+|}>;
+
+export type GroupedLinkedEntities = $ReadOnlyArray<LinkedEntityGroup>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/types/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/types/index.js
new file mode 100644
index 0000000000..268dc966e4
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/types/index.js
@@ -0,0 +1,3 @@
+// @flow
+export type * from './GroupedLinkedEntities.types';
+export type * from './navigation.types';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/types/navigation.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/types/navigation.types.js
new file mode 100644
index 0000000000..5fb9807b63
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/types/navigation.types.js
@@ -0,0 +1,15 @@
+// @flow
+
+export type NavigationArgsTrackedEntity = $ReadOnly<{|
+    programId?: string,
+    trackedEntityId: string,
+|}>;
+
+export type NavigationArgsEvent = $ReadOnly<{|
+    eventId: string,
+    programId: string,
+|}>;
+
+export type NavigationArgs = NavigationArgsTrackedEntity | NavigationArgsEvent;
+
+export type LinkedRecordClick = (navigationArgs: NavigationArgs) => void;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/useGroupedLinkedEntities.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/useGroupedLinkedEntities.js
new file mode 100644
index 0000000000..d339202c7b
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/useGroupedLinkedEntities.js
@@ -0,0 +1,218 @@
+// @flow
+import { useMemo } from 'react';
+import log from 'loglevel';
+import moment from 'moment';
+import i18n from '@dhis2/d2-i18n';
+import { errorCreator } from 'capture-core-utils';
+import { dataElementTypes } from '../../../../metaData';
+import { RELATIONSHIP_ENTITIES } from '../constants';
+import { convertClientToList, convertServerToClient } from '../../../../converters';
+import type { GroupedLinkedEntities, LinkedEntityData } from './types';
+import type { InputRelationshipData, RelationshipTypes } from '../Types';
+
+
+const getFallbackFieldsByRelationshipEntity = {
+    [RELATIONSHIP_ENTITIES.TRACKED_ENTITY_INSTANCE]: () => [{
+        id: 'trackedEntityTypeName',
+        displayName: i18n.t('Type'),
+        convertValue: trackedEntityTypeName => trackedEntityTypeName,
+    }, {
+        id: 'relationshipCreatedAt',
+        displayName: i18n.t('Created date'),
+        convertValue: createdDate => convertClientToList(
+            convertServerToClient(createdDate, dataElementTypes.DATE), dataElementTypes.DATE,
+        ),
+    }],
+    [RELATIONSHIP_ENTITIES.PROGRAM_STAGE_INSTANCE]: () => [{
+        id: 'programStageName',
+        displayName: i18n.t('Program stage name'),
+        convertValue: programStageName => programStageName,
+    },
+    {
+        id: 'relationshipCreatedAt',
+        displayName: i18n.t('Created date'),
+        convertValue: createdDate => convertClientToList(
+            convertServerToClient(createdDate, dataElementTypes.DATE), dataElementTypes.DATE,
+        ),
+    }],
+};
+
+const getColumns = ({ relationshipEntity, trackerDataView }) => {
+    let fields;
+    if (relationshipEntity === RELATIONSHIP_ENTITIES.TRACKED_ENTITY_INSTANCE) {
+        fields = trackerDataView.attributes;
+    } else if (relationshipEntity === RELATIONSHIP_ENTITIES.PROGRAM_STAGE_INSTANCE) {
+        fields = trackerDataView.dataElements;
+    }
+
+    if (!fields?.length) {
+        fields = getFallbackFieldsByRelationshipEntity[relationshipEntity]();
+    }
+
+    return fields;
+};
+
+// $FlowFixMe destructering
+const getContext = ({ relationshipEntity, program, programStage, trackedEntityType }) => {
+    if (relationshipEntity === RELATIONSHIP_ENTITIES.TRACKED_ENTITY_INSTANCE) {
+        return {
+            navigation: {
+                programId: program?.id,
+            },
+            display: {
+                trackedEntityTypeName: trackedEntityType.name,
+            },
+        };
+    }
+
+    if (relationshipEntity === RELATIONSHIP_ENTITIES.PROGRAM_STAGE_INSTANCE) {
+        return {
+            navigation: {},
+            display: {
+                programStageName: programStage.name,
+            },
+        };
+    }
+
+    return {
+        navigation: {},
+        display: {},
+    };
+};
+
+const getEventData = ({ dataValues, event, program: programId }, relationshipCreatedAt, pendingApiResponse): LinkedEntityData => {
+    const values = dataValues.reduce((acc, dataValue) => {
+        acc[dataValue.dataElement] = dataValue.value;
+        return acc;
+    }, {});
+
+    return {
+        id: event,
+        values,
+        baseValues: {
+            relationshipCreatedAt,
+            pendingApiResponse,
+        },
+        navigation: {
+            eventId: event,
+            programId,
+        },
+    };
+};
+
+const getTrackedEntityData = ({ attributes, trackedEntity }, relationshipCreatedAt, pendingApiResponse?: boolean): LinkedEntityData => {
+    const values = attributes.reduce((acc, attribute) => {
+        acc[attribute.attribute] = attribute.value;
+        return acc;
+    }, {});
+
+    return {
+        id: trackedEntity,
+        values,
+        baseValues: {
+            pendingApiResponse,
+            relationshipCreatedAt,
+        },
+        navigation: {
+            trackedEntityId: trackedEntity,
+        },
+    };
+};
+
+const getLinkedEntityData = (apiLinkedEntity, relationshipCreatedAt, pendingApiResponse) => {
+    if (apiLinkedEntity.trackedEntity) {
+        return getTrackedEntityData(apiLinkedEntity.trackedEntity, relationshipCreatedAt, pendingApiResponse);
+    }
+
+    if (apiLinkedEntity.event) {
+        return getEventData(apiLinkedEntity.event, relationshipCreatedAt, pendingApiResponse);
+    }
+
+    if (apiLinkedEntity.enrollment) {
+        log.warn(errorCreator('Linked entities of type enrollment are not currently supported')({ apiLinkedEntity }));
+        return null;
+    }
+
+    log.error(errorCreator('Unsupported linked entity type')({ apiLinkedEntity }));
+    return null;
+};
+
+const determineLinkedEntity = (fromEntity, toEntity, sourceId) => {
+    if (fromEntity.trackedEntity?.trackedEntity === sourceId || fromEntity.event?.event === sourceId) {
+        return toEntity;
+    }
+
+    if (toEntity.trackedEntity?.trackedEntity === sourceId || toEntity.event?.event === sourceId) {
+        return fromEntity;
+    }
+
+    log.error(errorCreator('Could not determine linked entity')({ fromEntity, toEntity, sourceId }));
+    return null;
+};
+
+export const useGroupedLinkedEntities = (
+    sourceId: string,
+    relationshipTypes: ?RelationshipTypes,
+    relationships?: Array<InputRelationshipData>,
+): GroupedLinkedEntities => useMemo(() => {
+    if (!relationships?.length || !relationshipTypes?.length) {
+        return [];
+    }
+
+    return relationships
+        .sort((a, b) => moment(b.createdAt)
+            .diff(moment(a.createdAt)))
+        .reduce((accGroupedLinkedEntities, relationship) => {
+            const {
+                relationshipType: relationshipTypeId,
+                from: fromEntity,
+                to: toEntity,
+                pendingApiResponse,
+                createdAt: relationshipCreatedAt,
+            } = relationship;
+
+            const relationshipType = relationshipTypes.find(type => type.id === relationshipTypeId);
+            if (!relationshipType) {
+                log.error(
+                    errorCreator('Could not find relationshipType')({ relationshipTypeId, relationshipTypes }),
+                );
+                return accGroupedLinkedEntities;
+            }
+
+            const apiLinkedEntity = determineLinkedEntity(fromEntity, toEntity, sourceId);
+            if (!apiLinkedEntity) {
+                return accGroupedLinkedEntities;
+            }
+
+            const linkedEntityData = getLinkedEntityData(apiLinkedEntity, relationshipCreatedAt, pendingApiResponse);
+            if (!linkedEntityData) {
+                return accGroupedLinkedEntities;
+            }
+
+            const groupId = `${relationshipTypeId}-${apiLinkedEntity === fromEntity ? 'from' : 'to'}`;
+            const group = accGroupedLinkedEntities.find(({ id }) => id === groupId);
+            if (group) {
+                group.linkedEntities = [
+                    ...group.linkedEntities,
+                    linkedEntityData,
+                ];
+            } else {
+                const { constraint, name } = apiLinkedEntity === fromEntity ?
+                    { constraint: relationshipType.fromConstraint, name: relationshipType.toFromName } :
+                    { constraint: relationshipType.toConstraint, name: relationshipType.fromToName };
+
+                const columns = getColumns(constraint);
+                const context = getContext(constraint);
+
+                accGroupedLinkedEntities.push({
+                    id: groupId,
+                    name: name || relationshipType.displayName,
+                    linkedEntities: [linkedEntityData],
+                    columns,
+                    context,
+                });
+            }
+
+            return accGroupedLinkedEntities;
+        }, []);
+}, [relationships, relationshipTypes, sourceId]);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/useRelationshipTypes.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/useRelationshipTypes.js
new file mode 100644
index 0000000000..10c6aee562
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/RelationshipsWidget/useRelationshipTypes.js
@@ -0,0 +1,92 @@
+// @flow
+import { useMemo } from 'react';
+import { useApiMetadataQuery } from '../../../../utils/reactQueryHelpers';
+import type { ApiRelationshipTypes, RelationshipTypes } from '../Types';
+import { extractElementIdsFromRelationshipTypes, formatRelationshipTypes } from '../utils';
+
+type Element = {|
+    id: string,
+    displayName: string,
+    valueType: string,
+|};
+
+const relationshipTypesQuery = {
+    resource: 'relationshipTypes',
+    params: {
+        fields: 'id,displayName,fromToName,toFromName,fromConstraint[relationshipEntity,trackerDataView,trackedEntityType[id,name],program[id,name],programStage[id,name]],toConstraint[relationshipEntity,trackerDataView,trackedEntityType[id,name],program[id,name],programStage[id,name]]',
+    },
+};
+
+export const useRelationshipTypes = (cachedRelationshipTypes?: RelationshipTypes) => {
+    const { data: apiRelationshipTypes, isError, isLoading } = useApiMetadataQuery<?ApiRelationshipTypes>(
+        ['relationshipTypes'],
+        relationshipTypesQuery,
+        {
+            enabled: !cachedRelationshipTypes?.length,
+            select: ({ relationshipTypes }: any) => relationshipTypes,
+        },
+    );
+
+    const { attributeQuery, dataElementQuery } = useMemo(() => {
+        if (!apiRelationshipTypes) return {};
+        const { dataElementIds, attributeIds } = extractElementIdsFromRelationshipTypes(apiRelationshipTypes);
+
+        const filteredAttributeQuery = {
+            resource: 'trackedEntityAttributes',
+            params: {
+                fields: 'id,displayName,valueType',
+                filter: `id:in:[${Object.keys(attributeIds).join(',')}]`,
+                paging: false,
+            },
+        };
+
+        const filteredDataElementQuery = {
+            resource: 'dataElements',
+            params: {
+                fields: 'id,displayName,valueType',
+                filter: `id:in:[${Object.keys(dataElementIds).join(',')}]`,
+                paging: false,
+            },
+        };
+
+        return {
+            attributeQuery: filteredAttributeQuery,
+            dataElementQuery: filteredDataElementQuery,
+        };
+    }, [apiRelationshipTypes]);
+
+    const { data: apiAttributes } = useApiMetadataQuery<Array<Element>>(
+        ['attributes'],
+        attributeQuery,
+        {
+            enabled: !cachedRelationshipTypes?.length && !!attributeQuery,
+            select: ({ trackedEntityAttributes }: any) => trackedEntityAttributes,
+        },
+    );
+
+    const { data: apiDataElements } = useApiMetadataQuery<Array<Element>>(
+        ['dataElements'],
+        dataElementQuery,
+        {
+            enabled: !cachedRelationshipTypes?.length && !!dataElementQuery,
+            select: ({ dataElements }: any) => dataElements,
+        },
+    );
+
+
+    const relationshipTypes = useMemo(() => {
+        if (!apiRelationshipTypes || !apiAttributes || !apiDataElements) return null;
+
+        return formatRelationshipTypes({
+            relationshipTypes: apiRelationshipTypes,
+            attributes: apiAttributes,
+            dataElements: apiDataElements,
+        });
+    }, [apiAttributes, apiDataElements, apiRelationshipTypes]);
+
+    return {
+        data: relationshipTypes ?? cachedRelationshipTypes,
+        isError,
+        isLoading,
+    };
+};
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/Types/RelationshipData.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/Types/RelationshipData.types.js
new file mode 100644
index 0000000000..d42c822d33
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/Types/RelationshipData.types.js
@@ -0,0 +1,32 @@
+// @flow
+
+export type ApiLinkedEntity = {|
+    event?: {
+        event: string,
+        orgUnitName: string,
+        program: string,
+        orgUnit: string,
+        status: string,
+        dataValues: Array<{ dataElement: string, value: string }>,
+    },
+    trackedEntity?: {
+        trackedEntity: string,
+        program: string,
+        orgUnit: string,
+        orgUnitName: string,
+        attributes: Array<{ attribute: string, value: string }>,
+    },
+    enrollment?: {},
+|}
+
+export type InputRelationshipData = {
+    id: string,
+    relationshipName: string,
+    relationshipType: string,
+    relationship: string,
+    createdAt: string,
+    bidirectional: string,
+    pendingApiResponse?: boolean,
+    from: ApiLinkedEntity,
+    to: ApiLinkedEntity,
+}
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/Types/RelationshipTypes.types.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/Types/RelationshipTypes.types.js
new file mode 100644
index 0000000000..ea5b0b0a53
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/Types/RelationshipTypes.types.js
@@ -0,0 +1,92 @@
+// @flow
+import { dataElementTypes } from '../../../../metaData';
+
+export type ElementValue = {|
+    attribute?: string,
+    dataElement?: string,
+    displayName: string,
+    valueType: string,
+    value: any,
+|};
+
+export type ApiTrackerDataView = $ReadOnly<{|
+    attributes: $ReadOnlyArray<string>,
+    dataElements: $ReadOnlyArray<string>,
+|}>;
+
+type ApiCommonConstraintTypes = $ReadOnly<{|
+    trackerDataView: ApiTrackerDataView,
+|}>;
+
+export type ApiTrackedEntityConstraint = $ReadOnly<{|
+    ...ApiCommonConstraintTypes,
+    relationshipEntity: 'TRACKED_ENTITY_INSTANCE',
+    trackedEntityType: { id: string, name: string },
+    program?: { id: string, name: string },
+|}>;
+
+export type ApiProgramStageInstanceConstraint = $ReadOnly<{|
+    ...ApiCommonConstraintTypes,
+    relationshipEntity: 'PROGRAM_STAGE_INSTANCE',
+    program: { id: string, name: string },
+    programStage: { id: string, name: string },
+|}>;
+
+export type ApiRelationshipConstraint = ApiTrackedEntityConstraint | ApiProgramStageInstanceConstraint;
+
+export type ApiRelationshipType = $ReadOnly<{|
+    id: string,
+    displayName: string,
+    bidirectional: boolean,
+    access: Object,
+    toFromName: string,
+    fromToName: string,
+    fromConstraint: ApiRelationshipConstraint,
+    toConstraint: ApiRelationshipConstraint,
+|}>;
+
+export type ApiRelationshipTypes = $ReadOnlyArray<ApiRelationshipType>;
+
+export type TrackerDataViewEntity = $ReadOnly<{|
+    id: string,
+    type: $Keys<typeof dataElementTypes>,
+    displayName: string,
+|}>;
+
+export type TrackerDataView = $ReadOnly<{|
+    attributes: $ReadOnlyArray<TrackerDataViewEntity>,
+    dataElements: $ReadOnlyArray<TrackerDataViewEntity>,
+|}>;
+
+export type CommonConstraintTypes = $ReadOnly<{|
+    trackerDataView: TrackerDataView,
+|}>;
+
+export type TrackedEntityConstraint = $ReadOnly<{|
+    ...CommonConstraintTypes,
+    relationshipEntity: 'TRACKED_ENTITY_INSTANCE',
+    trackedEntityType: { id: string, name: string },
+    program?: { id: string, name: string },
+|}>;
+
+export type ProgramStageInstanceConstraint = $ReadOnly<{|
+    ...CommonConstraintTypes,
+    relationshipEntity: 'PROGRAM_STAGE_INSTANCE',
+    program: { id: string, name: string },
+    programStage: { id: string, name: string },
+|}>;
+
+export type RelationshipConstraint = TrackedEntityConstraint | ProgramStageInstanceConstraint;
+
+export type RelationshipType = $ReadOnly<{|
+    id: string,
+    displayName: string,
+    bidirectional: boolean,
+    access: Object,
+    toFromName: string,
+    fromToName: string,
+    fromConstraint: RelationshipConstraint,
+    toConstraint: RelationshipConstraint,
+|}>;
+
+export type RelationshipTypes = $ReadOnlyArray<RelationshipType>;
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/Types/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/Types/index.js
new file mode 100644
index 0000000000..1182761bee
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/Types/index.js
@@ -0,0 +1,4 @@
+// @flow
+
+export type * from './RelationshipTypes.types';
+export type * from './RelationshipData.types';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/constants.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/constants.js
new file mode 100644
index 0000000000..e3e3225010
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/constants.js
@@ -0,0 +1,10 @@
+// @flow
+export const RELATIONSHIP_ENTITIES: {|
+    PROGRAM_STAGE_INSTANCE: 'PROGRAM_STAGE_INSTANCE',
+    TRACKED_ENTITY_INSTANCE: 'TRACKED_ENTITY_INSTANCE',
+    PROGRAM_INSTANCE: 'PROGRAM_INSTANCE',
+|} = Object.freeze({
+    PROGRAM_STAGE_INSTANCE: 'PROGRAM_STAGE_INSTANCE',
+    TRACKED_ENTITY_INSTANCE: 'TRACKED_ENTITY_INSTANCE',
+    PROGRAM_INSTANCE: 'PROGRAM_INSTANCE',
+});
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/useRelationships/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/useRelationships/index.js
new file mode 100644
index 0000000000..2c93b6f33c
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/useRelationships/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { useRelationships, RelationshipSearchEntities } from './useRelationships';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/useRelationships/useRelationships.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/useRelationships/useRelationships.js
new file mode 100644
index 0000000000..9c5b323232
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/useRelationships/useRelationships.js
@@ -0,0 +1,31 @@
+// @flow
+import { useMemo } from 'react';
+import { useApiDataQuery } from '../../../../utils/reactQueryHelpers';
+import type { InputRelationshipData } from '../Types';
+
+export const RelationshipSearchEntities = Object.freeze({
+    TRACKED_ENTITY: 'trackedEntity',
+    ENROLLMENT: 'enrollment',
+    EVENT: 'event',
+});
+
+type ReturnData = Array<InputRelationshipData>;
+
+export const useRelationships = (entityId: string, searchMode: string) => {
+    const query = useMemo(() => ({
+        resource: 'tracker/relationships',
+        params: {
+            [searchMode]: entityId,
+            fields: 'relationshipType,createdAt,from[trackedEntity[trackedEntity,attributes,program,orgUnit,trackedEntityType],event[event,dataValues,program,orgUnit,orgUnitName,status,createdAt]],to[trackedEntity[trackedEntity,attributes,program,orgUnit,trackedEntityType],event[event,dataValues,program,orgUnit,orgUnitName,status,createdAt]]',
+        },
+    }), [entityId, searchMode]);
+
+    return useApiDataQuery<ReturnData>(
+        ['relationships', entityId],
+        query,
+        {
+            enabled: !!entityId,
+            select: ({ instances }: any) => instances,
+        },
+    );
+};
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/extractElementIdsFromRelationshipTypes.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/extractElementIdsFromRelationshipTypes.js
new file mode 100644
index 0000000000..ac437c364b
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/extractElementIdsFromRelationshipTypes.js
@@ -0,0 +1,32 @@
+// @flow
+
+import type { ApiRelationshipTypes } from '../Types';
+
+export const extractElementIdsFromRelationshipTypes = (relationshipTypes: ApiRelationshipTypes) => {
+    const attributeIds = relationshipTypes
+        .flatMap((relationshipType) => {
+            const { fromConstraint, toConstraint } = relationshipType;
+            const fromAttributes = fromConstraint.trackerDataView?.attributes || [];
+            const toAttributes = toConstraint.trackerDataView?.attributes || [];
+            return [...fromAttributes, ...toAttributes];
+        }).reduce((acc, attributeId) => {
+            acc[attributeId] = true;
+            return acc;
+        }, {});
+
+    const dataElementIds = relationshipTypes
+        .flatMap((relationshipType) => {
+            const { fromConstraint, toConstraint } = relationshipType;
+            const fromDataElements = fromConstraint.trackerDataView?.dataElements || [];
+            const toDataElements = toConstraint.trackerDataView?.dataElements || [];
+            return [...fromDataElements, ...toDataElements];
+        }).reduce((acc, dataElementId) => {
+            acc[dataElementId] = true;
+            return acc;
+        }, {});
+
+    return {
+        attributeIds,
+        dataElementIds,
+    };
+};
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/formatRelationshipTypes.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/formatRelationshipTypes.js
new file mode 100644
index 0000000000..ce575581db
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/formatRelationshipTypes.js
@@ -0,0 +1,82 @@
+// @flow
+import type { ApiRelationshipTypes, RelationshipTypes } from '../Types';
+import { replaceElementIdsWithElement } from './replaceElementIdsWithElement';
+
+const elementTypes = {
+    ATTRIBUTE: 'ATTRIBUTE',
+    DATA_ELEMENT: 'DATA_ELEMENT',
+};
+
+type Element = {|
+    id: string,
+    valueType: string,
+    displayName: string,
+|}
+
+type Props = {|
+    relationshipTypes: ApiRelationshipTypes,
+    attributes: Array<Element>,
+    dataElements: Array<Element>,
+|}
+
+export const formatRelationshipTypes = ({
+    relationshipTypes = [],
+    attributes,
+    dataElements,
+}: Props): RelationshipTypes => {
+    const attributesById = attributes.reduce((acc, { id, valueType, displayName }) => {
+        acc[id] = { valueType, displayName };
+        return acc;
+    }, {});
+
+    const dataElementsById = dataElements.reduce((acc, { id, valueType, displayName }) => {
+        acc[id] = { valueType, displayName };
+        return acc;
+    }, {});
+
+    return relationshipTypes
+        .map((relationshipType) => {
+            const { fromConstraint, toConstraint } = relationshipType;
+            const fromAttributes = replaceElementIdsWithElement(
+                fromConstraint.trackerDataView?.attributes,
+                attributesById,
+                { relationshipType, elementType: elementTypes.ATTRIBUTE },
+            );
+            const toAttributes = replaceElementIdsWithElement(
+                toConstraint.trackerDataView?.attributes,
+                attributesById,
+                { relationshipType, elementType: elementTypes.ATTRIBUTE },
+            );
+            const fromDataElements = replaceElementIdsWithElement(
+                fromConstraint.trackerDataView?.dataElements,
+                dataElementsById,
+                { relationshipType, elementType: elementTypes.DATA_ELEMENT },
+            );
+            const toDataElements = replaceElementIdsWithElement(
+                toConstraint.trackerDataView?.dataElements,
+                dataElementsById,
+                { relationshipType, elementType: elementTypes.DATA_ELEMENT },
+            );
+
+            return {
+                ...relationshipType,
+                // $FlowFixMe Might be fixable with generics
+                fromConstraint: {
+                    ...fromConstraint,
+                    trackerDataView: {
+                        attributes: fromAttributes,
+                        dataElements: fromDataElements,
+                    },
+                },
+                // $FlowFixMe Might be fixable with generics
+                toConstraint: {
+                    ...toConstraint,
+                    trackerDataView: {
+                        attributes: toAttributes,
+                        dataElements: toDataElements,
+                    },
+                },
+            };
+        })
+        .filter(relationshipType => relationshipType);
+};
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/index.js
new file mode 100644
index 0000000000..bbc3c5da67
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/index.js
@@ -0,0 +1,3 @@
+// @flow
+export { extractElementIdsFromRelationshipTypes } from './extractElementIdsFromRelationshipTypes';
+export { formatRelationshipTypes } from './formatRelationshipTypes';
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/replaceElementIdsWithElement.js b/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/replaceElementIdsWithElement.js
new file mode 100644
index 0000000000..e9e8d64332
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/common/utils/replaceElementIdsWithElement.js
@@ -0,0 +1,69 @@
+// @flow
+import log from 'loglevel';
+import { errorCreator } from '../../../../../capture-core-utils';
+import type { ApiRelationshipType } from '../Types';
+import {
+    dataElementTypes,
+} from '../../../../metaData';
+
+const elementTypes = {
+    ATTRIBUTE: 'attribute',
+    DATA_ELEMENT: 'dataElement',
+};
+
+type Elements = {|
+    [key: string]: {
+        id: string,
+        displayName: string,
+        valueType: $Keys<typeof dataElementTypes>,
+    },
+|}
+
+type Context = {|
+    relationshipType: ApiRelationshipType,
+    elementType: $Values<typeof elementTypes>
+|}
+
+type ElementArray = $ReadOnlyArray<{|
+    id: string,
+    type: $Keys<typeof dataElementTypes>,
+    displayName: string,
+|}>;
+
+export const replaceElementIdsWithElement = (
+    elementIds: ?$ReadOnlyArray<string>,
+    elements: Elements,
+    { relationshipType, elementType }: Context): ElementArray =>
+    // $FlowFixMe
+    (elementIds || [])
+        .map((elementId) => {
+            const element = elements[elementId];
+
+            if (!element) {
+                log.error(
+                    errorCreator(`${elementType} from relationshipType not found in cache`)(
+                        { elementId, relationshipType },
+                    ),
+                );
+
+                // $FlowFixMe filter is unhandled
+                return null;
+            }
+
+            if (!element.valueType) {
+                log.error(
+                    errorCreator(`cached ${elementType} is missing value type`)(
+                        { elementId, element }),
+                );
+
+                // $FlowFixMe filter is unhandled
+                return null;
+            }
+
+            return {
+                id: elementId,
+                type: element.valueType,
+                displayName: element.displayName,
+            };
+        })
+        .filter(element => element);
diff --git a/src/core_modules/capture-core/components/WidgetsRelationship/index.js b/src/core_modules/capture-core/components/WidgetsRelationship/index.js
new file mode 100644
index 0000000000..f28c1cfc5f
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetsRelationship/index.js
@@ -0,0 +1,3 @@
+// @flow
+export type { ApiRelationshipTypes, RelationshipTypes, RelationshipType, TrackerDataView } from './common/Types';
+export { formatRelationshipTypes, extractElementIdsFromRelationshipTypes } from './common/utils';
diff --git a/src/core_modules/capture-core/flow/app-runtime_v2.x.x.js b/src/core_modules/capture-core/flow/app-runtime_v2.x.x.js
index c6ba900799..f351595ce0 100644
--- a/src/core_modules/capture-core/flow/app-runtime_v2.x.x.js
+++ b/src/core_modules/capture-core/flow/app-runtime_v2.x.x.js
@@ -116,7 +116,7 @@ declare module '@dhis2/app-runtime' {
         message: string,
         details: any,
     |};
-    
+
     declare export type ApiAccessError = {|
         type: 'access',
         message: string,
@@ -127,15 +127,15 @@ declare module '@dhis2/app-runtime' {
             status: string,
         },
     |};
-    
+
     declare export type ApiUnknownError = {|
         type: 'unknown',
         message: string,
         details: any,
     |};
-    
+
     declare export type ApiError = ApiNetworkError | ApiAccessError | ApiUnknownError;
-    
+
     declare type QueryRenderInput = {|
         called: boolean,
         loading: boolean,
@@ -148,4 +148,11 @@ declare module '@dhis2/app-runtime' {
     declare export function useDataQuery(resourceQueries: ResourceQueries, queryOptions?: QueryOptions): QueryRenderInput;
 
     declare export function useDataMutation(mutation: Mutation, mutationOptions?: QueryOptions): MutationRenderInput;
+
+    declare type AlertOptions = { [key: string]: mixed };
+
+    declare export function useAlert(message: string | ((props: any) => string), options?: AlertOptions | ((props: any) => AlertOptions)): {
+        show: (props?: any) => void;
+        hide: () => void;
+    };
 }
diff --git a/src/core_modules/capture-core/metaData/RelationshipType/RelationshipType.js b/src/core_modules/capture-core/metaData/RelationshipType/RelationshipType.js
index 27227868ab..ce6fc5e114 100644
--- a/src/core_modules/capture-core/metaData/RelationshipType/RelationshipType.js
+++ b/src/core_modules/capture-core/metaData/RelationshipType/RelationshipType.js
@@ -13,6 +13,8 @@ type RelationshipConstraint = {
 export class RelationshipType {
     _id: string;
     _name: string;
+    _fromToName: string;
+    _toFromName: string;
     _access: Access;
     _from: RelationshipConstraint;
     _to: RelationshipConstraint;
@@ -60,4 +62,20 @@ export class RelationshipType {
     get to(): RelationshipConstraint {
         return this._to;
     }
+
+    get fromToName(): string {
+        return this._fromToName;
+    }
+
+    set fromToName(value: string) {
+        this._fromToName = value;
+    }
+
+    get toFromName(): string {
+        return this._toFromName;
+    }
+
+    set toFromName(value: string) {
+        this._toFromName = value;
+    }
 }
diff --git a/src/core_modules/capture-core/metaDataStoreLoaders/baseLoader/quickStoreOperations/storeRelationshipTypes.js b/src/core_modules/capture-core/metaDataStoreLoaders/baseLoader/quickStoreOperations/storeRelationshipTypes.js
index 571fee90bb..be55829ea8 100644
--- a/src/core_modules/capture-core/metaDataStoreLoaders/baseLoader/quickStoreOperations/storeRelationshipTypes.js
+++ b/src/core_modules/capture-core/metaDataStoreLoaders/baseLoader/quickStoreOperations/storeRelationshipTypes.js
@@ -6,7 +6,7 @@ export const storeRelationshipTypes = () => {
     const query = {
         resource: 'relationshipTypes',
         params: {
-            fields: 'id,displayName,fromConstraint[*],toConstraint[*],access[*]',
+            fields: 'id,displayName,bidirectional,fromToName,toFromName,fromConstraint[relationshipEntity,trackerDataView,trackedEntityType[id,name],program[id,name],programStage[id,name]],toConstraint[relationshipEntity,trackerDataView,trackedEntityType[id,name],program[id,name],programStage[id,name]],access[*]',
         },
     };
 
diff --git a/src/core_modules/capture-core/reducers/descriptions/enrollmentPage.reducerDescription.js b/src/core_modules/capture-core/reducers/descriptions/enrollmentPage.reducerDescription.js
index 87827640b1..77d92128f3 100644
--- a/src/core_modules/capture-core/reducers/descriptions/enrollmentPage.reducerDescription.js
+++ b/src/core_modules/capture-core/reducers/descriptions/enrollmentPage.reducerDescription.js
@@ -93,4 +93,5 @@ export const enrollmentPageDesc = createReducerDescription({
             ),
         ],
     }),
+
 }, 'enrollmentPage', initialReducerValue);
diff --git a/src/core_modules/capture-core/reducers/descriptions/organisationUnits.reducerDescription.js b/src/core_modules/capture-core/reducers/descriptions/organisationUnits.reducerDescription.js
index 6610eb8e40..e39feb2874 100644
--- a/src/core_modules/capture-core/reducers/descriptions/organisationUnits.reducerDescription.js
+++ b/src/core_modules/capture-core/reducers/descriptions/organisationUnits.reducerDescription.js
@@ -42,5 +42,5 @@ export const organisationUnitRootsDesc = createReducerDescription({
             roots: action.payload.roots,
         },
     }),
-}, 'organisationUnitRoots');
+}, 'organisationUnitRoots2222');
 
diff --git a/src/core_modules/capture-core/relationships/relationshipRequests.js b/src/core_modules/capture-core/relationships/relationshipRequests.js
index d2b00f11c0..a9b21ec73d 100644
--- a/src/core_modules/capture-core/relationships/relationshipRequests.js
+++ b/src/core_modules/capture-core/relationships/relationshipRequests.js
@@ -28,7 +28,7 @@ export function getRelationshipsForEvent(
     const stage = program instanceof EventProgram ? program.stage : program.getStage(programStageId);
     const relationshipTypes = stage?.relationshipTypes || [];
     return getRelationships(
-        { event: eventId, fields: ['from,to,relationshipType,relationship'] },
+        { event: eventId, fields: ['from,to,relationshipType,relationship,createdAt'] },
         relationshipTypes,
         querySingleResource,
     );
diff --git a/src/core_modules/capture-core/storageControllers/cache.types.js b/src/core_modules/capture-core/storageControllers/cache.types.js
index df2cffbb41..49ce4a64ca 100644
--- a/src/core_modules/capture-core/storageControllers/cache.types.js
+++ b/src/core_modules/capture-core/storageControllers/cache.types.js
@@ -252,3 +252,5 @@ export type CachedRelationshipType = {
     fromConstraint: CachedRelationshipConstraint,
     toConstraint: CachedRelationshipConstraint,
 }
+
+export type CachedRelationshipTypes = Array<CachedRelationshipType>;
diff --git a/src/core_modules/capture-core/storageControllers/index.js b/src/core_modules/capture-core/storageControllers/index.js
index ac6ad66b6a..eeb9e0f53e 100644
--- a/src/core_modules/capture-core/storageControllers/index.js
+++ b/src/core_modules/capture-core/storageControllers/index.js
@@ -3,4 +3,5 @@ export { initAsync as initControllersAsync } from './storageControllers';
 export { closeAsync as closeControllersAsync } from './storageControllers';
 export { getMainController as getMainStorageController } from './storageControllers';
 export { getUserController as getUserStorageController } from './storageControllers';
+export { userStores } from './stores';
 export type * from './cache.types';
diff --git a/src/core_modules/capture-core/utils/cachedDataHooks/useProgramFromIndexedDB.js b/src/core_modules/capture-core/utils/cachedDataHooks/useProgramFromIndexedDB.js
index 92c4c08077..c8a73f7838 100644
--- a/src/core_modules/capture-core/utils/cachedDataHooks/useProgramFromIndexedDB.js
+++ b/src/core_modules/capture-core/utils/cachedDataHooks/useProgramFromIndexedDB.js
@@ -1,7 +1,6 @@
 // @flow
 import type { UseQueryOptions } from 'react-query';
-import { userStores } from '../../storageControllers/stores';
-import { getUserStorageController } from '../../storageControllers';
+import { userStores, getUserStorageController } from '../../storageControllers';
 import { useIndexedDBQuery } from '../reactQueryHelpers';
 
 
@@ -10,6 +9,7 @@ export const useProgramFromIndexedDB = (programId: ?string, QueryOptions?: UseQu
     const { enabled = true } = QueryOptions ?? {};
 
     const { data, isLoading, isError } = useIndexedDBQuery(
+        // $FlowFixMe - only gets called when programId is defined because of enabled
         ['programs', programId],
         () => storageController.get(userStores.PROGRAMS, programId),
         {
diff --git a/src/core_modules/capture-core/utils/cachedDataHooks/useTrackedEntityTypeFromIndexedDB.js b/src/core_modules/capture-core/utils/cachedDataHooks/useTrackedEntityTypeFromIndexedDB.js
index f4a73308eb..effdcd50db 100644
--- a/src/core_modules/capture-core/utils/cachedDataHooks/useTrackedEntityTypeFromIndexedDB.js
+++ b/src/core_modules/capture-core/utils/cachedDataHooks/useTrackedEntityTypeFromIndexedDB.js
@@ -1,7 +1,6 @@
 // @flow
 import type { UseQueryOptions } from 'react-query';
-import { userStores } from '../../storageControllers/stores';
-import { getUserStorageController } from '../../storageControllers';
+import { userStores, getUserStorageController } from '../../storageControllers';
 import { useIndexedDBQuery } from '../reactQueryHelpers';
 
 
@@ -9,6 +8,7 @@ export const useTrackedEntityTypeFromIndexedDB = (trackedEntityTypeId: ?string,
     const storageController = getUserStorageController();
 
     const { data, isLoading, isError } = useIndexedDBQuery(
+        // $FlowFixMe - only gets called when programId is defined because of enabled
         ['trackedEntityType', trackedEntityTypeId],
         () => storageController.get(userStores.TRACKED_ENTITY_TYPES, trackedEntityTypeId),
         {
diff --git a/src/core_modules/capture-core/utils/reactQueryHelpers/index.js b/src/core_modules/capture-core/utils/reactQueryHelpers/index.js
index 9d5121c8e5..0f1bca3a8f 100644
--- a/src/core_modules/capture-core/utils/reactQueryHelpers/index.js
+++ b/src/core_modules/capture-core/utils/reactQueryHelpers/index.js
@@ -1,2 +1,9 @@
 // @flow
-export { useIndexedDBQuery } from './query';
+export {
+    useIndexedDBQuery,
+    useCustomMetadataQuery,
+    useApiMetadataQuery,
+    useApiDataQuery,
+} from './query';
+
+export { ReactQueryAppNamespace } from './reactQueryHelpers.const';
diff --git a/src/core_modules/capture-core/utils/reactQueryHelpers/query/index.js b/src/core_modules/capture-core/utils/reactQueryHelpers/query/index.js
index 951b7145ea..e21fb5bff8 100644
--- a/src/core_modules/capture-core/utils/reactQueryHelpers/query/index.js
+++ b/src/core_modules/capture-core/utils/reactQueryHelpers/query/index.js
@@ -1,2 +1,3 @@
 // @flow
-export { useIndexedDBQuery } from './useMetadataQuery';
+export { useIndexedDBQuery, useCustomMetadataQuery, useApiMetadataQuery } from './useMetadataQuery';
+export { useApiDataQuery } from './useApiDataQuery';
diff --git a/src/core_modules/capture-core/utils/reactQueryHelpers/query/useApiDataQuery.js b/src/core_modules/capture-core/utils/reactQueryHelpers/query/useApiDataQuery.js
new file mode 100644
index 0000000000..8505d4aaff
--- /dev/null
+++ b/src/core_modules/capture-core/utils/reactQueryHelpers/query/useApiDataQuery.js
@@ -0,0 +1,27 @@
+// @flow
+import { useQuery } from 'react-query';
+import { useDataEngine, type ResourceQuery } from '@dhis2/app-runtime';
+import type { QueryFunction, UseQueryOptions } from 'react-query';
+import type { Result } from './useMetadataQuery.types';
+import { ReactQueryAppNamespace } from '../reactQueryHelpers.const';
+
+export const useApiDataQuery = <TResultData>(
+    queryKey: Array<string | number>,
+    queryObject: ResourceQuery,
+    queryOptions: UseQueryOptions<TResultData>,
+): Result<TResultData> => {
+    const dataEngine = useDataEngine();
+    const queryFn: QueryFunction<TResultData> = () => dataEngine.query({ theQuerykey: queryObject })
+        .then(response => response.theQuerykey);
+    return useQuery<TResultData>(
+        [ReactQueryAppNamespace, ...queryKey],
+        queryFn,
+        {
+            ...queryOptions,
+            refetchOnWindowFocus: false,
+            refetchOnMount: false,
+            refetchOnReconnect: false,
+            staleTime: 2 * 60 * 1000,
+            cacheTime: 5 * 60 * 1000,
+        });
+};
diff --git a/src/core_modules/capture-core/utils/reactQueryHelpers/query/useMetadataQuery.js b/src/core_modules/capture-core/utils/reactQueryHelpers/query/useMetadataQuery.js
index 5079ec80ee..ee31061b8c 100644
--- a/src/core_modules/capture-core/utils/reactQueryHelpers/query/useMetadataQuery.js
+++ b/src/core_modules/capture-core/utils/reactQueryHelpers/query/useMetadataQuery.js
@@ -1,9 +1,11 @@
 // @flow
 import { useQuery } from 'react-query';
 import log from 'loglevel';
-import type { QueryFunction, QueryKey, UseQueryOptions } from 'react-query';
-import type { Result } from './useMetadataQuery.types';
+import { useDataEngine, type ResourceQuery } from '@dhis2/app-runtime';
+import type { QueryFunction, UseQueryOptions } from 'react-query';
 import { IndexedDBError } from '../../../../capture-core-utils/storage/IndexedDBError/IndexedDBError';
+import type { Result } from './useMetadataQuery.types';
+import { ReactQueryAppNamespace } from '../reactQueryHelpers.const';
 
 const throwErrorForIndexedDB = (error) => {
     if (error instanceof IndexedDBError) {
@@ -17,16 +19,27 @@ const throwErrorForIndexedDB = (error) => {
 };
 
 const useAsyncMetadata = <TResultData>(
-    queryKey: QueryKey,
+    queryKey: Array<string | number>,
     queryFn: QueryFunction<TResultData>,
     queryOptions: UseQueryOptions<TResultData>,
-): Result<TResultData> => useQuery<TResultData>(queryKey, queryFn, {
+): Result<TResultData> => useQuery<TResultData>([ReactQueryAppNamespace, ...queryKey], queryFn, {
     staleTime: Infinity,
     ...queryOptions,
 });
 
+export const useCustomMetadataQuery = <TResultData>(
+    queryKey: Array<string | number>,
+    queryFn: QueryFunction<TResultData>,
+    queryOptions?: UseQueryOptions<TResultData>,
+): Result<TResultData> =>
+        useAsyncMetadata(queryKey, queryFn, {
+            cacheTime: 5,
+            ...queryOptions,
+        });
+
+
 export const useIndexedDBQuery = <TResultData>(
-    queryKey: QueryKey,
+    queryKey: Array<string | number>,
     queryFn: QueryFunction<TResultData>,
     queryOptions?: UseQueryOptions<TResultData>,
 ): Result<TResultData> =>
@@ -38,3 +51,18 @@ export const useIndexedDBQuery = <TResultData>(
                 throwErrorForIndexedDB(error);
             },
         });
+
+export const useApiMetadataQuery = <TResultData>(
+    queryKey: Array<string | number>,
+    queryObject: ResourceQuery,
+    queryOptions?: UseQueryOptions<TResultData>,
+): Result<TResultData> => {
+    const dataEngine = useDataEngine();
+    const queryFn: QueryFunction<TResultData> = () => dataEngine.query({ theQuerykey: queryObject })
+        .then(response => response.theQuerykey);
+    return useAsyncMetadata(queryKey, queryFn, {
+        cacheTime: Infinity,
+        staleTime: Infinity,
+        ...queryOptions,
+    });
+};
diff --git a/src/core_modules/capture-core/utils/reactQueryHelpers/query/useMetadataQuery.types.js b/src/core_modules/capture-core/utils/reactQueryHelpers/query/useMetadataQuery.types.js
index 3aac3d847f..04779fc25b 100644
--- a/src/core_modules/capture-core/utils/reactQueryHelpers/query/useMetadataQuery.types.js
+++ b/src/core_modules/capture-core/utils/reactQueryHelpers/query/useMetadataQuery.types.js
@@ -1,4 +1,11 @@
 // @flow
-import type { UseQueryResult } from 'react-query';
+import type { UseQueryOptions, UseQueryResult } from 'react-query';
+import type { ResourceQuery } from '@dhis2/app-runtime';
+
+export type ApiMetadataProps<TResultData> = {|
+    queryKey: string | Array<string>,
+    QueryObject: ResourceQuery,
+    queryOptions?: UseQueryOptions<TResultData>,
+|}
 
 export type Result<TResultData> = UseQueryResult<TResultData>;
diff --git a/src/core_modules/capture-core/utils/reactQueryHelpers/reactQueryHelpers.const.js b/src/core_modules/capture-core/utils/reactQueryHelpers/reactQueryHelpers.const.js
new file mode 100644
index 0000000000..2659b304ba
--- /dev/null
+++ b/src/core_modules/capture-core/utils/reactQueryHelpers/reactQueryHelpers.const.js
@@ -0,0 +1,4 @@
+
+// @flow
+
+export const ReactQueryAppNamespace = 'capture';
diff --git a/src/core_modules/capture-core/utils/routing/buildUrlQueryString.js b/src/core_modules/capture-core/utils/routing/buildUrlQueryString.js
index f30dfcd8af..aa5005d8d1 100644
--- a/src/core_modules/capture-core/utils/routing/buildUrlQueryString.js
+++ b/src/core_modules/capture-core/utils/routing/buildUrlQueryString.js
@@ -2,10 +2,11 @@
 
 const LOCALE_EN = 'en';
 
-export const buildUrlQueryString = (queryArgs: { [id: string]: string }) =>
+export const buildUrlQueryString = (queryArgs: $ReadOnly<{ [id: string]: ?string }>) =>
     Object
         .entries(queryArgs)
-        .sort((a, b) => a[0].localeCompare(b[0], LOCALE_EN))
+        .filter(([, value]) => value != null)
+        .sort(([keyA], [keyB]) => keyA.localeCompare(keyB, LOCALE_EN))
         .reduce((searchParams, [key, value]) => {
             // $FlowFixMe
             value && searchParams.append(key, value);
diff --git a/src/core_modules/capture-core/utils/uid/generateUID.js b/src/core_modules/capture-core/utils/uid/generateUID.js
new file mode 100644
index 0000000000..addcb13f49
--- /dev/null
+++ b/src/core_modules/capture-core/utils/uid/generateUID.js
@@ -0,0 +1,18 @@
+// @flow
+
+export const generateUID = (): string => {
+    const letters = 'abcdefghijklmnopqrstuvwxyz' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const allowedChars = `0123456789${letters}`;
+    const NUMBER_OF_CODEPOINTS = allowedChars.length;
+    const CODESIZE = 11;
+    let uid;
+
+    // the uid should start with a char
+    uid = letters.charAt(Math.random() * (letters.length));
+
+    for (let i = 1; i < CODESIZE; ++i) {
+        uid += allowedChars.charAt(Math.random() * (NUMBER_OF_CODEPOINTS));
+    }
+
+    return uid;
+};
diff --git a/src/epics/trackerCapture.epics.js b/src/epics/trackerCapture.epics.js
index 6cce6ae2eb..a8969c616e 100644
--- a/src/epics/trackerCapture.epics.js
+++ b/src/epics/trackerCapture.epics.js
@@ -214,6 +214,10 @@ import {
 import {
     orgUnitFetcherEpic,
 } from '../core_modules/capture-core/components/OrgUnitFetcher';
+import {
+    openRelationshipTeiSearchWidgetEpic,
+    openRelationshipTeiRegisterWidgetEpic,
+} from '../core_modules/capture-core/components/Pages/common/TEIRelationshipsWidget/TrackedEntityRelationshipsWrapper';
 
 export const epics = combineEpics(
     resetProgramAfterSettingOrgUnitIfApplicableEpic,
@@ -225,6 +229,8 @@ export const epics = combineEpics(
     initEventListEpic,
     initTeiViewEpic,
     updateTeiListEpic,
+    openRelationshipTeiSearchWidgetEpic,
+    openRelationshipTeiRegisterWidgetEpic,
     updateEventListEpic,
     retrieveTemplatesEpic,
     updateTemplateEpic,
diff --git a/yarn.lock b/yarn.lock
index 84b1147b25..fd76db3625 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -63,6 +63,14 @@
   dependencies:
     "@babel/highlight" "^7.22.5"
 
+"@babel/code-frame@^7.22.13":
+  version "7.22.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
+  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
+  dependencies:
+    "@babel/highlight" "^7.22.13"
+    chalk "^2.4.2"
+
 "@babel/compat-data@^7.17.7", "@babel/compat-data@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.5.tgz#b1f6c86a02d85d2dd3368a2b67c09add8cd0c255"
@@ -130,6 +138,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
+  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
+  dependencies:
+    "@babel/types" "^7.23.0"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
@@ -203,6 +221,11 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
 "@babel/helper-environment-visitor@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
@@ -216,6 +239,14 @@
     "@babel/template" "^7.22.5"
     "@babel/types" "^7.22.5"
 
+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-hoist-variables@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
@@ -306,6 +337,13 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-string-parser@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
@@ -321,6 +359,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
   integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-option@^7.16.7", "@babel/helper-validator-option@^7.21.0", "@babel/helper-validator-option@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac"
@@ -363,6 +406,15 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.22.13":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
+  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.12.3", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.22.5", "@babel/parser@^7.7.0", "@babel/parser@^7.7.5", "@babel/parser@^7.9.4":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea"
@@ -373,6 +425,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
   integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
 
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
+  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz#87245a21cd69a73b0b81bcda98d443d6df08f05e"
@@ -1264,19 +1321,28 @@
     "@babel/parser" "^7.22.5"
     "@babel/types" "^7.22.5"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.22.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2", "@babel/traverse@^7.7.4":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.5.tgz#44bd276690db6f4940fdb84e1cb4abd2f729ccd1"
-  integrity sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==
+"@babel/template@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
   dependencies:
-    "@babel/code-frame" "^7.22.5"
-    "@babel/generator" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-function-name" "^7.22.5"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.22.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2", "@babel/traverse@^7.7.4":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
+  integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.5"
-    "@babel/parser" "^7.22.5"
-    "@babel/types" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.0"
+    "@babel/types" "^7.23.0"
     debug "^4.1.0"
     globals "^11.1.0"
 
@@ -1336,6 +1402,15 @@
     source-map "^0.7.4"
     uuid "^9.0.0"
 
+"@babel/types@^7.22.15", "@babel/types@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
+  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -9723,6 +9798,11 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-func-name@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41"
+  integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
+
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz#7ad1dc0535f3a2904bba075772763e5051f6d05f"