diff --git a/extensions/vtk/CHANGELOG.md b/extensions/vtk/CHANGELOG.md
index 2ef1222e1..ed2162c6b 100644
--- a/extensions/vtk/CHANGELOG.md
+++ b/extensions/vtk/CHANGELOG.md
@@ -17,8 +17,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-
-
 ## [0.52.30](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@0.52.29...@ohif/extension-vtk@0.52.30) (2019-11-04)
 
 **Note:** Version bump only for package @ohif/extension-vtk
diff --git a/platform/i18n/src/locales/en-US/index.js b/platform/i18n/src/locales/en-US/index.js
index 7aaf96e28..7540419ee 100644
--- a/platform/i18n/src/locales/en-US/index.js
+++ b/platform/i18n/src/locales/en-US/index.js
@@ -1,13 +1,13 @@
-import AboutModal from "./AboutModal.json";
-import Buttons from "./Buttons.json";
-import CineDialog from "./CineDialog.json";
-import Common from "./Common.json";
-import Header from "./Header.json";
-import MeasurementTable from "./MeasurementTable.json";
-import StudyList from "./StudyList.json";
-import UserPreferencesModal from "./UserPreferencesModal.json";
+import AboutModal from './AboutModal.json';
+import Buttons from './Buttons.json';
+import CineDialog from './CineDialog.json';
+import Common from './Common.json';
+import Header from './Header.json';
+import MeasurementTable from './MeasurementTable.json';
+import StudyList from './StudyList.json';
+import UserPreferencesModal from './UserPreferencesModal.json';
 
-export default { 
+export default {
   'en-US': {
     AboutModal,
     Buttons,
@@ -17,5 +17,5 @@ export default {
     MeasurementTable,
     StudyList,
     UserPreferencesModal,
-  }
-};
\ No newline at end of file
+  },
+};
diff --git a/platform/i18n/src/locales/pt-BR/index.js b/platform/i18n/src/locales/pt-BR/index.js
index 51d2bea8d..98bb8bce2 100644
--- a/platform/i18n/src/locales/pt-BR/index.js
+++ b/platform/i18n/src/locales/pt-BR/index.js
@@ -1,11 +1,11 @@
-import AboutModal from "./AboutModal.json";
-import Buttons from "./Buttons.json";
-import CineDialog from "./CineDialog.json";
-import Common from "./Common.json";
-import Header from "./Header.json";
-import UserPreferencesModal from "./UserPreferencesModal.json";
+import AboutModal from './AboutModal.json';
+import Buttons from './Buttons.json';
+import CineDialog from './CineDialog.json';
+import Common from './Common.json';
+import Header from './Header.json';
+import UserPreferencesModal from './UserPreferencesModal.json';
 
-export default { 
+export default {
   'pt-BR': {
     AboutModal,
     Buttons,
@@ -13,5 +13,5 @@ export default {
     Common,
     Header,
     UserPreferencesModal,
-  }
-};
\ No newline at end of file
+  },
+};
diff --git a/platform/ui/CHANGELOG.md b/platform/ui/CHANGELOG.md
index fd559a861..a674592db 100644
--- a/platform/ui/CHANGELOG.md
+++ b/platform/ui/CHANGELOG.md
@@ -3,6 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+
 ## [0.59.1](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.59.0...@ohif/ui@0.59.1) (2019-11-05)
 
 
@@ -13,7 +14,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-
 # [0.59.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@0.58.5...@ohif/ui@0.59.0) (2019-11-04)
 
 
