diff --git a/test/e2e/ethereum-on.spec.js b/test/e2e/ethereum-on.spec.js
index 361579cd2..8c0426a0d 100644
--- a/test/e2e/ethereum-on.spec.js
+++ b/test/e2e/ethereum-on.spec.js
@@ -93,7 +93,7 @@ describe('MetaMask', function () {
       publicAddress = await addressInput.getAttribute('value')
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
 
       await driver.wait(until.stalenessOf(accountModal))
       await driver.delay(regularDelayMs)
diff --git a/test/e2e/from-import-ui.spec.js b/test/e2e/from-import-ui.spec.js
index 78bdd0352..432432b3e 100644
--- a/test/e2e/from-import-ui.spec.js
+++ b/test/e2e/from-import-ui.spec.js
@@ -105,7 +105,7 @@ describe('Using MetaMask with an existing account', function () {
       const [address] = await driver.findElements(By.css('.readonly-input__input'))
       assert.equal(await address.getAttribute('value'), testAddress)
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
       await driver.delay(largeDelayMs)
     })
 
@@ -116,7 +116,7 @@ describe('Using MetaMask with an existing account', function () {
       const detailModal = await driver.findElement(By.css('span .modal'))
       await driver.delay(regularDelayMs)
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
       await driver.wait(until.stalenessOf(detailModal))
       await driver.delay(regularDelayMs)
     })
diff --git a/test/e2e/incremental-security.spec.js b/test/e2e/incremental-security.spec.js
index a6482c58d..7008ec69c 100644
--- a/test/e2e/incremental-security.spec.js
+++ b/test/e2e/incremental-security.spec.js
@@ -100,7 +100,7 @@ describe('MetaMask', function () {
 
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
 
       await driver.wait(until.stalenessOf(accountModal))
       await driver.delay(regularDelayMs)
diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index d501bdb3a..dfff8e49b 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -125,7 +125,7 @@ describe('MetaMask', function () {
       await driver.delay(regularDelayMs)
 
       const accountModal = await driver.findElement(By.css('span .modal'))
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
 
       await driver.wait(until.stalenessOf(accountModal))
       await driver.delay(regularDelayMs)
diff --git a/test/e2e/permissions.spec.js b/test/e2e/permissions.spec.js
index 3d45e4477..cd6cef453 100644
--- a/test/e2e/permissions.spec.js
+++ b/test/e2e/permissions.spec.js
@@ -94,7 +94,7 @@ describe('MetaMask', function () {
       publicAddress = await addressInput.getAttribute('value')
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
 
       await driver.wait(until.stalenessOf(accountModal))
       await driver.delay(regularDelayMs)
diff --git a/test/e2e/signature-request.spec.js b/test/e2e/signature-request.spec.js
index 9abac241b..4ad70e15e 100644
--- a/test/e2e/signature-request.spec.js
+++ b/test/e2e/signature-request.spec.js
@@ -128,7 +128,7 @@ describe('MetaMask', function () {
       const newPublicAddress = await addressInput.getAttribute('value')
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.clickElement(By.css('.account-modal-close'))
+      await driver.clickElement(By.css('.account-modal__close'))
 
       await driver.wait(until.stalenessOf(accountModal))
       await driver.delay(regularDelayMs)
diff --git a/ui/app/components/app/modals/account-details-modal/account-details-modal.component.js b/ui/app/components/app/modals/account-details-modal/account-details-modal.component.js
index fafdd8444..b6647f4c2 100644
--- a/ui/app/components/app/modals/account-details-modal/account-details-modal.component.js
+++ b/ui/app/components/app/modals/account-details-modal/account-details-modal.component.js
@@ -42,9 +42,9 @@ export default class AccountDetailsModal extends Component {
     }
 
     return (
-      <AccountModalContainer>
+      <AccountModalContainer className="account-details-modal">
         <EditableLabel
-          className="account-modal__name"
+          className="account-details-modal__name"
           defaultValue={name}
           onSubmit={(label) => setAccountLabel(address, label)}
         />
@@ -56,11 +56,11 @@ export default class AccountDetailsModal extends Component {
           }}
         />
 
-        <div className="account-modal-divider" />
+        <div className="account-details-modal__divider" />
 
         <Button
           type="secondary"
-          className="account-modal__button"
+          className="account-details-modal__button"
           onClick={() => {
             global.platform.openTab({ url: genAccountLink(address, network, rpcPrefs) })
           }}
@@ -75,7 +75,7 @@ export default class AccountDetailsModal extends Component {
           ? (
             <Button
               type="secondary"
-              className="account-modal__button"
+              className="account-details-modal__button"
               onClick={() => showExportPrivateKeyModal()}
             >
               {this.context.t('exportPrivateKey')}
diff --git a/ui/app/components/app/modals/account-details-modal/index.scss b/ui/app/components/app/modals/account-details-modal/index.scss
new file mode 100644
index 000000000..94d5cd541
--- /dev/null
+++ b/ui/app/components/app/modals/account-details-modal/index.scss
@@ -0,0 +1,37 @@
+.account-details-modal {
+  &__name {
+    margin-top: 9px;
+    font-size: 20px;
+  }
+
+  &__button {
+    margin-top: 17px;
+    padding: 10px 22px;
+    width: 286px;
+  }
+
+  &__divider {
+    width: 100%;
+    height: 1px;
+    margin: 19px 0 8px 0;
+    background-color: $alto;
+  }
+
+  & .qr-header {
+    margin-top: 9px;
+    font-size: 20px;
+  }
+
+  & .qr-wrapper {
+    margin-top: 5px;
+  }
+
+  & .ellip-address-wrapper {
+    display: flex;
+    justify-content: center;
+    border: 1px solid $alto;
+    padding: 5px 10px;
+    margin-top: 7px;
+    width: 286px;
+  }
+}
diff --git a/ui/app/components/app/modals/account-modal-container/account-modal-container.component.js b/ui/app/components/app/modals/account-modal-container/account-modal-container.component.js
index 0a1fc3fe2..d1fbe0b7e 100644
--- a/ui/app/components/app/modals/account-modal-container/account-modal-container.component.js
+++ b/ui/app/components/app/modals/account-modal-container/account-modal-container.component.js
@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import Identicon from '../../../ui/identicon'
+import classnames from 'classnames'
 
 export default function AccountModalContainer (props, context) {
   const {
+    className,
     selectedIdentity,
     showBackButton,
     backButtonAction,
@@ -12,8 +14,8 @@ export default function AccountModalContainer (props, context) {
   } = props
 
   return (
-    <div style={{ borderRadius: '4px' }}>
-      <div className="account-modal-container">
+    <div className={classnames(className, 'account-modal')} style={{ borderRadius: '4px' }}>
+      <div className="account-modal__container">
         <div>
           <Identicon
             address={selectedIdentity.address}
@@ -21,12 +23,12 @@ export default function AccountModalContainer (props, context) {
           />
         </div>
         {showBackButton && (
-          <div className="account-modal-back" onClick={backButtonAction}>
+          <div className="account-modal__back" onClick={backButtonAction}>
             <i className="fa fa-angle-left fa-lg" />
-            <span className="account-modal-back__text">{' ' + context.t('back')}</span>
+            <span className="account-modal__text">{' ' + context.t('back')}</span>
           </div>
         )}
-        <button className="account-modal-close" onClick={hideModal} />
+        <button className="account-modal__close" onClick={hideModal} />
         {children}
       </div>
     </div>
@@ -44,6 +46,7 @@ AccountModalContainer.defaultProps = {
 }
 
 AccountModalContainer.propTypes = {
+  className: PropTypes.string,
   selectedIdentity: PropTypes.object.isRequired,
   showBackButton: PropTypes.bool,
   backButtonAction: PropTypes.func,
diff --git a/ui/app/components/app/modals/account-modal-container/index.scss b/ui/app/components/app/modals/account-modal-container/index.scss
new file mode 100644
index 000000000..8981854ee
--- /dev/null
+++ b/ui/app/components/app/modals/account-modal-container/index.scss
@@ -0,0 +1,50 @@
+// Account Modal Container
+.account-modal {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    padding: 5px 0 31px 0;
+    border: 1px solid $silver;
+    border-radius: 4px;
+  }
+
+  &__back {
+    color: $dusty-gray;
+    position: absolute;
+    top: 13px;
+    left: 17px;
+    cursor: pointer;
+  }
+
+  &__text {
+    margin-top: 2px;
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  &__close {
+    font-size: 40px;
+    background-color: transparent;
+    color: $dusty-gray;
+    position: absolute;
+    cursor: pointer;
+    top: 10px;
+    right: 12px;
+
+    &::after {
+      content: '\00D7';
+    }
+  }
+
+  & .identicon {
+    position: relative;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    top: -32px;
+    margin-bottom: -32px;
+  }
+}
diff --git a/ui/app/components/app/modals/export-private-key-modal/export-private-key-modal.component.js b/ui/app/components/app/modals/export-private-key-modal/export-private-key-modal.component.js
index 318dd0d58..ba30d5218 100644
--- a/ui/app/components/app/modals/export-private-key-modal/export-private-key-modal.component.js
+++ b/ui/app/components/app/modals/export-private-key-modal/export-private-key-modal.component.js
@@ -47,7 +47,7 @@ export default class ExportPrivateKeyModal extends Component {
 
   renderPasswordLabel (privateKey) {
     return (
-      <span className="private-key-password-label">
+      <span className="export-private-key-modal__password-label">
         {
           privateKey
             ? this.context.t('copyPrivateKey')
@@ -64,7 +64,7 @@ export default class ExportPrivateKeyModal extends Component {
       return (
         <input
           type="password"
-          className="private-key-password-input"
+          className="export-private-key-modal__password-input"
           onChange={(event) => this.setState({ password: event.target.value })}
         />
       )
@@ -72,8 +72,8 @@ export default class ExportPrivateKeyModal extends Component {
 
     return (
       <ReadOnlyInput
-        wrapperClass="private-key-password-display-wrapper"
-        inputClass="private-key-password-display-textarea"
+        wrapperClass="export-private-key-modal__password-display-wrapper"
+        inputClass="export-private-key-modal__password-display-textarea"
         textarea
         value={plainKey}
         onClick={() => copyToClipboard(plainKey)}
@@ -83,12 +83,12 @@ export default class ExportPrivateKeyModal extends Component {
 
   renderButtons (privateKey, address, hideModal) {
     return (
-      <div className="export-private-key-buttons">
+      <div className="export-private-key-modal__buttons">
         {!privateKey && (
           <Button
             type="default"
             large
-            className="export-private-key__button export-private-key__button--cancel"
+            className="export-private-key-modal__button export-private-key-modal__button--cancel"
             onClick={() => hideModal()}
           >
             {this.context.t('cancel')}
@@ -101,7 +101,7 @@ export default class ExportPrivateKeyModal extends Component {
                 onClick={() => hideModal()}
                 type="secondary"
                 large
-                className="export-private-key__button"
+                className="export-private-key-modal__button"
               >
                 {this.context.t('done')}
               </Button>
@@ -111,7 +111,7 @@ export default class ExportPrivateKeyModal extends Component {
                 onClick={() => this.exportAccountAndGetPrivateKey(this.state.password, address)}
                 type="secondary"
                 large
-                className="export-private-key__button"
+                className="export-private-key-modal__button"
                 disabled={!this.state.password}
               >
                 {this.context.t('confirm')}
@@ -139,27 +139,28 @@ export default class ExportPrivateKeyModal extends Component {
 
     return (
       <AccountModalContainer
+        className="export-private-key-modal"
         selectedIdentity={selectedIdentity}
         showBackButton={previousModalState === 'ACCOUNT_DETAILS'}
         backButtonAction={() => showAccountDetailModal()}
       >
-        <span className="account-name">{name}</span>
+        <span className="export-private-key-modal__account-name">{name}</span>
         <ReadOnlyInput
           wrapperClass="ellip-address-wrapper"
           value={checksumAddress(address)}
         />
-        <div className="account-modal-divider" />
-        <span className="modal-body-title">{this.context.t('showPrivateKeys')}</span>
-        <div className="private-key-password">
+        <div className="export-private-key-modal__divider" />
+        <span className="export-private-key-modal__body-title">{this.context.t('showPrivateKeys')}</span>
+        <div className="export-private-key-modal__password">
           {this.renderPasswordLabel(privateKey)}
           {this.renderPasswordInput(privateKey)}
           {
             (showWarning && warning)
-              ? <span className="private-key-password-error">{warning}</span>
+              ? <span className="export-private-key-modal__password--error">{warning}</span>
               : null
           }
         </div>
-        <div className="private-key-password-warning">{this.context.t('privateKeyWarning')}</div>
+        <div className="export-private-key-modal__password--warning">{this.context.t('privateKeyWarning')}</div>
         {this.renderButtons(privateKey, address, hideModal)}
       </AccountModalContainer>
     )
diff --git a/ui/app/components/app/modals/export-private-key-modal/index.scss b/ui/app/components/app/modals/export-private-key-modal/index.scss
new file mode 100644
index 000000000..8fd3c3133
--- /dev/null
+++ b/ui/app/components/app/modals/export-private-key-modal/index.scss
@@ -0,0 +1,106 @@
+.export-private-key-modal {
+  &__body-title {
+    margin-top: 16px;
+    margin-bottom: 16px;
+    font-size: 18px;
+  }
+
+  &__divider {
+    width: 100%;
+    height: 1px;
+    margin: 19px 0 8px 0;
+    background-color: $alto;
+  }
+
+  &__account-name {
+    margin-top: 9px;
+    font-size: 20px;
+  }
+
+  &__password {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__password-label,
+  &__password--error {
+    color: $scorpion;
+    font-size: 14px;
+    line-height: 18px;
+    margin-bottom: 10px;
+  }
+
+  &__password--error {
+    color: $crimson;
+    margin-bottom: 0;
+  }
+
+  &__password-input {
+    padding: 10px 0 13px 17px;
+    font-size: 16px;
+    line-height: 21px;
+    width: 291px;
+    height: 44px;
+  }
+
+  &__password::-webkit-input-placeholder {
+    color: $dusty-gray;
+  }
+
+  &__password--warning {
+    border-radius: 8px;
+    background-color: #fff6f6;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 15px;
+    color: $crimson;
+    width: 292px;
+    padding: 9px 15px;
+    margin-top: 18px;
+  }
+
+  &__password-display-wrapper {
+    height: 80px;
+    width: 291px;
+    border: 1px solid $silver;
+    border-radius: 2px;
+  }
+
+  &__password-display-textarea {
+    color: $crimson;
+    font-size: 16px;
+    line-height: 21px;
+    border: none;
+    height: 75px;
+    width: 100%;
+    overflow: hidden;
+    resize: none;
+    padding: 9px 13px 8px;
+  }
+
+  &__buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  &__button {
+    margin-top: 17px;
+    width: 141px;
+    min-width: initial;
+  }
+
+  &__button--cancel {
+    margin-right: 15px;
+  }
+
+  & .ellip-address-wrapper {
+    display: flex;
+    justify-content: center;
+    border: 1px solid $alto;
+    padding: 5px 10px;
+    margin-top: 7px;
+    width: 286px;
+  }
+}
+
diff --git a/ui/app/components/app/modals/index.scss b/ui/app/components/app/modals/index.scss
index cf5a9d66b..84ad997b6 100644
--- a/ui/app/components/app/modals/index.scss
+++ b/ui/app/components/app/modals/index.scss
@@ -1,6 +1,9 @@
+@import 'account-details-modal/index';
+@import 'account-modal-container/index';
 @import 'cancel-transaction/index';
 @import 'confirm-remove-account/index';
 @import 'deposit-ether-modal/index';
+@import 'export-private-key-modal/index';
 @import 'hide-token-confirmation-modal/index';
 @import 'notification-modal/index';
 @import 'qr-scanner/index';
diff --git a/ui/app/components/app/modals/tests/account-details-modal.test.js b/ui/app/components/app/modals/tests/account-details-modal.test.js
index 3c0dd8f25..505b823cd 100644
--- a/ui/app/components/app/modals/tests/account-details-modal.test.js
+++ b/ui/app/components/app/modals/tests/account-details-modal.test.js
@@ -46,7 +46,7 @@ describe('Account Details Modal', function () {
   })
 
   it('sets account label when changing default account label', function () {
-    const accountLabel = wrapper.find('.account-modal__name').first()
+    const accountLabel = wrapper.find('.account-details-modal__name').first()
     accountLabel.simulate('submit', 'New Label')
 
     assert(props.setAccountLabel.calledOnce)
@@ -54,7 +54,7 @@ describe('Account Details Modal', function () {
   })
 
   it('opens new tab when view block explorer is clicked', function () {
-    const modalButton = wrapper.find('.account-modal__button')
+    const modalButton = wrapper.find('.account-details-modal__button')
     const etherscanLink = modalButton.first()
 
     etherscanLink.simulate('click')
@@ -62,7 +62,7 @@ describe('Account Details Modal', function () {
   })
 
   it('shows export private key modal when clicked', function () {
-    const modalButton = wrapper.find('.account-modal__button')
+    const modalButton = wrapper.find('.account-details-modal__button')
     const etherscanLink = modalButton.last()
 
     etherscanLink.simulate('click')
@@ -73,9 +73,9 @@ describe('Account Details Modal', function () {
     const blockExplorerUrl = 'https://block.explorer'
     wrapper.setProps({ rpcPrefs: { blockExplorerUrl } })
 
-    const modalButton = wrapper.find('.account-modal__button')
+    const modalButton = wrapper.find('.account-details-modal__button')
     const blockExplorerLink = modalButton.first()
 
-    assert.equal(blockExplorerLink.html(), '<button class="button btn-secondary account-modal__button">blockExplorerView</button>')
+    assert.equal(blockExplorerLink.html(), '<button class="button btn-secondary account-details-modal__button">blockExplorerView</button>')
   })
 })
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 81b41e73c..1dbf63e66 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -28,187 +28,3 @@
 .modal > div:focus {
   outline: none !important;
 }
-
-// Account Modal Container
-.account-modal-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  position: relative;
-  padding: 5px 0 31px 0;
-  border: 1px solid $silver;
-  border-radius: 4px;
-
-  button {
-    cursor: pointer;
-  }
-}
-
-.account-modal-back {
-  color: $dusty-gray;
-  position: absolute;
-  top: 13px;
-  left: 17px;
-  cursor: pointer;
-
-  &__text {
-    margin-top: 2px;
-    font-size: 14px;
-    line-height: 18px;
-  }
-}
-
-.account-modal-close {
-  font-size: 40px;
-  background-color: transparent;
-  color: $dusty-gray;
-  position: absolute;
-  top: 10px;
-  right: 12px;
-}
-
-.account-modal-close::after {
-  content: '\00D7';
-}
-
-.account-modal-container .identicon {
-  position: relative;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  top: -32px;
-  margin-bottom: -32px;
-}
-
-
-// Account Details Modal
-
-.account-modal-container {
-  .qr-code__header {
-    margin-top: 9px;
-    font-size: 20px;
-  }
-
-  .qr-code__wrapper {
-    margin-top: 5px;
-  }
-
-  .ellip-address-wrapper {
-    display: flex;
-    justify-content: center;
-    border: 1px solid $alto;
-    padding: 5px 10px;
-    margin-top: 7px;
-    width: 286px;
-  }
-
-  .account-modal__button {
-    margin-top: 17px;
-    padding: 10px 22px;
-    width: 286px;
-  }
-}
-
-.account-modal-divider {
-  width: 100%;
-  height: 1px;
-  margin: 19px 0 8px 0;
-  background-color: $alto;
-}
-
-// Export Private Key Modal
-
-.account-modal-container .account-name {
-  margin-top: 9px;
-  font-size: 20px;
-}
-
-.account-modal-container .modal-body-title {
-  margin-top: 16px;
-  margin-bottom: 16px;
-  font-size: 18px;
-}
-
-.account-modal__name {
-  margin-top: 9px;
-  font-size: 20px;
-}
-
-.private-key-password {
-  display: flex;
-  flex-direction: column;
-}
-
-.private-key-password-label,
-.private-key-password-error {
-  color: $scorpion;
-  font-size: 14px;
-  line-height: 18px;
-  margin-bottom: 10px;
-}
-
-.private-key-password-error {
-  color: $crimson;
-  margin-bottom: 0;
-}
-
-.private-key-password-input {
-  padding: 10px 0 13px 17px;
-  font-size: 16px;
-  line-height: 21px;
-  width: 291px;
-  height: 44px;
-}
-
-.private-key-password::-webkit-input-placeholder {
-  color: $dusty-gray;
-}
-
-.private-key-password-warning {
-  border-radius: 8px;
-  background-color: #fff6f6;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 15px;
-  color: $crimson;
-  width: 292px;
-  padding: 9px 15px;
-  margin-top: 18px;
-}
-
-.export-private-key-buttons {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
-.export-private-key__button {
-  margin-top: 17px;
-  width: 141px;
-  min-width: initial;
-}
-
-.export-private-key__button--cancel {
-  margin-right: 15px;
-}
-
-.private-key-password-display-wrapper {
-  height: 80px;
-  width: 291px;
-  border: 1px solid $silver;
-  border-radius: 2px;
-}
-
-.private-key-password-display-textarea {
-  color: $crimson;
-  font-size: 16px;
-  line-height: 21px;
-  border: none;
-  height: 75px;
-  width: 100%;
-  overflow: hidden;
-  resize: none;
-  padding: 9px 13px 8px;
-}
-