diff --git a/docs/en_US/images/change_user_password.png b/docs/en_US/images/change_user_password.png
index 423581330e3062ef817c4359fd9ecc190f6b4053..ef53b42f64e76d76c8bd94f221d1ce6578366f44 100644
GIT binary patch
diff --git a/docs/en_US/images/mfa_registration.png b/docs/en_US/images/mfa_registration.png
index 12b5b1759b2b0ff6deda402dc386e52184024442..7f2dd47d1cbdafd174a00991d2f6944855ea995b 100644
GIT binary patch
diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js
index 60e081463..e2ac6a680 100644
--- a/web/pgadmin/browser/static/js/browser.js
+++ b/web/pgadmin/browser/static/js/browser.js
@@ -22,7 +22,7 @@ define('pgadmin.browser', [
   'pgadmin.browser.menu', 'pgadmin.browser.panel', 'pgadmin.browser.layout',
   'pgadmin.browser.runtime', 'pgadmin.browser.error', 'pgadmin.browser.frame',
   'pgadmin.browser.node', 'pgadmin.browser.collection', 'pgadmin.browser.activity',
-  'sources/codemirror/addon/fold/pgadmin-sqlfoldcode', 'pgadmin.browser.dialog',
+  'sources/codemirror/addon/fold/pgadmin-sqlfoldcode',
   'pgadmin.browser.keyboard', 'sources/tree/pgadmin_tree_save_state'
 ], function(
   gettext, url_for, require, $, _,
diff --git a/web/pgadmin/browser/static/js/dialog.js b/web/pgadmin/browser/static/js/dialog.js
deleted file mode 100644
index a785b60ad..000000000
--- a/web/pgadmin/browser/static/js/dialog.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2022, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import gettext from 'sources/gettext';
-import * as alertify from 'pgadmin.alertifyjs';
-import url_for from 'sources/url_for';
-import pgAdmin from 'sources/pgadmin';
-
-let counter = 1;
-
-function url_dialog(_title, _url, _help_filename, _width, _height) {
-
-  let pgBrowser = pgAdmin.Browser;
-
-  const dlgName = 'UrlDialog' + counter++;
-
-  alertify.dialog(dlgName, function factory() {
-    return {
-      main: function(_tmptitle) {
-        this.set({'title': _tmptitle});
-      },
-      build: function() {
-        alertify.pgDialogBuild.apply(this);
-      },
-      settings: {
-        url: _url,
-        title: _title,
-      },
-      setup: function() {
-        return {
-          buttons: [{
-            text: '',
-            key: 112,
-            className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
-            attrs: {
-              name: 'dialog_help',
-              type: 'button',
-              label: _title,
-              url: url_for('help.static', {
-                'filename': _help_filename,
-              }),
-            },
-          }, {
-            text: gettext('Close'),
-            key: 27,
-            className: 'btn btn-secondary fa fa-lg fa-times pg-alertify-button',
-            attrs: {
-              name: 'close',
-              type: 'button',
-            },
-          }],
-          // Set options for dialog
-          options: {
-            //disable both padding and overflow control.
-            padding: !1,
-            overflow: !1,
-            modal: false,
-            resizable: true,
-            maximizable: true,
-            pinnable: false,
-            closableByDimmer: false,
-            closable: false,
-          },
-        };
-      },
-      hooks: {
-        // Triggered when the dialog is closed
-        onclose: function() {
-          // Clear the view
-          return setTimeout((function() {
-            return (alertify[dlgName]()).destroy();
-          }), 1000);
-        },
-      },
-      prepare: function() {
-        // create the iframe element
-        var iframe = document.createElement('iframe');
-        iframe.frameBorder = 'no';
-        iframe.width = '100%';
-        iframe.height = '100%';
-        iframe.src = this.setting('url');
-        // add it to the dialog
-        this.elements.content.appendChild(iframe);
-      },
-      callback: function(e) {
-        if (e.button.element.name == 'dialog_help') {
-          e.cancel = true;
-          pgBrowser.showHelp(
-            e.button.element.name, e.button.element.getAttribute('url'),
-            null, null
-          );
-        }
-      },
-    };
-  });
-  (alertify[dlgName](_title)).show().resizeTo(_width || pgBrowser.stdW.lg, _height || pgBrowser.stdH.md);
-}
-
-pgAdmin.ui.dialogs.url_dialog = url_dialog;
-
-export {
-  url_dialog,
-};
diff --git a/web/pgadmin/browser/templates/browser/index.html b/web/pgadmin/browser/templates/browser/index.html
index ee8fc6652..53af00b12 100644
--- a/web/pgadmin/browser/templates/browser/index.html
+++ b/web/pgadmin/browser/templates/browser/index.html
@@ -154,12 +154,9 @@ window.onload = function(e){
                     {% endif %}
                     {% if mfa_enabled is defined and mfa_enabled is true %}
                     <li>
-                        <a class="dropdown-item" href="#" role="menuitem"
-                           onclick="javascript:pgAdmin.ui.dialogs.url_dialog(
-                             '{{ _("Authentiction") }}',
-                             '{{ login_url("mfa.register", next_url="internal") }}',
-                             'mfa.html', '90%', '90%'
-                           );">{{ _('Two-Factor Authentication') }}</a>
+                        <a class="dropdown-item" href="#" role="menuitem" onclick="pgAdmin.Browser.UserManagement.show_mfa(
+                          '{{ login_url("mfa.register", next_url="internal") }}'
+                        )">{{ _('Two-Factor Authentication') }}</a>
                     </li>
                     <li class="dropdown-divider"></li>
                     {% endif %}
diff --git a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
new file mode 100644
index 000000000..06f03a07b
--- /dev/null
+++ b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
@@ -0,0 +1,54 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2022, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import gettext from 'sources/gettext';
+import url_for from 'sources/url_for';
+
+import { Box } from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/CloseRounded';
+import HelpIcon from '@material-ui/icons/Help';
+
+import { DefaultButton, PgIconButton } from '../components/Buttons';
+import { useModalStyles } from '../helpers/ModalProvider';
+
+export default function UrlDialogContent({ url, helpFile, onClose }) {
+  const classes = useModalStyles();
+
+  return (
+    <Box display="flex" flexDirection="column" height="100%" className={classes.container}>
+      <Box flexGrow="1">
+        <iframe src={url} width="100%" height="100%" onLoad={(e)=>{
+          e.target?.contentWindow?.focus();
+        }}/>
+      </Box>
+      <Box className={classes.footer}>
+        <Box style={{ marginRight: 'auto' }}>
+          <PgIconButton data-test={'help-'+helpFile} title={gettext('Help')} icon={<HelpIcon />} onClick={() => {
+            let _url = url_for('help.static', {
+              'filename': helpFile,
+            });
+            window.open(_url, 'pgadmin_help');
+          }} >
+          </PgIconButton>
+        </Box>
+        <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={() => {
+          onClose();
+        }} >{gettext('Close')}</DefaultButton>
+      </Box>
+    </Box>
+  );
+}
+
+UrlDialogContent.propTypes = {
+  url: PropTypes.string,
+  helpFile: PropTypes.string,
+  onClose: PropTypes.func,
+};
diff --git a/web/pgadmin/static/js/Dialogs/index.jsx b/web/pgadmin/static/js/Dialogs/index.jsx
index d66a7d02f..37224ec9e 100644
--- a/web/pgadmin/static/js/Dialogs/index.jsx
+++ b/web/pgadmin/static/js/Dialogs/index.jsx
@@ -21,16 +21,17 @@ import MasterPasswordContent from './MasterPassowrdContent';
 import ChangePasswordContent from './ChangePassowrdContent';
 import NamedRestoreContent from './NamedRestoreContent';
 import ChangeOwnershipContent from './ChangeOwnershipContent';
+import UrlDialogContent from './UrlDialogContent';
 
-function mountDialog(title, getDialogContent, docker=undefined) {
+function mountDialog(title, getDialogContent, docker=undefined, width, height) {
   // Register dialog panel
   var panel;
   if (docker) {
     pgAdmin.Browser.Node.registerUtilityPanel(docker);
-    panel = pgAdmin.Browser.Node.addUtilityPanel(pgAdmin.Browser.stdW.md, undefined, docker);
+    panel = pgAdmin.Browser.Node.addUtilityPanel(width||pgAdmin.Browser.stdW.md, height||undefined, docker);
   } else {
     pgAdmin.Browser.Node.registerUtilityPanel();
-    panel = pgAdmin.Browser.Node.addUtilityPanel(pgAdmin.Browser.stdW.md);
+    panel = pgAdmin.Browser.Node.addUtilityPanel(width||pgAdmin.Browser.stdW.md);
   }
 
   var j = panel.$container.find('.obj_properties').first();
@@ -54,7 +55,7 @@ function mountDialog(title, getDialogContent, docker=undefined) {
     panel._parent.__update();
   };
 
-  ReactDOM.render(getDialogContent(onClose, setNewSize), j[0]);
+  ReactDOM.render(getDialogContent(onClose, setNewSize, panel), j[0]);
 }
 
 // This functions is used to show the connect server password dialog.
@@ -346,4 +347,18 @@ export function showChangeOwnership() {
   },
   { isFullScreen: false, isResizeable: true, showFullScreen: true, isFullWidth: true,
     dialogWidth: pgAdmin.Browser.stdW.md, dialogHeight: pgAdmin.Browser.stdH.md});
-}
\ No newline at end of file
+}
+
+export function showUrlDialog() {
+  let title = arguments[0],
+    url = arguments[1],
+    helpFile = arguments[2],
+    width = arguments[3],
+    height = arguments[4];
+
+  Notify.showModal(title, (onClose) => {
+    return <UrlDialogContent url={url} helpFile={helpFile} onClose={onClose} />;
+  },
+  { isFullScreen: false, isResizeable: true, showFullScreen: true, isFullWidth: true,
+    dialogWidth: width || pgAdmin.Browser.stdW.md, dialogHeight: height || pgAdmin.Browser.stdH.md});
+}
diff --git a/web/pgadmin/templates/security/change_password.html b/web/pgadmin/templates/security/change_password.html
index 5917b799c..9da92d67a 100644
--- a/web/pgadmin/templates/security/change_password.html
+++ b/web/pgadmin/templates/security/change_password.html
@@ -4,8 +4,7 @@
 <div class="container-fluid change_pass auth_page">
     {% include "security/messages.html" %}
     <div class="row align-items-center h-100">