diff --git a/platform/ui/src/components/content/aboutContent/AboutContent.js b/platform/ui/src/components/content/aboutContent/AboutContent.js
new file mode 100644
index 000000000..138219a83
--- /dev/null
+++ b/platform/ui/src/components/content/aboutContent/AboutContent.js
@@ -0,0 +1,107 @@
+import React from 'react';
+import detect from 'browser-detect';
+import { useTranslation } from 'react-i18next';
+
+import './AboutContent.styl';
+
+const AboutContent = () => {
+  const { t } = useTranslation('AboutContent');
+
+  const { os, version, name } = detect();
+  const capitalize = s =>
+    s.substr(0, 1).toUpperCase() + s.substr(1).toLowerCase();
+
+  const itemsPreset = () => {
+    return [
+      {
+        name: t('Repository URL'),
+        value: 'https://github.com/OHIF/Viewers/',
+        link: 'https://github.com/OHIF/Viewers/',
+      },
+      {
+        name: t('Latest Master Commits'),
+        value: 'https://github.com/OHIF/Viewers/commits/master',
+        link: 'https://github.com/OHIF/Viewers/commits/master',
+      },
+      {
+        name: 'Version Number',
+        value: process.env.VERSION_NUMBER,
+      },
+      {
+        name: t('Build Number'),
+        value: process.env.BUILD_NUM,
+      },
+      {
+        name: t('Browser'),
+        value: `${capitalize(name)} ${version}`,
+      },
+      {
+        name: t('OS'),
+        value: os,
+      },
+    ];
+  };
+
+  const renderTableRow = ({ name, value, link }) => (
+    <tr key={name} style={{ backgroundColor: 'transparent' }}>
+      <td>{name}</td>
+      <td>
+        {link ? (
+          <a target="_blank" rel="noopener noreferrer" href={link}>
+            {value}
+          </a>
+        ) : (
+          value
+        )}
+      </td>
+    </tr>
+  );
+
+  return (
+    <div data-cy="about-modal">
+      <div className="btn-group">
+        <a
+          className="btn btn-default"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://groups.google.com/forum/#!forum/cornerstone-platform"
+        >
+          {t('Visit the forum')}
+        </a>
+        {` `}
+        <a
+          className="btn btn-default"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/OHIF/Viewers/issues/new/choose"
+        >
+          {t('Report an issue')}
+        </a>
+        {` `}
+        <a
+          className="btn btn-default"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="http://ohif.org"
+        >
+          {t('More details')}
+        </a>
+      </div>
+      <div>
+        <h3>{t('Version Information')}</h3>
+        <table className="table table-responsive">
+          <thead>
+            <tr>
+              <th>{t('Name')}</th>
+              <th>{t('Value')}</th>
+            </tr>
+          </thead>
+          <tbody>{itemsPreset().map(item => renderTableRow(item))}</tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export { AboutContent };
+export default AboutContent;
diff --git a/platform/ui/src/components/userPreferencesModal/AboutModal.styl b/platform/ui/src/components/content/aboutContent/AboutContent.styl
similarity index 72%
rename from platform/ui/src/components/userPreferencesModal/AboutModal.styl
rename to platform/ui/src/components/content/aboutContent/AboutContent.styl
index b808e2cca..08d7ff6a9 100644
--- a/platform/ui/src/components/userPreferencesModal/AboutModal.styl
+++ b/platform/ui/src/components/content/aboutContent/AboutContent.styl
@@ -1,7 +1,7 @@
-@import './../../design/styles/common/button.styl'
-@import './../../design/styles/common/table.styl'
+@import '../../../design/styles/common/button.styl'
+@import '../../../design/styles/common/table.styl'
 
-.AboutModal
+.AboutContent
   .btn
     border-color: #ccc;
 
diff --git a/platform/ui/src/components/downloadDialog/DownloadDialog.js b/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js
similarity index 55%
rename from platform/ui/src/components/downloadDialog/DownloadDialog.js
rename to platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js
index fd744ebde..03db90b19 100644
--- a/platform/ui/src/components/downloadDialog/DownloadDialog.js
+++ b/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js
@@ -1,10 +1,9 @@
 import React, { useEffect, useState, createRef } from 'react';
-import Modal from 'react-bootstrap-modal';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 
-import './DownloadDialog.styl';
+import './ViewportDownloadForm.styl';
 import { TextInput, Select } from '@ohif/ui';
-import { withTranslation } from '../../utils/LanguageProvider';
 
 const FILE_TYPE_OPTIONS = [
   {
@@ -19,9 +18,7 @@ const FILE_TYPE_OPTIONS = [
 
 const DEFAULT_FILENAME = 'image';
 
-const DownloadDialog = ({
-  t,
-  isOpen,
+const ViewportDownloadForm = ({
   activeViewport,
   onClose,
   updateViewportPreview,
@@ -35,6 +32,8 @@ const DownloadDialog = ({
   maximumSize,
   canvasClass,
 }) => {
+  const [t] = useTranslation('ViewportDownloadForm');
+
   const [filename, setFilename] = useState(DEFAULT_FILENAME);
   const [fileType, setFileType] = useState('jpg');
 
@@ -190,142 +189,127 @@ const DownloadDialog = ({
   };
 
   return (
-    <Modal
-      show={isOpen}
-      onHide={onClose}
-      aria-labelledby="ModalHeader"
-      className="DownloadDialog modal fade themed in"
-      backdrop={false}
-      large={true}
-      keyboard={true}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>{t('Download High Quality Image')}</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <div className="title">
-          {t(
-            'Please specify the dimensions, filename, and desired type for the output image.'
-          )}
-        </div>
+    <>
+      <div className="title">
+        {t(
+          'Please specify the dimensions, filename, and desired type for the output image.'
+        )}
+      </div>
 
-        <div className="file-info-container">
-          <div className="col">
-            <div className="width">
-              <TextInput
-                type="number"
-                min={minimumSize}
-                max={maximumSize}
-                value={width}
-                label={t('Image width (px)')}
-                onChange={onWidthChange}
-              />
-            </div>
-            <div className="height">
-              <TextInput
-                type="number"
-                min={minimumSize}
-                max={maximumSize}
-                value={height}
-                label={t('Image height (px)')}
-                onChange={onHeightChange}
-              />
-            </div>
+      <div className="file-info-container">
+        <div className="col">
+          <div className="width">
+            <TextInput
+              type="number"
+              min={minimumSize}
+              max={maximumSize}
+              value={width}
+              label={t('Image width (px)')}
+              onChange={onWidthChange}
+            />
           </div>
-
-          <div className="col">
-            <div className="file-name">
-              <TextInput
-                type="text"
-                value={filename}
-                onChange={event => setFilename(event.target.value)}
-                label={t('File name')}
-                id="file-name"
-              />
-            </div>
-            <div className="file-type">
-              <Select
-                value={fileType}
-                onChange={event => setFileType(event.target.value)}
-                options={FILE_TYPE_OPTIONS}
-                label={t('File type')}
-              />
-            </div>
-          </div>
-
-          <div className="col">
-            <div className="show-annotations">
-              <label htmlFor="show-annotations" className="form-check-label">
-                <input
-                  id="show-annotations"
-                  type="checkbox"
-                  className="form-check-input"
-                  checked={showAnnotations}
-                  onChange={event => setShowAnnotations(event.target.checked)}
-                />
-                {t('Show Annotations')}
-              </label>
-            </div>
+          <div className="height">
+            <TextInput
+              type="number"
+              min={minimumSize}
+              max={maximumSize}
+              value={height}
+              label={t('Image height (px)')}
+              onChange={onHeightChange}
+            />
           </div>
         </div>
 
-        <div
+        <div className="col">
+          <div className="file-name">
+            <TextInput
+              type="text"
+              value={filename}
+              onChange={event => setFilename(event.target.value)}
+              label={t('File name')}
+              id="file-name"
+            />
+          </div>
+          <div className="file-type">
+            <Select
+              value={fileType}
+              onChange={event => setFileType(event.target.value)}
+              options={FILE_TYPE_OPTIONS}
+              label={t('File type')}
+            />
+          </div>
+        </div>
+
+        <div className="col">
+          <div className="show-annotations">
+            <label htmlFor="show-annotations" className="form-check-label">
+              <input
+                id="show-annotations"
+                type="checkbox"
+                className="form-check-input"
+                checked={showAnnotations}
+                onChange={event => setShowAnnotations(event.target.checked)}
+              />
+              {t('Show Annotations')}
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div
+        style={{
+          height: viewportElementHeight,
+          width: viewportElementWidth,
+          position: 'absolute',
+          left: '9999px',
+        }}
+        ref={ref => setViewportElement(ref)}
+      >
+        <canvas
+          className={canvasClass}
           style={{
-            height: viewportElementHeight,
-            width: viewportElementWidth,
-            position: 'absolute',
-            left: '9999px',
+            height: downloadCanvas.height,
+            width: downloadCanvas.width,
+            display: 'block',
           }}
-          ref={ref => setViewportElement(ref)}
-        >
-          <canvas
-            className={canvasClass}
-            style={{
-              height: downloadCanvas.height,
-              width: downloadCanvas.width,
-              display: 'block',
-            }}
-            width={downloadCanvas.width}
-            height={downloadCanvas.height}
-            ref={downloadCanvas.ref}
-          ></canvas>
-        </div>
+          width={downloadCanvas.width}
+          height={downloadCanvas.height}
+          ref={downloadCanvas.ref}
+        ></canvas>
+      </div>
 
-        <div className="preview">
-          <h4> {t('Image Preview')}</h4>
-          <img
-            className="viewport-preview"
-            src={viewportPreview.src}
-            alt="Viewport Preview"
-            style={{
-              height: viewportPreview.height,
-              width: viewportPreview.width,
-            }}
-          />
-        </div>
+      <div className="preview">
+        <h4> {t('Image Preview')}</h4>
+        <img
+          className="viewport-preview"
+          src={viewportPreview.src}
+          alt="Viewport Preview"
+          style={{
+            height: viewportPreview.height,
+            width: viewportPreview.width,
+          }}
+        />
+      </div>
 
-        <div className="actions">
-          <div className="action-cancel">
-            <button type="button" className="btn btn-danger" onClick={onClose}>
-              {t('Cancel')}
-            </button>
-          </div>
-          <div className="action-save">
-            <button onClick={downloadImage} className="btn btn-primary">
-              {t('Download')}
-            </button>
-          </div>
+      <div className="actions">
+        <div className="action-cancel">
+          <button type="button" className="btn btn-danger" onClick={onClose}>
+            {t('Cancel')}
+          </button>
         </div>
-      </Modal.Body>
-    </Modal>
+        <div className="action-save">
+          <button onClick={downloadImage} className="btn btn-primary">
+            {t('Download')}
+          </button>
+        </div>
+      </div>
+    </>
   );
 };
 
-DownloadDialog.propTypes = {
-  t: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  activeViewport: PropTypes.object,
+ViewportDownloadForm.propTypes = {
   onClose: PropTypes.func.isRequired,
+  activeViewport: PropTypes.object,
   updateViewportPreview: PropTypes.func.isRequired,
   enableViewport: PropTypes.func.isRequired,
   disableViewport: PropTypes.func.isRequired,
@@ -338,4 +322,4 @@ DownloadDialog.propTypes = {
   canvasClass: PropTypes.string.isRequired,
 };
 
-export default withTranslation('DownloadDialog')(DownloadDialog);
+export default ViewportDownloadForm;
diff --git a/platform/ui/src/components/downloadDialog/DownloadDialog.styl b/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.styl
similarity index 92%
rename from platform/ui/src/components/downloadDialog/DownloadDialog.styl
rename to platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.styl
index b7ea177a3..a1eb621cf 100644
--- a/platform/ui/src/components/downloadDialog/DownloadDialog.styl
+++ b/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.styl
@@ -1,8 +1,8 @@
-@import './../../design/styles/common/global.styl'
-@import './../../design/styles/common/form.styl'
-@import './../../design/styles/common/button.styl'
+@import '../../../design/styles/common/global.styl'
+@import '../../../design/styles/common/form.styl'
+@import '../../../design/styles/common/button.styl'
 
-.DownloadDialog
+.ViewportDownloadForm
   color: var(--text-secondary-color);
   filter: drop-shadow(0 0 3px var(--ui-gray-darkest));
   border: none;
diff --git a/platform/ui/src/components/downloadDialog/__docs__/downloadDialog.mdx b/platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx
similarity index 67%
rename from platform/ui/src/components/downloadDialog/__docs__/downloadDialog.mdx
rename to platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx
index 11d442a7a..f5c1422c3 100644
--- a/platform/ui/src/components/downloadDialog/__docs__/downloadDialog.mdx
+++ b/platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx
@@ -1,15 +1,15 @@
 ---
-name: Download Dialog
+name: Viewport Download Form
 menu: Components
-route: /components/download-dialog
+route: /components/viewport-download-form
 ---
 
 import { Playground, Props } from 'docz'
 import { State } from 'react-powerplug'
-import { DownloadDialog } from './../index'
+import { ViewportDownloadForm } from './../index'
 import NameSpace from '../../../__docs__/NameSpace'
 
-# Download Dialog
+# Viewport Download Form
 
 ## Basic usage
 
@@ -23,7 +23,7 @@ import NameSpace from '../../../__docs__/NameSpace'
           <pre>{JSON.stringify(state, null, 2)}</pre>
         </div>
         <div style={{ maxWidth: '400px', margin: '0 auto' }}>
-          <DownloadDialog />
+          <ViewportDownloadForm />
         </div>
       </React.Fragment>
     )}
@@ -32,8 +32,8 @@ import NameSpace from '../../../__docs__/NameSpace'
 
 ## API
 
-<Props of={DownloadDialog} />
+<Props of={ViewportDownloadForm} />
 
 ## Translation Namespace
 
-<NameSpace name="DownloadDialog" />
+<NameSpace name="ViewportDownloadForm" />
diff --git a/platform/ui/src/components/content/viewportDownloadForm/index.js b/platform/ui/src/components/content/viewportDownloadForm/index.js
new file mode 100644
index 000000000..b7026641f
--- /dev/null
+++ b/platform/ui/src/components/content/viewportDownloadForm/index.js
@@ -0,0 +1,2 @@
+import ViewportDownloadForm from './ViewportDownloadForm';
+export { ViewportDownloadForm };
diff --git a/platform/ui/src/components/downloadDialog/index.js b/platform/ui/src/components/downloadDialog/index.js
deleted file mode 100644
index 6cec626bf..000000000
--- a/platform/ui/src/components/downloadDialog/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import DownloadDialog from './DownloadDialog';
-export { DownloadDialog };
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
index 11e21e9f1..df935085f 100644
--- a/platform/ui/src/components/index.js
+++ b/platform/ui/src/components/index.js
@@ -4,14 +4,14 @@ import { MeasurementTable, MeasurementTableItem } from './measurementTable';
 import { Overlay, OverlayTrigger } from './overlayTrigger';
 import { TableList, TableListItem } from './tableList';
 import {
-  AboutModal,
+  AboutContent,
   UserPreferences,
   UserPreferencesModal,
 } from './userPreferencesModal';
 
 import { Checkbox } from './checkbox';
 import { CineDialog } from './cineDialog';
-import { DownloadDialog } from './downloadDialog';
+import { ViewportDownloadForm } from './content/viewportDownloadForm';
 import { QuickSwitch } from './quickSwitch';
 import { RoundedButtonGroup } from './roundedButtonGroup';
 import { SelectTree } from './selectTree';
@@ -29,7 +29,7 @@ import { Tooltip } from './tooltip';
 export {
   Checkbox,
   CineDialog,
-  DownloadDialog,
+  ViewportDownloadForm,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,
@@ -50,7 +50,7 @@ export {
   TablePagination,
   ToolbarSection,
   Tooltip,
-  AboutModal,
+  AboutContent,
   UserPreferences,
   UserPreferencesModal,
   OHIFModal,
diff --git a/platform/ui/src/components/userPreferencesModal/AboutModal.js b/platform/ui/src/components/userPreferencesModal/AboutModal.js
deleted file mode 100644
index 43aa92031..000000000
--- a/platform/ui/src/components/userPreferencesModal/AboutModal.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap-modal';
-import detect from 'browser-detect';
-import './AboutModal.styl';
-import { withTranslation } from '../../utils/LanguageProvider';
-
-import 'react-bootstrap-modal/lib/css/rbm-patch.css';
-
-// TODO: Is this the only component importing these?
-import './../../design/styles/common/modal.styl';
-
-class AboutModal extends Component {
-  constructor(props) {
-    super(props);
-  }
-  // TODO: Make this component more generic to allow things other than W/L and hotkeys...
-  static propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onCancel: PropTypes.func,
-  };
-
-  itemsPreset() {
-    const { t } = this.props;
-    const browser = detect();
-    const capitalize = s =>
-      s.substr(0, 1).toUpperCase() + s.substr(1).toLowerCase();
-
-    return [
-      {
-        name: t('Repository URL'),
-        value: 'https://github.com/OHIF/Viewers/',
-        link: 'https://github.com/OHIF/Viewers/',
-      },
-      {
-        name: t('Latest Master Commits'),
-        value: 'https://github.com/OHIF/Viewers/commits/master',
-        link: 'https://github.com/OHIF/Viewers/commits/master',
-      },
-      {
-        name: 'Version Number',
-        value: process.env.VERSION_NUMBER,
-      },
-      {
-        name: t('Build Number'),
-        value: process.env.BUILD_NUM,
-      },
-      {
-        name: t('Browser'),
-        value: `${capitalize(browser.name)} ${browser.version}`,
-      },
-      {
-        name: t('OS'),
-        value: browser.os,
-      },
-    ];
-  }
-
-  static defaultProps = {
-    isOpen: false,
-  };
-
-  renderTableRow(item) {
-    return (
-      <tr key={item.name} style={{ backgroundColor: 'transparent' }}>
-        <td>{item.name}</td>
-        <td>
-          {item.link ? (
-            <a target="_blank" href={item.link}>
-              {item.value}
-            </a>
-          ) : (
-            item.value
-          )}
-        </td>
-      </tr>
-    );
-  }
-
-  render() {
-    const { t } = this.props;
-    return (
-      <Modal
-        show={this.props.isOpen}
-        onHide={this.props.onCancel}
-        aria-labelledby="ModalHeader"
-        className="AboutModal modal fade themed in"
-        backdrop={false}
-        large={true}
-        keyboard={false}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>{t('OHIF Viewer - About')}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body data-cy="about-modal">
-          <div className="btn-group">
-            <a
-              className="btn btn-default"
-              target="_blank"
-              href="https://groups.google.com/forum/#!forum/cornerstone-platform"
-            >
-              {t('Visit the forum')}
-            </a>
-            {` `}
-            <a
-              className="btn btn-default"
-              target="_blank"
-              href="https://github.com/OHIF/Viewers/issues/new/choose"
-            >
-              {t('Report an issue')}
-            </a>
-            {` `}
-            <a
-              className="btn btn-default"
-              target="_blank"
-              href="http://ohif.org"
-            >
-              {t('More details')}
-            </a>
-          </div>
-          <div>
-            <h3>{t('Version Information')}</h3>
-            <table className="table table-responsive">
-              <thead>
-                <tr>
-                  <th>{t('Name')}</th>
-                  <th>{t('Value')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {this.itemsPreset().map(item => this.renderTableRow(item))}
-              </tbody>
-            </table>
-          </div>
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
-
-const connectedComponent = withTranslation('AboutModal')(AboutModal);
-export { connectedComponent as AboutModal };
-export default connectedComponent;
diff --git a/platform/ui/src/components/userPreferencesModal/__docs__/about.mdx b/platform/ui/src/components/userPreferencesModal/__docs__/about.mdx
index 819648ff0..21f22168d 100644
--- a/platform/ui/src/components/userPreferencesModal/__docs__/about.mdx
+++ b/platform/ui/src/components/userPreferencesModal/__docs__/about.mdx
@@ -6,7 +6,7 @@ route: /components/about-modal
 
 import { Playground, Props } from 'docz'
 import { State } from 'react-powerplug'
-import { AboutModal } from './../index.js'
+import { AboutContent } from './../index.js'
 
 # About  Modal
 
@@ -26,7 +26,7 @@ import { AboutModal } from './../index.js'
                 >
                     Open about modal
                 </button>
-                <AboutModal
+                <AboutContent
                     {...state}
                     onCancel={() => setState({ isOpen: false })}
                 />
@@ -39,4 +39,4 @@ import { AboutModal } from './../index.js'
 
 ## API
 
-<Props of={AboutModal} />
+<Props of={AboutContent} />
diff --git a/platform/ui/src/components/userPreferencesModal/__docs__/hotkeyDefaults.js b/platform/ui/src/components/userPreferencesModal/__docs__/hotkeyDefaults.js
index 1c8399977..64f3f3035 100644
--- a/platform/ui/src/components/userPreferencesModal/__docs__/hotkeyDefaults.js
+++ b/platform/ui/src/components/userPreferencesModal/__docs__/hotkeyDefaults.js
@@ -60,11 +60,6 @@ export default {
     keys: [''],
     column: 1,
   },
-  toggleDownloadDialog: {
-    label: 'Show/Hide Download Dialog',
-    keys: [''],
-    column: 1,
-  },
 
   // Preset hotkeys
   WLPreset0: { label: 'W/L Preset 0  (Soft Tissue)', keys: ['1'], column: 1 },
diff --git a/platform/ui/src/components/userPreferencesModal/index.js b/platform/ui/src/components/userPreferencesModal/index.js
index fa7580d5e..d1a9c2a7b 100644
--- a/platform/ui/src/components/userPreferencesModal/index.js
+++ b/platform/ui/src/components/userPreferencesModal/index.js
@@ -1,4 +1,4 @@
 export { UserPreferences } from './UserPreferences.js';
-export { AboutModal } from './AboutModal.js';
+export { AboutContent } from '../content/aboutContent/AboutContent.js';
 export { UserPreferencesModal } from './UserPreferencesModal.js';
 export { GeneralPreferences } from './GeneralPreferences.js';
diff --git a/platform/ui/src/index.js b/platform/ui/src/index.js
index abb960d0e..c608b4521 100644
--- a/platform/ui/src/index.js
+++ b/platform/ui/src/index.js
@@ -1,7 +1,7 @@
 import {
   Checkbox,
   CineDialog,
-  DownloadDialog,
+  ViewportDownloadForm,
   LayoutButton,
   LayoutChooser,
   MeasurementTable,
@@ -22,7 +22,7 @@ import {
   TablePagination,
   ToolbarSection,
   Tooltip,
-  AboutModal,
+  AboutContent,
   UserPreferences,
   UserPreferencesModal,
   OHIFModal,
@@ -69,7 +69,7 @@ export {
   TextArea,
   TextInput,
   CineDialog,
-  DownloadDialog,
+  ViewportDownloadForm,
   ExpandableToolMenu,
   Icon,
   LayoutButton,
@@ -99,7 +99,7 @@ export {
   ToolbarButton,
   ToolbarSection,
   Tooltip,
-  AboutModal,
+  AboutContent,
   UserPreferences,
   UserPreferencesModal,
   ViewerbaseDragDropContext,
diff --git a/platform/viewer/CHANGELOG.md b/platform/viewer/CHANGELOG.md
index dd01cc150..3841c2389 100644
--- a/platform/viewer/CHANGELOG.md
+++ b/platform/viewer/CHANGELOG.md
@@ -3,6 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+
 # [2.5.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@2.4.1...@ohif/viewer@2.5.0) (2019-11-05)
 
 
diff --git a/platform/viewer/src/components/Header/Header.js b/platform/viewer/src/components/Header/Header.js
index ab84520f7..a37b136e3 100644
--- a/platform/viewer/src/components/Header/Header.js
+++ b/platform/viewer/src/components/Header/Header.js
@@ -1,15 +1,15 @@
-import './Header.css';
-
-import { Link, withRouter } from 'react-router-dom';
 import React, { Component } from 'react';
+import { Link, withRouter } from 'react-router-dom';
+import { withTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
 
 import { Dropdown } from '@ohif/ui';
-import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
-import PropTypes from 'prop-types';
-import { AboutModal } from '@ohif/ui';
-import { hotkeysManager } from './../../App.js';
-import { withTranslation } from 'react-i18next';
+import { AboutContent } from '@ohif/ui';
+import { withModal } from '@ohif/ui';
 
+import OHIFLogo from '../OHIFLogo/OHIFLogo.js';
+import { hotkeysManager } from './../../App.js';
+import './Header.css';
 // Context
 import AppContext from './../../context/AppContext';
 
@@ -21,6 +21,8 @@ class Header extends Component {
     children: PropTypes.node,
     t: PropTypes.func.isRequired,
     userManager: PropTypes.object,
+    user: PropTypes.object,
+    modalContext: PropTypes.object,
   };
 
   static defaultProps = {
@@ -50,26 +52,29 @@ class Header extends Component {
   }
 
   loadOptions() {
-    const { t } = this.props;
+    const {
+      t,
+      user,
+      userManager,
+      modalContext: { show },
+    } = this.props;
     this.options = [
       {
         title: t('About'),
         icon: { name: 'info' },
-        onClick: () => {
-          this.setState({
-            isOpen: true,
-          });
-        },
+        onClick: () =>
+          show(AboutContent, {
+            title: t('OHIF Viewer - About'),
+            customClassName: 'AboutContent',
+          }),
       },
     ];
 
-    if (this.props.user && this.props.userManager) {
+    if (user && userManager) {
       this.options.push({
         title: t('Logout'),
         icon: { name: 'power-off' },
-        onClick: () => {
-          this.props.userManager.signoutRedirect();
-        },
+        onClick: () => userManager.signoutRedirect(),
       });
     }
 
@@ -85,32 +90,32 @@ class Header extends Component {
 
   // ANTD -- Hamburger, Drawer, Menu
   render() {
-    const { t } = this.props;
+    const { t, home, location, children } = this.props;
     const { appConfig = {} } = this.context;
     const showStudyList =
       appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
     return (
       <>
         <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
-        <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
+        <div className={`entry-header ${home ? 'header-big' : ''}`}>
           <div className="header-left-box">
-            {this.props.location && this.props.location.studyLink && (
+            {location && location.studyLink && (
               <Link
-                to={this.props.location.studyLink}
+                to={location.studyLink}
                 className="header-btn header-viewerLink"
               >
                 {t('Back to Viewer')}
               </Link>
             )}
 
-            {this.props.children}
+            {children}
 
-            {showStudyList && !this.props.home && (
+            {showStudyList && !home && (
               <Link
                 className="header-btn header-studyListLinkSection"
                 to={{
                   pathname: '/',
-                  state: { studyLink: this.props.location.pathname },
+                  state: { studyLink: location.pathname },
                 }}
               >
                 {t('Study list')}
@@ -123,16 +128,6 @@ class Header extends Component {
               {t('INVESTIGATIONAL USE ONLY')}
             </span>
             <Dropdown title={t('Options')} list={this.options} align="right" />
-
-            {/* TODO: We need a Modal service */}
-            <AboutModal
-              {...this.state}
-              onCancel={() =>
-                this.setState({
-                  isOpen: false,
-                })
-              }
-            />
           </div>
         </div>
       </>
@@ -140,4 +135,6 @@ class Header extends Component {
   }
 }
 
-export default withTranslation('Header')(withRouter(Header));
+export default withTranslation(['Header', 'AboutModal'])(
+  withRouter(withModal(Header))
+);
diff --git a/platform/viewer/src/connectedComponents/ConnectedDownloadDialog.js b/platform/viewer/src/connectedComponents/ConnectedViewportDownloadForm.js
similarity index 95%
rename from platform/viewer/src/connectedComponents/ConnectedDownloadDialog.js
rename to platform/viewer/src/connectedComponents/ConnectedViewportDownloadForm.js
index 73d0fabc0..e0aabc7b9 100644
--- a/platform/viewer/src/connectedComponents/ConnectedDownloadDialog.js
+++ b/platform/viewer/src/connectedComponents/ConnectedViewportDownloadForm.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { DownloadDialog } from '@ohif/ui';
+import { ViewportDownloadForm } from '@ohif/ui';
 import { utils } from '@ohif/core';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
@@ -14,11 +14,11 @@ const mapStateToProps = (state, ownProps) => {
     viewportSpecificData[activeViewportIndex] || {};
 
   return {
+    onClose: ownProps.hide,
     minimumSize: MINIMUM_SIZE,
     maximumSize: MAX_TEXTURE_SIZE,
     defaultSize: DEFAULT_SIZE,
     canvasClass: 'cornerstone-canvas',
-    onClose: ownProps.toggleDownloadDialog,
     activeViewport: activeEnabledElement,
     enableViewport: viewportElement => {
       if (viewportElement) {
@@ -122,9 +122,9 @@ const mapStateToProps = (state, ownProps) => {
   };
 };
 
-const ConnectedDownloadDialog = connect(
+const ConnectedViewportDownloadForm = connect(
   mapStateToProps,
   null
-)(DownloadDialog);
+)(ViewportDownloadForm);
 
-export default ConnectedDownloadDialog;
+export default ConnectedViewportDownloadForm;
diff --git a/platform/viewer/src/connectedComponents/ToolbarRow.js b/platform/viewer/src/connectedComponents/ToolbarRow.js
index faa38c6a2..fe13d3919 100644
--- a/platform/viewer/src/connectedComponents/ToolbarRow.js
+++ b/platform/viewer/src/connectedComponents/ToolbarRow.js
@@ -6,17 +6,17 @@ import {
   ExpandableToolMenu,
   RoundedButtonGroup,
   ToolbarButton,
+  withModal,
 } from '@ohif/ui';
 
 import './ToolbarRow.css';
 import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
-import ConnectedDownloadDialog from './ConnectedDownloadDialog';
+import ConnectedViewportDownloadForm from './ConnectedViewportDownloadForm';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
 import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
 
-
 class ToolbarRow extends Component {
   // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
   // closed if selected is null/undefined
@@ -46,13 +46,10 @@ class ToolbarRow extends Component {
       toolbarButtons: toolbarButtonDefinitions,
       activeButtons: [],
       isCineDialogOpen: false,
-      isDownloadScreenShotDialogOpen: false,
     };
 
     this._handleBuiltIn = _handleBuiltIn.bind(this);
 
-    this.toggleDownloadDialog = toggleDownloadDialog.bind(this);
-
     const panelModules = extensionManager.modules[MODULE_TYPES.PANEL];
     this.buttonGroups = {
       left: [
@@ -116,13 +113,6 @@ class ToolbarRow extends Component {
       zIndex: 999,
     };
 
-    const downloadScreenShotContainerStyle = {
-      display: this.state.isDownloadScreenShotDialogOpen ? 'block' : 'none',
-      position: 'absolute',
-      top: '82px',
-      zIndex: 1001,
-    };
-
     const onPress = (side, value) => {
       this.props.handleSidePanelChange(side, value);
     };
@@ -158,12 +148,6 @@ class ToolbarRow extends Component {
         <div className="CineDialogContainer" style={cineDialogContainerStyle}>
           <ConnectedCineDialog />
         </div>
-        <div className="DownloadScreenShotContainer" style={downloadScreenShotContainerStyle}>
-          <ConnectedDownloadDialog
-            isOpen={this.state.isDownloadScreenShotDialogOpen}
-            toggleDownloadDialog={this.toggleDownloadDialog}
-          />
-        </div>
       </>
     );
   }
@@ -295,15 +279,6 @@ function _getVisibleToolbarButtons() {
   return toolbarButtonDefinitions;
 }
 
-/**
- * Toggles the Download Dialog Modal
- */
-function toggleDownloadDialog() {
-  this.setState({
-    isDownloadScreenShotDialogOpen: !this.state.isDownloadScreenShotDialogOpen,
-  });
-}
-
 function _handleBuiltIn({ behavior } = {}) {
   if (behavior === 'CINE') {
     this.setState({
@@ -312,8 +287,13 @@ function _handleBuiltIn({ behavior } = {}) {
   }
 
   if (behavior === 'DOWNLOAD_SCREEN_SHOT') {
-    this.toggleDownloadDialog();
+    this.props.modalContext.show(ConnectedViewportDownloadForm, {
+      title: this.props.t('Download High Quality Image'),
+      customClassName: 'ViewportDownloadForm',
+    });
   }
 }
 
-export default withTranslation('Common')(ToolbarRow);
+export default withTranslation(['Common', 'ViewportDownloadForm'])(
+  withModal(ToolbarRow)
+);