diff --git a/cypress/e2e/SearchPage/index.js b/cypress/e2e/SearchPage/index.js
index b322ef00bc..644ff73111 100644
--- a/cypress/e2e/SearchPage/index.js
+++ b/cypress/e2e/SearchPage/index.js
@@ -81,7 +81,6 @@ When('you can close the modal', () => {
         .contains('Back to search')
         .click();
     cy.get('[data-test="dhis2-uicore-modal"]')
-        .contains('No results found')
         .should('not.exist');
 });
 
diff --git a/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEventSchedule.feature b/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEventSchedule.feature
index 277fcb0191..6f021d0886 100644
--- a/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEventSchedule.feature
+++ b/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEventSchedule.feature
@@ -1,8 +1,10 @@
 Feature: The user interacts with the widgets Schedule tab
 
+    # Blocked by DHIS2-16229
+    @skip
     Scenario: User cancel after choose a schedule date in schedule tab
         Given you land on the enrollment add event page by having typed #/enrollmentEventNew?programId=IpHINAT79UW&orgUnitId=DiszpKrYNg8&teiId=EaOyKGOIGRp&enrollmentId=wBU0RAsYjKE&stageId=A03MvHHogjR&tab=SCHEDULE
         Then you should see Schedule tab
         Then you choose a schedule date
         When you click cancel in Schedule tab