-        <div class="col-md-4"></div>
-        <div class="col-md-4">
+        <div class="col-md-4 mx-auto">
             <div class="panel-header h4"><i class="app-icon pg-icon-blue" aria-hidden="true"></i> {{ _('%(appname)s', appname=config.APP_NAME) }}</div>
             <div class="panel-body">
                 <div class="d-block text-color pb-3 h5">{{ _('Password Change') }}</div>
diff --git a/web/pgadmin/tools/user_management/static/js/user_management.js b/web/pgadmin/tools/user_management/static/js/user_management.js
index 859c1f2de..52207bdc0 100644
--- a/web/pgadmin/tools/user_management/static/js/user_management.js
+++ b/web/pgadmin/tools/user_management/static/js/user_management.js
@@ -8,16 +8,16 @@
 //////////////////////////////////////////////////////////////
 
 import Notify from '../../../../static/js/helpers/Notifier';
-import { showChangeOwnership } from '../../../../static/js/Dialogs/index';
+import { showChangeOwnership, showUrlDialog } from '../../../../static/js/Dialogs/index';
 
 define([
   'sources/gettext', 'sources/url_for', 'jquery', 'underscore', 'pgadmin.alertifyjs',
   'pgadmin.browser', 'backbone', 'backgrid', 'backform', 'pgadmin.browser.node', 'pgadmin.backform',
   'pgadmin.user_management.current_user', 'sources/utils', 'pgadmin.browser.constants',
-  'pgadmin.browser.dialog','backgrid.select.all', 'backgrid.filter',
+  'backgrid.select.all', 'backgrid.filter',
 ], function(
   gettext, url_for, $, _, alertify, pgBrowser, Backbone, Backgrid, Backform,
-  pgNode, pgBackform, userInfo, commonUtils, pgConst, pgDialog,
+  pgNode, pgBackform, userInfo, commonUtils, pgConst,
 ) {
 
   // if module is already initialized, refer to that.
@@ -90,9 +90,11 @@ define([
 
     // Callback to draw change password Dialog.
     change_password: function(url) {
-      pgDialog.url_dialog(
-        gettext('Change Password'), url, 'change_user_password.html',
-      );
+      showUrlDialog(gettext('Change Password'), url, 'change_user_password.html', undefined, pgBrowser.stdH.lg);
+    },
+
+    show_mfa: function(url) {
+      showUrlDialog(gettext('Authentication'), url, 'mfa.html', undefined, pgBrowser.stdH.lg);
     },
 
     is_editable: function(m) {
diff --git a/web/webpack.shim.js b/web/webpack.shim.js
index d901421e8..b01b4f4ee 100644
--- a/web/webpack.shim.js
+++ b/web/webpack.shim.js
@@ -194,7 +194,6 @@ var webpackShimConfig = {
     'pgadmin.browser.activity': path.join(__dirname, './pgadmin/browser/static/js/activity'),
     'pgadmin.browser.quick_search': path.join(__dirname, './pgadmin/browser/static/js/quick_search'),
     'pgadmin.browser.messages': '/browser/js/messages',
-    'pgadmin.browser.dialog': path.join(__dirname, './pgadmin/browser/static/js/dialog'),
     'pgadmin.browser.node': path.join(__dirname, './pgadmin/browser/static/js/node'),
     'pgadmin.browser.node.ui': path.join(__dirname, './pgadmin/browser/static/js/node.ui'),
     'pgadmin.browser.panel': path.join(__dirname, './pgadmin/browser/static/js/panel'),
