diff --git a/public/locales/en.json b/public/locales/en.json
index 6186fad9..b18545cb 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -9,7 +9,20 @@
     "ui-version": "UI Version",
     "username": "Username"
   },
+  "form-dialog": {
+    "label_cancel": "Cancel",
+    "label_close": "Close",
+    "label_submit": "Submit",
+    "label_submit_confirmation": "Confirm",
+    "label_submit_create-credential": "Save",
+    "label_submit_create-scan": "Scan",
+    "label_submit_merge-reports": "Merge"
+  },
   "modal": {
     "aria-label-default": "Application modal"
+  },
+  "view": {
+    "loading": "Loading...",
+    "loading_credentials": "Loading credentials..."
   }
 }
diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
index 50e85f91..524d1f79 100644
--- a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
+++ b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -183,43 +183,25 @@ exports[`Authentication Component should render a non-connected component error:
 
 exports[`Authentication Component should render a non-connected component pending: non-connected pending 1`] = `
 <Modal
-  animation={false}
-  autoFocus={true}
+  aria-label={null}
   backdrop={false}
-  bsClass="modal"
-  bsSize="lg"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onHide={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  show={true}
+  disableFocusTrap={true}
+  footer={null}
+  header={null}
+  isOpen={true}
+  position="top"
+  positionOffset="5%"
+  showClose={false}
+  t={[Function]}
+  variant="medium"
 >
-  <ModalBody
-    bsClass="modal-body"
-    componentClass="div"
+  <div
+    className="spinner spinner-xl"
+  />
+  <div
+    className="text-center"
   >
-    <div
-      className="spinner spinner-xl"
-    />
-    <div
-      className="text-center"
-    >
-      Logging in...
-    </div>
-  </ModalBody>
+    Logging in...
+  </div>
 </Modal>
 `;
diff --git a/src/components/authentication/authentication.js b/src/components/authentication/authentication.js
index e4df0ea5..37ef665c 100644
--- a/src/components/authentication/authentication.js
+++ b/src/components/authentication/authentication.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Alert, EmptyState, Modal } from 'patternfly-react';
+import { Alert, EmptyState } from 'patternfly-react';
+import { Modal, ModalVariant } from '../modal/modal';
 import { reduxActions } from '../../redux';
 import helpers from '../../common/helpers';
 import { PageLayout } from '../pageLayout/pageLayout';
@@ -24,11 +25,9 @@ class Authentication extends React.Component {
 
     if (session.pending) {
       return (
-        <Modal bsSize="lg" backdrop={false} show animation={false}>
-          <Modal.Body>
-            <div className="spinner spinner-xl" />
-            <div className="text-center">Logging in...</div>
-          </Modal.Body>
+        <Modal variant={ModalVariant.medium} backdrop={false} isOpen disableFocusTrap>
+          <div className="spinner spinner-xl" />
+          <div className="text-center">Logging in...</div>
         </Modal>
       );
     }
diff --git a/src/components/confirmationModal/confirmationModal.js b/src/components/confirmationModal/confirmationModal.js
index f96c996a..8a0ca086 100644
--- a/src/components/confirmationModal/confirmationModal.js
+++ b/src/components/confirmationModal/confirmationModal.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MessageDialog, Icon } from 'patternfly-react';
+import { Alert, AlertVariant, Button, ButtonVariant, Title } from '@patternfly/react-core';
+import { Modal } from '../modal/modal';
 import { connect, store, reduxTypes } from '../../redux';
-import helpers from '../../common/helpers';
+import { translate } from '../i18n/i18n';
 
 const ConfirmationModal = ({
   show,
@@ -13,7 +14,8 @@ const ConfirmationModal = ({
   confirmButtonText,
   cancelButtonText,
   onConfirm,
-  onCancel
+  onCancel,
+  t
 }) => {
   const cancel = () => {
     if (onCancel) {
@@ -25,19 +27,43 @@ const ConfirmationModal = ({
     }
   };
 
+  const setActions = () => {
+    const actions = [];
+
+    if (onConfirm) {
+      actions.push(
+        <Button key="submit" onClick={onConfirm}>
+          {confirmButtonText || t('form-dialog.label', { context: ['submit', 'confirmation'] })}
+        </Button>
+      );
+    }
+
+    actions.push(
+      <Button key="cancel" variant={ButtonVariant.secondary} onClick={cancel}>
+        {cancelButtonText || t('form-dialog.label', { context: 'cancel' })}
+      </Button>
+    );
+
+    return actions;
+  };
+
   return (
-    <MessageDialog
-      primaryAction={onConfirm}
-      secondaryAction={cancel}
-      onHide={cancel}
-      icon={icon}
-      show={show}
-      title={title}
-      primaryActionButtonContent={confirmButtonText}
-      secondaryActionButtonContent={cancelButtonText}
-      primaryContent={<p>{heading}</p>}
-      secondaryContent={<p>{body}</p>}
-    />
+    <Modal
+      className="quipucords-modal__confirmation"
+      isOpen={show}
+      backdrop={false}
+      showClose
+      onClose={cancel}
+      actions={setActions()}
+      header={
+        <Title headingLevel="h4">{title || t('form-dialog.label', { context: ['submit', 'confirmation'] })}</Title>
+      }
+      disableFocusTrap
+    >
+      <Alert isInline isPlain variant={icon} title={heading}>
+        {body && <p>{body}</p>}
+      </Alert>
+    </Modal>
   );
 };
 
@@ -50,18 +76,20 @@ ConfirmationModal.propTypes = {
   confirmButtonText: PropTypes.string,
   cancelButtonText: PropTypes.string,
   onConfirm: PropTypes.func,
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  t: PropTypes.func
 };
 
 ConfirmationModal.defaultProps = {
-  title: 'Confirm',
+  title: null,
   heading: null,
   body: null,
-  icon: <Icon type="pf" name="warning-triangle-o" />,
-  confirmButtonText: 'Confirm',
-  cancelButtonText: '',
-  onConfirm: helpers.noop,
-  onCancel: null
+  icon: AlertVariant.warning,
+  confirmButtonText: null,
+  cancelButtonText: null,
+  onConfirm: null,
+  onCancel: null,
+  t: translate
 };
 
 const mapStateToProps = state => ({ ...state.confirmationModal });
diff --git a/src/components/createCredentialDialog/__tests__/__snapshots__/createCredentialDialog.test.js.snap b/src/components/createCredentialDialog/__tests__/__snapshots__/createCredentialDialog.test.js.snap
index 7cc8ee11..b1c9a9ff 100644
--- a/src/components/createCredentialDialog/__tests__/__snapshots__/createCredentialDialog.test.js.snap
+++ b/src/components/createCredentialDialog/__tests__/__snapshots__/createCredentialDialog.test.js.snap
@@ -2,47 +2,28 @@
 
 exports[`CreateCredentialDialog Component should render a connected component: connected 1`] = `
 <div
-  role="dialog"
+  class="pf-c-backdrop"
 >
   <div
-    class="fade modal-backdrop in"
-  />
-  <div
-    class="fade in modal"
-    role="dialog"
-    style="display: block; padding-right: 0px;"
-    tabindex="-1"
+    class="pf-l-bullseye"
   >
     <div
-      class="modal-dialog"
+      aria-describedby="pf-modal-part-2"
+      aria-label="t(modal.aria-label-default)"
+      aria-labelledby="pf-modal-part-0"
+      aria-modal="true"
+      class="pf-c-modal-box pf-m-align-top pf-m-md"
+      data-ouia-component-id="OUIA-Generated-Modal-medium-1"
+      data-ouia-component-type="PF4/ModalContent"
+      data-ouia-safe="true"
+      id="pf-modal-part-0"
+      role="dialog"
+      style="--pf-c-modal-box--m-align-top--spacer: 5%;"
     >
       <div
-        class="modal-content"
-        role="document"
+        class="pf-c-modal-box__body"
+        id="pf-modal-part-2"
       >
-        <div
-          class="modal-header"
-        >
-          <button
-            aria-hidden="true"
-            aria-label="Close"
-            class="close btn btn-default"
-            type="button"
-          >
-            <span
-              aria-hidden="true"
-              class="pficon pficon-close"
-            />
-          </button>
-          <h4
-            class="modal-title"
-          >
-            Add Credential
-          </h4>
-        </div>
-        <div
-          class="modal-body"
-        />
         <div
           class="container-fluid"
         >
@@ -191,23 +172,6 @@ exports[`CreateCredentialDialog Component should render a connected component: c
             </div>
           </form>
         </div>
-        <div
-          class="modal-footer"
-        >
-          <button
-            class="btn-cancel btn btn-default"
-            type="button"
-          >
-            Cancel
-          </button>
-          <button
-            class="btn btn-primary"
-            disabled=""
-            type="button"
-          >
-            Save
-          </button>
-        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/createCredentialDialog/createCredentialDialog.js b/src/components/createCredentialDialog/createCredentialDialog.js
index 76ae544f..69146b62 100644
--- a/src/components/createCredentialDialog/createCredentialDialog.js
+++ b/src/components/createCredentialDialog/createCredentialDialog.js
@@ -1,10 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Alert, Button, Icon, Form, Grid } from 'patternfly-react';
+import { Button, ButtonVariant, Title } from '@patternfly/react-core';
+import { Alert, Form, Grid } from 'patternfly-react';
+import { Modal } from '../modal/modal';
 import { connect, reduxActions, reduxTypes, store } from '../../redux';
 import { helpers } from '../../common/helpers';
 import { authDictionary, dictionary } from '../../constants/dictionaryConstants';
 import DropdownSelect from '../dropdownSelect/dropdownSelect';
+import { translate } from '../i18n/i18n';
 
 class CreateCredentialDialog extends React.Component {
   static renderFormLabel(label) {
@@ -396,7 +399,7 @@ class CreateCredentialDialog extends React.Component {
   }
 
   render() {
-    const { show, edit } = this.props;
+    const { show, edit, t } = this.props;
     const {
       credentialType,
       credentialName,
@@ -406,16 +409,22 @@ class CreateCredentialDialog extends React.Component {
       usernameError,
       sshKeyDisabled
     } = this.state;
-
+    //
     return (
-      <Modal show={show} onHide={this.onCancel}>
-        <Modal.Header>
-          <Button className="close" onClick={this.onCancel} aria-hidden="true" aria-label="Close">
-            <Icon type="pf" name="close" />
+      <Modal
+        isOpen={show}
+        showClose
+        onClose={this.onCancel}
+        header={<Title headingLevel="h4">{edit ? `View Credential - ${credentialName}` : 'Add Credential'}</Title>}
+        actions={[
+          <Button key="save" onClick={this.onSave} isDisabled={!this.validateForm()}>
+            {t('form-dialog.label', { context: ['submit', 'create-credential'] })}
+          </Button>,
+          <Button key="cancel" variant={ButtonVariant.link} autoFocus={edit} onClick={this.onCancel}>
+            {t('form-dialog.label', { context: 'cancel' })}
           </Button>
-          <Modal.Title>{edit ? `View Credential - ${credentialName}` : 'Add Credential'}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body />
+        ]}
+      >
         <Grid fluid>
           {this.renderErrorMessage()}
           <Form horizontal>
@@ -474,14 +483,6 @@ class CreateCredentialDialog extends React.Component {
             {this.renderNetworkForm()}
           </Form>
         </Grid>
-        <Modal.Footer>
-          <Button bsStyle="default" className="btn-cancel" autoFocus={edit} onClick={this.onCancel}>
-            Cancel
-          </Button>
-          <Button bsStyle="primary" onClick={this.onSave} disabled={!this.validateForm()}>
-            Save
-          </Button>
-        </Modal.Footer>
       </Modal>
     );
   }
@@ -499,6 +500,7 @@ CreateCredentialDialog.propTypes = {
   fulfilled: PropTypes.bool,
   error: PropTypes.bool,
   errorMessage: PropTypes.string,
+  t: PropTypes.func,
   viewOptions: PropTypes.object
 };
 
@@ -514,6 +516,7 @@ CreateCredentialDialog.defaultProps = {
   fulfilled: false,
   error: false,
   errorMessage: null,
+  t: translate,
   viewOptions: {}
 };
 
diff --git a/src/components/createScanDialog/createScanDialog.js b/src/components/createScanDialog/createScanDialog.js
index 4ae395d9..897297f7 100644
--- a/src/components/createScanDialog/createScanDialog.js
+++ b/src/components/createScanDialog/createScanDialog.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Button, FieldLevelHelp, Form, Icon, Modal, Spinner } from 'patternfly-react';
+import { Button, ButtonVariant, Title } from '@patternfly/react-core';
+import { Alert, FieldLevelHelp, Form, Spinner } from 'patternfly-react';
+import { Modal } from '../modal/modal';
 import { connect, reduxActions, reduxTypes, store } from '../../redux';
 import { FormState } from '../formState/formState';
 import { FormField, fieldValidation } from '../formField/formField';
 import { TouchSpin } from '../touchspin/touchspin';
 import helpers from '../../common/helpers';
 import apiTypes from '../../constants/apiConstants';
+import { translate } from '../i18n/i18n';
 
 class CreateScanDialog extends React.Component {
   onClose = () => {
@@ -319,63 +322,70 @@ class CreateScanDialog extends React.Component {
   }
 
   render() {
-    const { pending, show, sources } = this.props;
+    const { pending, show, sources, t } = this.props;
 
     if (!sources || sources.length === 0 || !sources[0]) {
       return null;
     }
 
+    const formActions = (onSubmit, isValid) => {
+      const updatedActions = [];
+      if (!pending) {
+        updatedActions.push(
+          <Button key="scan" onClick={onSubmit} isDisabled={!isValid}>
+            {t('form-dialog.label', { context: ['submit', 'create-scan'] })}
+          </Button>
+        );
+        updatedActions.push(
+          <Button key="cancel" variant={ButtonVariant.link} onClick={this.onClose}>
+            {t('form-dialog.label', { context: 'cancel' })}
+          </Button>
+        );
+      }
+      return updatedActions;
+    };
+
     return (
-      <Modal show={show} onHide={this.onClose}>
-        <FormState
-          validateOnMount={false}
-          setValues={{
-            displayScanDirectories: '',
-            displayScanSources: sources.map(item => item.name).join(', '),
-            scanConcurrency: 25,
-            scanDirectories: [],
-            jbossEap: false,
-            jbossFuse: false,
-            jbossWs: false,
-            jbossBrms: false,
-            scanName: '',
-            scanSources: sources.map(item => item.id)
-          }}
-          validate={this.onValidateForm}
-          onSubmit={this.onSubmit}
-        >
-          {({ handleOnSubmit, isValid, ...options }) => (
+      <FormState
+        validateOnMount={false}
+        setValues={{
+          displayScanDirectories: '',
+          displayScanSources: sources.map(item => item.name).join(', '),
+          scanConcurrency: 25,
+          scanDirectories: [],
+          jbossEap: false,
+          jbossFuse: false,
+          jbossWs: false,
+          jbossBrms: false,
+          scanName: '',
+          scanSources: sources.map(item => item.id)
+        }}
+        validate={this.onValidateForm}
+        onSubmit={this.onSubmit}
+      >
+        {({ handleOnSubmit, isValid, ...options }) => (
+          <Modal
+            isOpen={show}
+            showClose
+            onClose={this.onClose}
+            header={<Title headingLevel="h4">Scan</Title>}
+            actions={formActions(handleOnSubmit, isValid)}
+          >
             <Form horizontal onSubmit={handleOnSubmit}>
-              <Modal.Header>
-                <button type="button" className="close" onClick={this.onClose} aria-hidden="true" aria-label="Close">
-                  <Icon type="pf" name="close" />
-                </button>
-                <Modal.Title>Scan</Modal.Title>
-              </Modal.Header>
-              <Modal.Body aria-live="polite">
-                {pending && (
-                  <React.Fragment>
-                    <Spinner loading size="lg" className="blank-slate-pf-icon" />
-                    <div className="text-center">Scan updating...</div>
-                  </React.Fragment>
-                )}
-                {!pending && this.renderErrorMessage(options)}
-                {!pending && this.renderNameSources(options)}
-                {!pending && this.renderConcurrentScans(options)}
-                {!pending && this.renderAdditionalProducts(options)}
-              </Modal.Body>
-              <Modal.Footer>
-                <Button bsStyle="default" className="btn-cancel" onClick={this.onClose}>
-                  Cancel
-                </Button>
-                <Button bsStyle="primary" type="submit" disabled={!isValid}>
-                  Scan
-                </Button>
-              </Modal.Footer>
+              {pending && (
+                <React.Fragment>
+                  <Spinner loading size="lg" className="blank-slate-pf-icon" />
+                  <div className="text-center">Scan updating...</div>
+                </React.Fragment>
+              )}
+              {!pending && this.renderErrorMessage(options)}
+              {!pending && this.renderNameSources(options)}
+              {!pending && this.renderConcurrentScans(options)}
+              {!pending && this.renderAdditionalProducts(options)}
             </Form>
-          )}
-        </FormState>
-      </Modal>
+          </Modal>
+        )}
+      </FormState>
     );
   }
 }
@@ -394,7 +404,8 @@ CreateScanDialog.propTypes = {
     scanDirectories: PropTypes.string,
     scanName: PropTypes.string,
     scanSources: PropTypes.string
-  })
+  }),
+  t: PropTypes.func
 };
 
 CreateScanDialog.defaultProps = {
@@ -404,7 +415,8 @@ CreateScanDialog.defaultProps = {
   fulfilled: false,
   pending: false,
   startScan: helpers.noop,
-  submitErrorMessages: {}
+  submitErrorMessages: {},
+  t: translate
 };
 
 const mapDispatchToProps = dispatch => ({
diff --git a/src/components/credentials/credentials.js b/src/components/credentials/credentials.js
index 36ca4fa3..ced3d0bb 100644
--- a/src/components/credentials/credentials.js
+++ b/src/components/credentials/credentials.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Button, DropdownButton, EmptyState, Form, Grid, ListView, MenuItem, Modal } from 'patternfly-react';
 import _get from 'lodash/get';
 import _isEqual from 'lodash/isEqual';
 import _size from 'lodash/size';
+import { Alert, Button, DropdownButton, EmptyState, Form, Grid, ListView, MenuItem } from 'patternfly-react';
+import { Modal, ModalVariant } from '../modal/modal';
 import { connect, reduxActions, reduxTypes, store } from '../../redux';
 import helpers from '../../common/helpers';
 import ViewToolbar from '../viewToolbar/viewToolbar';
@@ -11,6 +12,7 @@ import ViewPaginationRow from '../viewPaginationRow/viewPaginationRow';
 import CredentialsEmptyState from './credentialsEmptyState';
 import CredentialListItem from './credentialListItem';
 import { CredentialFilterFields, CredentialSortFields } from './credentialConstants';
+import { translate } from '../i18n/i18n';
 
 class Credentials extends React.Component {
   credentialsToDelete = [];
@@ -217,15 +219,13 @@ class Credentials extends React.Component {
   }
 
   renderPendingMessage() {
-    const { pending } = this.props;
+    const { pending, t } = this.props;
 
     if (pending) {
       return (
-        <Modal bsSize="lg" backdrop={false} show animation={false}>
-          <Modal.Body>
-            <div className="spinner spinner-xl" />
-            <div className="text-center">Loading credentials...</div>
-          </Modal.Body>
+        <Modal variant={ModalVariant.medium} backdrop={false} isOpen disableFocusTrap>
+          <div className="spinner spinner-xl" />
+          <div className="text-center">{t('view.loading', { context: 'credentials' })}</div>
         </Modal>
       );
     }
@@ -319,6 +319,7 @@ Credentials.propTypes = {
   pending: PropTypes.bool,
   credentials: PropTypes.array,
   viewOptions: PropTypes.object,
+  t: PropTypes.func,
   update: PropTypes.object
 };
 
@@ -331,6 +332,7 @@ Credentials.defaultProps = {
   pending: false,
   credentials: [],
   viewOptions: {},
+  t: translate,
   update: {}
 };
 
diff --git a/src/components/mergeReportsDialog/mergeReportsDialog.js b/src/components/mergeReportsDialog/mergeReportsDialog.js
index 4d7a038d..072940cf 100644
--- a/src/components/mergeReportsDialog/mergeReportsDialog.js
+++ b/src/components/mergeReportsDialog/mergeReportsDialog.js
@@ -1,9 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Button, Icon, Spinner } from 'patternfly-react';
+import { Button, ButtonVariant, Title } from '@patternfly/react-core';
+import { Icon, Spinner } from 'patternfly-react';
+import { Modal } from '../modal/modal';
 import { connect, reduxActions, reduxTypes, store } from '../../redux';
 import { helpers } from '../../common/helpers';
 import { apiTypes } from '../../constants/apiConstants';
+import { translate } from '../i18n/i18n';
 
 class MergeReportsDialog extends React.Component {
   onClose = () => {
@@ -97,26 +100,25 @@ class MergeReportsDialog extends React.Component {
   }
 
   renderButtons() {
+    const { t } = this.props;
     const validCount = this.getValidScans().length;
 
     if (validCount === 0) {
-      return (
-        <Button bsStyle="primary" className="btn-cancel" onClick={this.onClose}>
-          Close
+      return [
+        <Button key="close" variant={ButtonVariant.secondary} onClick={this.onClose}>
+          {t('form-dialog.label', { context: 'close' })}
         </Button>
-      );
+      ];
     }
 
-    return (
-      <React.Fragment>
-        <Button bsStyle="default" className="btn-cancel" onClick={this.onClose}>
-          Cancel
-        </Button>
-        <Button bsStyle="primary" type="submit" disabled={validCount < 2} onClick={this.onMergeScanResults}>
-          Merge
-        </Button>
-      </React.Fragment>
-    );
+    return [
+      <Button key="merge" isDisabled={validCount < 2} onClick={this.onMergeScanResults}>
+        {t('form-dialog.label', { context: ['submit', 'merge-reports'] })}
+      </Button>,
+      <Button key="cancel" variant={ButtonVariant.link} onClick={this.onClose}>
+        {t('form-dialog.label', { context: 'cancel' })}
+      </Button>
+    ];
   }
 
   render() {
@@ -154,35 +156,31 @@ class MergeReportsDialog extends React.Component {
     }
 
     return (
-      <Modal show={show} onHide={this.onClose}>
-        <Modal.Header>
-          <button type="button" className="close" onClick={this.onClose} aria-hidden="true" aria-label="Close">
-            <Icon type="pf" name="close" />
-          </button>
-          <Modal.Title>Merge reports</Modal.Title>
-        </Modal.Header>
-        <Modal.Body aria-live="polite">
-          {pending && (
-            <React.Fragment>
-              <Spinner loading size="lg" className="blank-slate-pf-icon" />
-              <div className="text-center">Merging reports...</div>
-            </React.Fragment>
-          )}
-          {!pending && (
-            <div className="merge-reports-body">
-              <span className="merge-reports-icon">{icon}</span>
-              <span>
-                {heading}
-                <div>
-                  {this.renderValidScans()}
-                  {this.renderInvalidScans()}
-                  {footer}
-                </div>
-              </span>
-            </div>
-          )}
-        </Modal.Body>
-        <Modal.Footer>{this.renderButtons()}</Modal.Footer>
+      <Modal
+        isOpen={show}
+        onClose={this.onClose}
+        header={<Title headingLevel="h4">Merge reports</Title>}
+        actions={this.renderButtons()}
+      >
+        {pending && (
+          <React.Fragment>
+            <Spinner loading size="lg" className="blank-slate-pf-icon" />
+            <div className="text-center">Merging reports...</div>
+          </React.Fragment>
+        )}
+        {!pending && (
+          <div className="merge-reports-body">
+            <span className="merge-reports-icon">{icon}</span>
+            <span>
+              {heading}
+              <div>
+                {this.renderValidScans()}
+                {this.renderInvalidScans()}
+                {footer}
+              </div>
+            </span>
+          </div>
+        )}
       </Modal>
     );
   }
@@ -200,14 +198,16 @@ MergeReportsDialog.propTypes = {
       name: PropTypes.string
     })
   ),
-  show: PropTypes.bool.isRequired
+  show: PropTypes.bool.isRequired,
+  t: PropTypes.func
 };
 
 MergeReportsDialog.defaultProps = {
   getReportsDownload: helpers.noop,
   mergeReports: helpers.noop,
   pending: false,
-  scans: []
+  scans: [],
+  t: translate
 };
 
 const mapDispatchToProps = dispatch => ({
diff --git a/src/components/scans/scans.js b/src/components/scans/scans.js
index b7b9007d..d75537a3 100644
--- a/src/components/scans/scans.js
+++ b/src/components/scans/scans.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Button, EmptyState, ListView, Modal, Spinner } from 'patternfly-react';
 import _isEqual from 'lodash/isEqual';
 import _size from 'lodash/size';
+import { Alert, Button, EmptyState, ListView, Spinner } from 'patternfly-react';
+import { Modal, ModalVariant } from '../modal/modal';
 import { connect, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux';
 import helpers from '../../common/helpers';
 import ViewToolbar from '../viewToolbar/viewToolbar';
@@ -12,6 +13,7 @@ import ScanListItem from './scanListItem';
 import Tooltip from '../tooltip/tooltip';
 import { ScanFilterFields, ScanSortFields } from './scanConstants';
 import { apiTypes } from '../../constants/apiConstants';
+import { translate } from '../i18n/i18n';
 
 class Scans extends React.Component {
   componentDidMount() {
@@ -71,15 +73,13 @@ class Scans extends React.Component {
   }
 
   renderPendingMessage() {
-    const { pending } = this.props;
+    const { pending, t } = this.props;
 
     if (pending) {
       return (
-        <Modal bsSize="lg" backdrop={false} show animation={false}>
-          <Modal.Body>
-            <Spinner loading size="lg" className="blank-slate-pf-icon" />
-            <div className="text-center">Loading...</div>
-          </Modal.Body>
+        <Modal variant={ModalVariant.medium} backdrop={false} isOpen disableFocusTrap>
+          <Spinner loading size="lg" className="blank-slate-pf-icon" />
+          <div className="text-center">{t('view.loading', { context: 'scans' })}</div>
         </Modal>
       );
     }
@@ -164,6 +164,7 @@ Scans.propTypes = {
   lastRefresh: PropTypes.number,
   pending: PropTypes.bool,
   scans: PropTypes.array,
+  t: PropTypes.func,
   update: PropTypes.bool,
   viewOptions: PropTypes.object
 };
@@ -175,6 +176,7 @@ Scans.defaultProps = {
   lastRefresh: 0,
   pending: false,
   scans: [],
+  t: translate,
   update: false,
   viewOptions: {}
 };
diff --git a/src/components/sources/sources.js b/src/components/sources/sources.js
index 83190629..e4aa5d26 100644
--- a/src/components/sources/sources.js
+++ b/src/components/sources/sources.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Button, EmptyState, ListView, Modal, Spinner } from 'patternfly-react';
 import _isEqual from 'lodash/isEqual';
 import _size from 'lodash/size';
+import { Alert, Button, EmptyState, ListView, Spinner } from 'patternfly-react';
+import { Modal, ModalVariant } from '../modal/modal';
 import { connect, reduxActions, reduxTypes, store } from '../../redux';
 import helpers from '../../common/helpers';
 import ViewToolbar from '../viewToolbar/viewToolbar';
@@ -11,6 +12,7 @@ import SourcesEmptyState from './sourcesEmptyState';
 import SourceListItem from './sourceListItem';
 import { SourceFilterFields, SourceSortFields } from './sourceConstants';
 import { apiTypes } from '../../constants/apiConstants';
+import { translate } from '../i18n/i18n';
 
 class Sources extends React.Component {
   componentDidMount() {
@@ -77,15 +79,13 @@ class Sources extends React.Component {
   }
 
   renderPendingMessage() {
-    const { pending } = this.props;
+    const { pending, t } = this.props;
 
     if (pending) {
       return (
-        <Modal bsSize="lg" backdrop={false} show animation={false}>
-          <Modal.Body>
-            <Spinner loading size="lg" className="blank-slate-pf-icon" />
-            <div className="text-center">Loading...</div>
-          </Modal.Body>
+        <Modal variant={ModalVariant.medium} backdrop={false} isOpen disableFocusTrap>
+          <Spinner loading size="lg" className="blank-slate-pf-icon" />
+          <div className="text-center">{t('view.loading', { context: 'sources' })}</div>
         </Modal>
       );
     }
@@ -170,6 +170,7 @@ Sources.propTypes = {
   lastRefresh: PropTypes.number,
   pending: PropTypes.bool,
   sources: PropTypes.array,
+  t: PropTypes.func,
   updateSources: PropTypes.bool,
   viewOptions: PropTypes.object
 };
@@ -181,6 +182,7 @@ Sources.defaultProps = {
   lastRefresh: 0,
   pending: false,
   sources: [],
+  t: translate,
   updateSources: false,
   viewOptions: {}
 };