-        Then you should see confirm dialog
\ No newline at end of file
+        Then you should see confirm dialog
diff --git a/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEventSchedule/index.js b/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEventSchedule/index.js
index 1b606aa3c0..3896685c41 100644
--- a/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEventSchedule/index.js
+++ b/cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEventSchedule/index.js
@@ -18,7 +18,7 @@ When('you click cancel in Schedule tab', () => {
 });
 
 Then('you should see confirm dialog', () => {
-    cy.get('[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .find('[data-test="dhis2-uicore-modaltitle"]')
         .contains('Discard unsaved changes?')
         .should('exist');
diff --git a/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js b/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js
index d16c2a84d7..79dd1acad6 100644
--- a/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js
+++ b/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js
@@ -148,12 +148,12 @@ When('you open the column selector', () => {
 });
 
 When('you select Household location and save from the column selector', () => {
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Household location')
         .find('input')
         .click();
 
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Save')
         .click();
 });
diff --git a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser.feature b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser.feature
index b0bdfef1e0..73b30f7668 100644
--- a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser.feature
+++ b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser.feature
@@ -1,5 +1,13 @@
 Feature: User interacts with tei working lists
 
+  Scenario: The TEI custom working can be shared
+    Given you open the main page with Ngelehun and Malaria focus investigation context
+    And you see the custom TEI working lists
+    And you can load the view with the name Events assigned to me
+    And you create a copy of the working list
+    When you change the sharing settings
+    Then you see the new sharing settings
+
 Scenario: User opens the default working list for a tracker program
 Given you open the main page with Ngelehun and child programme context
 Then the default working list should be displayed
@@ -81,7 +89,7 @@ When you change rows per page to 10
 Then the list should display 10 rows of data
 And for a tracker program the page navigation should show that you are on the first page
 
-Scenario: Show teis ordered ascendingly by first name 
+Scenario: Show teis ordered ascendingly by first name
 Given you open the main page with Ngelehun and child programme context
 When you click the first name column header
 Then the sort arrow should indicate ascending order
@@ -93,13 +101,7 @@ Given you open the main page with Ngelehun and Malaria focus investigation conte
 Then you see the custom TEI working lists
 And you can load the view with the name Events assigned to me
 
-Scenario: The TEI custom working can be shared
-Given you open the main page with Ngelehun and Malaria focus investigation context
-And you see the custom TEI working lists
-And you can load the view with the name Events assigned to me
-And you create a copy of the working list
-When you change the sharing settings
-Then you see the new sharing settings
+
 
 Scenario: The user creates, updates and deletes a TEI custom working list
 Given you open the main page with Ngelehun and Malaria case diagnosis context
@@ -139,7 +141,7 @@ And you select a data element columns and save from the column selector
 Then you see data elements specific filters and columns
 
 @v>=39
-Scenario: While in a program stage working list, the user can filter by both TEA and data elements 
+Scenario: While in a program stage working list, the user can filter by both TEA and data elements
 Given you open the main page with Ngelehun, WHO RMNCH Tracker and First antenatal care visit context
 When you set the enrollment status filter to active
 And you apply the current filter
@@ -152,7 +154,7 @@ And you apply the current filter
 Then the list should display 1 row of data
 
 @v>=39
-Scenario: While in a program stage working list, the user can sort by both TEA and data elements 
+Scenario: While in a program stage working list, the user can sort by both TEA and data elements
 Given you open the main page with Ngelehun, WHO RMNCH Tracker and First antenatal care visit context
 And you set the first name filter to u
 And you apply the current filter
diff --git a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js
index 1c1574e25d..c6adb4c683 100644
--- a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js
+++ b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js
@@ -246,12 +246,12 @@ When('you open the column selector', () => {
 });
 
 When('you select the registering unit and save from the column selector', () => {
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Registering unit')
         .find('input')
         .click();
 
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Save')
         .click();
 });
@@ -544,27 +544,32 @@ Then('you see the new sharing settings', () => {
         .click();
 });
 
-When('you create a copy of the working list', () => {
-    cy.get('[data-test="list-view-menu-button"]')
-        .click();
+When('you create a copy of the working list',
+    () => {
+        cy.get('[data-test="list-view-menu-button"]')
+            .click();
 
-    cy.contains('Save current view as')
-        .click();
+        cy.contains('Save current view as')
+            .click();
 
-    const id = uuid();
-    cy.get('[data-test="view-name-content"]')
-        .type(id);
+        const id = uuid();
+        cy.get('[data-test="view-name-content"]')
+            .type(id);
 
-    cy.intercept('POST', '**/trackedEntityInstanceFilters**').as('newTrackerFilter');
+        cy.intercept('POST', '**/trackedEntityInstanceFilters**')
+            .as('newTrackerFilter');
 
-    cy.get('button')
-        .contains('Save')
-        .click();
+        cy.get('[data-test="new-template-dialog"]')
+            .within(() => {
+                cy.get('[data-test="dhis2-uicore-button"]')
+                    .contains('Save')
+                    .click();
+            });
 
-    cy.wait('@newTrackerFilter', { timeout: 30000 });
+        cy.wait('@newTrackerFilter', { timeout: 30000 });
 
-    cy.reload();
-});
+        cy.reload();
+    });
 
 When('you open the program stage filters from the more filters dropdown menu', () => {
     cy.get('[data-test="tei-working-lists"]')
@@ -602,12 +607,12 @@ When('you select the Foci response program stage', () => {
 });
 
 When('you select a data element columns and save from the column selector', () => {
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('People included')
         .find('input')
         .click();
 
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Save')
         .click();
 });
@@ -663,12 +668,12 @@ Then('you see scheduledAt filter', () => {
 });
 
 When('you select a scheduledAt column and save from the column selector', () => {
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Appointment date')
         .find('input')
         .click();
 
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Save')
         .click();
 });
diff --git a/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js b/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js
index 8d919e73e2..7bfed86fa6 100644
--- a/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js
+++ b/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js
@@ -2,10 +2,7 @@
 import React, { type ComponentType } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogActions from '@material-ui/core/DialogActions';
-import { Button } from '@dhis2/ui';
+import { Button, ModalContent, ModalTitle, ModalActions } from '@dhis2/ui';
 import { CardList } from '../../../CardList';
 import type { Props } from './existingTeiContents.types';
 
@@ -35,18 +32,18 @@ const ExistingTEIContentsComponentPlain = ({
 
     return (
         <React.Fragment>
-            <DialogContent>
-                <DialogTitle>
+            <ModalContent>
+                <ModalTitle>
                     {i18n.t('Registered person')}
-                </DialogTitle>
+                </ModalTitle>
                 <CardList
                     currentProgramId={programId}
                     // $FlowFixMe
                     items={items}
                     dataElements={dataElements}
                 />
-            </DialogContent>
-            <DialogActions>
+            </ModalContent>
+            <ModalActions>
                 <Button
                     onClick={onCancel}
                     secondary
@@ -61,7 +58,7 @@ const ExistingTEIContentsComponentPlain = ({
                         />
                     </div>
                 )}
-            </DialogActions>
+            </ModalActions>
         </React.Fragment>
     );
 };
diff --git a/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js b/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js
index a6ff93c5e7..5a5505b3c8 100644
--- a/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js
+++ b/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
+import { Modal } from '@dhis2/ui';
 import { ExistingTEILoader } from './ExistingTEILoader.container';
 
 type Props = {
@@ -10,16 +10,18 @@ type Props = {
 
 export const ExistingTEIDialog = (props: Props) => {
     const { open, ...passOnProps } = props;
+    if (!open) {
+        return null;
+    }
+
     return (
-        <Dialog
-            fullWidth
-            maxWidth={'md'}
-            open={open}
+        <Modal
+            hide={!open}
             onClose={props.onCancel}
         >
             <ExistingTEILoader
                 {...passOnProps}
             />
-        </Dialog>
+        </Modal>
     );
 };
diff --git a/src/core_modules/capture-core/components/DataEntry/withAskToCreateNew.js b/src/core_modules/capture-core/components/DataEntry/withAskToCreateNew.js
index fbd7e5daab..b0edfd8c33 100644
--- a/src/core_modules/capture-core/components/DataEntry/withAskToCreateNew.js
+++ b/src/core_modules/capture-core/components/DataEntry/withAskToCreateNew.js
@@ -47,41 +47,47 @@ const askToCreateNewComponent = (InnerComponent: React.ComponentType<any>) =>
             }
         }
 
-        renderAskToCreateNewModal = () => (
-            <Modal
-                hide={!this.state.isOpen}
-                dataTest="modal-ask-to-create-new"
-            >
-                <ModalTitle>
-                    {i18n.t('Generate new event')}
-                </ModalTitle>
-                <ModalContent>
-                    {i18n.t('Do you want to create another event?')}
-                </ModalContent>
-                <ModalActions>
-                    <ButtonStrip end>
-                        <Button
-                            onClick={() => {
-                                this.props.onCancelCreateNew(this.props.itemId);
-                                this.setState({ isOpen: false });
-                            }}
-                            secondary
-                        >
-                            {i18n.t('No, cancel')}
-                        </Button>
-                        <Button
-                            onClick={() => {
-                                this.props.onConfirmCreateNew(this.props.itemId);
-                                this.setState({ isOpen: false });
-                            }}
-                            primary
-                        >
-                            {i18n.t('Yes, create new event')}
-                        </Button>
-                    </ButtonStrip>
-                </ModalActions>
-            </Modal>
-        )
+        renderAskToCreateNewModal = () => {
+            if (!this.state.isOpen) {
+                return null;
+            }
+
+            return (
+                <Modal
+                    hide={!this.state.isOpen}
+                    dataTest="modal-ask-to-create-new"
+                >
+                    <ModalTitle>
+                        {i18n.t('Generate new event')}
+                    </ModalTitle>
+                    <ModalContent>
+                        {i18n.t('Do you want to create another event?')}
+                    </ModalContent>
+                    <ModalActions>
+                        <ButtonStrip end>
+                            <Button
+                                onClick={() => {
+                                    this.props.onCancelCreateNew(this.props.itemId);
+                                    this.setState({ isOpen: false });
+                                }}
+                                secondary
+                            >
+                                {i18n.t('No, cancel')}
+                            </Button>
+                            <Button
+                                onClick={() => {
+                                    this.props.onConfirmCreateNew(this.props.itemId);
+                                    this.setState({ isOpen: false });
+                                }}
+                                primary
+                            >
+                                {i18n.t('Yes, create new event')}
+                            </Button>
+                        </ButtonStrip>
+                    </ModalActions>
+                </Modal>
+            );
+        }
 
         render() {
             const { onSave, ...passOnProps } = this.props;
diff --git a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorAndWarningDialog.component.js b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorAndWarningDialog.component.js
index 203faee0b5..0b92900d0b 100644
--- a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorAndWarningDialog.component.js
+++ b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorAndWarningDialog.component.js
@@ -1,12 +1,8 @@
 // @flow
 import * as React from 'react';
 import { withStyles } from '@material-ui/core';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import i18n from '@dhis2/d2-i18n';
-import { Button } from '@dhis2/ui';
+import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 
 const getStyles = (theme: Theme) => ({
     errors: {
@@ -134,17 +130,15 @@ class ErrorAndWarningDialogPlain extends React.Component<Props> {
     render() {
         return (
             <React.Fragment>
-                <DialogTitle id="save-dialog-errors-and-warnings-title">
+                <ModalTitle id="save-dialog-errors-and-warnings-title">
                     {i18n.t('Validation errors and warnings')}
-                </DialogTitle>
-                <DialogContent>
-                    <DialogContentText>
-                        {this.getContents()}
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions>
+                </ModalTitle>
+                <ModalContent>
+                    {this.getContents()}
+                </ModalContent>
+                <ModalActions>
                     {this.getButtons()}
-                </DialogActions>
+                </ModalActions>
             </React.Fragment>
         );
     }
diff --git a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorDialog.component.js b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorDialog.component.js
index 8d17307161..25d60ad5f2 100644
--- a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorDialog.component.js
+++ b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorDialog.component.js
@@ -1,11 +1,7 @@
 // @flow
 import * as React from 'react';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import i18n from '@dhis2/d2-i18n';
-import { Button } from '@dhis2/ui';
+import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
 
 type Props = {
@@ -52,7 +48,7 @@ class ErrorDialogPlain extends React.Component<Props> {
         const { onAbort, onSave, saveEnabled, classes } = this.props;
 
         return (
-            <div style={{ margin: '0 20px 12px 20px' }}>
+            <div>
                 <Button onClick={onAbort} color="primary">
                     {i18n.t('Back to form')}
                 </Button>
@@ -73,17 +69,15 @@ class ErrorDialogPlain extends React.Component<Props> {
     render() {
         return (
             <React.Fragment>
-                <DialogTitle id="save-dialog-errors-title">
+                <ModalTitle id="save-dialog-errors-title">
                     {i18n.t('Validation errors')}
-                </DialogTitle>
-                <DialogContent>
-                    <DialogContentText>
-                        {this.getContents()}
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions>
+                </ModalTitle>
+                <ModalContent>
+                    {this.getContents()}
+                </ModalContent>
+                <ModalActions>
                     {this.getButtons()}
-                </DialogActions>
+                </ModalActions>
             </React.Fragment>
         );
     }
diff --git a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js
index 4510553cca..ff95f00ee1 100644
--- a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js
+++ b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js
@@ -1,11 +1,7 @@
 // @flow
 import * as React from 'react';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import i18n from '@dhis2/d2-i18n';
-import { Button } from '@dhis2/ui';
+import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
 
 type Props = {
@@ -51,15 +47,13 @@ class WarningDialogPlain extends React.Component<Props> {
         const { onAbort, onSave, classes } = this.props;
         return (
             <React.Fragment>
-                <DialogTitle id="save-dialog-errors-and-warnings-title">
+                <ModalTitle id="save-dialog-errors-and-warnings-title">
                     {i18n.t('Validation warnings')}
-                </DialogTitle>
-                <DialogContent>
-                    <DialogContentText>
-                        {this.getContents()}
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions>
+                </ModalTitle>
+                <ModalContent>
+                    {this.getContents()}
+                </ModalContent>
+                <ModalActions>
                     <div style={{ margin: '0 20px 12px 20px' }}>
                         <Button onClick={onAbort} color="primary">
                             {i18n.t('Back to form')}
@@ -73,7 +67,7 @@ class WarningDialogPlain extends React.Component<Props> {
                             {i18n.t('Save anyway')}
                         </Button>
                     </div>
-                </DialogActions>
+                </ModalActions>
             </React.Fragment>
         );
     }
diff --git a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js
index d8e90bfc3c..a58549fd2b 100644
--- a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js
+++ b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js
@@ -1,10 +1,7 @@
 // @flow
 import * as React from 'react';
 import log from 'loglevel';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import { Modal, ModalContent, ModalTitle } from '@dhis2/ui';
 import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
 import { errorCreator } from 'capture-core-utils';
@@ -248,32 +245,34 @@ const getSaveHandler = (
                         onSave={this.handleSaveAttempt}
                         {...filteredProps}
                     />
-                    <Dialog
-                        open={this.state.messagesDialogOpen}
-                        onClose={this.handleAbortDialog}
-                    >
-                        <MessagesDialogContents
-                            open={this.state.messagesDialogOpen}
-                            onAbort={this.handleAbortDialog}
-                            onSave={this.handleSaveDialog}
-                            errors={errors}
-                            warnings={warnings}
-                            isCompleting={this.isCompleting}
-                            validationStrategy={calculatedFoundation.validationStrategy}
-                        />
-                    </Dialog>
-                    <Dialog
-                        open={this.state.waitForPromisesDialogOpen}
-                    >
-                        <DialogTitle>
-                            {i18n.t('Operations running')}
-                        </DialogTitle>
-                        <DialogContent>
-                            <DialogContentText>
+                    {this.state.messagesDialogOpen && (
+                        <Modal
+                            hide={!this.state.messagesDialogOpen}
+                            onClose={this.handleAbortDialog}
+                        >
+                            <MessagesDialogContents
+                                open={this.state.messagesDialogOpen}
+                                onAbort={this.handleAbortDialog}
+                                onSave={this.handleSaveDialog}
+                                errors={errors}
+                                warnings={warnings}
+                                isCompleting={this.isCompleting}
+                                validationStrategy={calculatedFoundation.validationStrategy}
+                            />
+                        </Modal>
+                    )}
+                    {this.state.waitForPromisesDialogOpen && (
+                        <Modal
+                            hide={!this.state.waitForPromisesDialogOpen}
+                        >
+                            <ModalTitle>
+                                {i18n.t('Operations running')}
+                            </ModalTitle>
+                            <ModalContent>
                                 {this.getDialogWaitForUploadContents()}
-                            </DialogContentText>
-                        </DialogContent>
-                    </Dialog>
+                            </ModalContent>
+                        </Modal>
+                    )}
                 </div>
             );
         }
diff --git a/src/core_modules/capture-core/components/Dialogs/DiscardDialog.component.js b/src/core_modules/capture-core/components/Dialogs/DiscardDialog.component.js
index 257852c7d8..926637ec0a 100644
--- a/src/core_modules/capture-core/components/Dialogs/DiscardDialog.component.js
+++ b/src/core_modules/capture-core/components/Dialogs/DiscardDialog.component.js
@@ -5,24 +5,32 @@ import type { Props } from './discardDialog.types';
 
 export const DiscardDialog = ({
     open, header, text, cancelText, onCancel, destructiveText, onDestroy,
-}: Props) => (
-    <Modal hide={!open} onClose={onCancel} small>
-        <ModalTitle>
-            {header}
-        </ModalTitle>
-        <ModalContent>
-            {text}
-        </ModalContent>
-        <ModalActions>
-            <ButtonStrip end>
-                <Button onClick={onCancel} secondary>
-                    {cancelText}
-                </Button>
-                <Button onClick={onDestroy} destructive>
-                    {destructiveText}
-                </Button>
-            </ButtonStrip>
-        </ModalActions>
-    </Modal>
-);
+}: Props) => {
+    if (!open) {
+        return null;
+    }
+
+    return (
+        <Modal hide={!open} onClose={onCancel} small>
+            <ModalTitle>
+                {header}
+            </ModalTitle>
+            <ModalContent>
+                <div style={{ margin: '5px 0' }}>
+                    {text}
+                </div>
+            </ModalContent>
+            <ModalActions>
+                <ButtonStrip end>
+                    <Button onClick={onCancel} secondary>
+                        {cancelText}
+                    </Button>
+                    <Button onClick={onDestroy} destructive>
+                        {destructiveText}
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    );
+};
 
diff --git a/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js b/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js
index c6b1fe0a49..f4406742cc 100644
--- a/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js
+++ b/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js
@@ -1,13 +1,9 @@
 // @flow
 import * as React from 'react';
 import SnackBar from '@material-ui/core/Snackbar';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import { withStyles } from '@material-ui/core/styles';
 import { IconButton } from 'capture-ui';
-import { IconCross24, Button } from '@dhis2/ui';
+import { IconCross24, Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import isDefined from 'd2-utilizr/lib/isDefined';
 
@@ -100,25 +96,27 @@ class Index extends React.Component<Props> {
                     message={<span>{message}</span>}
                     action={this.getAction()}
                 />
-                <Dialog
-                    open={isDefined(message) && displayType === 'dialog'}
-                >
-                    <DialogTitle>
-                        {
+                {isDialogOpen && (
+                    <Modal
+                        hide={!isDialogOpen}
+                    >
+                        <ModalTitle>
+                            {
                             // $FlowFixMe[prop-missing] automated comment
-                            isDialogOpen ? message && message.title : ''}
-                    </DialogTitle>
-                    <DialogContent>
-                        {
+                                isDialogOpen ? message && message.title : ''}
+                        </ModalTitle>
+                        <ModalContent>
+                            {
                             // $FlowFixMe[prop-missing] automated comment
-                            isDialogOpen ? message && message.content : ''}
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={this.handleClose} primary>
-                            {i18n.t('Close')}
-                        </Button>
-                    </DialogActions>
-                </Dialog>
+                                isDialogOpen ? message && message.content : ''}
+                        </ModalContent>
+                        <ModalActions>
+                            <Button onClick={this.handleClose} primary>
+                                {i18n.t('Close')}
+                            </Button>
+                        </ModalActions>
+                    </Modal>
+                )}
             </React.Fragment>
         );
     }
diff --git a/src/core_modules/capture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js b/src/core_modules/capture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js
index 9ac8d6931c..992b6b069d 100644
--- a/src/core_modules/capture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js
+++ b/src/core_modules/capture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js
@@ -2,8 +2,7 @@
 import * as React from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { CoordinateField as UICoordinateField } from 'capture-ui';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import { Modal, ModalTitle } from '@dhis2/ui';
 import { typeof orientations } from '../../../New';
 
 const getStyles = (theme: Theme) => ({
@@ -80,11 +79,12 @@ class CoordinateFieldPlain extends React.Component<Props> {
             // $FlowFixMe[cannot-spread-inexact] automated comment
             <UICoordinateField
                 mapDialog={
-                    <Dialog
-                        classes={this.dialogClasses}
+                    <Modal
+                        className={this.dialogClasses}
+                        large
                     >
-                        <DialogTitle key="title">{dialogLabel}</DialogTitle>
-                    </Dialog>
+                        <ModalTitle>{dialogLabel}</ModalTitle>
+                    </Modal>
                 }
                 {...passOnProps}
                 classes={this.passOnClasses}
diff --git a/src/core_modules/capture-core/components/FormFields/New/Fields/PolygonField/PolygonField.component.js b/src/core_modules/capture-core/components/FormFields/New/Fields/PolygonField/PolygonField.component.js
index 058d82c9c9..47831a9a47 100644
--- a/src/core_modules/capture-core/components/FormFields/New/Fields/PolygonField/PolygonField.component.js
+++ b/src/core_modules/capture-core/components/FormFields/New/Fields/PolygonField/PolygonField.component.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { PolygonField as UIPolygonField } from 'capture-ui';
-import { Dialog, DialogTitle } from '@material-ui/core';
+import { Modal, ModalTitle } from '@dhis2/ui';
 import { typeof orientations } from '../../../New';
 
 const getStyles = () => ({
@@ -44,11 +44,12 @@ class PolygonFieldPlain extends React.Component<Props> {
             // $FlowFixMe[cannot-spread-inexact] automated comment
             <UIPolygonField
                 mapDialog={
-                    <Dialog
+                    <Modal
                         classes={this.dialogClasses}
+                        large
                     >
-                        <DialogTitle key="title">{dialogLabel}</DialogTitle>
-                    </Dialog>
+                        <ModalTitle key="title">{dialogLabel}</ModalTitle>
+                    </Modal>
                 }
                 {...passOnProps}
             />
diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js
index 6cbe5aa034..ff0bad9c19 100644
--- a/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js
+++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js
@@ -1,11 +1,7 @@
 // @flow
 import React, { useState, useEffect } from 'react';
 import { isEqual } from 'lodash';
-import { Button } from '@dhis2/ui';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import { Modal, ModalTitle, ModalContent, ModalActions, Button } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 
 import { DragDropList } from './DragDropList';
@@ -40,23 +36,31 @@ export const ColumnSelectorDialog = ({ columns, open, onClose, onSave }: Props)
         setColumnList(sortedList);
     };
 
+    if (!open) {
+        return null;
+    }
+
     return (
         <span>
-            <Dialog open={!!open} onClose={onClose} fullWidth>
-                <DialogTitle>{i18n.t('Columns to show in table')}</DialogTitle>
-                <DialogContent>
+            <Modal
+                hide={!open}
+                onClose={onClose}
+                dataTest={'column-selector-dialog'}
+            >
+                <ModalTitle>{i18n.t('Columns to show in table')}</ModalTitle>
+                <ModalContent>
                     <DragDropList
                         listItems={columnList}
                         handleUpdateListOrder={handleUpdateListOrder}
                         handleToggle={handleToggle}
                     />
-                </DialogContent>
-                <DialogActions>
+                </ModalContent>
+                <ModalActions>
                     <Button onClick={handleSave} primary initialFocus>
                         {i18n.t('Save')}
                     </Button>
-                </DialogActions>
-            </Dialog>
+                </ModalActions>
+            </Modal>
         </span>
     );
 };
diff --git a/src/core_modules/capture-core/components/LoadingMasks/DialogLoadingMask.component.js b/src/core_modules/capture-core/components/LoadingMasks/DialogLoadingMask.component.js
index 0366b2b095..1acc9e6a1c 100644
--- a/src/core_modules/capture-core/components/LoadingMasks/DialogLoadingMask.component.js
+++ b/src/core_modules/capture-core/components/LoadingMasks/DialogLoadingMask.component.js
@@ -1,8 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import { CircularLoader } from '@dhis2/ui';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
+import { CircularLoader, Modal, ModalContent } from '@dhis2/ui';
 
 type Props = {
 };
@@ -10,13 +8,13 @@ type Props = {
 export class DialogLoadingMask extends Component<Props> {
     render() {
         return (
-            <Dialog
-                open
+            <Modal
+                hide={false}
             >
-                <DialogContent>
+                <ModalContent>
                     <CircularLoader />
-                </DialogContent>
-            </Dialog>
+                </ModalContent>
+            </Modal>
         );
     }
 }
diff --git a/src/core_modules/capture-core/components/PossibleDuplicatesDialog/PossibleDuplicatesDialog.component.js b/src/core_modules/capture-core/components/PossibleDuplicatesDialog/PossibleDuplicatesDialog.component.js
index 5a35b3ff34..85a1fccc19 100644
--- a/src/core_modules/capture-core/components/PossibleDuplicatesDialog/PossibleDuplicatesDialog.component.js
+++ b/src/core_modules/capture-core/components/PossibleDuplicatesDialog/PossibleDuplicatesDialog.component.js
@@ -1,8 +1,6 @@
 // @flow
 import * as React from 'react';
-import { withStyles } from '@material-ui/core';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
+import { Modal, ModalActions } from '@dhis2/ui';
 import { ReviewDialogContents } from './ReviewDialogContents/ReviewDialogContents.container';
 import type { RenderCustomCardActions } from '../CardList/CardList.types';
 
@@ -15,37 +13,29 @@ type Props = {|
     selectedScopeId: string
 |};
 
-const StyledDialogActions = withStyles({
-    root: { margin: 24 },
-})(DialogActions);
-
 class ReviewDialogClass extends React.Component<Props > {
-    static paperProps = {
-        style: {
-            maxHeight: 'calc(100% - 100px)',
-        },
-    };
-
     render() {
         const { open, onCancel, extraActions, selectedScopeId, dataEntryId, renderCardActions } = this.props;
 
+        if (!open) {
+            return null;
+        }
+
         return (
-            <Dialog
-                open={open}
+            <Modal
+                hide={!open}
+                dataTest={'duplicates-modal'}
                 onClose={onCancel}
-                maxWidth="sm"
-                fullWidth
-                PaperProps={PossibleDuplicatesDialog.paperProps}
             >
                 <ReviewDialogContents
                     dataEntryId={dataEntryId}
                     selectedScopeId={selectedScopeId}
                     renderCardActions={renderCardActions}
                 />
-                <StyledDialogActions>
+                <ModalActions>
                     {extraActions}
-                </StyledDialogActions>
-            </Dialog>
+                </ModalActions>
+            </Modal>
         );
     }
 }
diff --git a/src/core_modules/capture-core/components/PossibleDuplicatesDialog/ReviewDialogContents/ReviewDialogContents.component.js b/src/core_modules/capture-core/components/PossibleDuplicatesDialog/ReviewDialogContents/ReviewDialogContents.component.js
index 99c01c200c..d5146481cb 100644
--- a/src/core_modules/capture-core/components/PossibleDuplicatesDialog/ReviewDialogContents/ReviewDialogContents.component.js
+++ b/src/core_modules/capture-core/components/PossibleDuplicatesDialog/ReviewDialogContents/ReviewDialogContents.component.js
@@ -1,8 +1,7 @@
 // @flow
 import React, { type ComponentType, useContext } from 'react';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import { withStyles } from '@material-ui/core/styles';
+import { ModalTitle, ModalContent } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import { CardList } from '../../CardList';
 import { ReviewDialogContentsPager } from './ReviewDialogContentsPager.container';
@@ -30,10 +29,10 @@ const ReviewDialogContentsPlain = ({
     const { resultsPageSize } = useContext(ResultsPageSizeContext);
     return (
         <React.Fragment>
-            <DialogContent data-test="duplicates-modal">
-                <DialogTitle className={classes.title}>
+            <ModalContent data-test="duplicates-modal">
+                <ModalTitle className={classes.title}>
                     {i18n.t('Possible duplicates found')}
-                </DialogTitle>
+                </ModalTitle>
                 <CardList
                     noItemsText={i18n.t('No results found')}
                     items={teis}
@@ -46,7 +45,7 @@ const ReviewDialogContentsPlain = ({
                     selectedScopeId={selectedScopeId}
                     nextPageButtonDisabled={teis.length < resultsPageSize}
                 />
-            </DialogContent>
+            </ModalContent>
         </React.Fragment>
     );
 };
diff --git a/src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withDeleteButton.js b/src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withDeleteButton.js
index 14efa04273..1c55b9ed1b 100644
--- a/src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withDeleteButton.js
+++ b/src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withDeleteButton.js
@@ -39,33 +39,40 @@ const getDeleteButton = (InnerComponent: React.ComponentType<any>) =>
                     {i18n.t('Delete')}
                 </Button>
 
-                <Modal
-                    hide={!this.state.isOpen}
-                >
-                    <ModalTitle>
-                        {i18n.t('Delete event')}
-                    </ModalTitle>
-                    <ModalContent>
-                        {i18n.t('Deleting an event is permanent and cannot be undone.' + ' ' +
-                        'Are you sure you want to delete this event? ')}
-                    </ModalContent>
-                    <ModalActions>
-                        <ButtonStrip end>
-                            <Button onClick={() => { this.setState({ isOpen: false }); }} secondary>
-                                {i18n.t('No, cancel')}
-                            </Button>
-                            <Button
-                                onClick={() => {
-                                    this.props.onDelete();
-                                    this.setState({ isOpen: false });
-                                }}
-                                destructive
-                            >
-                                {i18n.t('Yes, delete event')}
-                            </Button>
-                        </ButtonStrip>
-                    </ModalActions>
-                </Modal>
+                {this.state.isOpen && (
+                    <Modal
+                        hide={!this.state.isOpen}
+                    >
+                        <ModalTitle>
+                            {i18n.t('Delete event')}
+                        </ModalTitle>
+                        <ModalContent>
+                            {i18n.t('Deleting an event is permanent and cannot be undone.' + ' ' +
+                                'Are you sure you want to delete this event? ')}
+                        </ModalContent>
+                        <ModalActions>
+                            <ButtonStrip end>
+                                <Button
+                                    onClick={() => {
+                                        this.setState({ isOpen: false });
+                                    }}
+                                    secondary
+                                >
+                                    {i18n.t('No, cancel')}
+                                </Button>
+                                <Button
+                                    onClick={() => {
+                                        this.props.onDelete();
+                                        this.setState({ isOpen: false });
+                                    }}
+                                    destructive
+                                >
+                                    {i18n.t('Yes, delete event')}
+                                </Button>
+                            </ButtonStrip>
+                        </ModalActions>
+                    </Modal>
+                )}
             </div>
             ) : null
         )
diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/DownloadDialog/DownloadDialog.component.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/DownloadDialog/DownloadDialog.component.js
index fc79445ce2..0ed117534b 100644
--- a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/DownloadDialog/DownloadDialog.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/DownloadDialog/DownloadDialog.component.js
@@ -3,8 +3,7 @@
 import React, { PureComponent, type ComponentType } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core/styles';
-import { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
-import { Button } from '@dhis2/ui';
+import { Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 import type { Props } from './downloadDialog.types';
 
 const getStyles = () => ({
@@ -80,23 +79,28 @@ class DownloadDialogPlain extends PureComponent<Props & CssClasses> {
     }
     render() {
         const { open, onClose } = this.props;
+
+        if (!open) {
+            return null;
+        }
+
         return (
             <span>
-                <Dialog
-                    open={!!open}
+                <Modal
+                    hide={!open}
                     onClose={onClose}
-                    fullWidth
+                    position={'center'}
                 >
-                    <DialogTitle>{i18n.t('Download with current filters')}</DialogTitle>
-                    <DialogContent>
+                    <ModalTitle>{i18n.t('Download with current filters')}</ModalTitle>
+                    <ModalContent>
                         {this.renderButtons()}
-                    </DialogContent>
-                    <DialogActions>
+                    </ModalContent>
+                    <ModalActions>
                         <Button onClick={onClose} color="primary">
                             {i18n.t('Close')}
                         </Button>
-                    </DialogActions>
-                </Dialog>
+                    </ModalActions>
+                </Modal>
             </span>
         );
     }
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/DeleteConfirmationDialog.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/DeleteConfirmationDialog.component.js
index 137dab9b63..635bac6d3e 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/DeleteConfirmationDialog.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/DeleteConfirmationDialog.component.js
@@ -2,8 +2,7 @@
 import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@material-ui/core';
-import { Button } from '@dhis2/ui';
+import { Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 
 const getStyles = () => ({
     buttonContainer: {
@@ -29,18 +28,20 @@ const DeleteConfirmationDialogPlain = (props: Props) => {
         classes,
     } = props;
 
+    if (!open) {
+        return null;
+    }
+
     return (
-        <Dialog
-            open={open}
+        <Modal
+            hide={!open}
             onClose={onClose}
         >
-            <DialogTitle>{i18n.t('Delete view')}</DialogTitle>
-            <DialogContent>
-                <DialogContentText>
-                    {i18n.t('Do you really want to delete the \'{{templateName}}\' view?', { templateName })}
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions
+            <ModalTitle>{i18n.t('Delete view')}</ModalTitle>
+            <ModalContent>
+                {i18n.t('Do you really want to delete the \'{{templateName}}\' view?', { templateName })}
+            </ModalContent>
+            <ModalActions
                 className={classes.buttonContainer}
             >
                 <Button onClick={onClose}>
@@ -49,8 +50,8 @@ const DeleteConfirmationDialogPlain = (props: Props) => {
                 <Button onClick={onDeleteTemplate} primary>
                     {i18n.t('Confirm')}
                 </Button>
-            </DialogActions>
-        </Dialog>
+            </ModalActions>
+        </Modal>
     );
 };
 
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateContents.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateContents.component.js
index 28b526c2cb..0efef529f0 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateContents.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateContents.component.js
@@ -2,8 +2,7 @@
 import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
-import { DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
-import { Button } from '@dhis2/ui';
+import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 
 const getStyles = () => ({
     buttonContainer: {
@@ -22,9 +21,9 @@ const ExistingTemplateContentsPlain = (props: Props) => {
     const { onSaveTemplate, onClose, classes } = props;
     return (
         <React.Fragment>
-            <DialogTitle>{i18n.t('Save')}</DialogTitle>
-            <DialogContent />
-            <DialogActions
+            <ModalTitle>{i18n.t('Save')}</ModalTitle>
+            <ModalContent />
+            <ModalActions
                 className={classes.buttonContainer}
             >
                 <Button onClick={onClose}>
@@ -33,7 +32,7 @@ const ExistingTemplateContentsPlain = (props: Props) => {
                 <Button onClick={onSaveTemplate} primary>
                     {i18n.t('Save')}
                 </Button>
-            </DialogActions>
+            </ModalActions>
         </React.Fragment>
     );
 };
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateDialog.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateDialog.component.js
index e8e1af626e..da394131b6 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateDialog.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateDialog.component.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { Dialog } from '@material-ui/core';
+import { Modal } from '@dhis2/ui';
 import { ExistingTemplateContents } from './ExistingTemplateContents.component';
 
 type Props = {
@@ -16,16 +16,21 @@ export const ExistingTemplateDialog = (props: Props) => {
         onSaveTemplate,
     } = props;
 
+    if (!open) {
+        return null;
+    }
+
     return (
-        <Dialog
-            open={open}
+        <Modal
+            hide={!open}
             onClose={onClose}
-            fullWidth
+            position={'center'}
+            dataTest={'existing-template-dialog'}
         >
             <ExistingTemplateContents
                 onSaveTemplate={onSaveTemplate}
                 onClose={onClose}
             />
-        </Dialog>
+        </Modal>
     );
 };
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateContents.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateContents.component.js
index 460069e359..c064f74893 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateContents.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateContents.component.js
@@ -1,9 +1,8 @@
 // @flow
 import * as React from 'react';
-import { colors, Button } from '@dhis2/ui';
+import { colors, Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
-import { DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
 import { NewTemplateTextField } from './NewTemplateTextField.component';
 
 const getStyles = (theme: Theme) => ({
@@ -46,8 +45,8 @@ const NewTemplateContentsPlain = (props: Props) => {
 
     return (
         <React.Fragment>
-            <DialogTitle>{i18n.t('Save As view')}</DialogTitle>
-            <DialogContent>
+            <ModalTitle>{i18n.t('Save As view')}</ModalTitle>
+            <ModalContent>
                 <NewTemplateTextField
                     onBlur={nameBlurHandler}
                     className={classes.input}
@@ -64,8 +63,8 @@ const NewTemplateContentsPlain = (props: Props) => {
                 >
                     {error}
                 </div>
-            </DialogContent>
-            <DialogActions
+            </ModalContent>
+            <ModalActions
                 className={classes.buttonContainer}
             >
                 <Button onClick={onClose}>
@@ -74,7 +73,7 @@ const NewTemplateContentsPlain = (props: Props) => {
                 <Button onClick={handleSave} primary>
                     {i18n.t('Save')}
                 </Button>
-            </DialogActions>
+            </ModalActions>
         </React.Fragment>
     );
 };
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateDialog.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateDialog.component.js
index d10a394168..60859c6f5a 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateDialog.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateDialog.component.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { Dialog } from '@material-ui/core';
+import { Modal } from '@dhis2/ui';
 import { NewTemplateContents } from './NewTemplateContents.component';
 
 type Props = {
@@ -16,16 +16,21 @@ export const NewTemplateDialog = (props: Props) => {
         onSaveTemplate,
     } = props;
 
+    if (!open) {
+        return null;
+    }
+
     return (
-        <Dialog
-            open={open}
+        <Modal
+            hide={!open}
             onClose={onClose}
-            fullWidth
+            dataTest={'new-template-dialog'}
+            position={'center'}
         >
             <NewTemplateContents
                 onSaveTemplate={onSaveTemplate}
                 onClose={onClose}
             />
-        </Dialog>
+        </Modal>
     );
 };
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/SharingDialog.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/SharingDialog.component.js
index 173f3ebfd2..9434601bea 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/SharingDialog.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/SharingDialog.component.js
@@ -12,7 +12,7 @@ const styles = {
     },
 };
 
-const SharingDialogPlain = ({ onClose, open, templateId, classes, templateSharingType }: Props) => {
+const SharingDialogPlain = ({ onClose, open, templateId, classes, templateSharingType, dataTest }: Props) => {
     const { refetch } = useDataQuery(
         useMemo(
             () => ({
@@ -61,6 +61,7 @@ const SharingDialogPlain = ({ onClose, open, templateId, classes, templateSharin
                 id={templateId}
                 onClose={handleClose}
                 className={classes.dialog}
+                dataTest={dataTest}
             /> : null
     );
 };
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/TemplateMaintenance.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/TemplateMaintenance.component.js
index 6167966094..714ff7177a 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/TemplateMaintenance.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/TemplateMaintenance.component.js
@@ -65,6 +65,7 @@ const TemplateMaintenancePlain = (props: Props, ref) => {
                 templateId={currentTemplate.id}
                 onClose={handleSetSharingSettings}
                 templateSharingType={templateSharingType}
+                dataTest={'sharing-dialog'}
             />
         </>
     );
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/sharingDialog.types.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/sharingDialog.types.js
index d2abcf26b2..9eed85d346 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/sharingDialog.types.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/sharingDialog.types.js
@@ -6,5 +6,6 @@ export type Props = {|
     open: boolean,
     templateId: string,
     templateSharingType: string,
+    dataTest: string,
     ...CssClasses,
 |};
diff --git a/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js b/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js
index 48eecdaca7..568cb0cedc 100644
--- a/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js
+++ b/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import i18n from '@dhis2/d2-i18n';
 import { Map, TileLayer, Marker, withLeaflet } from 'react-leaflet';
 import { ReactLeafletSearch } from 'react-leaflet-search-unpolyfilled';
-import { IconCross24, Button } from '@dhis2/ui';
+import { IconCross24, Button, ModalActions, ModalContent } from '@dhis2/ui';
 import { IconButton } from 'capture-ui';
 import { AddLocationIcon } from '../Icons';
 import { CoordinateInput } from '../internal/CoordinateInput/CoordinateInput.component';
@@ -56,6 +56,13 @@ export class CoordinateField extends React.Component<Props, State> {
         };
     }
 
+    componentDidUpdate() {
+        // Invalidate map size to fix rendering bug
+        if (this.mapInstance && this.state.showMap) {
+            this.mapInstance.leafletElement.invalidateSize();
+        }
+    }
+
     toSixDecimal = (value: string) => (parseFloat(value) ? parseFloat(value).toFixed(6) : null)
 
     handleBlur = (key: string, value: any) => {
@@ -139,13 +146,15 @@ export class CoordinateField extends React.Component<Props, State> {
         const clonedDialog = React.cloneElement(
 
             this.props.mapDialog,
-            { open: this.state.showMap, onClose: this.closeMap },
+            { hide: !this.state.showMap, onClose: this.closeMap },
 
             [...React.Children.toArray(this.props.mapDialog.props.children), (
-                <div className={defaultClasses.dialogContent} key="dialogContent">
-                    {this.renderMap()}
+                <>
+                    <ModalContent className={defaultClasses.dialogContent} key="dialogContent">
+                        {this.renderMap()}
+                    </ModalContent>
                     {this.renderDialogActions()}
-                </div>
+                </>
             )],
         );
         return clonedDialog;
@@ -185,7 +194,7 @@ export class CoordinateField extends React.Component<Props, State> {
     }
 
     renderDialogActions = () => (
-        <div className={defaultClasses.dialogActionOuterContainer}>
+        <ModalActions className={defaultClasses.dialogActionOuterContainer}>
             <div className={defaultClasses.dialogActionInnerContainer}>
                 {/* $FlowFixMe[prop-missing] automated comment */}
                 <Button kind="basic" onClick={this.closeMap}>
@@ -198,7 +207,7 @@ export class CoordinateField extends React.Component<Props, State> {
                     {i18n.t('Set coordinate')}
                 </Button>
             </div>
-        </div>
+        </ModalActions>
     );
 
     renderLatitude = () => {
diff --git a/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css b/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css
index d73c64bcf2..9f5709617c 100644
--- a/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css
+++ b/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css
@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
 }
-  
+
 .coordinateFieldsHorizontal {
     position: relative;
     display: flex;
@@ -64,6 +64,8 @@
 .mapContainer {
     flex-grow: 1;
     position: relative;
+    height: 100%;
+    width: 100%;
 }
 
 .leafletContainer {
@@ -73,13 +75,11 @@
 }
 
 .dialogContent {
-    flex-grow: 1;
     display: flex;
+    height: 600px;
     flex-direction: column;
-    padding: 0px 24px 24px 24px;
 }
 
 .buttonsContainerVertical {
     display: flex;
 }
-  
\ No newline at end of file
diff --git a/src/core_modules/capture-ui/PolygonField/PolygonField.component.js b/src/core_modules/capture-ui/PolygonField/PolygonField.component.js
index fd2bfe043a..7ef585a16c 100644
--- a/src/core_modules/capture-ui/PolygonField/PolygonField.component.js
+++ b/src/core_modules/capture-ui/PolygonField/PolygonField.component.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import i18n from '@dhis2/d2-i18n';
-import { IconCheckmark16, IconLocation16, colors, Button } from '@dhis2/ui';
+import { IconCheckmark16, IconLocation16, colors, Button, ModalContent, ModalActions } from '@dhis2/ui';
 import L from 'leaflet';
 import { Map, TileLayer, FeatureGroup, withLeaflet } from 'react-leaflet';
 import { ReactLeafletSearch } from 'react-leaflet-search-unpolyfilled';
@@ -62,6 +62,8 @@ function coordsToFeatureCollection(coordinates): ?FeatureCollection {
 }
 
 export class PolygonField extends React.Component<Props, State> {
+    mapInstance: ?any;
+
     static defaultProps = {
         mapCenter: [51.505, -0.09],
     }
@@ -75,6 +77,13 @@ export class PolygonField extends React.Component<Props, State> {
         };
     }
 
+    componentDidUpdate() {
+        // Invalidate map size to fix rendering bug
+        if (this.mapInstance && this.state.showMap) {
+            this.mapInstance.leafletElement.invalidateSize();
+        }
+    }
+
     onFeatureGroupReady = (reactFGref: any, featureCollection: ?FeatureCollection) => {
         if (featureCollection) {
             const leafletGeoJSON = new L.GeoJSON(featureCollection);
@@ -134,19 +143,25 @@ export class PolygonField extends React.Component<Props, State> {
         this.closeMap();
     }
 
+    setMapInstance = (mapInstance: any) => {
+        this.mapInstance = mapInstance;
+    }
+
     renderMapDialog = () => {
         const clonedDialog = React.cloneElement(
 
             // $FlowFixMe[incompatible-type] automated comment
             this.props.mapDialog,
-            { open: this.state.showMap, onClose: this.closeMap },
+            { hide: !this.state.showMap, onClose: this.closeMap },
 
             // $FlowFixMe[incompatible-use] automated comment
             [...React.Children.toArray(this.props.mapDialog.props.children), (
-                <div className={defaultClasses.dialogContent} key="dialogContent">
-                    {this.renderMap()}
+                <>
+                    <ModalContent className={defaultClasses.dialogContent} key="dialogContent">
+                        {this.renderMap()}
+                    </ModalContent>
                     {this.renderDialogActions()}
-                </div>
+                </>
             )],
         );
         return clonedDialog;
@@ -159,7 +174,13 @@ export class PolygonField extends React.Component<Props, State> {
         const center = this.getCenter(featureCollection);
         return (
             <div className={defaultClasses.mapContainer}>
-                <Map zoom={zoom} center={center} className={defaultClasses.map} key="map">
+                <Map
+                    zoom={zoom}
+                    center={center}
+                    className={defaultClasses.map}
+                    key="map"
+                    ref={(mapInstance) => { this.setMapInstance(mapInstance); }}
+                >
                     <WrappedLeafletSearch position="topleft" inputPlaceholder="Search" closeResultsOnClick />
                     <TileLayer
                         url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
@@ -190,7 +211,7 @@ export class PolygonField extends React.Component<Props, State> {
     }
 
     renderDialogActions = () => (
-        <div className={defaultClasses.dialogActionOuterContainer}>
+        <ModalActions className={defaultClasses.dialogActionOuterContainer}>
             <div className={defaultClasses.dialogActionInnerContainer}>
                 {/* $FlowFixMe[prop-missing] automated comment */}
                 <Button secondary onClick={this.closeMap}>
@@ -203,7 +224,7 @@ export class PolygonField extends React.Component<Props, State> {
                     {i18n.t('Set area')}
                 </Button>
             </div>
-        </div>
+        </ModalActions>
     );
 
     render() {
diff --git a/src/core_modules/capture-ui/PolygonField/polygonField.module.css b/src/core_modules/capture-ui/PolygonField/polygonField.module.css
index 3aa0c0454f..f4fa6c640e 100644
--- a/src/core_modules/capture-ui/PolygonField/polygonField.module.css
+++ b/src/core_modules/capture-ui/PolygonField/polygonField.module.css
@@ -21,6 +21,8 @@
 .mapContainer {
     flex-grow: 1;
     position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 .map {
@@ -30,9 +32,8 @@
 }
 
 .dialogContent {
-    flex-grow: 1;
     display: flex;
     flex-direction: column;
-    padding: 0px 24px 24px 24px;
+    height: 600px;
 }