Merge pull request #6969 from MetaMask/developv7.0.0

Master Version Bump

253 files changed, 6356 insertions, 3211 deletions

diff --git a/ui/app/components/app/account-details/account-details.component.js b/ui/app/components/app/account-details/account-details.component.js
new file mode 100644
index 000000000..ecf2f9428
--- /dev/null
+++ b/ui/app/components/app/account-details/account-details.component.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import Identicon from '../../ui/identicon'
+import Tooltip from '../../ui/tooltip-v2'
+import copyToClipboard from 'copy-to-clipboard'
+
+export default class AccountDetails extends Component {
+  static contextTypes = {
+    t: PropTypes.func.isRequired,
+    metricsEvent: PropTypes.func,
+  }
+
+  static defaultProps = {
+    hideSidebar: () => {},
+    showAccountDetailModal: () => {},
+  }
+
+  static propTypes = {
+    hideSidebar: PropTypes.func,
+    showAccountDetailModal: PropTypes.func,
+    label: PropTypes.string.isRequired,
+    checksummedAddress: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  }
+
+  state = {
+    hasCopied: false,
+    copyToClipboardPressed: false,
+  }
+
+  copyAddress () {
+    copyToClipboard(this.props.checksummedAddress)
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Navigation',
+        action: 'Home',
+        name: 'Copied Address',
+      },
+    })
+    this.setState({ hasCopied: true })
+    setTimeout(() => this.setState({ hasCopied: false }), 3000)
+  }
+
+  render () {
+    const { t } = this.context
+
+    const {
+      hideSidebar,
+      showAccountDetailModal,
+      label,
+      checksummedAddress,
+      name,
+    } = this.props
+
+    const {
+      hasCopied,
+      copyToClipboardPressed,
+    } = this.state
+
+    return (
+      <div>
+        <div className="flex-column account-details">
+          <div className="account-details__sidebar-close" onClick={hideSidebar} />
+          <div className="account-details__keyring-label allcaps">
+            {label}
+          </div>
+          <div className="flex-column flex-center account-details__name-container" onClick={showAccountDetailModal}>
+            <Identicon diameter={54} address={checksummedAddress} />
+            <span className="account-details__account-name">
+              {name}
+            </span>
+            <button className="btn-secondary account-details__details-button">
+              {t('details')}
+            </button>
+          </div>
+        </div>
+        <Tooltip
+          position={'bottom'}
+          title={hasCopied ? t('copiedExclamation') : t('copyToClipboard')}
+          wrapperClassName="account-details__tooltip"
+        >
+          <button
+            className={classnames({
+              'account-details__address': true,
+              'account-details__address__pressed': copyToClipboardPressed,
+            })}
+            onClick={() => this.copyAddress()}
+            onMouseDown={() => this.setState({ copyToClipboardPressed: true })}
+            onMouseUp={() => this.setState({ copyToClipboardPressed: false })}
+          >
+            {checksummedAddress.slice(0, 6)}...{checksummedAddress.slice(-4)}
+            <i className="fa fa-clipboard" style={{ marginLeft: '8px' }} />
+          </button>
+        </Tooltip>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/account-details/account-details.container.js b/ui/app/components/app/account-details/account-details.container.js
new file mode 100644
index 000000000..581ff1e2f
--- /dev/null
+++ b/ui/app/components/app/account-details/account-details.container.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux'
+import { hideSidebar, showModal } from '../../../store/actions'
+import AccountDetails from './account-details.component'
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideSidebar: () => dispatch(hideSidebar()),
+    showAccountDetailModal: () => {
+      dispatch(showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+  }
+}
+
+export default connect(null, mapDispatchToProps)(AccountDetails)
diff --git a/ui/app/components/app/account-details/index.js b/ui/app/components/app/account-details/index.js
new file mode 100644
index 000000000..dca244fee
--- /dev/null
+++ b/ui/app/components/app/account-details/index.js
@@ -0,0 +1 @@
+export { default } from './account-details.container'
diff --git a/ui/app/components/app/account-details/index.scss b/ui/app/components/app/account-details/index.scss
new file mode 100644
index 000000000..b0a921df3
--- /dev/null
+++ b/ui/app/components/app/account-details/index.scss
@@ -0,0 +1,79 @@
+.account-details {
+  flex: 0 0 auto;
+
+  &__keyring-label {
+    height: 50px;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 10px;
+    text-align: right;
+    padding: 17px 20px 0;
+    box-sizing: border-box;
+  }
+
+  &__name-container {
+    flex: 0 0 auto;
+    cursor: pointer;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  &__account-name {
+    font-size: 24px;
+    color: $black;
+    margin-top: 8px;
+    margin-bottom: .9rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 100%;
+    padding: 0 8px;
+    text-align: center;
+  }
+
+  &__details-button {
+    font-size: 10px;
+    border-radius: 17px;
+    background-color: transparent;
+    margin: 0 auto;
+    padding: 4px 12px;
+    flex: 0 0 auto;
+  }
+
+  &__tooltip {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 24px;
+  }
+
+  &__address {
+    border-radius: 3px;
+    background-color: $alto;
+    color: $scorpion;
+    font-size: 14px;
+    line-height: 12px;
+    padding: 4px 12px;
+    cursor: pointer;
+    flex: 0 0 auto;
+
+    &__pressed {
+      background-color: $manatee,
+    }
+  }
+
+  &__sidebar-close {
+
+    @media screen and (max-width: 575px) {
+      &::after {
+        content: '\00D7';
+        font-size: 40px;
+        color: $tundora;
+        position: absolute;
+        top: 12px;
+        left: 12px;
+        cursor: pointer;
+      }
+    }
+  }
+}
diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js
index 171a3499f..7bf7a39bd 100644
--- a/ui/app/components/app/app-header/app-header.component.js
+++ b/ui/app/components/app/app-header/app-header.component.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Identicon from '../../ui/identicon'
+import MetaFoxLogo from '../../ui/metafox-logo'
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 const NetworkIndicator = require('../network')
 
@@ -70,6 +71,7 @@ export default class AppHeader extends PureComponent {
         <Identicon
           address={selectedAddress}
           diameter={32}
+          addBorder={true}
         />
       </div>
     )
@@ -89,20 +91,10 @@ export default class AppHeader extends PureComponent {
       <div
         className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
         <div className="app-header__contents">
-          <div
-            className="app-header__logo-container"
+          <MetaFoxLogo
+            unsetIconHeight={true}
             onClick={() => history.push(DEFAULT_ROUTE)}
-          >
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-              src="/images/logo/metamask-logo-horizontal.svg"
-              height={30}
-            />
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--icon"
-              src="/images/logo/metamask-fox.svg"
-            />
-          </div>
+          />
           <div className="app-header__account-menu-container">
             {
               !hideNetworkIndicator && (
diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss
index d3f37b7a2..0ea1793ca 100644
--- a/ui/app/components/app/app-header/index.scss
+++ b/ui/app/components/app/app-header/index.scss
@@ -10,7 +10,6 @@
 
   @media screen and (max-width: 575px) {
     padding: 1rem;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
     z-index: $mobile-header-z-index;
   }
 
@@ -24,7 +23,7 @@
         position: absolute;
         width: 100%;
         height: 32px;
-        background: $gallery;
+        background: $Grey-000;
         bottom: -32px;
       }
     }
diff --git a/ui/app/components/app/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js b/ui/app/components/app/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js
index c8507985d..95ca8144a 100644
--- a/ui/app/components/app/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js
+++ b/ui/app/components/app/confirm-page-container/confirm-detail-row/tests/confirm-detail-row.component.test.js
@@ -27,7 +27,7 @@ describe('Confirm Detail Row Component', function () {
     )
   })
 
-	describe('render', () => {
+  describe('render', () => {
     it('should render a div with a confirm-detail-row class', () => {
       assert.equal(wrapper.find('div.confirm-detail-row').length, 1)
     })
@@ -60,5 +60,5 @@ describe('Confirm Detail Row Component', function () {
       wrapper.find('.confirm-detail-row__header-text').props().onClick()
       assert.equal(assert.equal(propsMethodSpies.onHeaderClick.callCount, 1))
     })
-	})
+  })
 })
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
index 8327f997b..c24d24b17 100755
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
@@ -6,9 +6,9 @@ const ConfirmPageContainerNavigation = props => {
 
   return (
     <div className="confirm-page-container-navigation"
-        style={{
-          display: showNavigation ? 'flex' : 'none',
-        }}
+      style={{
+        display: showNavigation ? 'flex' : 'none',
+      }}
     >
       <div className="confirm-page-container-navigation__container"
         style={{
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
index 326e4f83e..1ff797fa1 100644
--- a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
@@ -106,16 +106,16 @@ export default class ConfirmPageContainer extends Component {
     return (
       <div className="page-container">
         <ConfirmPageContainerNavigation
-            totalTx={totalTx}
-            positionOfCurrentTx={positionOfCurrentTx}
-            nextTxId={nextTxId}
-            prevTxId={prevTxId}
-            showNavigation={showNavigation}
-            onNextTx={(txId) => onNextTx(txId)}
-            firstTx={firstTx}
-            lastTx={lastTx}
-            ofText={ofText}
-            requestsWaitingText={requestsWaitingText}
+          totalTx={totalTx}
+          positionOfCurrentTx={positionOfCurrentTx}
+          nextTxId={nextTxId}
+          prevTxId={prevTxId}
+          showNavigation={showNavigation}
+          onNextTx={(txId) => onNextTx(txId)}
+          firstTx={firstTx}
+          lastTx={lastTx}
+          ofText={ofText}
+          requestsWaitingText={requestsWaitingText}
         />
         <ConfirmPageContainerHeader
           showEdit={showEdit}
diff --git a/ui/app/components/app/contact-list/contact-list.component.js b/ui/app/components/app/contact-list/contact-list.component.js
new file mode 100644
index 000000000..ec9b5f8eb
--- /dev/null
+++ b/ui/app/components/app/contact-list/contact-list.component.js
@@ -0,0 +1,114 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import RecipientGroup from './recipient-group/recipient-group.component'
+
+export default class ContactList extends PureComponent {
+  static propTypes = {
+    searchForContacts: PropTypes.func,
+    searchForRecents: PropTypes.func,
+    searchForMyAccounts: PropTypes.func,
+    selectRecipient: PropTypes.func,
+    children: PropTypes.node,
+    selectedAddress: PropTypes.string,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  state = {
+    isShowingAllRecent: false,
+  }
+
+  renderRecents () {
+    const { t } = this.context
+    const { isShowingAllRecent } = this.state
+    const nonContacts = this.props.searchForRecents()
+
+    const showLoadMore = !isShowingAllRecent && nonContacts.length > 2
+
+    return (
+      <div className="send__select-recipient-wrapper__recent-group-wrapper">
+        <RecipientGroup
+          label={t('recents')}
+          items={showLoadMore ? nonContacts.slice(0, 2) : nonContacts}
+          onSelect={this.props.selectRecipient}
+          selectedAddress={this.props.selectedAddress}
+        />
+        {
+          showLoadMore && (
+            <div
+              className="send__select-recipient-wrapper__recent-group-wrapper__load-more"
+              onClick={() => this.setState({ isShowingAllRecent: true })}
+            >
+              {t('loadMore')}
+            </div>
+          )
+        }
+      </div>
+    )
+  }
+
+  renderAddressBook () {
+    const contacts = this.props.searchForContacts()
+
+    const contactGroups = contacts.reduce((acc, contact) => {
+      const firstLetter = contact.name.slice(0, 1).toUpperCase()
+      acc[firstLetter] = acc[firstLetter] || []
+      const bucket = acc[firstLetter]
+      bucket.push(contact)
+      return acc
+    }, {})
+
+    return Object
+      .entries(contactGroups)
+      .sort(([letter1], [letter2]) => {
+        if (letter1 > letter2) {
+          return 1
+        } else if (letter1 === letter2) {
+          return 0
+        } else if (letter1 < letter2) {
+          return -1
+        }
+      })
+      .map(([letter, groupItems]) => (
+        <RecipientGroup
+          key={`${letter}-contract-group`}
+          label={letter}
+          items={groupItems}
+          onSelect={this.props.selectRecipient}
+          selectedAddress={this.props.selectedAddress}
+        />
+      ))
+  }
+
+  renderMyAccounts () {
+    const myAccounts = this.props.searchForMyAccounts()
+
+    return (
+      <RecipientGroup
+        items={myAccounts}
+        onSelect={this.props.selectRecipient}
+        selectedAddress={this.props.selectedAddress}
+      />
+    )
+  }
+
+  render () {
+    const {
+      children,
+      searchForRecents,
+      searchForContacts,
+      searchForMyAccounts,
+    } = this.props
+
+    return (
+      <div className="send__select-recipient-wrapper__list">
+        { children || null }
+        { searchForRecents && this.renderRecents() }
+        { searchForContacts && this.renderAddressBook() }
+        { searchForMyAccounts && this.renderMyAccounts() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/contact-list/index.js b/ui/app/components/app/contact-list/index.js
new file mode 100644
index 000000000..d90c29b2b
--- /dev/null
+++ b/ui/app/components/app/contact-list/index.js
@@ -0,0 +1 @@
+export { default } from './contact-list.component'
diff --git a/ui/app/components/app/contact-list/recipient-group/index.js b/ui/app/components/app/contact-list/recipient-group/index.js
new file mode 100644
index 000000000..7d827523f
--- /dev/null
+++ b/ui/app/components/app/contact-list/recipient-group/index.js
@@ -0,0 +1 @@
+export { default } from './recipient-group.component'
diff --git a/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js b/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js
new file mode 100644
index 000000000..a2248326e
--- /dev/null
+++ b/ui/app/components/app/contact-list/recipient-group/recipient-group.component.js
@@ -0,0 +1,59 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Identicon from '../../../ui/identicon'
+import classnames from 'classnames'
+import { ellipsify } from '../../../../pages/send/send.utils'
+
+function addressesEqual (address1, address2) {
+  return String(address1).toLowerCase() === String(address2).toLowerCase()
+}
+
+export default function RecipientGroup ({ label, items, onSelect, selectedAddress }) {
+  if (!items || !items.length) {
+    return null
+  }
+
+  return (
+    <div className="send__select-recipient-wrapper__group">
+      {label && <div className="send__select-recipient-wrapper__group-label">
+        {label}
+      </div>}
+      {
+        items.map(({ address, name }) => (
+          <div
+            key={address}
+            onClick={() => onSelect(address, name)}
+            className={classnames({
+              'send__select-recipient-wrapper__group-item': !addressesEqual(address, selectedAddress),
+              'send__select-recipient-wrapper__group-item--selected': addressesEqual(address, selectedAddress),
+            })}
+          >
+            <Identicon address={address} diameter={28} />
+            <div className="send__select-recipient-wrapper__group-item__content">
+              <div className="send__select-recipient-wrapper__group-item__title">
+                {name || ellipsify(address)}
+              </div>
+              {
+                name && (
+                  <div className="send__select-recipient-wrapper__group-item__subtitle">
+                    {ellipsify(address)}
+                  </div>
+                )
+              }
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  )
+}
+
+RecipientGroup.propTypes = {
+  label: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    address: PropTypes.string,
+    name: PropTypes.string,
+  })),
+  onSelect: PropTypes.func.isRequired,
+  selectedAddress: PropTypes.string,
+}
diff --git a/ui/app/components/app/dropdowns/account-details-dropdown.js b/ui/app/components/app/dropdowns/account-details-dropdown.js
index a4c33620a..cf2aa8ae8 100644
--- a/ui/app/components/app/dropdowns/account-details-dropdown.js
+++ b/ui/app/components/app/dropdowns/account-details-dropdown.js
@@ -59,7 +59,7 @@ AccountDetailsDropdown.prototype.render = function () {
     viewOnEtherscan,
     showRemoveAccountConfirmationModal,
     rpcPrefs,
-   } = this.props
+  } = this.props
 
   const address = selectedIdentity.address
 
diff --git a/ui/app/components/app/dropdowns/network-dropdown.js b/ui/app/components/app/dropdowns/network-dropdown.js
index 378ad3ba6..e6a24ef11 100644
--- a/ui/app/components/app/dropdowns/network-dropdown.js
+++ b/ui/app/components/app/dropdowns/network-dropdown.js
@@ -32,9 +32,6 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
     setProviderType: (type) => {
       dispatch(actions.setProviderType(type))
     },
@@ -47,7 +44,6 @@ function mapDispatchToProps (dispatch) {
     delRpcTarget: (target) => {
       dispatch(actions.delRpcTarget(target))
     },
-    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
     hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
     setNetworksTabAddMode: isInAddMode => dispatch(actions.setNetworksTabAddMode(isInAddMode)),
   }
@@ -357,12 +353,12 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcListDetail, provider) {
             },
           }, nickname || rpc),
           h('i.fa.fa-times.delete',
-          {
-            onClick: (e) => {
-              e.stopPropagation()
-              props.delRpcTarget(rpc)
-            },
-          }),
+            {
+              onClick: (e) => {
+                e.stopPropagation()
+                props.delRpcTarget(rpc)
+              },
+            }),
         ]
       )
     }
diff --git a/ui/app/components/app/ens-input.js b/ui/app/components/app/ens-input.js
deleted file mode 100644
index 5eea0dd90..000000000
--- a/ui/app/components/app/ens-input.js
+++ /dev/null
@@ -1,181 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const extend = require('xtend')
-const debounce = require('debounce')
-const copyToClipboard = require('copy-to-clipboard')
-const ENS = require('ethjs-ens')
-const networkMap = require('ethjs-ens/lib/network-map.json')
-const ensRE = /.+\..+$/
-const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
-const connect = require('react-redux').connect
-const ToAutoComplete = require('../../pages/send/to-autocomplete').default
-const log = require('loglevel')
-const { isValidENSAddress } = require('../../helpers/utils/util')
-
-EnsInput.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect()(EnsInput)
-
-
-inherits(EnsInput, Component)
-function EnsInput () {
-  Component.call(this)
-}
-
-EnsInput.prototype.onChange = function (recipient) {
-
-  const network = this.props.network
-  const networkHasEnsSupport = getNetworkEnsSupport(network)
-
-  this.props.onChange({ toAddress: recipient })
-
-  if (!networkHasEnsSupport) return
-
-  if (recipient.match(ensRE) === null) {
-    return this.setState({
-      loadingEns: false,
-      ensResolution: null,
-      ensFailure: null,
-      toError: null,
-    })
-  }
-
-  this.setState({
-    loadingEns: true,
-  })
-  this.checkName(recipient)
-}
-
-EnsInput.prototype.render = function () {
-  const props = this.props
-  const opts = extend(props, {
-    list: 'addresses',
-    onChange: this.onChange.bind(this),
-    qrScanner: true,
-  })
-  return h('div', {
-    style: { width: '100%', position: 'relative' },
-  }, [
-    h(ToAutoComplete, { ...opts }),
-    this.ensIcon(),
-  ])
-}
-
-EnsInput.prototype.componentDidMount = function () {
-  const network = this.props.network
-  const networkHasEnsSupport = getNetworkEnsSupport(network)
-  this.setState({ ensResolution: ZERO_ADDRESS })
-
-  if (networkHasEnsSupport) {
-    const provider = global.ethereumProvider
-    this.ens = new ENS({ provider, network })
-    this.checkName = debounce(this.lookupEnsName.bind(this), 200)
-  }
-}
-
-EnsInput.prototype.lookupEnsName = function (recipient) {
-  const { ensResolution } = this.state
-
-  log.info(`ENS attempting to resolve name: ${recipient}`)
-  this.ens.lookup(recipient.trim())
-  .then((address) => {
-    if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName'))
-    if (address !== ensResolution) {
-      this.setState({
-        loadingEns: false,
-        ensResolution: address,
-        nickname: recipient.trim(),
-        hoverText: address + '\n' + this.context.t('clickCopy'),
-        ensFailure: false,
-        toError: null,
-      })
-    }
-  })
-  .catch((reason) => {
-    const setStateObj = {
-      loadingEns: false,
-      ensResolution: recipient,
-      ensFailure: true,
-      toError: null,
-    }
-    if (isValidENSAddress(recipient) && reason.message === 'ENS name not defined.') {
-      setStateObj.hoverText = this.context.t('ensNameNotFound')
-      setStateObj.toError = 'ensNameNotFound'
-      setStateObj.ensFailure = false
-    } else {
-      log.error(reason)
-      setStateObj.hoverText = reason.message
-    }
-
-    return this.setState(setStateObj)
-  })
-}
-
-EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
-  const state = this.state || {}
-  const ensResolution = state.ensResolution
-  // If an address is sent without a nickname, meaning not from ENS or from
-  // the user's own accounts, a default of a one-space string is used.
-  const nickname = state.nickname || ' '
-  if (prevProps.network !== this.props.network) {
-    const provider = global.ethereumProvider
-    this.ens = new ENS({ provider, network: this.props.network })
-    this.onChange(ensResolution)
-  }
-  if (prevState && ensResolution && this.props.onChange &&
-      ensResolution !== prevState.ensResolution) {
-    this.props.onChange({ toAddress: ensResolution, nickname, toError: state.toError, toWarning: state.toWarning })
-  }
-}
-
-EnsInput.prototype.ensIcon = function (recipient) {
-  const { hoverText } = this.state || {}
-  return h('span.#ensIcon', {
-    title: hoverText,
-    style: {
-      position: 'absolute',
-      top: '16px',
-      left: '-25px',
-    },
-  }, this.ensIconContents(recipient))
-}
-
-EnsInput.prototype.ensIconContents = function () {
-  const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS }
-
-  if (toError) return
-
-  if (loadingEns) {
-    return h('img', {
-      src: 'images/loading.svg',
-      style: {
-        width: '30px',
-        height: '30px',
-        transform: 'translateY(-6px)',
-      },
-    })
-  }
-
-  if (ensFailure) {
-    return h('i.fa.fa-warning.fa-lg.warning')
-  }
-
-  if (ensResolution && (ensResolution !== ZERO_ADDRESS)) {
-    return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', {
-      style: { color: 'green' },
-      onClick: (event) => {
-        event.preventDefault()
-        event.stopPropagation()
-        copyToClipboard(ensResolution)
-      },
-    })
-  }
-}
-
-function getNetworkEnsSupport (network) {
-  return Boolean(networkMap[network])
-}
diff --git a/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
index d942fd150..7b87b3033 100644
--- a/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
+++ b/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
@@ -131,8 +131,8 @@ export default class AdvancedTabContent extends Component {
         </div>
         { isInError
           ? <div className={`advanced-gas-inputs__gas-edit-row__${errorType}-text`}>
-              { errorText }
-            </div>
+            { errorText }
+          </div>
           : null }
       </div>
     )
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index eab3434df..88d28b9ed 100644
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -104,8 +104,8 @@ export default class AdvancedTabContent extends Component {
         </div>
         { isInError
           ? <div className={`advanced-tab__gas-edit-row__${errorType}-text`}>
-              { errorText }
-            </div>
+            { errorText }
+          </div>
           : null }
       </div>
     )
@@ -126,7 +126,7 @@ export default class AdvancedTabContent extends Component {
           <div className="advanced-tab__transaction-data-summary__fee">
             {transactionFee}
           </div>
-          <div className="time-remaining">{timeRemaining}</div>
+          <div className="advanced-tab__transaction-data-summary__time-remaining">{timeRemaining}</div>
         </div>
       </div>
     )
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index 20a503018..e35b6d594 100644
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -1,5 +1,3 @@
-@import './time-remaining/index';
-
 .advanced-tab {
   display: flex;
   flex-flow: column;
@@ -36,6 +34,24 @@
       font-size: 16px;
       color: #313A5E;
     }
+
+    &__time-remaining {
+      color: #313A5E;
+      font-size: 16px;
+
+      .minutes-num, .seconds-num {
+        font-size: 16px;
+      }
+
+      .seconds-num {
+        margin-left: 7px;
+        font-size: 16px;
+      }
+
+      .minutes-label, .seconds-label {
+        font-size: 16px;
+      }
+    }
   }
 
   &__fee-chart {
@@ -94,7 +110,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      
+
       .fa-info-circle {
         color: $silver;
         margin-left: 10px;
@@ -204,4 +220,4 @@
       color: $dusty-gray;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 5f7d90922..683eeda9b 100644
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -124,7 +124,7 @@ describe('AdvancedTabContent Component', function () {
       const dataNode = dataSummary.children().at(1)
       assert(dataNode.hasClass('advanced-tab__transaction-data-summary__container'))
       assert.equal(dataNode.children().at(0).text(), 'mockTotalFee')
-      assert(dataNode.children().at(1).hasClass('time-remaining'))
+      assert(dataNode.children().at(1).hasClass('advanced-tab__transaction-data-summary__time-remaining'))
       assert.equal(dataNode.children().at(1).text(), 'mockMsRemaining')
     })
   })
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js
deleted file mode 100644
index 61b681e1a..000000000
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './time-remaining.component'
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
deleted file mode 100644
index e2115af7f..000000000
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/index.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.time-remaining {
-  color: #313A5E;
-  font-size: 16px;
-
-  .minutes-num, .seconds-num {
-    font-size: 16px;
-  }
-
-  .seconds-num {
-    margin-left: 7px;
-    font-size: 16px;
-  }
-
-  .minutes-label, .seconds-label {
-    font-size: 16px;
-  }
-}
\ No newline at end of file
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
deleted file mode 100644
index 17f0345d5..000000000
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/tests/time-remaining-component.test.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import shallow from '../../../../../../../../lib/shallow-with-context'
-import TimeRemaining from '../time-remaining.component.js'
-
-describe('TimeRemaining Component', function () {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = shallow(<TimeRemaining
-      milliseconds={495000}
-    />)
-  })
-
-  describe('render()', () => {
-    it('should render the time-remaining root node', () => {
-      assert(wrapper.hasClass('time-remaining'))
-    })
-
-    it('should render minutes and seconds numbers and labels', () => {
-      const timeRemainingChildren = wrapper.children()
-      assert.equal(timeRemainingChildren.length, 4)
-      assert.equal(timeRemainingChildren.at(0).text(), 8)
-      assert.equal(timeRemainingChildren.at(1).text(), 'minutesShorthand')
-      assert.equal(timeRemainingChildren.at(2).text(), 15)
-      assert.equal(timeRemainingChildren.at(3).text(), 'secondsShorthand')
-    })
-  })
-
-})
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js
deleted file mode 100644
index 826d41f9c..000000000
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.component.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import { getTimeBreakdown } from './time-remaining.utils'
-
-export default class TimeRemaining extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    milliseconds: PropTypes.number,
-  }
-
-  render () {
-    const {
-      milliseconds,
-    } = this.props
-
-    const {
-      minutes,
-      seconds,
-    } = getTimeBreakdown(milliseconds)
-
-    return (
-      <div className="time-remaining">
-        <span className="minutes-num">{minutes}</span>
-        <span className="minutes-label">{this.context.t('minutesShorthand')}</span>
-        <span className="seconds-num">{seconds}</span>
-        <span className="seconds-label">{this.context.t('secondsShorthand')}</span>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js
deleted file mode 100644
index cf43e0acb..000000000
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/time-remaining/time-remaining.utils.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function getTimeBreakdown (milliseconds) {
-  return {
-    hours: Math.floor(milliseconds / 3600000),
-    minutes: Math.floor((milliseconds % 3600000) / 60000),
-    seconds: Math.floor((milliseconds % 60000) / 1000),
-  }
-}
-
-module.exports = {
-  getTimeBreakdown,
-}
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
index 5f3925fa5..931611460 100644
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
@@ -21,12 +21,12 @@ export default class BasicTabContent extends Component {
         <div className="basic-tab-content__title">{ t('estimatedProcessingTimes') }</div>
         <div className="basic-tab-content__blurb">{ t('selectAHigherGasFee') }</div>
         {!gasPriceButtonGroupProps.loading
-            ? <GasPriceButtonGroup
-              className="gas-price-button-group--alt"
-              showCheck={true}
-              {...gasPriceButtonGroupProps}
-            />
-            : <Loading />
+          ? <GasPriceButtonGroup
+            className="gas-price-button-group--alt"
+            showCheck={true}
+            {...gasPriceButtonGroupProps}
+          />
+          : <Loading />
         }
         <div className="basic-tab-content__footer-blurb">{ t('acceleratingATransaction') }</div>
       </div>
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
index e18c1067e..5e557f660 100644
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -47,7 +47,7 @@ export default class GasModalPageContainer extends Component {
     const promise = this.props.hideBasic
       ? Promise.resolve(this.props.blockTime)
       : this.props.fetchBasicGasAndTimeEstimates()
-          .then(basicEstimates => basicEstimates.blockTime)
+        .then(basicEstimates => basicEstimates.blockTime)
 
     promise
       .then(blockTime => {
@@ -144,11 +144,11 @@ export default class GasModalPageContainer extends Component {
     return (
       <Tabs>
         {tabsToRender.map(({ name, content }, i) => <Tab name={this.context.t(name)} key={`gas-modal-tab-${i}`}>
-            <div className="gas-modal-content">
-              { content }
-              { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
-            </div>
-          </Tab>
+          <div className="gas-modal-content">
+            { content }
+            { this.renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) }
+          </div>
+        </Tab>
         )}
       </Tabs>
     )
diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
index 03d254eee..d5f3837a9 100644
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
@@ -341,44 +341,44 @@ describe('gas-modal-page-container container', () => {
   })
 
   describe('mergeProps', () => {
-      let stateProps
-      let dispatchProps
-      let ownProps
-
-      beforeEach(() => {
-        stateProps = {
-          gasPriceButtonGroupProps: {
-            someGasPriceButtonGroupProp: 'foo',
-            anotherGasPriceButtonGroupProp: 'bar',
-          },
-          isConfirm: true,
-          someOtherStateProp: 'baz',
-          transaction: {},
-        }
-        dispatchProps = {
-          updateCustomGasPrice: sinon.spy(),
-          hideGasButtonGroup: sinon.spy(),
-          setGasData: sinon.spy(),
-          updateConfirmTxGasAndCalculate: sinon.spy(),
-          someOtherDispatchProp: sinon.spy(),
-          createSpeedUpTransaction: sinon.spy(),
-          hideSidebar: sinon.spy(),
-          hideModal: sinon.spy(),
-          cancelAndClose: sinon.spy(),
-        }
-        ownProps = { someOwnProp: 123 }
-      })
+    let stateProps
+    let dispatchProps
+    let ownProps
 
-      afterEach(() => {
-        dispatchProps.updateCustomGasPrice.resetHistory()
-        dispatchProps.hideGasButtonGroup.resetHistory()
-        dispatchProps.setGasData.resetHistory()
-        dispatchProps.updateConfirmTxGasAndCalculate.resetHistory()
-        dispatchProps.someOtherDispatchProp.resetHistory()
-        dispatchProps.createSpeedUpTransaction.resetHistory()
-        dispatchProps.hideSidebar.resetHistory()
-        dispatchProps.hideModal.resetHistory()
-      })
+    beforeEach(() => {
+      stateProps = {
+        gasPriceButtonGroupProps: {
+          someGasPriceButtonGroupProp: 'foo',
+          anotherGasPriceButtonGroupProp: 'bar',
+        },
+        isConfirm: true,
+        someOtherStateProp: 'baz',
+        transaction: {},
+      }
+      dispatchProps = {
+        updateCustomGasPrice: sinon.spy(),
+        hideGasButtonGroup: sinon.spy(),
+        setGasData: sinon.spy(),
+        updateConfirmTxGasAndCalculate: sinon.spy(),
+        someOtherDispatchProp: sinon.spy(),
+        createSpeedUpTransaction: sinon.spy(),
+        hideSidebar: sinon.spy(),
+        hideModal: sinon.spy(),
+        cancelAndClose: sinon.spy(),
+      }
+      ownProps = { someOwnProp: 123 }
+    })
+
+    afterEach(() => {
+      dispatchProps.updateCustomGasPrice.resetHistory()
+      dispatchProps.hideGasButtonGroup.resetHistory()
+      dispatchProps.setGasData.resetHistory()
+      dispatchProps.updateConfirmTxGasAndCalculate.resetHistory()
+      dispatchProps.someOtherDispatchProp.resetHistory()
+      dispatchProps.createSpeedUpTransaction.resetHistory()
+      dispatchProps.hideSidebar.resetHistory()
+      dispatchProps.hideModal.resetHistory()
+    })
     it('should return the expected props when isConfirm is true', () => {
       const result = mergeProps(stateProps, dispatchProps, ownProps)
 
diff --git a/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.utils.js b/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.utils.js
index 55512ce09..b941f1cf9 100644
--- a/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.utils.js
+++ b/ui/app/components/app/gas-customization/gas-price-chart/gas-price-chart.utils.js
@@ -210,17 +210,17 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate
     },
     padding: {left: 20, right: 15, top: 6, bottom: 10},
     data: {
-        x: 'x',
-        columns: [
-            ['x', ...gasPrices],
-            ['data1', ...estimatedTimes],
-        ],
-        types: {
-          data1: 'area',
-        },
-        selection: {
-          enabled: false,
-        },
+      x: 'x',
+      columns: [
+        ['x', ...gasPrices],
+        ['data1', ...estimatedTimes],
+      ],
+      types: {
+        data1: 'area',
+      },
+      selection: {
+        enabled: false,
+      },
     },
     color: {
       data1: '#259de5',
@@ -254,13 +254,13 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate
       },
     },
     legend: {
-        show: false,
+      show: false,
     },
     grid: {
-        x: {},
-        lines: {
-          front: false,
-        },
+      x: {},
+      lines: {
+        front: false,
+      },
     },
     point: {
       focus: {
@@ -296,8 +296,8 @@ export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimate
         const flipTooltip = circleY - circleWidth < chartYStart + 5
 
         d3
-        .select('.tooltip-arrow')
-        .style('margin-top', flipTooltip ? '-16px' : '4px')
+          .select('.tooltip-arrow')
+          .style('margin-top', flipTooltip ? '-16px' : '4px')
 
         return {
           top: bigNumMinus(circleY, chartYStart).minus(19).plus(flipTooltip ? circleWidth + 38 : 0).toNumber(),
diff --git a/ui/app/components/app/home-notification/home-notification.component.js b/ui/app/components/app/home-notification/home-notification.component.js
new file mode 100644
index 000000000..cc86ef6d8
--- /dev/null
+++ b/ui/app/components/app/home-notification/home-notification.component.js
@@ -0,0 +1,112 @@
+import React, { PureComponent } from 'react'
+import classnames from 'classnames'
+import {Tooltip as ReactTippy} from 'react-tippy'
+import PropTypes from 'prop-types'
+import Button from '../../ui/button'
+
+export default class HomeNotification extends PureComponent {
+  static contextTypes = {
+    metricsEvent: PropTypes.func,
+  }
+
+  static defaultProps = {
+    onAccept: null,
+    ignoreText: null,
+    onIgnore: null,
+    infoText: null,
+  }
+
+  static propTypes = {
+    acceptText: PropTypes.string.isRequired,
+    onAccept: PropTypes.func,
+    ignoreText: PropTypes.string,
+    onIgnore: PropTypes.func,
+    descriptionText: PropTypes.string.isRequired,
+    infoText: PropTypes.string,
+    classNames: PropTypes.array,
+  }
+
+  handleAccept = () => {
+    this.props.onAccept()
+  }
+
+  handleIgnore = () => {
+    this.props.onIgnore()
+  }
+
+  render () {
+    const { descriptionText, acceptText, onAccept, ignoreText, onIgnore, infoText, classNames = [] } = this.props
+
+    return (
+      <div className={classnames('home-notification', ...classNames)}>
+        <div className="home-notification__header">
+          <div className="home-notification__header-container">
+            <img
+              className="home-notification__icon"
+              alt=""
+              src="images/icons/connect.svg"
+            />
+            <div className="home-notification__text">
+              { descriptionText }
+            </div>
+          </div>
+          {
+            infoText ? (
+              <ReactTippy
+                style={{
+                  display: 'flex',
+                }}
+                html={(
+                  <p className="home-notification-tooltip__content">
+                    {infoText}
+                  </p>
+                )}
+                offset={-36}
+                distance={36}
+                animation="none"
+                position="top"
+                arrow
+                theme="info"
+              >
+                <img
+                  alt=""
+                  src="images/icons/info.svg"
+                />
+              </ReactTippy>
+            ) : (
+              null
+            )
+          }
+        </div>
+        <div className="home-notification__buttons">
+          {
+            (onAccept && acceptText) ? (
+              <Button
+                type="primary"
+                className="home-notification__accept-button"
+                onClick={this.handleAccept}
+              >
+                { acceptText }
+              </Button>
+            ) : (
+              null
+            )
+          }
+          {
+            (onIgnore && ignoreText) ? (
+              <Button
+                type="secondary"
+                className="home-notification__ignore-button"
+                onClick={this.handleIgnore}
+              >
+                { ignoreText }
+              </Button>
+            ) : (
+              null
+            )
+          }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/home-notification/index.js b/ui/app/components/app/home-notification/index.js
new file mode 100644
index 000000000..918a35be2
--- /dev/null
+++ b/ui/app/components/app/home-notification/index.js
@@ -0,0 +1 @@
+export { default } from './home-notification.component'
diff --git a/ui/app/components/app/home-notification/index.scss b/ui/app/components/app/home-notification/index.scss
new file mode 100644
index 000000000..c855a0814
--- /dev/null
+++ b/ui/app/components/app/home-notification/index.scss
@@ -0,0 +1,118 @@
+.tippy-tooltip.info-theme {
+  background: rgba(36, 41, 46, 0.9);
+  color: $white;
+  border-radius: 8px;
+}
+
+.home-notification {
+  background: rgba(36, 41, 46, 0.9);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  height: 116px;
+  padding: 16px;
+
+  @media screen and (min-width: 576px) {
+    min-width: 472px;
+  }
+
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+
+  &__header-container {
+    display: flex;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__text {
+    font-family: Roboto, 'sans-serif';
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    color: $white;
+    margin-left: 10px;
+    margin-right: 8px;
+  }
+
+  .fa-info-circle {
+    color: #6A737D;
+  }
+
+  &__ignore-button {
+    border: 2px solid #6A737D;
+    box-sizing: border-box;
+    border-radius: 6px;
+    color: $white;
+    background-color: inherit;
+    height: 34px;
+    width: 155px;
+    padding: 0;
+
+    @media screen and (max-width: 575px) {
+      width: 135px;
+    }
+
+    &:hover {
+      border-color: #6A737D;
+      background-color: #6A737D;
+    }
+
+    &:active {
+      background-color: #141618;
+    }
+  }
+
+  &__accept-button {
+    border: 2px solid #6A737D;
+    box-sizing: border-box;
+    border-radius: 6px;
+    color: $white;
+    background-color: inherit;
+    height: 34px;
+    width: 155px;
+    padding: 0;
+    margin-left: 4px;
+
+    @media screen and (max-width: 575px) {
+      width: 135px;
+    }
+
+    &:hover {
+      border-color: #6A737D;
+      background-color: #6A737D;
+    }
+
+    &:active {
+      background-color: #141618;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    flex-direction: row-reverse;
+  }
+}
+
+.home-notification-tooltip {
+  &__tooltip-container {
+    display: flex;
+  }
+
+  &__content {
+    font-family: Roboto, 'sans-serif';
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    color: $white;
+    text-align: left;
+    display: inline-block;
+    width: 200px;
+  }
+}
diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss
index e9bb4ac9f..1ccb6a94a 100644
--- a/ui/app/components/app/index.scss
+++ b/ui/app/components/app/index.scss
@@ -1,3 +1,5 @@
+@import 'account-details/index';
+
 @import 'account-menu/index';
 
 @import 'add-token-button/index';
@@ -78,4 +80,8 @@
 
 @import 'gas-customization/gas-price-button-group/index';
 
-@import 'ui-migration-annoucement/index';
+@import '../ui/toggle-button/index';
+
+@import 'home-notification/index';
+
+@import 'multiple-notifications/index';
diff --git a/ui/app/components/app/menu-droppo.js b/ui/app/components/app/menu-droppo.js
index c80bee2be..a88cad4b4 100644
--- a/ui/app/components/app/menu-droppo.js
+++ b/ui/app/components/app/menu-droppo.js
@@ -2,7 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const findDOMNode = require('react-dom').findDOMNode
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+const ReactCSSTransitionGroup = require('react-transition-group/CSSTransitionGroup')
 
 module.exports = MenuDroppoComponent
 
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 e3919edcf..1b9a6a718 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
@@ -72,14 +72,14 @@ export default class AccountDetailsModal extends Component {
         </Button>
 
         {exportPrivateKeyFeatureEnabled
-            ? <Button
-                type="secondary"
-                className="account-modal__button"
-                onClick={() => showExportPrivateKeyModal()}
-              >
-                {this.context.t('exportPrivateKey')}
-              </Button>
-            : null
+          ? <Button
+            type="secondary"
+            className="account-modal__button"
+            onClick={() => showExportPrivateKeyModal()}
+          >
+            {this.context.t('exportPrivateKey')}
+          </Button>
+          : null
         }
       </AccountModalContainer>
     )
diff --git a/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.component.js b/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.component.js
new file mode 100644
index 000000000..64161a632
--- /dev/null
+++ b/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.component.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../../ui/button/button.component'
+
+export default class AddToAddressBookModal extends Component {
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    hideModal: PropTypes.func.isRequired,
+    addToAddressBook: PropTypes.func.isRequired,
+    recipient: PropTypes.string.isRequired,
+  }
+
+  state = {
+    alias: '',
+  }
+
+  onSave = () => {
+    const { recipient, addToAddressBook, hideModal } = this.props
+    addToAddressBook(recipient, this.state.alias)
+    hideModal()
+  }
+
+  onChange = e => {
+    this.setState({
+      alias: e.target.value,
+    })
+  }
+
+  onKeyPress = e => {
+    if (e.key === 'Enter' && this.state.alias) {
+      this.onSave()
+    }
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <div className="add-to-address-book-modal">
+        <div className="add-to-address-book-modal__content">
+          <div className="add-to-address-book-modal__content__header">
+            {t('addToAddressBook')}
+          </div>
+          <div className="add-to-address-book-modal__input-label">
+            {t('enterAnAlias')}
+          </div>
+          <input
+            type="text"
+            className="add-to-address-book-modal__input"
+            placeholder={t('addToAddressBookModalPlaceholder')}
+            onChange={this.onChange}
+            onKeyPress={this.onKeyPress}
+            value={this.state.alias}
+            autoFocus
+          />
+        </div>
+        <div className="add-to-address-book-modal__footer">
+          <Button
+            type="secondary"
+            onClick={this.props.hideModal}
+          >
+            {t('cancel')}
+          </Button>
+          <Button
+            type="primary"
+            onClick={this.onSave}
+            disabled={!this.state.alias}
+          >
+            {t('save')}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.container.js b/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.container.js
new file mode 100644
index 000000000..413d4aa4a
--- /dev/null
+++ b/ui/app/components/app/modals/add-to-addressbook-modal/add-to-addressbook-modal.container.js
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux'
+import AddToAddressBookModal from './add-to-addressbook-modal.component'
+import actions from '../../../../store/actions'
+
+function mapStateToProps (state) {
+  return {
+    ...state.appState.modal.modalState.props || {},
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => dispatch(actions.hideModal()),
+    addToAddressBook: (recipient, nickname) => dispatch(actions.addToAddressBook(recipient, nickname)),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddToAddressBookModal)
diff --git a/ui/app/components/app/modals/add-to-addressbook-modal/index.js b/ui/app/components/app/modals/add-to-addressbook-modal/index.js
new file mode 100644
index 000000000..9ed4f018f
--- /dev/null
+++ b/ui/app/components/app/modals/add-to-addressbook-modal/index.js
@@ -0,0 +1 @@
+export { default } from './add-to-addressbook-modal.container'
diff --git a/ui/app/components/app/modals/add-to-addressbook-modal/index.scss b/ui/app/components/app/modals/add-to-addressbook-modal/index.scss
new file mode 100644
index 000000000..f6bf85a0a
--- /dev/null
+++ b/ui/app/components/app/modals/add-to-addressbook-modal/index.scss
@@ -0,0 +1,37 @@
+.add-to-address-book-modal {
+  @extend %col-nowrap;
+  @extend %modal;
+
+  &__content {
+    @extend %col-nowrap;
+    padding: 1.5rem;
+    border-bottom: 1px solid $Grey-100;
+
+    &__header {
+      @extend %h3;
+    }
+  }
+
+  &__input-label {
+    color: $Grey-600;
+    margin-top: 1.25rem;
+  }
+
+  &__input {
+    @extend %input;
+    margin-top: 0.75rem;
+
+    &::placeholder {
+      color: $Grey-300;
+    }
+  }
+
+  &__footer {
+    @extend %row-nowrap;
+    padding: 1rem;
+
+    button + button {
+      margin-left: 1rem;
+    }
+  }
+}
diff --git a/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.component.js b/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.component.js
new file mode 100644
index 000000000..ea92e340c
--- /dev/null
+++ b/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.component.js
@@ -0,0 +1,43 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Modal, { ModalContent } from '../../modal'
+
+export default class ConfirmDeleteNetwork extends PureComponent {
+  static propTypes = {
+    hideModal: PropTypes.func.isRequired,
+    delRpcTarget: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    target: PropTypes.string.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  handleDelete = () => {
+    this.props.delRpcTarget(this.props.target)
+      .then(() => {
+        this.props.onConfirm()
+        this.props.hideModal()
+      })
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <Modal
+        onSubmit={this.handleDelete}
+        onCancel={() => this.props.hideModal()}
+        submitText={t('delete')}
+        cancelText={t('cancel')}
+        submitType="danger"
+      >
+        <ModalContent
+          title={t('deleteNetwork')}
+          description={t('deleteNetworkDescription')}
+        />
+      </Modal>
+    )
+  }
+}
diff --git a/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.container.js b/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.container.js
new file mode 100644
index 000000000..4c9bb279f
--- /dev/null
+++ b/ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.container.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
+import ConfirmDeleteNetwork from './confirm-delete-network.component'
+import { delRpcTarget } from '../../../../store/actions'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    delRpcTarget: (target) => dispatch(delRpcTarget(target)),
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(null, mapDispatchToProps)
+)(ConfirmDeleteNetwork)
diff --git a/ui/app/components/app/modals/confirm-delete-network/index.js b/ui/app/components/app/modals/confirm-delete-network/index.js
new file mode 100644
index 000000000..de9543eea
--- /dev/null
+++ b/ui/app/components/app/modals/confirm-delete-network/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-delete-network.container'
diff --git a/ui/app/components/app/modals/deposit-ether-modal.js b/ui/app/components/app/modals/deposit-ether-modal.js
index 20c4d018c..ff2411209 100644
--- a/ui/app/components/app/modals/deposit-ether-modal.js
+++ b/ui/app/components/app/modals/deposit-ether-modal.js
@@ -87,8 +87,8 @@ DepositEtherModal.prototype.renderRow = function ({
   }
 
   return h('div', {
-      className: className || 'deposit-ether-modal__buy-row',
-    }, [
+    className: className || 'deposit-ether-modal__buy-row',
+  }, [
 
     onBackClick && showBackButton && h('div.deposit-ether-modal__buy-row__back', {
       onClick: onBackClick,
@@ -100,22 +100,22 @@ DepositEtherModal.prototype.renderRow = function ({
 
     h('div.deposit-ether-modal__buy-row__logo-container', [logo]),
 
-      h('div.deposit-ether-modal__buy-row__description', [
+    h('div.deposit-ether-modal__buy-row__description', [
 
-        !hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]),
+      !hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]),
 
-        h('div.deposit-ether-modal__buy-row__description__text', [text]),
+      h('div.deposit-ether-modal__buy-row__description__text', [text]),
 
-      ]),
+    ]),
 
-      !hideButton && h('div.deposit-ether-modal__buy-row__button', [
-        h(Button, {
-          type: 'secondary',
-          className: 'deposit-ether-modal__deposit-button',
-          large: true,
-          onClick: onButtonClick,
-        }, [buttonLabel]),
-      ]),
+    !hideButton && h('div.deposit-ether-modal__buy-row__button', [
+      h(Button, {
+        type: 'secondary',
+        className: 'deposit-ether-modal__deposit-button',
+        large: true,
+        onClick: onButtonClick,
+      }, [buttonLabel]),
+    ]),
 
   ])
 }
diff --git a/ui/app/components/app/modals/export-private-key-modal.js b/ui/app/components/app/modals/export-private-key-modal.js
index c3098a16c..43d7bcd74 100644
--- a/ui/app/components/app/modals/export-private-key-modal.js
+++ b/ui/app/components/app/modals/export-private-key-modal.js
@@ -86,12 +86,12 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
 
   return privateKey
     ? h(ReadOnlyInput, {
-        wrapperClass: 'private-key-password-display-wrapper',
-        inputClass: 'private-key-password-display-textarea',
-        textarea: true,
-        value: plainKey,
-        onClick: () => copyToClipboard(plainKey),
-      })
+      wrapperClass: 'private-key-password-display-wrapper',
+      inputClass: 'private-key-password-display-textarea',
+      textarea: true,
+      value: plainKey,
+      onClick: () => copyToClipboard(plainKey),
+    })
     : h('input.private-key-password-input', {
       type: 'password',
       onChange: event => this.setState({ password: event.target.value }),
@@ -109,14 +109,14 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, address, h
 
     (privateKey
       ? (
-          h(Button, {
+        h(Button, {
           type: 'secondary',
           large: true,
           className: 'export-private-key__button',
           onClick: () => hideModal(),
         }, this.context.t('done'))
       ) : (
-          h(Button, {
+        h(Button, {
           type: 'secondary',
           large: true,
           className: 'export-private-key__button',
@@ -149,29 +149,29 @@ ExportPrivateKeyModal.prototype.render = function () {
     backButtonAction: () => showAccountDetailModal(),
   }, [
 
-      h('span.account-name', name),
+    h('span.account-name', name),
 
-      h(ReadOnlyInput, {
-        wrapperClass: 'ellip-address-wrapper',
-        inputClass: 'qr-ellip-address ellip-address',
-        value: checksumAddress(address),
-      }),
+    h(ReadOnlyInput, {
+      wrapperClass: 'ellip-address-wrapper',
+      inputClass: 'qr-ellip-address ellip-address',
+      value: checksumAddress(address),
+    }),
 
-      h('div.account-modal-divider'),
+    h('div.account-modal-divider'),
 
-      h('span.modal-body-title', this.context.t('showPrivateKeys')),
+    h('span.modal-body-title', this.context.t('showPrivateKeys')),
 
-      h('div.private-key-password', {}, [
-        this.renderPasswordLabel(privateKey),
+    h('div.private-key-password', {}, [
+      this.renderPasswordLabel(privateKey),
 
-        this.renderPasswordInput(privateKey),
+      this.renderPasswordInput(privateKey),
 
-        showWarning && warning ? h('span.private-key-password-error', warning) : null,
-      ]),
+      showWarning && warning ? h('span.private-key-password-error', warning) : null,
+    ]),
 
-      h('div.private-key-password-warning', this.context.t('privateKeyWarning')),
+    h('div.private-key-password-warning', this.context.t('privateKeyWarning')),
 
-      this.renderButtons(privateKey, address, hideModal),
+    this.renderButtons(privateKey, address, hideModal),
 
   ])
 }
diff --git a/ui/app/components/app/modals/index.scss b/ui/app/components/app/modals/index.scss
index 09b0bb73c..1bbfd2d07 100644
--- a/ui/app/components/app/modals/index.scss
+++ b/ui/app/components/app/modals/index.scss
@@ -9,3 +9,5 @@
 @import 'transaction-confirmed/index';
 
 @import 'metametrics-opt-in-modal/index';
+
+@import './add-to-addressbook-modal/index';
diff --git a/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
index 0335991fc..1bf7c21b5 100644
--- a/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
+++ b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import MetaFoxLogo from '../../../ui/metafox-logo'
 import PageContainerFooter from '../../../ui/page-container/page-container-footer'
 
 export default class MetaMetricsOptInModal extends Component {
@@ -20,19 +21,7 @@ export default class MetaMetricsOptInModal extends Component {
       <div className="metametrics-opt-in metametrics-opt-in-modal">
         <div className="metametrics-opt-in__main">
           <div className="metametrics-opt-in__content">
-            <div className="app-header__logo-container">
-              <img
-                className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-                src="/images/logo/metamask-logo-horizontal.svg"
-                height={30}
-              />
-              <img
-                className="app-header__metafox-logo app-header__metafox-logo--icon"
-                src="/images/logo/metamask-fox.svg"
-                height={42}
-                width={42}
-              />
-            </div>
+            <MetaFoxLogo />
             <div className="metametrics-opt-in__body-graphic">
               <img src="images/metrics-chart.svg" />
             </div>
diff --git a/ui/app/components/app/modals/modal.js b/ui/app/components/app/modals/modal.js
index 394367c46..4044ded8c 100644
--- a/ui/app/components/app/modals/modal.js
+++ b/ui/app/components/app/modals/modal.js
@@ -29,6 +29,8 @@ import MetaMetricsOptInModal from './metametrics-opt-in-modal'
 import RejectTransactions from './reject-transactions'
 import ClearApprovedOrigins from './clear-approved-origins'
 import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container'
+import ConfirmDeleteNetwork from './confirm-delete-network'
+import AddToAddressBookModal from './add-to-addressbook-modal'
 
 const modalContainerBaseStyle = {
   transform: 'translate3d(-50%, 0, 0px)',
@@ -166,6 +168,35 @@ const MODALS = {
     },
   },
 
+  ADD_TO_ADDRESSBOOK: {
+    contents: [
+      h(AddToAddressBookModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: '10%',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      borderRadius: '10px',
+    },
+    laptopModalStyle: {
+      width: '375px',
+      top: '10%',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      borderRadius: '10px',
+    },
+    contentStyle: {
+      borderRadius: '10px',
+    },
+  },
+
   ACCOUNT_DETAILS: {
     contents: [
       h(AccountDetailsModal, {}, []),
@@ -301,6 +332,19 @@ const MODALS = {
     },
   },
 
+  CONFIRM_DELETE_NETWORK: {
+    contents: h(ConfirmDeleteNetwork),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),
@@ -452,7 +496,6 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
 
 Modal.prototype.render = function () {
   const modal = MODALS[this.props.modalState.name || 'DEFAULT']
-
   const { contents: children, disableBackdropClick = false } = modal
   const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
   const contentStyle = modal.contentStyle || {}
diff --git a/ui/app/components/app/modals/new-account-modal.js b/ui/app/components/app/modals/new-account-modal.js
index 27c81a701..4b18c52ba 100644
--- a/ui/app/components/app/modals/new-account-modal.js
+++ b/ui/app/components/app/modals/new-account-modal.js
@@ -69,7 +69,7 @@ NewAccountModal.propTypes = {
   showImportPage: PropTypes.func,
   createAccount: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
-    t: PropTypes.func,
+  t: PropTypes.func,
 }
 
 const mapStateToProps = state => {
diff --git a/ui/app/components/app/modals/notification-modal.js b/ui/app/components/app/modals/notification-modal.js
index b8503ec1a..84d9004b7 100644
--- a/ui/app/components/app/modals/notification-modal.js
+++ b/ui/app/components/app/modals/notification-modal.js
@@ -62,7 +62,7 @@ NotificationModal.propTypes = {
   showCancelButton: PropTypes.bool,
   showConfirmButton: PropTypes.bool,
   onConfirm: PropTypes.func,
-    t: PropTypes.func,
+  t: PropTypes.func,
 }
 
 const mapDispatchToProps = dispatch => {
diff --git a/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js
index a83ba8f8e..afeaef0da 100644
--- a/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js
+++ b/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { BrowserQRCodeReader } from '@zxing/library'
-import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars
+import 'webrtc-adapter'
 import Spinner from '../../../ui/spinner'
 import WebcamUtils from '../../../../../lib/webcam-utils'
 import PageContainerFooter from '../../../ui/page-container/page-container-footer/page-container-footer.component'
@@ -75,23 +75,23 @@ export default class QrScanner extends Component {
         clearTimeout(this.permissionChecker)
         this.checkPermisisions()
         this.codeReader.decodeFromInputVideoDevice(undefined, 'video')
-        .then(content => {
-          const result = this.parseContent(content.text)
-          if (result.type !== 'unknown') {
-            this.props.qrCodeDetected(result)
-            this.stopAndClose()
-          } else {
-            this.setState({msg: this.context.t('unknownQrCode')})
-          }
-        })
-        .catch(err => {
-          if (err && err.name === 'NotAllowedError') {
-            this.setState({msg: this.context.t('youNeedToAllowCameraAccess')})
-            clearTimeout(this.permissionChecker)
-            this.needsToReinit = true
-            this.checkPermisisions()
-          }
-        })
+          .then(content => {
+            const result = this.parseContent(content.text)
+            if (result.type !== 'unknown') {
+              this.props.qrCodeDetected(result)
+              this.stopAndClose()
+            } else {
+              this.setState({msg: this.context.t('unknownQrCode')})
+            }
+          })
+          .catch(err => {
+            if (err && err.name === 'NotAllowedError') {
+              this.setState({msg: this.context.t('youNeedToAllowCameraAccess')})
+              clearTimeout(this.permissionChecker)
+              this.needsToReinit = true
+              this.checkPermisisions()
+            }
+          })
       }).catch(err => {
         console.error('[QR-SCANNER]: getVideoInputDevices threw an exception: ', err)
       })
diff --git a/ui/app/components/app/multiple-notifications/index.js b/ui/app/components/app/multiple-notifications/index.js
new file mode 100644
index 000000000..a27a65187
--- /dev/null
+++ b/ui/app/components/app/multiple-notifications/index.js
@@ -0,0 +1 @@
+export { default } from './multiple-notifications.component'
diff --git a/ui/app/components/app/multiple-notifications/index.scss b/ui/app/components/app/multiple-notifications/index.scss
new file mode 100644
index 000000000..e8d064bc0
--- /dev/null
+++ b/ui/app/components/app/multiple-notifications/index.scss
@@ -0,0 +1,78 @@
+.home-notification-wrapper--show-all,
+.home-notification-wrapper--show-first {
+  display: flex;
+  flex-direction: column;
+  width: 472px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 8px;
+
+  @media screen and (max-width: 576px) {
+    width: 340px;
+  }
+
+  .home-notification-wrapper__i-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    visibility: none;
+
+    .fa-sm {
+      display: initial;
+      position: absolute;
+      bottom: 14px;
+      left: 16px;
+      color: white;
+      cursor: pointer;
+      visibility: visible;
+
+      &:hover {
+        color: #b0d7f2;
+        font-size: 1.1rem;
+      }
+    }
+  }
+}
+
+.home-notification-wrapper--show-all {
+  justify-content: flex-end;
+  margin-bottom: 0;
+
+  .home-notification-wrapper__i-container {
+    height: 0;
+  }
+
+  > div {
+    position: relative;
+    margin-top: 8px;
+  }
+
+  .fa-sm {
+    margin-bottom: 8px;
+  }
+
+}
+
+.home-notification-wrapper--show-first {
+  > div {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    visibility: hidden;
+  }
+
+  > div:first-of-type {
+    visibility: visible;
+
+  }
+
+  .fa-sm {
+    position: relative;
+    display: initial;
+  }
+}
+
+.flipped {
+  transform: rotate(180deg);
+}
diff --git a/ui/app/components/app/multiple-notifications/multiple-notifications.component.js b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
new file mode 100644
index 000000000..040890e18
--- /dev/null
+++ b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+export default class MultipleNotifications extends PureComponent {
+  static propTypes = {
+    notifications: PropTypes.array,
+    classNames: PropTypes.array,
+  }
+
+  state = {
+    showAll: false,
+  }
+
+  render () {
+    const { showAll } = this.state
+    const { notifications, classNames = [] } = this.props
+
+    const notificationsToBeRendered = notifications.filter(notificationConfig => notificationConfig.shouldBeRendered)
+
+    if (notificationsToBeRendered.length === 0) {
+      return null
+    }
+
+    return (
+      <div
+        className={classnames(...classNames, {
+          'home-notification-wrapper--show-all': showAll,
+          'home-notification-wrapper--show-first': !showAll,
+        })}
+      >
+        { notificationsToBeRendered.map(notificationConfig => notificationConfig.component) }
+        <div
+          className="home-notification-wrapper__i-container"
+          onClick={() => this.setState({ showAll: !showAll })}
+        >
+          {notificationsToBeRendered.length > 1 ? <i className={classnames('fa fa-sm fa-sort-amount-asc', {
+            'flipped': !showAll,
+          })} /> : null}
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/app/network-display/network-display.component.js b/ui/app/components/app/network-display/network-display.component.js
index 9ef5341b0..266476267 100644
--- a/ui/app/components/app/network-display/network-display.component.js
+++ b/ui/app/components/app/network-display/network-display.component.js
@@ -39,12 +39,12 @@ export default class NetworkDisplay extends Component {
     return networkClass
       ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
       : <div
-          className="i fa fa-question-circle fa-med"
-          style={{
-            margin: '0 4px',
-            color: 'rgb(125, 128, 130)',
-          }}
-        />
+        className="i fa fa-question-circle fa-med"
+        style={{
+          margin: '0 4px',
+          color: 'rgb(125, 128, 130)',
+        }}
+      />
   }
 
   render () {
@@ -62,12 +62,12 @@ export default class NetworkDisplay extends Component {
           networkClass
             ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
             : <div
-                className="i fa fa-question-circle fa-med"
-                style={{
-                  margin: '0 4px',
-                  color: 'rgb(125, 128, 130)',
-                }}
-              />
+              className="i fa fa-question-circle fa-med"
+              style={{
+                margin: '0 4px',
+                color: 'rgb(125, 128, 130)',
+              }}
+            />
         }
         <div className="network-display__name">
           { type === 'rpc' && nickname ? nickname : this.context.t(type) }
diff --git a/ui/app/components/app/network.js b/ui/app/components/app/network.js
index e778700cd..d46906a66 100644
--- a/ui/app/components/app/network.js
+++ b/ui/app/components/app/network.js
@@ -127,19 +127,19 @@ Network.prototype.render = function () {
           default:
             return h('.network-indicator', [
               networkNumber === 'loading'
-              ? h('span.pointer.network-loading-spinner', {
-                onClick: (event) => this.props.onClick(event),
-              }, [
-                h('img', {
-                  title: context.t('attemptingConnect'),
-                  src: 'images/loading.svg',
+                ? h('span.pointer.network-loading-spinner', {
+                  onClick: (event) => this.props.onClick(event),
+                }, [
+                  h('img', {
+                    title: context.t('attemptingConnect'),
+                    src: 'images/loading.svg',
+                  }),
+                ])
+                : h('i.fa.fa-question-circle.fa-lg', {
+                  style: {
+                    color: 'rgb(125, 128, 130)',
+                  },
                 }),
-              ])
-              : h('i.fa.fa-question-circle.fa-lg', {
-                style: {
-                  color: 'rgb(125, 128, 130)',
-                },
-              }),
 
               h('.network-name', providerName === 'localhost' ? context.t('localhost') : providerNick || context.t('privateNetwork')),
               h('.network-indicator__down-arrow'),
diff --git a/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js b/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
index 0eb1d616a..7eda7f2b7 100644
--- a/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
+++ b/ui/app/components/app/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
@@ -5,7 +5,7 @@ import Identicon from '../../../ui/identicon'
 export default class ProviderPageContainerContent extends PureComponent {
   static propTypes = {
     origin: PropTypes.string.isRequired,
-    selectedIdentity: PropTypes.string.isRequired,
+    selectedIdentity: PropTypes.object.isRequired,
     siteImage: PropTypes.string,
     siteTitle: PropTypes.string.isRequired,
   }
diff --git a/ui/app/components/app/sidebars/sidebar.component.js b/ui/app/components/app/sidebars/sidebar.component.js
index b9e0f9e81..e532ba7e5 100644
--- a/ui/app/components/app/sidebars/sidebar.component.js
+++ b/ui/app/components/app/sidebars/sidebar.component.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
 import WalletView from '../wallet-view'
 import { WALLET_VIEW_SIDEBAR } from './sidebar.constants'
 import CustomizeGas from '../gas-customization/gas-modal-page-container/'
@@ -26,7 +26,7 @@ export default class Sidebar extends Component {
         onOverlayClose && onOverlayClose()
         this.props.hideSidebar()
       }
-    } />
+      } />
   }
 
   renderSidebarContent () {
diff --git a/ui/app/components/app/sidebars/tests/sidebars-component.test.js b/ui/app/components/app/sidebars/tests/sidebars-component.test.js
index cee22aca8..e2daea9b6 100644
--- a/ui/app/components/app/sidebars/tests/sidebars-component.test.js
+++ b/ui/app/components/app/sidebars/tests/sidebars-component.test.js
@@ -2,7 +2,7 @@ import React from 'react'
 import assert from 'assert'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
 import Sidebar from '../sidebar.component.js'
 
 import WalletView from '../../wallet-view'
diff --git a/ui/app/components/app/signature-request.js b/ui/app/components/app/signature-request.js
index fa237f1d1..9c0f53f57 100644
--- a/ui/app/components/app/signature-request.js
+++ b/ui/app/components/app/signature-request.js
@@ -12,7 +12,7 @@ const { compose } = require('recompose')
 const { withRouter } = require('react-router-dom')
 const { ObjectInspector } = require('react-inspector')
 
-import AccountDropdownMini from '../ui/account-dropdown-mini'
+import AccountListItem from '../../pages/send/account-list-item/account-list-item.component'
 
 const actions = require('../../store/actions')
 const { conversionUtil } = require('../../helpers/utils/conversion-util')
@@ -21,7 +21,6 @@ const {
   getSelectedAccount,
   getCurrentAccountWithSendEtherInfo,
   getSelectedAddress,
-  accountsWithSendEtherInfoSelector,
   conversionRateSelector,
 } = require('../../selectors/selectors.js')
 
@@ -37,7 +36,6 @@ function mapStateToProps (state) {
     selectedAddress: getSelectedAddress(state),
     requester: null,
     requesterAddress: null,
-    accounts: accountsWithSendEtherInfoSelector(state),
     conversionRate: conversionRateSelector(state),
   }
 }
@@ -76,9 +74,9 @@ function mergeProps (stateProps, dispatchProps, ownProps) {
   }
 
   return {
+    ...ownProps,
     ...stateProps,
     ...dispatchProps,
-    ...ownProps,
     txData,
     cancel,
     sign,
@@ -137,23 +135,19 @@ SignatureRequest.prototype.renderHeader = function () {
   ])
 }
 
-SignatureRequest.prototype.renderAccountDropdown = function () {
+SignatureRequest.prototype.renderAccount = function () {
   const { selectedAccount } = this.state
 
-  const {
-    accounts,
-  } = this.props
-
   return h('div.request-signature__account', [
 
     h('div.request-signature__account-text', [this.context.t('account') + ':']),
 
-    h(AccountDropdownMini, {
-      selectedAccount,
-      accounts,
-      disabled: true,
-    }),
-
+    h('div.request-signature__account-item', [
+      h(AccountListItem, {
+        account: selectedAccount,
+        displayBalance: false,
+      }),
+    ]),
   ])
 }
 
@@ -180,7 +174,7 @@ SignatureRequest.prototype.renderBalance = function () {
 SignatureRequest.prototype.renderAccountInfo = function () {
   return h('div.request-signature__account-info', [
 
-    this.renderAccountDropdown(),
+    this.renderAccount(),
 
     this.renderRequestIcon(),
 
@@ -257,7 +251,7 @@ SignatureRequest.prototype.renderBody = function () {
             url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
           })
         },
-    }, this.context.t('learnMore'))]
+      }, this.context.t('learnMore'))]
   }
 
   return h('div.request-signature__body', {}, [
diff --git a/ui/app/components/app/token-list.js b/ui/app/components/app/token-list.js
index 2188e7020..000ca6b3f 100644
--- a/ui/app/components/app/token-list.js
+++ b/ui/app/components/app/token-list.js
@@ -67,8 +67,8 @@ TokenList.prototype.render = function () {
         },
         onClick: () => {
           global.platform.openWindow({
-          url: `https://ethplorer.io/address/${userAddress}`,
-        })
+            url: `https://ethplorer.io/address/${userAddress}`,
+          })
         },
       }, this.context.t('here')),
     ])
@@ -125,13 +125,13 @@ TokenList.prototype.createFreshTokenTracker = function () {
   this.tracker.on('error', this.showError)
 
   this.tracker.updateBalances()
-  .then(() => {
-    this.updateBalances(this.tracker.serialize())
-  })
-  .catch((reason) => {
-    log.error(`Problem updating balances`, reason)
-    this.setState({ isLoading: false })
-  })
+    .then(() => {
+      this.updateBalances(this.tracker.serialize())
+    })
+    .catch((reason) => {
+      log.error(`Problem updating balances`, reason)
+      this.setState({ isLoading: false })
+    })
 }
 
 TokenList.prototype.componentDidUpdate = function (prevProps) {
diff --git a/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js b/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
index 871716002..6124325be 100644
--- a/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
+++ b/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
@@ -40,15 +40,15 @@ export default class TransactionActivityLogIcon extends PureComponent {
 
     return (
       <div className={classnames('transaction-activity-log-icon', className)}>
-      {
-        imagePath && (
-          <img
-            src={imagePath}
-            height={9}
-            width={9}
-          />
-        )
-      }
+        {
+          imagePath && (
+            <img
+              src={imagePath}
+              height={9}
+              width={9}
+            />
+          )
+        }
       </div>
     )
   }
diff --git a/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
index c4e118b01..583980d26 100644
--- a/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
+++ b/ui/app/components/app/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
@@ -78,4 +78,73 @@ describe('TransactionListItemDetails Component', () => {
     assert.ok(wrapper.hasClass('transaction-list-item-details'))
     assert.equal(wrapper.find(Button).length, 3)
   })
+
+  it('should disable the Copy Tx ID and View In Etherscan buttons when tx hash is missing', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const transactionGroup = {
+      transactions: [transaction],
+      primaryTransaction: transaction,
+      initialTransaction: transaction,
+    }
+
+    const wrapper = shallow(
+      <TransactionListItemDetails
+        transactionGroup={transactionGroup}
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-list-item-details'))
+    const buttons = wrapper.find(Button)
+    assert.strictEqual(buttons.at(0).prop('disabled'), true)
+    assert.strictEqual(buttons.at(1).prop('disabled'), true)
+  })
+
+  it('should render functional Copy Tx ID and View In Etherscan buttons when tx hash exists', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      hash: '0xaa',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const transactionGroup = {
+      transactions: [transaction],
+      primaryTransaction: transaction,
+      initialTransaction: transaction,
+    }
+
+    const wrapper = shallow(
+      <TransactionListItemDetails
+        transactionGroup={transactionGroup}
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-list-item-details'))
+    const buttons = wrapper.find(Button)
+    assert.strictEqual(buttons.at(0).prop('disabled'), false)
+    assert.strictEqual(buttons.at(1).prop('disabled'), false)
+  })
 })
diff --git a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
index 72ca784e2..d8dd965fc 100644
--- a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@@ -128,7 +128,7 @@ export default class TransactionListItemDetails extends PureComponent {
       rpcPrefs: { blockExplorerUrl } = {},
     } = this.props
     const { primaryTransaction: transaction } = transactionGroup
-    const { txParams: { to, from } = {} } = transaction
+    const { hash, txParams: { to, from } = {} } = transaction
 
     return (
       <div className="transaction-list-item-details">
@@ -152,6 +152,7 @@ export default class TransactionListItemDetails extends PureComponent {
                 type="raised"
                 onClick={this.handleCopyTxId}
                 className="transaction-list-item-details__header-button"
+                disabled={!hash}
               >
                 <img
                   className="transaction-list-item-details__header-button__copy-icon"
@@ -164,7 +165,8 @@ export default class TransactionListItemDetails extends PureComponent {
                 type="raised"
                 onClick={this.handleEtherscanClick}
                 className="transaction-list-item-details__header-button"
-                >
+                disabled={!hash}
+              >
                 <img src="/images/arrow-popout.svg" />
               </Button>
             </Tooltip>
diff --git a/ui/app/components/app/transaction-list/transaction-list.component.js b/ui/app/components/app/transaction-list/transaction-list.component.js
index fc5488884..157e7200b 100644
--- a/ui/app/components/app/transaction-list/transaction-list.component.js
+++ b/ui/app/components/app/transaction-list/transaction-list.component.js
@@ -10,11 +10,13 @@ export default class TransactionList extends PureComponent {
   }
 
   static defaultProps = {
+    children: null,
     pendingTransactions: [],
     completedTransactions: [],
   }
 
   static propTypes = {
+    children: PropTypes.node,
     pendingTransactions: PropTypes.array,
     completedTransactions: PropTypes.array,
     selectedToken: PropTypes.object,
@@ -39,7 +41,7 @@ export default class TransactionList extends PureComponent {
     const { transactions = [], hasRetried } = transactionGroup
     const [earliestTransaction = {}] = transactions
     const { submittedTime } = earliestTransaction
-    return Date.now() - submittedTime > 30000 && isEarliestNonce && !hasRetried
+    return Date.now() - submittedTime > 5000 && isEarliestNonce && !hasRetried
   }
 
   shouldShowCancel (transactionGroup) {
@@ -75,8 +77,8 @@ export default class TransactionList extends PureComponent {
           {
             completedTransactions.length > 0
               ? completedTransactions.map((transactionGroup, index) => (
-                  this.renderTransaction(transactionGroup, index)
-                ))
+                this.renderTransaction(transactionGroup, index)
+              ))
               : this.renderEmpty()
           }
         </div>
@@ -120,6 +122,7 @@ export default class TransactionList extends PureComponent {
     return (
       <div className="transaction-list">
         { this.renderTransactions() }
+        { this.props.children }
       </div>
     )
   }
diff --git a/ui/app/components/app/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss
index 024cbf2a1..99884d28c 100644
--- a/ui/app/components/app/transaction-status/index.scss
+++ b/ui/app/components/app/transaction-status/index.scss
@@ -43,4 +43,10 @@
       border: 1px solid $monzo;
     }
   }
+
+  &__pending-spinner {
+    height: 16px;
+    width: 16px;
+    margin-right: 6px;
+  }
 }
diff --git a/ui/app/components/app/transaction-status/transaction-status.component.js b/ui/app/components/app/transaction-status/transaction-status.component.js
index d3a239539..a97b79bde 100644
--- a/ui/app/components/app/transaction-status/transaction-status.component.js
+++ b/ui/app/components/app/transaction-status/transaction-status.component.js
@@ -2,6 +2,8 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Tooltip from '../../ui/tooltip-v2'
+import Spinner from '../../ui/spinner'
+
 import {
   UNAPPROVED_STATUS,
   REJECTED_STATUS,
@@ -51,6 +53,7 @@ export default class TransactionStatus extends PureComponent {
 
     return (
       <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}>
+        { statusToTextHash[statusKey] === 'pending' ? <Spinner className="transaction-status__pending-spinner" /> : null }
         <Tooltip
           position="top"
           title={title}
diff --git a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
index 3f6abbb00..feb701dbe 100644
--- a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
+++ b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
@@ -43,38 +43,38 @@ export default class TransactionViewBalance extends PureComponent {
           />
         </div>
       ) : (
-          <Tooltip position="top" title={this.context.t('balanceOutdated')} disabled={!balanceIsCached}>
-            <div className="transaction-view-balance__balance">
-                <div className="transaction-view-balance__primary-container">
-                  <UserPreferencedCurrencyDisplay
-                    className={classnames('transaction-view-balance__primary-balance', {
-                      'transaction-view-balance__cached-balance': balanceIsCached,
-                    })}
-                    value={balance}
-                    type={PRIMARY}
-                    ethNumberOfDecimals={4}
-                    hideTitle={true}
-                  />
-                  {
-                    balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null
-                  }
-                </div>
-                {
-                  showFiat && (
-                    <UserPreferencedCurrencyDisplay
-                      className={classnames({
-                        'transaction-view-balance__cached-secondary-balance': balanceIsCached,
-                        'transaction-view-balance__secondary-balance': !balanceIsCached,
-                      })}
-                      value={balance}
-                      type={SECONDARY}
-                      ethNumberOfDecimals={4}
-                      hideTitle={true}
-                    />
-                  )
-                }
+        <Tooltip position="top" title={this.context.t('balanceOutdated')} disabled={!balanceIsCached}>
+          <div className="transaction-view-balance__balance">
+            <div className="transaction-view-balance__primary-container">
+              <UserPreferencedCurrencyDisplay
+                className={classnames('transaction-view-balance__primary-balance', {
+                  'transaction-view-balance__cached-balance': balanceIsCached,
+                })}
+                value={balance}
+                type={PRIMARY}
+                ethNumberOfDecimals={4}
+                hideTitle={true}
+              />
+              {
+                balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null
+              }
             </div>
-          </Tooltip>
+            {
+              showFiat && (
+                <UserPreferencedCurrencyDisplay
+                  className={classnames({
+                    'transaction-view-balance__cached-secondary-balance': balanceIsCached,
+                    'transaction-view-balance__secondary-balance': !balanceIsCached,
+                  })}
+                  value={balance}
+                  type={SECONDARY}
+                  ethNumberOfDecimals={4}
+                  hideTitle={true}
+                />
+              )
+            }
+          </div>
+        </Tooltip>
       )
   }
 
diff --git a/ui/app/components/app/transaction-view/transaction-view.component.js b/ui/app/components/app/transaction-view/transaction-view.component.js
index 7014ca173..fb2c2145c 100644
--- a/ui/app/components/app/transaction-view/transaction-view.component.js
+++ b/ui/app/components/app/transaction-view/transaction-view.component.js
@@ -10,6 +10,14 @@ export default class TransactionView extends PureComponent {
     t: PropTypes.func,
   }
 
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  static defaultProps = {
+    children: null,
+  }
+
   render () {
     return (
       <div className="transaction-view">
@@ -20,7 +28,9 @@ export default class TransactionView extends PureComponent {
         <div className="transaction-view__balance-wrapper">
           <TransactionViewBalance />
         </div>
-        <TransactionList />
+        <TransactionList>
+          { this.props.children }
+        </TransactionList>
       </div>
     )
   }
diff --git a/ui/app/components/app/ui-migration-annoucement/index.js b/ui/app/components/app/ui-migration-annoucement/index.js
deleted file mode 100644
index c6c8cc619..000000000
--- a/ui/app/components/app/ui-migration-annoucement/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {default} from './ui-migration-announcement.container'
diff --git a/ui/app/components/app/ui-migration-annoucement/index.scss b/ui/app/components/app/ui-migration-annoucement/index.scss
deleted file mode 100644
index 6138a3079..000000000
--- a/ui/app/components/app/ui-migration-annoucement/index.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.ui-migration-announcement {
-  position: absolute;
-  z-index: 9999;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: $white;
-
-  p {
-    box-sizing: border-box;
-    padding: 1em;
-    font-size: 12pt;
-  }
-
-  p:last-of-type {
-    cursor: pointer;
-    text-decoration: underline;
-    font-weight: bold;
-  }
-}
diff --git a/ui/app/components/app/ui-migration-annoucement/ui-migration-annoucement.component.js b/ui/app/components/app/ui-migration-annoucement/ui-migration-annoucement.component.js
deleted file mode 100644
index 7a4124972..000000000
--- a/ui/app/components/app/ui-migration-annoucement/ui-migration-annoucement.component.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import PropTypes from 'prop-types'
-import React, {PureComponent} from 'react'
-
-export default class UiMigrationAnnouncement extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func.isRequired,
-  }
-
-  static defaultProps = {
-    shouldShowAnnouncement: true,
-  };
-
-  static propTypes = {
-    onClose: PropTypes.func.isRequired,
-    shouldShowAnnouncement: PropTypes.bool,
-  }
-
-  render () {
-    const { t } = this.context
-    const { onClose, shouldShowAnnouncement } = this.props
-
-    if (!shouldShowAnnouncement) {
-      return null
-    }
-
-    return (
-      <div className="ui-migration-announcement">
-        <p>{t('uiMigrationAnnouncement')}</p>
-        <p onClick={onClose}>{t('close')}</p>
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/app/ui-migration-annoucement/ui-migration-announcement.container.js b/ui/app/components/app/ui-migration-annoucement/ui-migration-announcement.container.js
deleted file mode 100644
index 55efd5a44..000000000
--- a/ui/app/components/app/ui-migration-annoucement/ui-migration-announcement.container.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { connect } from 'react-redux'
-import UiMigrationAnnouncement from './ui-migration-annoucement.component'
-import { setCompletedUiMigration } from '../../../store/actions'
-
-const mapStateToProps = (state) => {
-  const shouldShowAnnouncement = !state.metamask.completedUiMigration
-
-  return {
-    shouldShowAnnouncement,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    onClose () {
-      dispatch(setCompletedUiMigration())
-    },
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(UiMigrationAnnouncement)
diff --git a/ui/app/components/app/wallet-view.js b/ui/app/components/app/wallet-view.js
index b8bae5421..55aeec333 100644
--- a/ui/app/components/app/wallet-view.js
+++ b/ui/app/components/app/wallet-view.js
@@ -5,12 +5,8 @@ const h = require('react-hyperscript')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
 const inherits = require('util').inherits
-const classnames = require('classnames')
 const { checksumAddress } = require('../../helpers/utils/util')
-import Identicon from '../ui/identicon'
 // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
-const Tooltip = require('../ui/tooltip-v2.js').default
-const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../../store/actions')
 import BalanceComponent from '../ui/balance'
 const TokenList = require('./token-list')
@@ -18,6 +14,7 @@ const selectors = require('../../selectors/selectors')
 const { ADD_TOKEN_ROUTE } = require('../../helpers/constants/routes')
 
 import AddTokenButton from './add-token-button'
+import AccountDetails from './account-details'
 
 module.exports = compose(
   withRouter,
@@ -52,9 +49,6 @@ function mapDispatchToProps (dispatch) {
     showSendPage: () => dispatch(actions.showSendPage()),
     hideSidebar: () => dispatch(actions.hideSidebar()),
     unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
-    showAccountDetailModal: () => {
-      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
-    },
     showAddTokenPage: () => dispatch(actions.showAddTokenPage()),
   }
 }
@@ -62,10 +56,6 @@ function mapDispatchToProps (dispatch) {
 inherits(WalletView, Component)
 function WalletView () {
   Component.call(this)
-  this.state = {
-    hasCopied: false,
-    copyToClipboardPressed: false,
-  }
 }
 
 WalletView.prototype.renderWalletBalance = function () {
@@ -130,8 +120,6 @@ WalletView.prototype.render = function () {
     responsiveDisplayClassname,
     selectedAddress,
     keyrings,
-    showAccountDetailModal,
-    hideSidebar,
     identities,
     network,
   } = this.props
@@ -165,67 +153,11 @@ WalletView.prototype.render = function () {
     className: responsiveDisplayClassname,
   }, [
 
-    // TODO: Separate component: wallet account details
-    h('div.flex-column.wallet-view-account-details', {
-      style: {},
-    }, [
-      h('div.wallet-view__sidebar-close', {
-        onClick: hideSidebar,
-      }),
-
-      h('div.wallet-view__keyring-label.allcaps', label),
-
-      h('div.flex-column.flex-center.wallet-view__name-container', {
-        style: { margin: '0 auto' },
-        onClick: showAccountDetailModal,
-      }, [
-        h(Identicon, {
-          diameter: 54,
-          address: checksummedAddress,
-        }),
-
-        h('span.account-name', {
-          style: {},
-        }, [
-          identities[selectedAddress].name,
-        ]),
-
-        h('button.btn-secondary.wallet-view__details-button', this.context.t('details')),
-      ]),
-    ]),
-
-    h(Tooltip, {
-      position: 'bottom',
-      title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'),
-      wrapperClassName: 'wallet-view__tooltip',
-    }, [
-      h('button.wallet-view__address', {
-        className: classnames({
-          'wallet-view__address__pressed': this.state.copyToClipboardPressed,
-        }),
-        onClick: () => {
-          copyToClipboard(checksummedAddress)
-          this.context.metricsEvent({
-            eventOpts: {
-              category: 'Navigation',
-              action: 'Home',
-              name: 'Copied Address',
-            },
-          })
-          this.setState({ hasCopied: true })
-          setTimeout(() => this.setState({ hasCopied: false }), 3000)
-        },
-        onMouseDown: () => {
-          this.setState({ copyToClipboardPressed: true })
-        },
-        onMouseUp: () => {
-          this.setState({ copyToClipboardPressed: false })
-        },
-      }, [
-        `${checksummedAddress.slice(0, 6)}...${checksummedAddress.slice(-4)}`,
-        h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
-      ]),
-    ]),
+    h(AccountDetails, {
+      label,
+      checksummedAddress,
+      name: identities[selectedAddress].name,
+    }),
 
     this.renderWalletBalance(),
 
diff --git a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js b/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js
deleted file mode 100644
index d9627e31b..000000000
--- a/ui/app/components/ui/account-dropdown-mini/account-dropdown-mini.component.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import AccountListItem from '../../../pages/send/account-list-item/account-list-item.component'
-
-export default class AccountDropdownMini extends PureComponent {
-  static propTypes = {
-    accounts: PropTypes.array.isRequired,
-    closeDropdown: PropTypes.func,
-    disabled: PropTypes.bool,
-    dropdownOpen: PropTypes.bool,
-    onSelect: PropTypes.func,
-    openDropdown: PropTypes.func,
-    selectedAccount: PropTypes.object.isRequired,
-  }
-
-  static defaultProps = {
-    closeDropdown: () => {},
-    disabled: false,
-    dropdownOpen: false,
-    onSelect: () => {},
-    openDropdown: () => {},
-  }
-
-  getListItemIcon (currentAccount, selectedAccount) {
-    return currentAccount.address === selectedAccount.address && (
-      <i
-        className="fa fa-check fa-lg"
-        style={{ color: '#02c9b1' }}
-      />
-    )
-  }
-
-  renderDropdown () {
-    const { accounts, selectedAccount, closeDropdown, onSelect } = this.props
-
-    return (
-      <div>
-        <div
-          className="account-dropdown-mini__close-area"
-          onClick={closeDropdown}
-        />
-        <div className="account-dropdown-mini__list">
-          {
-            accounts.map(account => (
-              <AccountListItem
-                key={account.address}
-                account={account}
-                displayBalance={false}
-                displayAddress={false}
-                handleClick={() => {
-                  onSelect(account)
-                  closeDropdown()
-                }}
-                icon={this.getListItemIcon(account, selectedAccount)}
-              />
-            ))
-          }
-        </div>
-      </div>
-    )
-  }
-
-  render () {
-    const { disabled, selectedAccount, openDropdown, dropdownOpen } = this.props
-
-    return (
-      <div className="account-dropdown-mini">
-        <AccountListItem
-          account={selectedAccount}
-          handleClick={() => !disabled && openDropdown()}
-          displayBalance={false}
-          displayAddress={false}
-          icon={
-            !disabled && <i
-              className="fa fa-caret-down fa-lg"
-              style={{ color: '#dedede' }}
-            />
-          }
-        />
-        { !disabled && dropdownOpen && this.renderDropdown() }
-      </div>
-    )
-  }
-}
diff --git a/ui/app/components/ui/account-dropdown-mini/index.js b/ui/app/components/ui/account-dropdown-mini/index.js
deleted file mode 100644
index cb0839e72..000000000
--- a/ui/app/components/ui/account-dropdown-mini/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './account-dropdown-mini.component'
diff --git a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js b/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
deleted file mode 100644
index 9691f38aa..000000000
--- a/ui/app/components/ui/account-dropdown-mini/tests/account-dropdown-mini.component.test.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import AccountDropdownMini from '../account-dropdown-mini.component'
-import AccountListItem from '../../../../pages/send/account-list-item/account-list-item.component'
-
-describe('AccountDropdownMini', () => {
-  it('should render an account with an icon', () => {
-    const accounts = [
-      {
-        address: '0x1',
-        name: 'account1',
-        balance: '0x1',
-      },
-      {
-        address: '0x2',
-        name: 'account2',
-        balance: '0x2',
-      },
-      {
-        address: '0x3',
-        name: 'account3',
-        balance: '0x3',
-      },
-    ]
-
-    const wrapper = shallow(
-      <AccountDropdownMini
-        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
-        accounts={accounts}
-      />
-    )
-
-    assert.ok(wrapper)
-    assert.equal(wrapper.find(AccountListItem).length, 1)
-    const accountListItemProps = wrapper.find(AccountListItem).at(0).props()
-    assert.equal(accountListItemProps.account.address, '0x1')
-    const iconProps = accountListItemProps.icon.props
-    assert.equal(iconProps.className, 'fa fa-caret-down fa-lg')
-  })
-
-  it('should render a list of accounts', () => {
-    const accounts = [
-      {
-        address: '0x1',
-        name: 'account1',
-        balance: '0x1',
-      },
-      {
-        address: '0x2',
-        name: 'account2',
-        balance: '0x2',
-      },
-      {
-        address: '0x3',
-        name: 'account3',
-        balance: '0x3',
-      },
-    ]
-
-    const wrapper = shallow(
-      <AccountDropdownMini
-        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
-        accounts={accounts}
-        dropdownOpen={true}
-      />
-    )
-
-    assert.ok(wrapper)
-    assert.equal(wrapper.find(AccountListItem).length, 4)
-  })
-
-  it('should render a single account when disabled', () => {
-    const accounts = [
-      {
-        address: '0x1',
-        name: 'account1',
-        balance: '0x1',
-      },
-      {
-        address: '0x2',
-        name: 'account2',
-        balance: '0x2',
-      },
-      {
-        address: '0x3',
-        name: 'account3',
-        balance: '0x3',
-      },
-    ]
-
-    const wrapper = shallow(
-      <AccountDropdownMini
-        selectedAccount={{ address: '0x1', name: 'account1', balance: '0x1' }}
-        accounts={accounts}
-        dropdownOpen={false}
-        disabled={true}
-      />
-    )
-
-    assert.ok(wrapper)
-    assert.equal(wrapper.find(AccountListItem).length, 1)
-    const accountListItemProps = wrapper.find(AccountListItem).at(0).props()
-    assert.equal(accountListItemProps.account.address, '0x1')
-    assert.equal(accountListItemProps.icon, false)
-  })
-})
diff --git a/ui/app/components/ui/alert/index.js b/ui/app/components/ui/alert/index.js
index b1229f502..da2ca4b66 100644
--- a/ui/app/components/ui/alert/index.js
+++ b/ui/app/components/ui/alert/index.js
@@ -4,59 +4,59 @@ const h = require('react-hyperscript')
 
 class Alert extends Component {
 
-    constructor (props) {
-      super(props)
-
-      this.state = {
-        visble: false,
-        msg: false,
-        className: '',
-      }
-    }
-
-    componentWillReceiveProps (nextProps) {
-      if (!this.props.visible && nextProps.visible) {
-        this.animateIn(nextProps)
-      } else if (this.props.visible && !nextProps.visible) {
-        this.animateOut()
-      }
-    }
+  constructor (props) {
+    super(props)
 
-    animateIn (props) {
-      this.setState({
-        msg: props.msg,
-        visible: true,
-        className: '.visible',
-      })
+    this.state = {
+      visble: false,
+      msg: false,
+      className: '',
     }
+  }
 
-    animateOut () {
-      this.setState({
-        msg: null,
-        className: '.hidden',
-      })
-
-      setTimeout(_ => {
-        this.setState({visible: false})
-      }, 500)
-
+  componentWillReceiveProps (nextProps) {
+    if (!this.props.visible && nextProps.visible) {
+      this.animateIn(nextProps)
+    } else if (this.props.visible && !nextProps.visible) {
+      this.animateOut()
     }
-
-    render () {
-        if (this.state.visible) {
-          return (
-              h(`div.global-alert${this.state.className}`, {},
-                h('a.msg', {}, this.state.msg)
-              )
-          )
-        }
-        return null
+  }
+
+  animateIn (props) {
+    this.setState({
+      msg: props.msg,
+      visible: true,
+      className: '.visible',
+    })
+  }
+
+  animateOut () {
+    this.setState({
+      msg: null,
+      className: '.hidden',
+    })
+
+    setTimeout(_ => {
+      this.setState({visible: false})
+    }, 500)
+
+  }
+
+  render () {
+    if (this.state.visible) {
+      return (
+        h(`div.global-alert${this.state.className}`, {},
+          h('a.msg', {}, this.state.msg)
+        )
+      )
     }
+    return null
+  }
 }
 
 Alert.propTypes = {
-    visible: PropTypes.bool.isRequired,
-    msg: PropTypes.string,
+  visible: PropTypes.bool.isRequired,
+  msg: PropTypes.string,
 }
 module.exports = Alert
 
diff --git a/ui/app/components/ui/button-group/tests/button-group-component.test.js b/ui/app/components/ui/button-group/tests/button-group-component.test.js
index 0bece90d6..f2e512445 100644
--- a/ui/app/components/ui/button-group/tests/button-group-component.test.js
+++ b/ui/app/components/ui/button-group/tests/button-group-component.test.js
@@ -59,40 +59,40 @@ describe('ButtonGroup Component', function () {
 
   describe('renderButtons', () => {
     it('should render a button for each child', () => {
-        const childButtons = wrapper.find('.button-group__button')
-        assert.equal(childButtons.length, 3)
+      const childButtons = wrapper.find('.button-group__button')
+      assert.equal(childButtons.length, 3)
     })
 
     it('should render the correct button with an active state', () => {
-        const childButtons = wrapper.find('.button-group__button')
-        const activeChildButton = wrapper.find('.button-group__button--active')
-        assert.deepEqual(childButtons.get(1), activeChildButton.get(0))
+      const childButtons = wrapper.find('.button-group__button')
+      const activeChildButton = wrapper.find('.button-group__button--active')
+      assert.deepEqual(childButtons.get(1), activeChildButton.get(0))
     })
 
     it('should call handleButtonClick and the respective button\'s onClick method when a button is clicked', () => {
-        assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 0)
-        assert.equal(childButtonSpies.onClick.callCount, 0)
-        const childButtons = wrapper.find('.button-group__button')
-        childButtons.at(0).props().onClick()
-        childButtons.at(1).props().onClick()
-        childButtons.at(2).props().onClick()
-        assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 3)
-        assert.equal(childButtonSpies.onClick.callCount, 3)
+      assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 0)
+      assert.equal(childButtonSpies.onClick.callCount, 0)
+      const childButtons = wrapper.find('.button-group__button')
+      childButtons.at(0).props().onClick()
+      childButtons.at(1).props().onClick()
+      childButtons.at(2).props().onClick()
+      assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 3)
+      assert.equal(childButtonSpies.onClick.callCount, 3)
     })
 
     it('should render all child buttons as disabled if props.disabled is true', () => {
-        const childButtons = wrapper.find('.button-group__button')
-        childButtons.forEach(button => {
-            assert.equal(button.props().disabled, undefined)
-        })
-        wrapper.setProps({ disabled: true })
-        const disabledChildButtons = wrapper.find('[disabled=true]')
-        assert.equal(disabledChildButtons.length, 3)
+      const childButtons = wrapper.find('.button-group__button')
+      childButtons.forEach(button => {
+        assert.equal(button.props().disabled, undefined)
+      })
+      wrapper.setProps({ disabled: true })
+      const disabledChildButtons = wrapper.find('[disabled=true]')
+      assert.equal(disabledChildButtons.length, 3)
     })
 
     it('should render the children of the button', () => {
-        const mockClass = wrapper.find('.mockClass')
-        assert.equal(mockClass.length, 1)
+      const mockClass = wrapper.find('.mockClass')
+      assert.equal(mockClass.length, 1)
     })
   })
 
@@ -103,9 +103,9 @@ describe('ButtonGroup Component', function () {
     })
 
     it('should call renderButtons when rendering', () => {
-        assert.equal(ButtonGroup.prototype.renderButtons.callCount, 1)
-        wrapper.instance().render()
-        assert.equal(ButtonGroup.prototype.renderButtons.callCount, 2)
+      assert.equal(ButtonGroup.prototype.renderButtons.callCount, 1)
+      wrapper.instance().render()
+      assert.equal(ButtonGroup.prototype.renderButtons.callCount, 2)
     })
   })
 })
diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss
index f1366cffe..f6388fa47 100644
--- a/ui/app/components/ui/button/buttons.scss
+++ b/ui/app/components/ui/button/buttons.scss
@@ -22,7 +22,6 @@ $hover-orange: #FFD3B5;
   box-sizing: border-box;
   border-radius: 6px;
   width: 100%;
-  outline: none;
   transition: border-color .3s ease, background-color .3s ease;
 
   &--disabled,
diff --git a/ui/app/components/ui/currency-input/currency-input.component.js b/ui/app/components/ui/currency-input/currency-input.component.js
index 1876c9591..f7db2b829 100644
--- a/ui/app/components/ui/currency-input/currency-input.component.js
+++ b/ui/app/components/ui/currency-input/currency-input.component.js
@@ -141,22 +141,22 @@ export default class CurrencyInput extends PureComponent {
     const { decimalValue } = this.state
 
     return (
-        <UnitInput
-          {...restProps}
-          suffix={this.shouldUseFiat() ? fiatSuffix : nativeSuffix}
-          onChange={this.handleChange}
-          onBlur={this.handleBlur}
-          value={decimalValue}
-          maxModeOn={maxModeOn}
-          actionComponent={(
-            <div
-              className="currency-input__swap-component"
-              onClick={this.swap}
-            />
-          )}
-        >
-          { this.renderConversionComponent() }
-        </UnitInput>
+      <UnitInput
+        {...restProps}
+        suffix={this.shouldUseFiat() ? fiatSuffix : nativeSuffix}
+        onChange={this.handleChange}
+        onBlur={this.handleBlur}
+        value={decimalValue}
+        maxModeOn={maxModeOn}
+        actionComponent={(
+          <div
+            className="currency-input__swap-component"
+            onClick={this.swap}
+          />
+        )}
+      >
+        { this.renderConversionComponent() }
+      </UnitInput>
     )
   }
 }
diff --git a/ui/app/components/ui/dialog/dialog.scss b/ui/app/components/ui/dialog/dialog.scss
new file mode 100644
index 000000000..68b5ce329
--- /dev/null
+++ b/ui/app/components/ui/dialog/dialog.scss
@@ -0,0 +1,26 @@
+.dialog {
+  font-size: .75rem;
+  line-height: 1rem;
+  padding: 1rem;
+  border: 1px solid $black;
+  box-sizing: border-box;
+  border-radius: 8px;
+
+  &--message {
+    border-color: $Blue-200;
+    color: $Blue-600;
+    background-color: $Blue-000;
+  }
+
+  &--error {
+    border-color: $Red-300;
+    color: $Red-600;
+    background-color: $Red-000;
+  }
+
+  &--warning {
+    border-color: $Orange-300;
+    color: $Orange-600;
+    background-color: $Orange-000;
+  }
+}
diff --git a/ui/app/components/ui/dialog/index.js b/ui/app/components/ui/dialog/index.js
new file mode 100644
index 000000000..d7e522b22
--- /dev/null
+++ b/ui/app/components/ui/dialog/index.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import c from 'classnames'
+
+export default function Dialog (props) {
+  const { children, type, className, onClick } = props
+  return (
+    <div
+      className={c('dialog', className, {
+        'dialog--message': type === 'message',
+        'dialog--error': type === 'error',
+        'dialog--warning': type === 'warning',
+      })}
+      onClick={onClick}
+    >
+      { children }
+    </div>
+  )
+}
+
+Dialog.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  type: PropTypes.oneOf(['message', 'error', 'warning']),
+  onClick: PropTypes.func,
+}
diff --git a/ui/app/components/ui/identicon/identicon.component.js b/ui/app/components/ui/identicon/identicon.component.js
index 88521247c..5582c7d12 100644
--- a/ui/app/components/ui/identicon/identicon.component.js
+++ b/ui/app/components/ui/identicon/identicon.component.js
@@ -16,6 +16,7 @@ const getStyles = diameter => (
 
 export default class Identicon extends PureComponent {
   static propTypes = {
+    addBorder: PropTypes.bool,
     address: PropTypes.string,
     className: PropTypes.string,
     diameter: PropTypes.number,
@@ -70,7 +71,7 @@ export default class Identicon extends PureComponent {
   }
 
   render () {
-    const { className, address, image, diameter, useBlockie } = this.props
+    const { className, address, image, diameter, useBlockie, addBorder } = this.props
 
     if (image) {
       return this.renderImage()
@@ -83,9 +84,11 @@ export default class Identicon extends PureComponent {
         return this.renderJazzicon()
       }
 
-      return useBlockie
-        ? this.renderBlockie()
-        : this.renderJazzicon()
+      return (
+        <div className={classnames({ 'identicon__address-wrapper': addBorder })}>
+          { useBlockie ? this.renderBlockie() : this.renderJazzicon() }
+        </div>
+      )
     }
 
     return (
diff --git a/ui/app/components/ui/identicon/index.scss b/ui/app/components/ui/identicon/index.scss
index 657afc48f..4c8213f01 100644
--- a/ui/app/components/ui/identicon/index.scss
+++ b/ui/app/components/ui/identicon/index.scss
@@ -4,4 +4,17 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
+
+  &__address-wrapper {
+    height: 40px;
+    width: 40px;
+    border-radius: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-style: solid;
+    border-radius: 50%;
+    border-width: 2px;
+    border-color: $curious-blue;
+  }
 }
diff --git a/ui/app/components/ui/metafox-logo/index.js b/ui/app/components/ui/metafox-logo/index.js
new file mode 100644
index 000000000..0aeaed743
--- /dev/null
+++ b/ui/app/components/ui/metafox-logo/index.js
@@ -0,0 +1 @@
+export { default } from './metafox-logo.component'
diff --git a/ui/app/components/ui/metafox-logo/metafox-logo.component.js b/ui/app/components/ui/metafox-logo/metafox-logo.component.js
new file mode 100644
index 000000000..041e354ef
--- /dev/null
+++ b/ui/app/components/ui/metafox-logo/metafox-logo.component.js
@@ -0,0 +1,31 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class MetaFoxLogo extends PureComponent {
+  static propTypes = {
+    onClick: PropTypes.func,
+    unsetIconHeight: PropTypes.bool,
+  }
+
+  render () {
+    const iconProps = this.props.unsetIconHeight ? {} : { height: 42, width: 42 }
+
+    return (
+      <div
+        onClick={this.props.onClick}
+        className="app-header__logo-container"
+      >
+        <img
+          height={30}
+          src="/images/logo/metamask-logo-horizontal.svg"
+          className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+        />
+        <img
+          {...iconProps}
+          src="/images/logo/metamask-fox.svg"
+          className="app-header__metafox-logo app-header__metafox-logo--icon"
+        />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js b/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js
new file mode 100644
index 000000000..c794a004f
--- /dev/null
+++ b/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import assert from 'assert'
+import { mount } from 'enzyme'
+import MetaFoxLogo from '../'
+
+describe('MetaFoxLogo', () => {
+
+  it('sets icon height and width to 42 by default', () => {
+    const wrapper = mount(
+      <MetaFoxLogo />
+    )
+
+    assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('width'), 42)
+    assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('height'), 42)
+  })
+
+  it('does not set icon height and width when unsetIconHeight is true', () => {
+    const wrapper = mount(
+      <MetaFoxLogo unsetIconHeight={true} />
+    )
+
+    assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('width'), null)
+    assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('height'), null)
+  })
+})
diff --git a/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js b/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js
index 08f9c7544..f1e15f10f 100644
--- a/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js
+++ b/ui/app/components/ui/page-container/page-container-header/page-container-header.component.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
+import c from 'classnames'
 
 export default class PageContainerHeader extends Component {
   static propTypes = {
@@ -13,6 +13,7 @@ export default class PageContainerHeader extends Component {
     backButtonString: PropTypes.string,
     tabs: PropTypes.node,
     headerCloseText: PropTypes.string,
+    className: PropTypes.string,
   }
 
   renderTabs () {
@@ -42,15 +43,14 @@ export default class PageContainerHeader extends Component {
   }
 
   render () {
-    const { title, subtitle, onClose, tabs, headerCloseText } = this.props
+    const { title, subtitle, onClose, tabs, headerCloseText, className } = this.props
 
     return (
-      <div className={
-        classnames(
-          'page-container__header',
-          { 'page-container__header--no-padding-bottom': Boolean(tabs) }
-        )
-      }>
+      <div
+        className={c('page-container__header', className, {
+          'page-container__header--no-padding-bottom': Boolean(tabs),
+        })}
+      >
 
         { this.renderHeaderRow() }
 
diff --git a/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
index 57b595d48..a98a94101 100644
--- a/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
@@ -64,10 +64,10 @@ export default class SenderToRecipient extends PureComponent {
         containerClassName="sender-to-recipient__tooltip-container"
         onHidden={() => this.setState({ senderAddressCopied: false })}
       >
-      <div className="sender-to-recipient__name">
-        { addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName }
-      </div>
-    </Tooltip>
+        <div className="sender-to-recipient__name">
+          { addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName }
+        </div>
+      </Tooltip>
     )
   }
 
diff --git a/ui/app/components/ui/text-field/text-field.component.js b/ui/app/components/ui/text-field/text-field.component.js
index 1153a595b..ac7712c65 100644
--- a/ui/app/components/ui/text-field/text-field.component.js
+++ b/ui/app/components/ui/text-field/text-field.component.js
@@ -61,6 +61,9 @@ const styles = {
     ...inputLabelBase,
     fontSize: '.75rem',
   },
+  inputMultiline: {
+    lineHeight: 'initial !important',
+  },
 }
 
 const TextField = props => {
diff --git a/ui/app/components/ui/toggle-button/index.js b/ui/app/components/ui/toggle-button/index.js
new file mode 100644
index 000000000..7948d3ca1
--- /dev/null
+++ b/ui/app/components/ui/toggle-button/index.js
@@ -0,0 +1,2 @@
+import ToggleButton from './toggle-button.component'
+module.exports = ToggleButton
diff --git a/ui/app/components/ui/toggle-button/index.scss b/ui/app/components/ui/toggle-button/index.scss
new file mode 100644
index 000000000..868d416c8
--- /dev/null
+++ b/ui/app/components/ui/toggle-button/index.scss
@@ -0,0 +1,14 @@
+.toggle-button {
+  display: flex;
+
+  &__status-label {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 23px;
+    display: flex;
+    align-items: center;
+    text-transform: uppercase;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/ui/toggle-button/toggle-button.component.js b/ui/app/components/ui/toggle-button/toggle-button.component.js
new file mode 100644
index 000000000..3f13203a5
--- /dev/null
+++ b/ui/app/components/ui/toggle-button/toggle-button.component.js
@@ -0,0 +1,75 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ReactToggleButton from 'react-toggle-button'
+
+const trackStyle = {
+  width: '40px',
+  height: '24px',
+  padding: '0px',
+  borderRadius: '26px',
+  border: '2px solid rgb(3, 125, 214)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
+const offTrackStyle = {
+  ...trackStyle,
+  border: '2px solid #8E8E8E',
+}
+
+const thumbStyle = {
+  width: '18px',
+  height: '18px',
+  display: 'flex',
+  boxShadow: 'none',
+  alignSelf: 'center',
+  borderRadius: '50%',
+  position: 'relative',
+}
+
+const colors = {
+  activeThumb: {
+    base: '#037DD6',
+  },
+  inactiveThumb: {
+    base: '#037DD6',
+  },
+  active: {
+    base: '#ffffff',
+    hover: '#ffffff',
+  },
+  inactive: {
+    base: '#DADADA',
+    hover: '#DADADA',
+  },
+}
+
+const ToggleButton = props => {
+  const { value, onToggle, offLabel, onLabel } = props
+
+  return (
+    <div className="toggle-button">
+      <ReactToggleButton
+        value={value}
+        onToggle={onToggle}
+        activeLabel=""
+        inactiveLabel=""
+        trackStyle={value ? trackStyle : offTrackStyle}
+        thumbStyle={thumbStyle}
+        thumbAnimateRange={[3, 18]}
+        colors={colors}
+      />
+      <div className="toggle-button__status-label">{ value ? onLabel : offLabel }</div>
+    </div>
+  )
+}
+
+ToggleButton.propTypes = {
+  value: PropTypes.bool,
+  onToggle: PropTypes.func,
+  offLabel: PropTypes.string,
+  onLabel: PropTypes.string,
+}
+
+export default ToggleButton
diff --git a/ui/app/components/ui/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss
index 58a10c9a1..338b3829f 100644
--- a/ui/app/components/ui/unit-input/index.scss
+++ b/ui/app/components/ui/unit-input/index.scss
@@ -38,7 +38,6 @@
     font-size: 1rem;
     font-family: Roboto;
     border: none;
-    outline: 0 !important;
     max-width: 22ch;
     height: 16px;
     line-height: 18px;
diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss
index ffccbd64f..865b23127 100644
--- a/ui/app/css/index.scss
+++ b/ui/app/css/index.scss
@@ -16,3 +16,7 @@
 @import './itcss/components/index.scss';
 
 @import './itcss/trumps/index.scss';
+
+@import '../../../node_modules/react-tooltip-component/dist/react-tooltip-component';
+
+@import '../../../node_modules/react-select/dist/react-select';
diff --git a/ui/app/css/itcss/components/account-dropdown-mini.scss b/ui/app/css/itcss/components/account-dropdown-mini.scss
deleted file mode 100644
index 996993db7..000000000
--- a/ui/app/css/itcss/components/account-dropdown-mini.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.account-dropdown-mini {
-  height: 22px;
-  background-color: $white;
-  font-family: Roboto;
-  line-height: 16px;
-  font-size: 12px;
-  width: 124px;
-
-  &__close-area {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    width: 100%;
-    height: 100%;
-  }
-
-  &__list {
-    z-index: 1050;
-    position: absolute;
-    height: 180px;
-    width: 96pxpx;
-    border: 1px solid $geyser;
-    border-radius: 4px;
-    background-color: $white;
-    box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
-    overflow-y: scroll;
-  }
-
-  .account-list-item {
-    margin-top: 6px;
-  }
-
-  .account-list-item__account-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 80px;
-  }
-
-  .account-list-item__top-row {
-    margin: 0;
-  }
-
-  .account-list-item__icon {
-    position: initial;
-  }
-}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
index 716404cc3..283b083da 100644
--- a/ui/app/css/itcss/components/account-dropdown.scss
+++ b/ui/app/css/itcss/components/account-dropdown.scss
@@ -84,7 +84,6 @@
   &__account-primary-balance {
     color: $scorpion;
     border: none;
-    outline: 0 !important;
   }
 
   &__account-secondary-balance {
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index b1a74dce2..9ece7a672 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -19,7 +19,6 @@
     font-size: 16px;
     line-height: 22px;
     border: none;
-    outline: 0 !important;
     max-width: 22ch;
   }
 
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 3d426a33c..0e2034670 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -1,4 +1,5 @@
 @import '../../../components/ui/button/buttons';
+@import '../../../components/ui/dialog/dialog';
 
 @import './footer.scss';
 
@@ -42,8 +43,6 @@
 
 @import './account-details-dropdown.scss';
 
-@import './account-dropdown-mini.scss';
-
 @import './editable-label.scss';
 
 @import './pages/index.scss';
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index b3aae8eec..162aac38f 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -3,7 +3,11 @@
   background-color: #FFFFFF;
   box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
   z-index: 25;
-  height: 100%;
+  height: unset;
+
+  @media screen and (min-width: 576px) {
+    position: absolute;
+  }
 
   &__header {
     display: flex;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 9a0b81aed..ff5f6f6cf 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -65,72 +65,6 @@ $wallet-view-bg: $alabaster;
   @media #{$sub-mid-size-breakpoint-range} {
     min-width: 160px;
   }
-
-  .wallet-view-account-details {
-    flex: 0 0 auto;
-  }
-
-  &__name-container {
-    flex: 0 0 auto;
-    cursor: pointer;
-    width: 100%;
-  }
-
-  &__keyring-label {
-    height: 50px;
-    color: $dusty-gray;
-    font-family: Roboto;
-    font-size: 10px;
-    text-align: right;
-    padding: 17px 20px 0;
-    box-sizing: border-box;
-  }
-
-  &__details-button {
-    font-size: 10px;
-    border-radius: 17px;
-    background-color: transparent;
-    margin: 0 auto;
-    padding: 4px 12px;
-    flex: 0 0 auto;
-  }
-
-  &__tooltip {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 24px;
-  }
-
-  &__address {
-    border-radius: 3px;
-    background-color: $alto;
-    color: $scorpion;
-    font-size: 14px;
-    line-height: 12px;
-    padding: 4px 12px;
-    cursor: pointer;
-    flex: 0 0 auto;
-
-    &__pressed {
-      background-color: $manatee,
-    }
-  }
-
-  &__sidebar-close {
-
-    @media screen and (max-width: 575px) {
-      &::after {
-        content: '\00D7';
-        font-size: 40px;
-        color: $tundora;
-        position: absolute;
-        top: 12px;
-        left: 12px;
-        cursor: pointer;
-      }
-    }
-  }
 }
 
 @media screen and (min-width: 576px) {
@@ -228,20 +162,6 @@ $wallet-view-bg: $alabaster;
   }
 }
 
-// wallet view
-.account-name {
-  font-size: 24px;
-  color: $black;
-  margin-top: 8px;
-  margin-bottom: .9rem;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-  padding: 0 8px;
-  text-align: center;
-}
-
 // account options dropdown
 .account-options-menu {
   align-items: center;
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index 6c950d846..25924b6c0 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -101,6 +101,30 @@
     font-size: 14px;
   }
 
+  &__account-item {
+    height: 22px;
+    background-color: $white;
+    font-family: Roboto;
+    line-height: 16px;
+    font-size: 12px;
+    width: 124px;
+
+    .account-list-item {
+      margin-top: 6px;
+    }
+
+    .account-list-item__account-name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      width: 80px;
+    }
+
+    .account-list-item__top-row {
+      margin: 0;
+    }
+  }
+
   &__balance {
     color: $dusty-gray;
     margin-right: 17px;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index c1a7381b6..81678408a 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -536,8 +536,6 @@
   }
 
   &__form {
-    padding: 10px 0 25px;
-
     @media screen and (max-width: $break-small) {
       margin: 0;
       flex: 1 1 auto;
@@ -553,7 +551,7 @@
   }
 
   &__form-row {
-    margin: 8px 18px 0px;
+    margin: 1rem 1rem 0px;
     position: relative;
     display: flex;
     flex-flow: row;
@@ -570,7 +568,6 @@
   &__form-field {
     flex: 1 1 auto;
     min-width: 0;
-    max-width: 277px;
 
     .currency-display {
       color: $tundora;
@@ -646,6 +643,17 @@
     height: 54px;
     border: none;
 
+    &__single-asset {
+      display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        padding: 8px 8px;
+
+        &:hover {
+          background-color: rgba($alto, 0.2);
+        }
+    }
+
     &__asset {
       display: flex;
       flex-flow: row nowrap;
@@ -747,16 +755,8 @@
   &__to-autocomplete {
     position: relative;
 
-    &__down-caret {
-      z-index: 1026;
-      position: absolute;
-      top: 18px;
-      right: 12px;
-    }
-
     &__qr-code {
       z-index: 1026;
-      position: absolute;
       top: 13px;
       right: 33px;
       cursor: pointer;
@@ -767,13 +767,52 @@
     &__qr-code:hover {
       background: #f1f1f1;
     }
+  }
 
-    &__input.with-qr {
-      padding-right: 65px;
+  &__to-autocomplete {
+    display: flex;
+    flex-direction: row;
+    z-index: 1025;
+    position: relative;
+    height: 54px;
+    width: 100%;
+    border: 1px solid $Grey-100;
+    border-radius: 8px;
+    background-color: $white;
+    color: $tundora;
+    padding: 0 10px;
+    font-family: Roboto;
+    line-height: 21px;
+    align-items: center;
+
+    &__input {
+      font-size: 16px;
+      height: 100%;
+      border: none;
+      flex: 1 1 auto;
+      width: 0;
+
+      &::placeholder {
+        color: #A1A5B3;
+      }
+    }
+
+    &__resolved {
+      font-size: 12px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      height: 30px;
+      cursor: pointer;
+
+      + .send-v2__to-autocomplete__qr-code {
+        top: 2px;
+        right: 0;
+      }
     }
   }
 
-  &__to-autocomplete, &__memo-text-area, &__hex-data {
+  &__memo-text-area, &__hex-data {
     &__input {
       z-index: 1025;
       position: relative;
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 8b282aa1e..aaf6c7c0e 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -38,9 +38,17 @@ html {
   display: flex;
 }
 
-input:focus,
-textarea:focus {
-  outline: none;
+.mouse-user-styles {
+  button:focus,
+  input:focus,
+  textarea:focus,
+  .unit-input__input,
+  .account-list-item__account-primary-balance,
+  .account-list-item__input,
+  .currency-display__input
+   {
+    outline: none;
+  }
 }
 
 /* stylelint-disable */
@@ -122,3 +130,14 @@ input.form-control {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.pinned-to-bottom {
+  position: absolute;
+  bottom: 0px;
+}
+
+.pinned-to-bottom-right {
+  position: absolute;
+  bottom: 0px;
+  right: 0;
+}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index c02be0d98..9257456ec 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -74,6 +74,36 @@ $send-card-z-index: 20;
 $sidebar-z-index: 26;
 $sidebar-overlay-z-index: 25;
 
+// Flex
+%row-nowrap {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+%col-nowrap {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+// Background Image Sizing
+%bg-contain {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+%ellipsify {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+%modal {
+  background-color: $white;
+  border-radius: 10px;
+  box-shadow: 0px 5px 16px rgba($black, 0.25);;
+}
+
 /*
   Z Indicies - Current
   app - 11
@@ -94,24 +124,73 @@ $break-large: 576px;
 $primary-font-type: Roboto;
 
 $Blue-000: #eaf6ff;
+$Blue-100: #a7d9fe;
+$Blue-200: #75c4fd;
+$Blue-300: #43aefc;
 $Blue-400: #1098fc;
 $Blue-500: #037DD6;
 $Blue-600: #0260a4;
+$Blue-700: #024272;
+$Blue-800: #01253f;
+$Blue-900: #00080d;
 
 $Grey-000: #f2f3f4;
 $Grey-100: #D6D9DC;
 $Grey-200: #bbc0c5;
+$Grey-300: #9fa6ae;
 $Grey-400: #848c96;
+$Grey-200: #bbc0c5;
 $Grey-500: #6A737D;
+$Grey-600: #535a61;
 $Grey-800: #24272a;
 
 $Red-000: #fcf2f3;
+$Red-100: #f7d5d8;
+$Red-200: #f1b9be;
+$Red-300: #e88f97;
+$Red-400: #e06470;
 $Red-500: #D73A49;
 $Red-600: #b92534;
+$Red-700: #8e1d28;
+$Red-800: #64141c;
+$Red-900: #3a0c10;
 
 $Orange-000: #fef5ef;
+$Orange-300: #faa66c;
+$Orange-600: #c65507;
 $Orange-500: #F66A0A;
 
+// Font Sizes
+%h3 {
+  font-size: 1.5rem;
+  line-height: 2.125rem;
+  font-weight: 400;
+}
+
+%h4 {
+  font-size: 1.125rem;
+  line-height: 1.3125rem;
+  font-weight: 400;
+}
+
+%h5 {
+  font-size: 1rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+
+%h6 {
+  font-size: .875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+
+%h8 {
+  font-size: .75rem;
+  line-height: 1.0625rem;
+  font-weight: 400;
+}
+
 
 /*
   Spacing Variables
@@ -127,3 +206,24 @@ $xlarge-spacing: 48px;
 $xxlarge-spacing: 64px;
 
 
+%input {
+  background: $white;
+  border: 1px solid $Grey-100;
+  box-sizing: border-box;
+  border-radius: 8px;
+  padding: .625rem .75rem;
+  font-size: 1.25rem;
+}
+// Input mixin
+
+%input-2 {
+  border: 2px solid $Grey-200;
+  border-radius: 6px;
+  color: $Grey-800;
+  padding: 0.875rem 1rem;
+  font-size: 1.125rem;
+
+  &:focus-within {
+    border-color: $Blue-500;
+  }
+}
diff --git a/ui/app/ducks/app/app.js b/ui/app/ducks/app/app.js
index 04c8c7422..029c755cd 100644
--- a/ui/app/ducks/app/app.js
+++ b/ui/app/ducks/app/app.js
@@ -27,13 +27,6 @@ function reduceApp (state, action) {
     context: selectedAddress,
   }
 
-  // confirm seed words
-  var seedWords = state.metamask.seedWords
-  var seedConfView = {
-    name: 'createVaultComplete',
-    seedWords,
-  }
-
   // default state
   var appState = extend({
     shouldClose: false,
@@ -58,7 +51,7 @@ function reduceApp (state, action) {
     alertMessage: null,
     qrCodeData: null,
     networkDropdownOpen: false,
-    currentView: seedWords ? seedConfView : defaultView,
+    currentView: defaultView,
     accountDetail: {
       subview: 'transactions',
     },
@@ -167,7 +160,7 @@ function reduceApp (state, action) {
         transForward: false,
       })
 
-    // intialize
+      // intialize
 
     case actions.SHOW_CREATE_VAULT:
       return extend(appState, {
@@ -269,7 +262,7 @@ function reduceApp (state, action) {
         transForward: true,
       })
 
-  case actions.CREATE_NEW_VAULT_IN_PROGRESS:
+    case actions.CREATE_NEW_VAULT_IN_PROGRESS:
       return extend(appState, {
         currentView: {
           name: 'createVault',
@@ -279,16 +272,6 @@ function reduceApp (state, action) {
         isLoading: true,
       })
 
-    case actions.SHOW_NEW_VAULT_SEED:
-      return extend(appState, {
-        currentView: {
-          name: 'createVaultComplete',
-          seedWords: action.value,
-        },
-        transForward: true,
-        isLoading: false,
-      })
-
     case actions.NEW_ACCOUNT_SCREEN:
       return extend(appState, {
         currentView: {
@@ -327,7 +310,7 @@ function reduceApp (state, action) {
         transForward: true,
       })
 
-  // unlock
+      // unlock
 
     case actions.UNLOCK_METAMASK:
       return extend(appState, {
@@ -364,7 +347,7 @@ function reduceApp (state, action) {
           name: 'UnlockScreen',
         },
       })
-  // reveal seed words
+      // reveal seed words
 
     case actions.REVEAL_SEED_CONFIRMATION:
       return extend(appState, {
@@ -375,7 +358,7 @@ function reduceApp (state, action) {
         warning: null,
       })
 
-  // accounts
+      // accounts
 
     case actions.SET_SELECTED_ACCOUNT:
       return extend(appState, {
@@ -428,8 +411,7 @@ function reduceApp (state, action) {
     case actions.SHOW_ACCOUNTS_PAGE:
       return extend(appState, {
         currentView: {
-          name: seedWords ? 'createVaultComplete' : 'accounts',
-          seedWords,
+          name: 'accounts',
         },
         transForward: true,
         isLoading: false,
@@ -774,7 +756,6 @@ function reduceApp (state, action) {
         loadingMethodData: false,
       })
 
-
     default:
       return appState
   }
diff --git a/ui/app/ducks/gas/gas-duck.test.js b/ui/app/ducks/gas/gas-duck.test.js
index b7e83a81c..82a91d5e7 100644
--- a/ui/app/ducks/gas/gas-duck.test.js
+++ b/ui/app/ducks/gas/gas-duck.test.js
@@ -2,12 +2,10 @@ import assert from 'assert'
 import sinon from 'sinon'
 import proxyquire from 'proxyquire'
 
+const fakeLocalStorage = {}
 
 const GasDuck = proxyquire('./gas.duck.js', {
-  '../../../lib/local-storage-helpers': {
-    loadLocalStorageData: sinon.spy(),
-    saveLocalStorageData: sinon.spy(),
-  },
+  '../../../lib/local-storage-helpers': fakeLocalStorage,
 })
 
 const {
@@ -68,24 +66,28 @@ describe('Gas Duck', () => {
     { expectedTime: 1.1, expectedWait: 0.6, gasprice: 19.9, somethingElse: 'foobar' },
     { expectedTime: 1, expectedWait: 0.5, gasprice: 20, somethingElse: 'foobar' },
   ]
-  const fetchStub = sinon.stub().callsFake((url) => new Promise(resolve => {
+  const fakeFetch = (url) => new Promise(resolve => {
     const dataToResolve = url.match(/ethgasAPI|gasexpress/)
       ? mockEthGasApiResponse
       : mockPredictTableResponse
     resolve({
       json: () => new Promise(resolve => resolve(dataToResolve)),
     })
-  }))
+  })
 
   beforeEach(() => {
     tempFetch = global.fetch
     tempDateNow = global.Date.now
-    global.fetch = fetchStub
+
+    fakeLocalStorage.loadLocalStorageData = sinon.stub()
+    fakeLocalStorage.saveLocalStorageData = sinon.spy()
+    global.fetch = sinon.stub().callsFake(fakeFetch)
     global.Date.now = () => 2000000
   })
 
   afterEach(() => {
-    fetchStub.resetHistory()
+    sinon.restore()
+
     global.fetch = tempFetch
     global.Date.now = tempDateNow
   })
@@ -118,7 +120,6 @@ describe('Gas Duck', () => {
     gasEstimatesLoading: true,
     priceAndTimeEstimates: [],
     priceAndTimeEstimatesLastRetrieved: 0,
-    basicPriceAndTimeEstimates: [],
     basicPriceAndTimeEstimatesLastRetrieved: 0,
     basicPriceEstimatesLastRetrieved: 0,
   }
@@ -305,8 +306,9 @@ describe('Gas Duck', () => {
   })
 
   describe('fetchBasicGasEstimates', () => {
-    const mockDistpatch = sinon.spy()
     it('should call fetch with the expected params', async () => {
+      const mockDistpatch = sinon.spy()
+
       await fetchBasicGasEstimates()(mockDistpatch, () => ({ gas: Object.assign(
         {},
         initState,
@@ -330,12 +332,109 @@ describe('Gas Duck', () => {
           },
         ]
       )
-
       assert.deepEqual(
         mockDistpatch.getCall(1).args,
         [{ type: SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ]
       )
+      assert.deepEqual(
+        mockDistpatch.getCall(2).args,
+        [{
+          type: SET_BASIC_GAS_ESTIMATE_DATA,
+          value: {
+            average: 20,
+            blockTime: 'mockBlock_time',
+            blockNum: 'mockBlockNum',
+            fast: 30,
+            fastest: 40,
+            safeLow: 10,
+          },
+        }]
+      )
+      assert.deepEqual(
+        mockDistpatch.getCall(3).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }]
+      )
+    })
+
+    it('should fetch recently retrieved estimates from local storage', async () => {
+      const mockDistpatch = sinon.spy()
+      fakeLocalStorage.loadLocalStorageData
+        .withArgs('BASIC_PRICE_ESTIMATES_LAST_RETRIEVED')
+        .returns(2000000 - 1) // one second ago from "now"
+      fakeLocalStorage.loadLocalStorageData
+        .withArgs('BASIC_PRICE_ESTIMATES')
+        .returns({
+          average: 25,
+          blockTime: 'mockBlock_time',
+          blockNum: 'mockBlockNum',
+          fast: 35,
+          fastest: 45,
+          safeLow: 15,
+        })
+
+      await fetchBasicGasEstimates()(mockDistpatch, () => ({ gas: Object.assign(
+        {},
+        initState,
+        {}
+      ) }))
+      assert.deepEqual(
+        mockDistpatch.getCall(0).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ]
+      )
+      assert.ok(global.fetch.notCalled)
+      assert.deepEqual(
+        mockDistpatch.getCall(1).args,
+        [{
+          type: SET_BASIC_GAS_ESTIMATE_DATA,
+          value: {
+            average: 25,
+            blockTime: 'mockBlock_time',
+            blockNum: 'mockBlockNum',
+            fast: 35,
+            fastest: 45,
+            safeLow: 15,
+          },
+        }]
+      )
+      assert.deepEqual(
+        mockDistpatch.getCall(2).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }]
+      )
+    })
+
+    it('should fallback to network if retrieving estimates from local storage fails', async () => {
+      const mockDistpatch = sinon.spy()
+      fakeLocalStorage.loadLocalStorageData
+        .withArgs('BASIC_PRICE_ESTIMATES_LAST_RETRIEVED')
+        .returns(2000000 - 1) // one second ago from "now"
 
+      await fetchBasicGasEstimates()(mockDistpatch, () => ({ gas: Object.assign(
+        {},
+        initState,
+        {}
+      ) }))
+      assert.deepEqual(
+        mockDistpatch.getCall(0).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ]
+      )
+      assert.deepEqual(
+        global.fetch.getCall(0).args,
+        [
+          'https://dev.blockscale.net/api/gasexpress.json',
+          {
+            'headers': {},
+            'referrer': 'https://dev.blockscale.net/api/',
+            'referrerPolicy': 'no-referrer-when-downgrade',
+            'body': null,
+            'method': 'GET',
+            'mode': 'cors',
+          },
+        ]
+      )
+      assert.deepEqual(
+        mockDistpatch.getCall(1).args,
+        [{ type: SET_BASIC_PRICE_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ]
+      )
       assert.deepEqual(
         mockDistpatch.getCall(2).args,
         [{
@@ -358,14 +457,15 @@ describe('Gas Duck', () => {
   })
 
   describe('fetchBasicGasAndTimeEstimates', () => {
-    const mockDistpatch = sinon.spy()
     it('should call fetch with the expected params', async () => {
+      const mockDistpatch = sinon.spy()
+
       await fetchBasicGasAndTimeEstimates()(mockDistpatch, () => ({ gas: Object.assign(
         {},
         initState,
         { basicPriceAndTimeEstimatesLastRetrieved: 1000000 }
       ),
-        metamask: { provider: { type: 'ropsten' } },
+      metamask: { provider: { type: 'ropsten' } },
       }))
       assert.deepEqual(
         mockDistpatch.getCall(0).args,
@@ -415,23 +515,139 @@ describe('Gas Duck', () => {
         [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }]
       )
     })
-  })
 
-  describe('fetchGasEstimates', () => {
-    const mockDistpatch = sinon.spy()
+    it('should fetch recently retrieved estimates from local storage', async () => {
+      const mockDistpatch = sinon.spy()
+      fakeLocalStorage.loadLocalStorageData
+        .withArgs('BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED')
+        .returns(2000000 - 1) // one second ago from "now"
+      fakeLocalStorage.loadLocalStorageData
+        .withArgs('BASIC_GAS_AND_TIME_API_ESTIMATES')
+        .returns({
+          average: 5,
+          avgWait: 'mockAvgWait',
+          blockTime: 'mockBlock_time',
+          blockNum: 'mockBlockNum',
+          fast: 6,
+          fastest: 7,
+          fastestWait: 'mockFastestWait',
+          fastWait: 'mockFastWait',
+          safeLow: 1,
+          safeLowWait: 'mockSafeLowWait',
+          speed: 'mockSpeed',
+        })
+
+      await fetchBasicGasAndTimeEstimates()(mockDistpatch, () => ({ gas: Object.assign(
+        {},
+        initState,
+        {}
+      ),
+      metamask: { provider: { type: 'ropsten' } },
+      }))
+      assert.deepEqual(
+        mockDistpatch.getCall(0).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ]
+      )
+      assert.ok(global.fetch.notCalled)
+
+      assert.deepEqual(
+        mockDistpatch.getCall(1).args,
+        [{
+          type: SET_BASIC_GAS_ESTIMATE_DATA,
+          value: {
+            average: 5,
+            avgWait: 'mockAvgWait',
+            blockTime: 'mockBlock_time',
+            blockNum: 'mockBlockNum',
+            fast: 6,
+            fastest: 7,
+            fastestWait: 'mockFastestWait',
+            fastWait: 'mockFastWait',
+            safeLow: 1,
+            safeLowWait: 'mockSafeLowWait',
+            speed: 'mockSpeed',
+          },
+        }]
+      )
+      assert.deepEqual(
+        mockDistpatch.getCall(2).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }]
+      )
+    })
+
+    it('should fallback to network if retrieving estimates from local storage fails', async () => {
+      const mockDistpatch = sinon.spy()
+      fakeLocalStorage.loadLocalStorageData
+        .withArgs('BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED')
+        .returns(2000000 - 1) // one second ago from "now"
+
+      await fetchBasicGasAndTimeEstimates()(mockDistpatch, () => ({ gas: Object.assign(
+        {},
+        initState,
+        {}
+      ),
+      metamask: { provider: { type: 'ropsten' } },
+      }))
+      assert.deepEqual(
+        mockDistpatch.getCall(0).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_STARTED} ]
+      )
+      assert.deepEqual(
+        global.fetch.getCall(0).args,
+        [
+          'https://ethgasstation.info/json/ethgasAPI.json',
+          {
+            'headers': {},
+            'referrer': 'http://ethgasstation.info/json/',
+            'referrerPolicy': 'no-referrer-when-downgrade',
+            'body': null,
+            'method': 'GET',
+            'mode': 'cors',
+          },
+        ]
+      )
 
-    beforeEach(() => {
-      mockDistpatch.resetHistory()
+      assert.deepEqual(
+        mockDistpatch.getCall(1).args,
+        [{ type: SET_BASIC_API_ESTIMATES_LAST_RETRIEVED, value: 2000000 } ]
+      )
+
+      assert.deepEqual(
+        mockDistpatch.getCall(2).args,
+        [{
+          type: SET_BASIC_GAS_ESTIMATE_DATA,
+          value: {
+            average: 2,
+            avgWait: 'mockAvgWait',
+            blockTime: 'mockBlock_time',
+            blockNum: 'mockBlockNum',
+            fast: 3,
+            fastest: 4,
+            fastestWait: 'mockFastestWait',
+            fastWait: 'mockFastWait',
+            safeLow: 1,
+            safeLowWait: 'mockSafeLowWait',
+            speed: 'mockSpeed',
+          },
+        }]
+      )
+      assert.deepEqual(
+        mockDistpatch.getCall(3).args,
+        [{ type: BASIC_GAS_ESTIMATE_LOADING_FINISHED }]
+      )
     })
+  })
 
+  describe('fetchGasEstimates', () => {
     it('should call fetch with the expected params', async () => {
-      global.fetch.resetHistory()
+      const mockDistpatch = sinon.spy()
+
       await fetchGasEstimates(5)(mockDistpatch, () => ({ gas: Object.assign(
         {},
         initState,
         { priceAndTimeEstimatesLastRetrieved: 1000000 }
       ),
-        metamask: { provider: { type: 'ropsten' } },
+      metamask: { provider: { type: 'ropsten' } },
       }))
       assert.deepEqual(
         mockDistpatch.getCall(0).args,
@@ -471,7 +687,8 @@ describe('Gas Duck', () => {
     })
 
     it('should not call fetch if the estimates were retrieved < 75000 ms ago', async () => {
-      global.fetch.resetHistory()
+      const mockDistpatch = sinon.spy()
+
       await fetchGasEstimates(5)(mockDistpatch, () => ({ gas: Object.assign(
         {},
         initState,
@@ -484,7 +701,7 @@ describe('Gas Duck', () => {
           }],
         }
       ),
-        metamask: { provider: { type: 'ropsten' } },
+      metamask: { provider: { type: 'ropsten' } },
       }))
       assert.deepEqual(
         mockDistpatch.getCall(0).args,
diff --git a/ui/app/ducks/gas/gas.duck.js b/ui/app/ducks/gas/gas.duck.js
index 5a0a236e6..e272455fc 100644
--- a/ui/app/ducks/gas/gas.duck.js
+++ b/ui/app/ducks/gas/gas.duck.js
@@ -50,7 +50,6 @@ const initState = {
   basicEstimateIsLoading: true,
   gasEstimatesLoading: true,
   priceAndTimeEstimates: [],
-  basicPriceAndTimeEstimates: [],
   priceAndTimeEstimatesLastRetrieved: 0,
   basicPriceAndTimeEstimatesLastRetrieved: 0,
   basicPriceEstimatesLastRetrieved: 0,
@@ -177,134 +176,132 @@ export function gasEstimatesLoadingFinished () {
 }
 
 export function fetchBasicGasEstimates () {
-  return (dispatch, getState) => {
-    const {
-      basicPriceEstimatesLastRetrieved,
-      basicPriceAndTimeEstimates,
-    } = getState().gas
+  return async (dispatch, getState) => {
+    const { basicPriceEstimatesLastRetrieved } = getState().gas
     const timeLastRetrieved = basicPriceEstimatesLastRetrieved || loadLocalStorageData('BASIC_PRICE_ESTIMATES_LAST_RETRIEVED') || 0
 
     dispatch(basicGasEstimatesLoadingStarted())
 
-    const promiseToFetch = Date.now() - timeLastRetrieved > 75000
-    ? fetch('https://dev.blockscale.net/api/gasexpress.json', {
-      'headers': {},
-      'referrer': 'https://dev.blockscale.net/api/',
-      'referrerPolicy': 'no-referrer-when-downgrade',
-      'body': null,
-      'method': 'GET',
-      'mode': 'cors'}
-    )
-      .then(r => r.json())
-      .then(({
-        safeLow,
-        standard: average,
-        fast,
-        fastest,
-        block_time: blockTime,
-        blockNum,
-      }) => {
-        const basicEstimates = {
-          safeLow,
-          average,
-          fast,
-          fastest,
-          blockTime,
-          blockNum,
-        }
-
-        const timeRetrieved = Date.now()
-        dispatch(setBasicPriceEstimatesLastRetrieved(timeRetrieved))
-        saveLocalStorageData(timeRetrieved, 'BASIC_PRICE_ESTIMATES_LAST_RETRIEVED')
-        saveLocalStorageData(basicEstimates, 'BASIC_PRICE_ESTIMATES')
-
-        return basicEstimates
-      })
-    : Promise.resolve(basicPriceAndTimeEstimates.length
-        ? basicPriceAndTimeEstimates
-        : loadLocalStorageData('BASIC_PRICE_ESTIMATES')
-      )
+    let basicEstimates
+    if (Date.now() - timeLastRetrieved > 75000) {
+      basicEstimates = await fetchExternalBasicGasEstimates(dispatch)
+    } else {
+      const cachedBasicEstimates = loadLocalStorageData('BASIC_PRICE_ESTIMATES')
+      basicEstimates = cachedBasicEstimates || await fetchExternalBasicGasEstimates(dispatch)
+    }
 
-    return promiseToFetch.then(basicEstimates => {
-      dispatch(setBasicGasEstimateData(basicEstimates))
-      dispatch(basicGasEstimatesLoadingFinished())
-      return basicEstimates
-    })
+    dispatch(setBasicGasEstimateData(basicEstimates))
+    dispatch(basicGasEstimatesLoadingFinished())
+
+    return basicEstimates
   }
 }
 
+async function fetchExternalBasicGasEstimates (dispatch) {
+  const response = await fetch('https://dev.blockscale.net/api/gasexpress.json', {
+    'headers': {},
+    'referrer': 'https://dev.blockscale.net/api/',
+    'referrerPolicy': 'no-referrer-when-downgrade',
+    'body': null,
+    'method': 'GET',
+    'mode': 'cors'}
+  )
+  const {
+    safeLow,
+    standard: average,
+    fast,
+    fastest,
+    block_time: blockTime,
+    blockNum,
+  } = await response.json()
+
+  const basicEstimates = {
+    safeLow,
+    average,
+    fast,
+    fastest,
+    blockTime,
+    blockNum,
+  }
+
+  const timeRetrieved = Date.now()
+  saveLocalStorageData(basicEstimates, 'BASIC_PRICE_ESTIMATES')
+  saveLocalStorageData(timeRetrieved, 'BASIC_PRICE_ESTIMATES_LAST_RETRIEVED')
+  dispatch(setBasicPriceEstimatesLastRetrieved(timeRetrieved))
+
+  return basicEstimates
+}
+
 export function fetchBasicGasAndTimeEstimates () {
-  return (dispatch, getState) => {
-    const {
-      basicPriceAndTimeEstimatesLastRetrieved,
-      basicPriceAndTimeEstimates,
-    } = getState().gas
+  return async (dispatch, getState) => {
+    const { basicPriceAndTimeEstimatesLastRetrieved } = getState().gas
     const timeLastRetrieved = basicPriceAndTimeEstimatesLastRetrieved || loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED') || 0
 
     dispatch(basicGasEstimatesLoadingStarted())
 
-    const promiseToFetch = Date.now() - timeLastRetrieved > 75000
-      ? fetch('https://ethgasstation.info/json/ethgasAPI.json', {
-        'headers': {},
-        'referrer': 'http://ethgasstation.info/json/',
-        'referrerPolicy': 'no-referrer-when-downgrade',
-        'body': null,
-        'method': 'GET',
-        'mode': 'cors'}
-      )
-        .then(r => r.json())
-        .then(({
-          average: averageTimes10,
-          avgWait,
-          block_time: blockTime,
-          blockNum,
-          fast: fastTimes10,
-          fastest: fastestTimes10,
-          fastestWait,
-          fastWait,
-          safeLow: safeLowTimes10,
-          safeLowWait,
-          speed,
-        }) => {
-          const [average, fast, fastest, safeLow] = [
-            averageTimes10,
-            fastTimes10,
-            fastestTimes10,
-            safeLowTimes10,
-          ].map(price => (new BigNumber(price)).div(10).toNumber())
-
-          const basicEstimates = {
-            average,
-            avgWait,
-            blockTime,
-            blockNum,
-            fast,
-            fastest,
-            fastestWait,
-            fastWait,
-            safeLow,
-            safeLowWait,
-            speed,
-          }
+    let basicEstimates
+    if (Date.now() - timeLastRetrieved > 75000) {
+      basicEstimates = await fetchExternalBasicGasAndTimeEstimates(dispatch)
+    } else {
+      const cachedBasicEstimates = loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES')
+      basicEstimates = cachedBasicEstimates || await fetchExternalBasicGasAndTimeEstimates(dispatch)
+    }
 
-          const timeRetrieved = Date.now()
-          dispatch(setBasicApiEstimatesLastRetrieved(timeRetrieved))
-          saveLocalStorageData(timeRetrieved, 'BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED')
-          saveLocalStorageData(basicEstimates, 'BASIC_GAS_AND_TIME_API_ESTIMATES')
+    dispatch(setBasicGasEstimateData(basicEstimates))
+    dispatch(basicGasEstimatesLoadingFinished())
+    return basicEstimates
+  }
+}
 
-          return basicEstimates
-        })
-      : Promise.resolve(basicPriceAndTimeEstimates.length
-          ? basicPriceAndTimeEstimates
-          : loadLocalStorageData('BASIC_GAS_AND_TIME_API_ESTIMATES')
-        )
-
-      return promiseToFetch.then(basicEstimates => {
-        dispatch(setBasicGasEstimateData(basicEstimates))
-        dispatch(basicGasEstimatesLoadingFinished())
-        return basicEstimates
-      })
+async function fetchExternalBasicGasAndTimeEstimates (dispatch) {
+  const response = await fetch('https://ethgasstation.info/json/ethgasAPI.json', {
+    'headers': {},
+    'referrer': 'http://ethgasstation.info/json/',
+    'referrerPolicy': 'no-referrer-when-downgrade',
+    'body': null,
+    'method': 'GET',
+    'mode': 'cors'}
+  )
+  const {
+    average: averageTimes10,
+    avgWait,
+    block_time: blockTime,
+    blockNum,
+    fast: fastTimes10,
+    fastest: fastestTimes10,
+    fastestWait,
+    fastWait,
+    safeLow: safeLowTimes10,
+    safeLowWait,
+    speed,
+  } = await response.json()
+  const [average, fast, fastest, safeLow] = [
+    averageTimes10,
+    fastTimes10,
+    fastestTimes10,
+    safeLowTimes10,
+  ].map(price => (new BigNumber(price)).div(10).toNumber())
+
+  const basicEstimates = {
+    average,
+    avgWait,
+    blockTime,
+    blockNum,
+    fast,
+    fastest,
+    fastestWait,
+    fastWait,
+    safeLow,
+    safeLowWait,
+    speed,
   }
+
+  const timeRetrieved = Date.now()
+  saveLocalStorageData(basicEstimates, 'BASIC_GAS_AND_TIME_API_ESTIMATES')
+  saveLocalStorageData(timeRetrieved, 'BASIC_GAS_AND_TIME_API_ESTIMATES_LAST_RETRIEVED')
+  dispatch(setBasicApiEstimatesLastRetrieved(timeRetrieved))
+
+  return basicEstimates
 }
 
 function extrapolateY ({ higherY, lowerY, higherX, lowerX, xForExtrapolation }) {
@@ -375,13 +372,13 @@ export function fetchGasEstimates (blockTime) {
 
     const promiseToFetch = Date.now() - timeLastRetrieved > 75000
       ? fetch('https://ethgasstation.info/json/predictTable.json', {
-          'headers': {},
-          'referrer': 'http://ethgasstation.info/json/',
-          'referrerPolicy': 'no-referrer-when-downgrade',
-          'body': null,
-          'method': 'GET',
-          'mode': 'cors'}
-        )
+        'headers': {},
+        'referrer': 'http://ethgasstation.info/json/',
+        'referrerPolicy': 'no-referrer-when-downgrade',
+        'body': null,
+        'method': 'GET',
+        'mode': 'cors'}
+      )
         .then(r => r.json())
         .then(r => {
           const estimatedPricesAndTimes = r.map(({ expectedTime, expectedWait, gasprice }) => ({ expectedTime, expectedWait, gasprice }))
@@ -432,14 +429,14 @@ export function fetchGasEstimates (blockTime) {
           return timeMappedToSeconds
         })
       : Promise.resolve(priceAndTimeEstimates.length
-          ? priceAndTimeEstimates
-          : loadLocalStorageData('GAS_API_ESTIMATES')
-        )
-
-      return promiseToFetch.then(estimates => {
-        dispatch(setPricesAndTimeEstimates(estimates))
-        dispatch(gasEstimatesLoadingFinished())
-      })
+        ? priceAndTimeEstimates
+        : loadLocalStorageData('GAS_API_ESTIMATES')
+      )
+
+    return promiseToFetch.then(estimates => {
+      dispatch(setPricesAndTimeEstimates(estimates))
+      dispatch(gasEstimatesLoadingFinished())
+    })
   }
 }
 
diff --git a/ui/app/ducks/index.js b/ui/app/ducks/index.js
index 2d33edcfa..18470c441 100644
--- a/ui/app/ducks/index.js
+++ b/ui/app/ducks/index.js
@@ -61,9 +61,6 @@ window.getCleanAppState = function () {
   // append additional information
   state.version = global.platform.getVersion()
   state.browser = window.navigator.userAgent
-  // ensure seedWords are not included
-  if (state.metamask) delete state.metamask.seedWords
-  if (state.appState.currentView) delete state.appState.currentView.seedWords
   return state
 }
 
@@ -72,7 +69,7 @@ window.logStateString = function (cb) {
   global.platform.getPlatformInfo((err, platform) => {
     if (err) return cb(err)
     state.platform = platform
-    const stateString = JSON.stringify(state, removeSeedWords, 2)
+    const stateString = JSON.stringify(state, null, 2)
     cb(null, stateString)
   })
 }
@@ -89,7 +86,3 @@ window.logState = function (toClipboard) {
     }
   })
 }
-
-function removeSeedWords (key, value) {
-  return key === 'seedWords' ? undefined : value
-}
diff --git a/ui/app/ducks/metamask/metamask.js b/ui/app/ducks/metamask/metamask.js
index 3ca487c1f..35de947b4 100644
--- a/ui/app/ducks/metamask/metamask.js
+++ b/ui/app/ducks/metamask/metamask.js
@@ -39,12 +39,13 @@ function reduceMetamask (state, action) {
       editingTransactionId: null,
       forceGasMin: null,
       toNickname: '',
+      ensResolution: null,
+      ensResolutionError: '',
     },
     coinOptions: {},
     useBlockie: false,
     featureFlags: {},
     networkEndpointType: OLD_UI_NETWORK_TYPE,
-    isRevealingSeedWords: false,
     welcomeScreenSeen: false,
     currentLocale: '',
     preferences: {
@@ -60,13 +61,6 @@ function reduceMetamask (state, action) {
 
   switch (action.type) {
 
-    case actions.SHOW_ACCOUNTS_PAGE:
-      newState = extend(metamaskState, {
-        isRevealingSeedWords: false,
-      })
-      delete newState.seedWords
-      return newState
-
     case actions.UPDATE_METAMASK_STATE:
       return extend(metamaskState, action.value)
 
@@ -128,20 +122,12 @@ function reduceMetamask (state, action) {
         },
       })
 
-
-    case actions.SHOW_NEW_VAULT_SEED:
-      return extend(metamaskState, {
-        isRevealingSeedWords: true,
-        seedWords: action.value,
-      })
-
     case actions.CLEAR_SEED_WORD_CACHE:
       newState = extend(metamaskState, {
         isUnlocked: true,
         isInitialized: true,
         selectedAddress: action.value,
       })
-      delete newState.seedWords
       return newState
 
     case actions.SHOW_ACCOUNT_DETAIL:
@@ -150,7 +136,6 @@ function reduceMetamask (state, action) {
         isInitialized: true,
         selectedAddress: action.value,
       })
-      delete newState.seedWords
       return newState
 
     case actions.SET_SELECTED_TOKEN:
@@ -290,6 +275,24 @@ function reduceMetamask (state, action) {
         },
       })
 
+    case actions.UPDATE_SEND_ENS_RESOLUTION:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          ensResolution: action.payload,
+          ensResolutionError: '',
+        },
+      })
+
+    case actions.UPDATE_SEND_ENS_RESOLUTION_ERROR:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          ensResolution: null,
+          ensResolutionError: action.payload,
+        },
+      })
+
     case actions.CLEAR_SEND:
       return extend(metamaskState, {
         send: {
@@ -403,12 +406,6 @@ function reduceMetamask (state, action) {
       })
     }
 
-    case actions.COMPLETE_UI_MIGRATION: {
-      return extend(metamaskState, {
-        completedUiMigration: true,
-      })
-    }
-
     case actions.SET_FIRST_TIME_FLOW_TYPE: {
       return extend(metamaskState, {
         firstTimeFlowType: action.value,
diff --git a/ui/app/helpers/constants/routes.js b/ui/app/helpers/constants/routes.js
index d906fc8e6..cd26b3628 100644
--- a/ui/app/helpers/constants/routes.js
+++ b/ui/app/helpers/constants/routes.js
@@ -3,15 +3,19 @@ const UNLOCK_ROUTE = '/unlock'
 const LOCK_ROUTE = '/lock'
 const SETTINGS_ROUTE = '/settings'
 const GENERAL_ROUTE = '/settings/general'
-const INFO_ROUTE = '/settings/info'
 const ADVANCED_ROUTE = '/settings/advanced'
 const SECURITY_ROUTE = '/settings/security'
-const COMPANY_ROUTE = '/settings/company'
 const ABOUT_US_ROUTE = '/settings/about-us'
 const NETWORKS_ROUTE = '/settings/networks'
+const CONTACT_LIST_ROUTE = '/settings/contact-list'
+const CONTACT_EDIT_ROUTE = '/settings/contact-list/edit-contact'
+const CONTACT_ADD_ROUTE = '/settings/contact-list/add-contact'
+const CONTACT_VIEW_ROUTE = '/settings/contact-list/view-contact'
+const CONTACT_MY_ACCOUNTS_ROUTE = '/settings/contact-list/my-accounts'
+const CONTACT_MY_ACCOUNTS_VIEW_ROUTE = '/settings/contact-list/my-accounts/view'
+const CONTACT_MY_ACCOUNTS_EDIT_ROUTE = '/settings/contact-list/my-accounts/edit'
 const REVEAL_SEED_ROUTE = '/seed'
 const MOBILE_SYNC_ROUTE = '/mobile-sync'
-const CONFIRM_SEED_ROUTE = '/confirm-seed'
 const RESTORE_VAULT_ROUTE = '/restore-vault'
 const ADD_TOKEN_ROUTE = '/add-token'
 const CONFIRM_ADD_TOKEN_ROUTE = '/confirm-add-token'
@@ -20,17 +24,15 @@ const NEW_ACCOUNT_ROUTE = '/new-account'
 const IMPORT_ACCOUNT_ROUTE = '/new-account/import'
 const CONNECT_HARDWARE_ROUTE = '/new-account/connect'
 const SEND_ROUTE = '/send'
-const WELCOME_ROUTE = '/welcome'
 
 const INITIALIZE_ROUTE = '/initialize'
 const INITIALIZE_WELCOME_ROUTE = '/initialize/welcome'
 const INITIALIZE_UNLOCK_ROUTE = '/initialize/unlock'
 const INITIALIZE_CREATE_PASSWORD_ROUTE = '/initialize/create-password'
-const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/create-password/import-account'
 const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/create-password/import-with-seed-phrase'
-const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/create-password/unique-image'
 const INITIALIZE_SELECT_ACTION_ROUTE = '/initialize/select-action'
 const INITIALIZE_SEED_PHRASE_ROUTE = '/initialize/seed-phrase'
+const INITIALIZE_BACKUP_SEED_PHRASE_ROUTE = '/initialize/backup-seed-phrase'
 const INITIALIZE_END_OF_FLOW_ROUTE = '/initialize/end-of-flow'
 const INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE = '/initialize/seed-phrase/confirm'
 const INITIALIZE_METAMETRICS_OPT_IN_ROUTE = '/initialize/metametrics-opt-in'
@@ -49,10 +51,8 @@ module.exports = {
   UNLOCK_ROUTE,
   LOCK_ROUTE,
   SETTINGS_ROUTE,
-  INFO_ROUTE,
   REVEAL_SEED_ROUTE,
   MOBILE_SYNC_ROUTE,
-  CONFIRM_SEED_ROUTE,
   RESTORE_VAULT_ROUTE,
   ADD_TOKEN_ROUTE,
   CONFIRM_ADD_TOKEN_ROUTE,
@@ -61,14 +61,11 @@ module.exports = {
   IMPORT_ACCOUNT_ROUTE,
   CONNECT_HARDWARE_ROUTE,
   SEND_ROUTE,
-  WELCOME_ROUTE,
   INITIALIZE_ROUTE,
   INITIALIZE_WELCOME_ROUTE,
   INITIALIZE_UNLOCK_ROUTE,
   INITIALIZE_CREATE_PASSWORD_ROUTE,
-  INITIALIZE_IMPORT_ACCOUNT_ROUTE,
   INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE,
-  INITIALIZE_UNIQUE_IMAGE_ROUTE,
   INITIALIZE_SELECT_ACTION_ROUTE,
   INITIALIZE_SEED_PHRASE_ROUTE,
   INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE,
@@ -84,8 +81,16 @@ module.exports = {
   INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
   ADVANCED_ROUTE,
   SECURITY_ROUTE,
-  COMPANY_ROUTE,
   GENERAL_ROUTE,
   ABOUT_US_ROUTE,
+  CONTACT_LIST_ROUTE,
+  CONTACT_EDIT_ROUTE,
+  CONTACT_ADD_ROUTE,
+  CONTACT_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_ROUTE,
+  CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
   NETWORKS_ROUTE,
+  INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
 }
+
diff --git a/ui/app/helpers/higher-order-components/authenticated/authenticated.container.js b/ui/app/helpers/higher-order-components/authenticated/authenticated.container.js
index 6124b0fcd..8fc637332 100644
--- a/ui/app/helpers/higher-order-components/authenticated/authenticated.container.js
+++ b/ui/app/helpers/higher-order-components/authenticated/authenticated.container.js
@@ -3,6 +3,7 @@ import Authenticated from './authenticated.component'
 
 const mapStateToProps = state => {
   const { metamask: { isUnlocked, completedOnboarding } } = state
+
   return {
     isUnlocked,
     completedOnboarding,
diff --git a/ui/app/helpers/utils/conversion-util.js b/ui/app/helpers/utils/conversion-util.js
index affddade7..46bcfe47b 100644
--- a/ui/app/helpers/utils/conversion-util.js
+++ b/ui/app/helpers/utils/conversion-util.js
@@ -37,13 +37,6 @@ const BIG_NUMBER_WEI_MULTIPLIER = new BigNumber('1000000000000000000')
 const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000')
 const BIG_NUMBER_ETH_MULTIPLIER = new BigNumber('1')
 
-// Individual Setters
-const convert = R.invoker(1, 'times')
-const round = R.invoker(2, 'round')(R.__, BigNumber.ROUND_HALF_DOWN)
-const roundDown = R.invoker(2, 'round')(R.__, BigNumber.ROUND_DOWN)
-const invertConversionRate = conversionRate => () => new BigNumber(1.0).div(conversionRate)
-const decToBigNumberViaString = () => R.pipe(String, toBigNumber['dec'])
-
 // Setter Maps
 const toBigNumber = {
   hex: n => new BigNumber(stripHexPrefix(n), 16),
@@ -66,6 +59,13 @@ const baseChange = {
   BN: n => new BN(n.toString(16)),
 }
 
+// Individual Setters
+const convert = R.invoker(1, 'times')
+const round = R.invoker(2, 'round')(R.__, BigNumber.ROUND_HALF_DOWN)
+const roundDown = R.invoker(2, 'round')(R.__, BigNumber.ROUND_DOWN)
+const invertConversionRate = conversionRate => () => new BigNumber(1.0).div(conversionRate)
+const decToBigNumberViaString = () => R.pipe(String, toBigNumber['dec'])
+
 // Predicates
 const fromAndToCurrencyPropsNotEqual = R.compose(
   R.not,
diff --git a/ui/app/helpers/utils/fetch.js b/ui/app/helpers/utils/fetch.js
index 7bb483818..1e7ef594f 100644
--- a/ui/app/helpers/utils/fetch.js
+++ b/ui/app/helpers/utils/fetch.js
@@ -1,5 +1,3 @@
-/* global AbortController */
-
 export default function ({ timeout = 120000 } = {}) {
   return function _fetch (url, opts) {
     return new Promise(async (resolve, reject) => {
diff --git a/ui/app/helpers/utils/util.js b/ui/app/helpers/utils/util.js
index 94fa9ad42..b9e8e83c5 100644
--- a/ui/app/helpers/utils/util.js
+++ b/ui/app/helpers/utils/util.js
@@ -61,6 +61,7 @@ module.exports = {
   checksumAddress,
   addressSlicer,
   isEthNetwork,
+  isValidAddressHead,
 }
 
 function isEthNetwork (netId) {
@@ -323,3 +324,10 @@ function addressSlicer (address = '') {
 
   return `${address.slice(0, 6)}...${address.slice(-4)}`
 }
+
+function isValidAddressHead (address) {
+  const addressLengthIsLessThanFull = address.length < 42
+  const addressIsHex = isHex(address)
+
+  return addressLengthIsLessThanFull && addressIsHex
+}
diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
index 9a118a815..04e9c8dcf 100644
--- a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -84,7 +84,7 @@ export default class ConfirmAddSuggestedToken extends Component {
                         </div>
                       </div>
                     )
-                })
+                  })
               }
             </div>
           </div>
diff --git a/ui/app/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/pages/confirm-add-token/confirm-add-token.component.js
index f0a19e8d9..d918d7e39 100644
--- a/ui/app/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/pages/confirm-add-token/confirm-add-token.component.js
@@ -80,7 +80,7 @@ export default class ConfirmAddToken extends Component {
                         </div>
                       </div>
                     )
-                })
+                  })
               }
             </div>
           </div>
diff --git a/ui/app/pages/confirm-transaction/conf-tx.js b/ui/app/pages/confirm-transaction/conf-tx.js
index f9af6624e..d66cb699d 100644
--- a/ui/app/pages/confirm-transaction/conf-tx.js
+++ b/ui/app/pages/confirm-transaction/conf-tx.js
@@ -12,7 +12,6 @@ const R = require('ramda')
 const SignatureRequest = require('../../components/app/signature-request')
 const Loading = require('../../components/ui/loading-screen')
 const { DEFAULT_ROUTE } = require('../../helpers/constants/routes')
-const { getMetaMaskAccounts } = require('../../selectors/selectors')
 
 module.exports = compose(
   withRouter,
@@ -29,8 +28,6 @@ function mapStateToProps (state) {
 
   return {
     identities: state.metamask.identities,
-    accounts: getMetaMaskAccounts(state),
-    selectedAddress: state.metamask.selectedAddress,
     unapprovedTxs: state.metamask.unapprovedTxs,
     unapprovedMsgs: state.metamask.unapprovedMsgs,
     unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs,
@@ -39,7 +36,6 @@ function mapStateToProps (state) {
     warning: state.appState.warning,
     network: state.metamask.network,
     provider: state.metamask.provider,
-    conversionRate: state.metamask.conversionRate,
     currentCurrency: state.metamask.currentCurrency,
     blockGasLimit: state.metamask.currentBlockGasLimit,
     computedBalances: state.metamask.computedBalances,
@@ -146,7 +142,6 @@ ConfirmTxScreen.prototype.render = function () {
   const props = this.props
   const {
     currentCurrency,
-    conversionRate,
     blockGasLimit,
   } = props
 
@@ -159,10 +154,7 @@ ConfirmTxScreen.prototype.render = function () {
       // Properties
       txData: txData,
       key: txData.id,
-      selectedAddress: props.selectedAddress,
-      accounts: props.accounts,
       identities: props.identities,
-      conversionRate,
       currentCurrency,
       blockGasLimit,
       // Actions
diff --git a/ui/app/pages/create-account/connect-hardware/account-list.js b/ui/app/pages/create-account/connect-hardware/account-list.js
index 247c27a5d..71684783f 100644
--- a/ui/app/pages/create-account/connect-hardware/account-list.js
+++ b/ui/app/pages/create-account/connect-hardware/account-list.js
@@ -6,18 +6,18 @@ const Select = require('react-select').default
 import Button from '../../../components/ui/button'
 
 class AccountList extends Component {
-    getHdPaths () {
-      return [
-        {
-          label: `Ledger Live`,
-          value: `m/44'/60'/0'/0/0`,
-        },
-        {
-          label: `Legacy (MEW / MyCrypto)`,
-          value: `m/44'/60'/0'`,
-        },
-      ]
-    }
+  getHdPaths () {
+    return [
+      {
+        label: `Ledger Live`,
+        value: `m/44'/60'/0'/0/0`,
+      },
+      {
+        label: `Legacy (MEW / MyCrypto)`,
+        value: `m/44'/60'/0'`,
+      },
+    ]
+  }
 
     goToNextPage = () => {
       // If we have < 5 accounts, it's restricted by BIP-44
@@ -74,128 +74,128 @@ class AccountList extends Component {
     }
 
     renderAccounts () {
-        return h('div.hw-account-list', [
-            this.props.accounts.map((a, i) => {
-
-                return h('div.hw-account-list__item', { key: a.address }, [
-                h('div.hw-account-list__item__radio', [
-                    h('input', {
-                        type: 'radio',
-                        name: 'selectedAccount',
-                        id: `address-${i}`,
-                        value: a.index,
-                        onChange: (e) => this.props.onAccountChange(e.target.value),
-                        checked: this.props.selectedAccount === a.index.toString(),
-                    }),
-                    h(
-                    'label.hw-account-list__item__label',
-                    {
-                        htmlFor: `address-${i}`,
-                    },
-                    [
-                      h('span.hw-account-list__item__index', a.index + 1),
-                      `${a.address.slice(0, 4)}...${a.address.slice(-4)}`,
-                      h('span.hw-account-list__item__balance', `${a.balance}`),
-                    ]),
+      return h('div.hw-account-list', [
+        this.props.accounts.map((a, i) => {
+
+          return h('div.hw-account-list__item', { key: a.address }, [
+            h('div.hw-account-list__item__radio', [
+              h('input', {
+                type: 'radio',
+                name: 'selectedAccount',
+                id: `address-${i}`,
+                value: a.index,
+                onChange: (e) => this.props.onAccountChange(e.target.value),
+                checked: this.props.selectedAccount === a.index.toString(),
+              }),
+              h(
+                'label.hw-account-list__item__label',
+                {
+                  htmlFor: `address-${i}`,
+                },
+                [
+                  h('span.hw-account-list__item__index', a.index + 1),
+                  `${a.address.slice(0, 4)}...${a.address.slice(-4)}`,
+                  h('span.hw-account-list__item__balance', `${a.balance}`),
                 ]),
-                h(
-                    'a.hw-account-list__item__link',
-                    {
-                    href: genAccountLink(a.address, this.props.network),
-                    target: '_blank',
-                    title: this.context.t('etherscanView'),
-                    },
-                    h('img', { src: 'images/popout.svg' })
-                ),
-                ])
-            }),
-        ])
+            ]),
+            h(
+              'a.hw-account-list__item__link',
+              {
+                href: genAccountLink(a.address, this.props.network),
+                target: '_blank',
+                title: this.context.t('etherscanView'),
+              },
+              h('img', { src: 'images/popout.svg' })
+            ),
+          ])
+        }),
+      ])
     }
 
-  renderPagination () {
-    return h('div.hw-list-pagination', [
-      h(
-        'button.hw-list-pagination__button',
-        {
-          onClick: this.goToPreviousPage,
-        },
-        `< ${this.context.t('prev')}`
-      ),
-
-      h(
-        'button.hw-list-pagination__button',
-        {
-          onClick: this.goToNextPage,
-        },
-        `${this.context.t('next')} >`
-      ),
-    ])
-  }
-
-  renderButtons () {
-    const disabled = this.props.selectedAccount === null
-    const buttonProps = {}
-    if (disabled) {
-      buttonProps.disabled = true
+    renderPagination () {
+      return h('div.hw-list-pagination', [
+        h(
+          'button.hw-list-pagination__button',
+          {
+            onClick: this.goToPreviousPage,
+          },
+          `< ${this.context.t('prev')}`
+        ),
+
+        h(
+          'button.hw-list-pagination__button',
+          {
+            onClick: this.goToNextPage,
+          },
+          `${this.context.t('next')} >`
+        ),
+      ])
     }
 
-    return h('div.new-account-connect-form__buttons', {}, [
-      h(Button, {
-        type: 'default',
-        large: true,
-        className: 'new-account-connect-form__button',
-        onClick: this.props.onCancel.bind(this),
-      }, [this.context.t('cancel')]),
-
-      h(Button, {
-        type: 'primary',
-        large: true,
-        className: 'new-account-connect-form__button unlock',
-        disabled,
-        onClick: this.props.onUnlockAccount.bind(this, this.props.device),
-      }, [this.context.t('unlock')]),
-    ])
-  }
+    renderButtons () {
+      const disabled = this.props.selectedAccount === null
+      const buttonProps = {}
+      if (disabled) {
+        buttonProps.disabled = true
+      }
 
-  renderForgetDevice () {
-    return h('div.hw-forget-device-container', {}, [
-      h('a', {
-        onClick: this.props.onForgetDevice.bind(this, this.props.device),
-      }, this.context.t('forgetDevice')),
-    ])
-  }
+      return h('div.new-account-connect-form__buttons', {}, [
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-connect-form__button',
+          onClick: this.props.onCancel.bind(this),
+        }, [this.context.t('cancel')]),
+
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'new-account-connect-form__button unlock',
+          disabled,
+          onClick: this.props.onUnlockAccount.bind(this, this.props.device),
+        }, [this.context.t('unlock')]),
+      ])
+    }
 
-  render () {
-    return h('div.new-account-connect-form.account-list', {}, [
+    renderForgetDevice () {
+      return h('div.hw-forget-device-container', {}, [
+        h('a', {
+          onClick: this.props.onForgetDevice.bind(this, this.props.device),
+        }, this.context.t('forgetDevice')),
+      ])
+    }
+
+    render () {
+      return h('div.new-account-connect-form.account-list', {}, [
         this.renderHeader(),
         this.renderAccounts(),
         this.renderPagination(),
         this.renderButtons(),
         this.renderForgetDevice(),
-    ])
-  }
+      ])
+    }
 
 }
 
 
 AccountList.propTypes = {
-    onPathChange: PropTypes.func.isRequired,
-    selectedPath: PropTypes.string.isRequired,
-    device: PropTypes.string.isRequired,
-    accounts: PropTypes.array.isRequired,
-    onAccountChange: PropTypes.func.isRequired,
-    onForgetDevice: PropTypes.func.isRequired,
-    getPage: PropTypes.func.isRequired,
-    network: PropTypes.string,
-    selectedAccount: PropTypes.string,
-    history: PropTypes.object,
-    onUnlockAccount: PropTypes.func,
-    onCancel: PropTypes.func,
-    onAccountRestriction: PropTypes.func,
+  onPathChange: PropTypes.func.isRequired,
+  selectedPath: PropTypes.string.isRequired,
+  device: PropTypes.string.isRequired,
+  accounts: PropTypes.array.isRequired,
+  onAccountChange: PropTypes.func.isRequired,
+  onForgetDevice: PropTypes.func.isRequired,
+  getPage: PropTypes.func.isRequired,
+  network: PropTypes.string,
+  selectedAccount: PropTypes.string,
+  history: PropTypes.object,
+  onUnlockAccount: PropTypes.func,
+  onCancel: PropTypes.func,
+  onAccountRestriction: PropTypes.func,
 }
 
 AccountList.contextTypes = {
-    t: PropTypes.func,
+  t: PropTypes.func,
 }
 
 module.exports = AccountList
diff --git a/ui/app/pages/create-account/connect-hardware/connect-screen.js b/ui/app/pages/create-account/connect-hardware/connect-screen.js
index a3b8ad246..fe7c1e027 100644
--- a/ui/app/pages/create-account/connect-hardware/connect-screen.js
+++ b/ui/app/pages/create-account/connect-hardware/connect-screen.js
@@ -4,12 +4,12 @@ const h = require('react-hyperscript')
 import Button from '../../../components/ui/button'
 
 class ConnectScreen extends Component {
-    constructor (props) {
-        super(props)
-        this.state = {
-          selectedDevice: null,
-        }
+  constructor (props) {
+    super(props)
+    this.state = {
+      selectedDevice: null,
     }
+  }
 
     connect = () => {
       if (this.state.selectedDevice) {
@@ -19,23 +19,23 @@ class ConnectScreen extends Component {
     }
 
     renderConnectToTrezorButton () {
-        return h(
-            `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
-            { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
-            h('img.hw-connect__btn__img', {
-              src: 'images/trezor-logo.svg',
-            })
-        )
+      return h(
+        `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`,
+        { onClick: _ => this.setState({selectedDevice: 'trezor'}) },
+        h('img.hw-connect__btn__img', {
+          src: 'images/trezor-logo.svg',
+        })
+      )
     }
 
     renderConnectToLedgerButton () {
-        return h(
-          `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
-          { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
-            h('img.hw-connect__btn__img', {
-              src: 'images/ledger-logo.svg',
-            })
-        )
+      return h(
+        `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`,
+        { onClick: _ => this.setState({selectedDevice: 'ledger'}) },
+        h('img.hw-connect__btn__img', {
+          src: 'images/ledger-logo.svg',
+        })
+      )
     }
 
     renderButtons () {
@@ -57,30 +57,30 @@ class ConnectScreen extends Component {
     }
 
     renderUnsupportedBrowser () {
-        return (
-            h('div.new-account-connect-form.unsupported-browser', {}, [
-                h('div.hw-connect', [
-                    h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
-                    h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
-                ]),
-                h(Button, {
-                  type: 'primary',
-                  large: true,
-                  onClick: () => global.platform.openWindow({
-                    url: 'https://google.com/chrome',
-                  }),
-                }, this.context.t('downloadGoogleChrome')),
-            ])
-        )
+      return (
+        h('div.new-account-connect-form.unsupported-browser', {}, [
+          h('div.hw-connect', [
+            h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
+            h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
+          ]),
+          h(Button, {
+            type: 'primary',
+            large: true,
+            onClick: () => global.platform.openWindow({
+              url: 'https://google.com/chrome',
+            }),
+          }, this.context.t('downloadGoogleChrome')),
+        ])
+      )
     }
 
     renderHeader () {
-        return (
-            h('div.hw-connect__header', {}, [
-                h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)),
-                h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)),
-            ])
-        )
+      return (
+        h('div.hw-connect__header', {}, [
+          h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)),
+          h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)),
+        ])
+      )
     }
 
     getAffiliateLinks () {
@@ -96,10 +96,10 @@ class ConnectScreen extends Component {
     }
 
     renderTrezorAffiliateLink () {
-        return h('div.hw-connect__get-hw', {}, [
-            h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)),
-            this.getAffiliateLinks(),
-          ])
+      return h('div.hw-connect__get-hw', {}, [
+        h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)),
+        this.getAffiliateLinks(),
+      ])
     }
 
 
@@ -108,89 +108,89 @@ class ConnectScreen extends Component {
     }
 
     renderLearnMore () {
-        return (
-            h('p.hw-connect__learn-more', {
-                onClick: this.scrollToTutorial,
-            }, [
-                this.context.t('learnMore'),
-                h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
-            ])
-        )
+      return (
+        h('p.hw-connect__learn-more', {
+          onClick: this.scrollToTutorial,
+        }, [
+          this.context.t('learnMore'),
+          h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
+        ])
+      )
     }
 
     renderTutorialSteps () {
-        const steps = [
-            {
-                asset: 'hardware-wallet-step-1',
-                dimensions: {width: '225px', height: '75px'},
-             },
-             {
-                asset: 'hardware-wallet-step-2',
-                dimensions: {width: '300px', height: '100px'},
-             },
-             {
-                asset: 'hardware-wallet-step-3',
-                dimensions: {width: '120px', height: '90px'},
-             },
-        ]
-
-        return h('.hw-tutorial', {
-          ref: node => { this.referenceNode = node },
+      const steps = [
+        {
+          asset: 'hardware-wallet-step-1',
+          dimensions: {width: '225px', height: '75px'},
+        },
+        {
+          asset: 'hardware-wallet-step-2',
+          dimensions: {width: '300px', height: '100px'},
         },
-            steps.map((step, i) => (
-            h('div.hw-connect', {}, [
-                h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)),
-                h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)),
-                h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
-            ])
-            ))
-        )
+        {
+          asset: 'hardware-wallet-step-3',
+          dimensions: {width: '120px', height: '90px'},
+        },
+      ]
+
+      return h('.hw-tutorial', {
+        ref: node => { this.referenceNode = node },
+      },
+      steps.map((step, i) => (
+        h('div.hw-connect', {}, [
+          h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)),
+          h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)),
+          h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
+        ])
+      ))
+      )
     }
 
     renderFooter () {
-        return (
-            h('div.hw-connect__footer', {}, [
-                h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
-                this.renderButtons(),
-                h('p.hw-connect__footer__msg', {}, [
-                    this.context.t(`havingTroubleConnecting`),
-                    h('a.hw-connect__footer__link', {
-                        href: 'https://support.metamask.io/',
-                        target: '_blank',
-                      }, this.context.t('getHelp')),
-                ]),
-            ])
-        )
+      return (
+        h('div.hw-connect__footer', {}, [
+          h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
+          this.renderButtons(),
+          h('p.hw-connect__footer__msg', {}, [
+            this.context.t(`havingTroubleConnecting`),
+            h('a.hw-connect__footer__link', {
+              href: 'https://support.metamask.io/',
+              target: '_blank',
+            }, this.context.t('getHelp')),
+          ]),
+        ])
+      )
     }
 
     renderConnectScreen () {
-        return (
-            h('div.new-account-connect-form', {}, [
-                this.renderHeader(),
-                this.renderButtons(),
-                this.renderTrezorAffiliateLink(),
-                this.renderLearnMore(),
-                this.renderTutorialSteps(),
-                this.renderFooter(),
-            ])
-        )
+      return (
+        h('div.new-account-connect-form', {}, [
+          this.renderHeader(),
+          this.renderButtons(),
+          this.renderTrezorAffiliateLink(),
+          this.renderLearnMore(),
+          this.renderTutorialSteps(),
+          this.renderFooter(),
+        ])
+      )
     }
 
     render () {
-        if (this.props.browserSupported) {
-            return this.renderConnectScreen()
-        }
-        return this.renderUnsupportedBrowser()
+      if (this.props.browserSupported) {
+        return this.renderConnectScreen()
+      }
+      return this.renderUnsupportedBrowser()
     }
 }
 
 ConnectScreen.propTypes = {
-    connectToHardwareWallet: PropTypes.func.isRequired,
-    browserSupported: PropTypes.bool.isRequired,
+  connectToHardwareWallet: PropTypes.func.isRequired,
+  browserSupported: PropTypes.bool.isRequired,
 }
 
 ConnectScreen.contextTypes = {
-    t: PropTypes.func,
+  t: PropTypes.func,
 }
 
 module.exports = ConnectScreen
diff --git a/ui/app/pages/create-account/connect-hardware/index.js b/ui/app/pages/create-account/connect-hardware/index.js
index 80a160205..66851c780 100644
--- a/ui/app/pages/create-account/connect-hardware/index.js
+++ b/ui/app/pages/create-account/connect-hardware/index.js
@@ -126,16 +126,16 @@ class ConnectHardwareForm extends Component {
 
   onForgetDevice = (device) => {
     this.props.forgetDevice(device)
-    .then(_ => {
-      this.setState({
-        error: null,
-        selectedAccount: null,
-        accounts: [],
-        unlocked: false,
+      .then(_ => {
+        this.setState({
+          error: null,
+          selectedAccount: null,
+          accounts: [],
+          unlocked: false,
+        })
+      }).catch(e => {
+        this.setState({ error: e.toString() })
       })
-    }).catch(e => {
-      this.setState({ error: e.toString() })
-    })
   }
 
   onUnlockAccount = (device) => {
@@ -145,28 +145,28 @@ class ConnectHardwareForm extends Component {
     }
 
     this.props.unlockHardwareWalletAccount(this.state.selectedAccount, device)
-    .then(_ => {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Accounts',
-          action: 'Connected Hardware Wallet',
-          name: 'Connected Account with: ' + device,
-        },
-      })
-      this.props.history.push(DEFAULT_ROUTE)
-    }).catch(e => {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Accounts',
-          action: 'Connected Hardware Wallet',
-          name: 'Error connecting hardware wallet',
-        },
-        customVariables: {
-          error: e.toString(),
-        },
+      .then(_ => {
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Accounts',
+            action: 'Connected Hardware Wallet',
+            name: 'Connected Account with: ' + device,
+          },
+        })
+        this.props.history.push(DEFAULT_ROUTE)
+      }).catch(e => {
+        this.context.metricsEvent({
+          eventOpts: {
+            category: 'Accounts',
+            action: 'Connected Hardware Wallet',
+            name: 'Error connecting hardware wallet',
+          },
+          customVariables: {
+            error: e.toString(),
+          },
+        })
+        this.setState({ error: e.toString() })
       })
-      this.setState({ error: e.toString() })
-    })
   }
 
   onCancel = () => {
diff --git a/ui/app/pages/first-time-flow/create-password/create-password.component.js b/ui/app/pages/first-time-flow/create-password/create-password.component.js
index 5e67a2244..fbeb34d77 100644
--- a/ui/app/pages/first-time-flow/create-password/create-password.component.js
+++ b/ui/app/pages/first-time-flow/create-password/create-password.component.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Route } from 'react-router-dom'
 import NewAccount from './new-account'
+import MetaFoxLogo from '../../../components/ui/metafox-logo'
 import ImportWithSeedPhrase from './import-with-seed-phrase'
 import {
   INITIALIZE_CREATE_PASSWORD_ROUTE,
@@ -30,19 +31,7 @@ export default class CreatePassword extends PureComponent {
 
     return (
       <div className="first-time-flow__wrapper">
-        <div className="app-header__logo-container">
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.svg"
-            height={30}
-          />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--icon"
-            src="/images/logo/metamask-fox.svg"
-            height={42}
-            width={42}
-          />
-        </div>
+        <MetaFoxLogo />
         <Switch>
           <Route
             exact
diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
index a2fb5a3bf..48eff96cb 100644
--- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
+++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
@@ -17,6 +17,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
     onSubmit: PropTypes.func.isRequired,
+    setSeedPhraseBackedUp: PropTypes.func,
   }
 
   state = {
@@ -126,7 +127,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
     }
 
     const { password, seedPhrase } = this.state
-    const { history, onSubmit } = this.props
+    const { history, onSubmit, setSeedPhraseBackedUp } = this.props
 
     try {
       await onSubmit(password, this.parseSeedPhrase(seedPhrase))
@@ -137,7 +138,10 @@ export default class ImportWithSeedPhrase extends PureComponent {
           name: 'Import Complete',
         },
       })
-      history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+
+      setSeedPhraseBackedUp(true).then(() => {
+        history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+      })
     } catch (error) {
       this.setState({ seedPhraseError: error.message })
     }
@@ -174,7 +178,7 @@ export default class ImportWithSeedPhrase extends PureComponent {
     })
 
     this.setState((prevState) => ({
-        termsChecked: !prevState.termsChecked,
+      termsChecked: !prevState.termsChecked,
     }))
   }
 
diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js
new file mode 100644
index 000000000..0cfeee1f4
--- /dev/null
+++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.container.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import ImportWithSeedPhrase from './import-with-seed-phrase.component'
+import {
+  setSeedPhraseBackedUp,
+} from '../../../../store/actions'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(ImportWithSeedPhrase)
diff --git a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js
index e5ff1fde5..9d4ad7d0f 100644
--- a/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js
+++ b/ui/app/pages/first-time-flow/create-password/import-with-seed-phrase/index.js
@@ -1 +1 @@
-export { default } from './import-with-seed-phrase.component'
+export { default } from './import-with-seed-phrase.container'
diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js
index 83b0e7fc6..31658d87a 100644
--- a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js
+++ b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Button from '../../../components/ui/button'
+import MetaFoxLogo from '../../../components/ui/metafox-logo'
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 
 export default class EndOfFlowScreen extends PureComponent {
@@ -21,19 +22,7 @@ export default class EndOfFlowScreen extends PureComponent {
 
     return (
       <div className="end-of-flow">
-        <div className="app-header__logo-container">
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.svg"
-            height={30}
-          />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--icon"
-            src="/images/logo/metamask-fox.svg"
-            height={42}
-            width={42}
-          />
-        </div>
+        <MetaFoxLogo />
         <div className="end-of-flow__emoji">🎉</div>
         <div className="first-time-flow__header">
           { t('congratulations') }
@@ -66,9 +55,9 @@ export default class EndOfFlowScreen extends PureComponent {
             rel="noopener noreferrer"
           >
             <span className="first-time-flow__link-text">
-              Learn More
+              {t('endOfFlowMessage9')}
             </span>
-          </a>.
+          </a>
         </div>
         <Button
           type="primary"
@@ -85,7 +74,7 @@ export default class EndOfFlowScreen extends PureComponent {
             history.push(DEFAULT_ROUTE)
           }}
         >
-          { 'All Done' }
+          { t('endOfFlowMessage10') }
         </Button>
       </div>
     )
diff --git a/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js
index 4fd028482..6bc89245b 100644
--- a/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js
+++ b/ui/app/pages/first-time-flow/first-time-flow-switch/first-time-flow-switch.component.js
@@ -6,7 +6,6 @@ import {
   LOCK_ROUTE,
   INITIALIZE_WELCOME_ROUTE,
   INITIALIZE_UNLOCK_ROUTE,
-  INITIALIZE_SEED_PHRASE_ROUTE,
   INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
 } from '../../../helpers/constants/routes'
 
@@ -15,7 +14,6 @@ export default class FirstTimeFlowSwitch extends PureComponent {
     completedOnboarding: PropTypes.bool,
     isInitialized: PropTypes.bool,
     isUnlocked: PropTypes.bool,
-    seedPhrase: PropTypes.string,
     optInMetaMetrics: PropTypes.bool,
   }
 
@@ -24,7 +22,6 @@ export default class FirstTimeFlowSwitch extends PureComponent {
       completedOnboarding,
       isInitialized,
       isUnlocked,
-      seedPhrase,
       optInMetaMetrics,
     } = this.props
 
@@ -32,7 +29,7 @@ export default class FirstTimeFlowSwitch extends PureComponent {
       return <Redirect to={{ pathname: DEFAULT_ROUTE }} />
     }
 
-    if (isUnlocked && !seedPhrase) {
+    if (isUnlocked) {
       return <Redirect to={{ pathname: LOCK_ROUTE }} />
     }
 
@@ -44,10 +41,6 @@ export default class FirstTimeFlowSwitch extends PureComponent {
       return <Redirect to={{ pathname: INITIALIZE_UNLOCK_ROUTE }} />
     }
 
-    if (seedPhrase) {
-      return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }} />
-    }
-
     if (optInMetaMetrics === null) {
       return <Redirect to={{ pathname: INITIALIZE_WELCOME_ROUTE }} />
     }
diff --git a/ui/app/pages/first-time-flow/first-time-flow.component.js b/ui/app/pages/first-time-flow/first-time-flow.component.js
index 0d206bf42..91415d2ee 100644
--- a/ui/app/pages/first-time-flow/first-time-flow.component.js
+++ b/ui/app/pages/first-time-flow/first-time-flow.component.js
@@ -18,6 +18,7 @@ import {
   INITIALIZE_SELECT_ACTION_ROUTE,
   INITIALIZE_END_OF_FLOW_ROUTE,
   INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
+  INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
 } from '../../helpers/constants/routes'
 
 export default class FirstTimeFlow extends PureComponent {
@@ -30,6 +31,9 @@ export default class FirstTimeFlow extends PureComponent {
     isUnlocked: PropTypes.bool,
     unlockAccount: PropTypes.func,
     nextRoute: PropTypes.string,
+    showingSeedPhraseBackupAfterOnboarding: PropTypes.bool,
+    seedPhraseBackedUp: PropTypes.bool,
+    verifySeedPhrase: PropTypes.func,
   }
 
   state = {
@@ -38,9 +42,16 @@ export default class FirstTimeFlow extends PureComponent {
   }
 
   componentDidMount () {
-    const { completedOnboarding, history, isInitialized, isUnlocked } = this.props
+    const {
+      completedOnboarding,
+      history,
+      isInitialized,
+      isUnlocked,
+      showingSeedPhraseBackupAfterOnboarding,
+      seedPhraseBackedUp,
+    } = this.props
 
-    if (completedOnboarding) {
+    if (completedOnboarding && (!showingSeedPhraseBackupAfterOnboarding || seedPhraseBackedUp)) {
       history.push(DEFAULT_ROUTE)
       return
     }
@@ -88,6 +99,7 @@ export default class FirstTimeFlow extends PureComponent {
 
   render () {
     const { seedPhrase, isImportedKeyring } = this.state
+    const { verifySeedPhrase } = this.props
 
     return (
       <div className="first-time-flow">
@@ -98,6 +110,17 @@ export default class FirstTimeFlow extends PureComponent {
               <SeedPhrase
                 { ...props }
                 seedPhrase={seedPhrase}
+                verifySeedPhrase={verifySeedPhrase}
+              />
+            )}
+          />
+          <Route
+            path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE}
+            render={props => (
+              <SeedPhrase
+                { ...props }
+                seedPhrase={seedPhrase}
+                verifySeedPhrase={verifySeedPhrase}
               />
             )}
           />
diff --git a/ui/app/pages/first-time-flow/first-time-flow.container.js b/ui/app/pages/first-time-flow/first-time-flow.container.js
index 16025a489..ec9920d74 100644
--- a/ui/app/pages/first-time-flow/first-time-flow.container.js
+++ b/ui/app/pages/first-time-flow/first-time-flow.container.js
@@ -5,16 +5,23 @@ import {
   createNewVaultAndGetSeedPhrase,
   createNewVaultAndRestore,
   unlockAndGetSeedPhrase,
+  verifySeedPhrase,
 } from '../../store/actions'
+import {
+  INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
+} from '../../helpers/constants/routes'
 
-const mapStateToProps = state => {
-  const { metamask: { completedOnboarding, isInitialized, isUnlocked } } = state
+const mapStateToProps = (state, ownProps) => {
+  const { metamask: { completedOnboarding, isInitialized, isUnlocked, seedPhraseBackedUp } } = state
+  const showingSeedPhraseBackupAfterOnboarding = Boolean(ownProps.location.pathname.match(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE))
 
   return {
     completedOnboarding,
     isInitialized,
     isUnlocked,
     nextRoute: getFirstTimeFlowTypeRoute(state),
+    showingSeedPhraseBackupAfterOnboarding,
+    seedPhraseBackedUp,
   }
 }
 
@@ -25,6 +32,7 @@ const mapDispatchToProps = dispatch => {
       return dispatch(createNewVaultAndRestore(password, seedPhrase))
     },
     unlockAccount: password => dispatch(unlockAndGetSeedPhrase(password)),
+    verifySeedPhrase: () => verifySeedPhrase(),
   }
 }
 
diff --git a/ui/app/pages/first-time-flow/index.scss b/ui/app/pages/first-time-flow/index.scss
index 6c65cfdae..dec80cb60 100644
--- a/ui/app/pages/first-time-flow/index.scss
+++ b/ui/app/pages/first-time-flow/index.scss
@@ -26,6 +26,10 @@
 
     .app-header__metafox-logo {
       margin-bottom: 40px;
+
+      @media screen and (max-width: $break-small) {
+        margin-bottom: 0px;
+      }
     }
   }
 
diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
index 6b9d06cf9..bb187d634 100644
--- a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
+++ b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import MetaFoxLogo from '../../../components/ui/metafox-logo'
 import PageContainerFooter from '../../../components/ui/page-container/page-container-footer'
 
 export default class MetaMetricsOptIn extends Component {
@@ -28,19 +29,7 @@ export default class MetaMetricsOptIn extends Component {
     return (
       <div className="metametrics-opt-in">
         <div className="metametrics-opt-in__main">
-          <div className="app-header__logo-container">
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-              src="/images/logo/metamask-logo-horizontal.svg"
-              height={30}
-            />
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--icon"
-              src="/images/logo/metamask-fox.svg"
-              height={42}
-              width={42}
-            />
-          </div>
+          <MetaFoxLogo />
           <div className="metametrics-opt-in__body-graphic">
             <img src="images/metrics-chart.svg" />
           </div>
@@ -113,7 +102,7 @@ export default class MetaMetricsOptIn extends Component {
                       .then(() => {
                         history.push(nextRoute)
                       })
-                })
+                  })
               }}
               cancelText={'No Thanks'}
               hideCancel={false}
@@ -146,7 +135,7 @@ export default class MetaMetricsOptIn extends Component {
                       .then(() => {
                         history.push(nextRoute)
                       })
-                })
+                  })
               }}
               submitText={'I agree'}
               submitButtonType={'primary'}
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
index 4cfc38fdf..9256c3d8d 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
@@ -6,6 +6,7 @@ import Button from '../../../../components/ui/button'
 import {
   INITIALIZE_END_OF_FLOW_ROUTE,
   INITIALIZE_SEED_PHRASE_ROUTE,
+  DEFAULT_ROUTE,
 } from '../../../../helpers/constants/routes'
 import { exportAsFile } from '../../../../helpers/utils/util'
 import DraggableSeed from './draggable-seed.component'
@@ -88,7 +89,7 @@ export default class ConfirmSeedPhrase extends PureComponent {
   }
 
   handleSubmit = async () => {
-    const { history } = this.props
+    const { history, setSeedPhraseBackedUp, showingSeedPhraseBackupAfterOnboarding, hideSeedPhraseBackupAfterOnboarding } = this.props
 
     if (!this.isValid()) {
       return
@@ -102,7 +103,15 @@ export default class ConfirmSeedPhrase extends PureComponent {
           name: 'Verify Complete',
         },
       })
-      history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+
+      setSeedPhraseBackedUp(true).then(() => {
+        if (showingSeedPhraseBackupAfterOnboarding) {
+          hideSeedPhraseBackupAfterOnboarding()
+          history.push(DEFAULT_ROUTE)
+        } else {
+          history.push(INITIALIZE_END_OF_FLOW_ROUTE)
+        }
+      })
     } catch (error) {
       console.error(error.message)
     }
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js
new file mode 100644
index 000000000..ac5a26979
--- /dev/null
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.container.js
@@ -0,0 +1,23 @@
+import { connect } from 'react-redux'
+import ConfirmSeedPhrase from './confirm-seed-phrase.component'
+import {
+  setSeedPhraseBackedUp,
+  hideSeedPhraseBackupAfterOnboarding,
+} from '../../../../store/actions'
+
+const mapStateToProps = state => {
+  const { appState: { showingSeedPhraseBackupAfterOnboarding } } = state
+
+  return {
+    showingSeedPhraseBackupAfterOnboarding,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)),
+    hideSeedPhraseBackupAfterOnboarding: () => dispatch(hideSeedPhraseBackupAfterOnboarding()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfirmSeedPhrase)
diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
index c7b511503..beb53b383 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.js
@@ -1 +1 @@
-export { default } from './confirm-seed-phrase.component'
+export { default } from './confirm-seed-phrase.container'
diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js
index 4a1b191b5..a528f95a2 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.js
@@ -1 +1 @@
-export { default } from './reveal-seed-phrase.component'
+export { default } from './reveal-seed-phrase.container'
diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
index 8a47447ed..dfe9868cf 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
@@ -1,4 +1,12 @@
 .reveal-seed-phrase {
+  @media screen and (max-width: 576px) {
+    display: flex;
+    flex-direction: column;
+    width: 96%;
+    margin-left: 2%;
+    margin-right: 2%;
+  }
+
   &__secret {
     position: relative;
     display: flex;
@@ -54,4 +62,12 @@
   button {
     margin-top: 0xp;
   }
+
+  &__buttons {
+    display: flex;
+
+    .first-time-flow__button:last-of-type {
+      margin-left: 20px;
+    }
+  }
 }
diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
index 4e9948a0e..78981bae8 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import LockIcon from '../../../../components/ui/lock-icon'
 import Button from '../../../../components/ui/button'
-import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE } from '../../../../helpers/constants/routes'
+import { INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE, DEFAULT_ROUTE } from '../../../../helpers/constants/routes'
 import { exportAsFile } from '../../../../helpers/utils/util'
 
 export default class RevealSeedPhrase extends PureComponent {
@@ -15,6 +15,8 @@ export default class RevealSeedPhrase extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
     seedPhrase: PropTypes.string,
+    setSeedPhraseBackedUp: PropTypes.func,
+    setCompletedOnboarding: PropTypes.func,
   }
 
   state = {
@@ -45,6 +47,24 @@ export default class RevealSeedPhrase extends PureComponent {
     history.push(INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE)
   }
 
+  handleSkip = event => {
+    event.preventDefault()
+    const { history, setSeedPhraseBackedUp, setCompletedOnboarding } = this.props
+
+    this.context.metricsEvent({
+      eventOpts: {
+        category: 'Onboarding',
+        action: 'Seed Phrase Setup',
+        name: 'Remind me later',
+      },
+    })
+
+    Promise.all([setCompletedOnboarding(), setSeedPhraseBackedUp(false)])
+      .then(() => {
+        history.push(DEFAULT_ROUTE)
+      })
+  }
+
   renderSecretWordsContainer () {
     const { t } = this.context
     const { seedPhrase } = this.props
@@ -129,14 +149,23 @@ export default class RevealSeedPhrase extends PureComponent {
             </div>
           </div>
         </div>
-        <Button
-          type="primary"
-          className="first-time-flow__button"
-          onClick={this.handleNext}
-          disabled={!isShowingSeedPhrase}
-        >
-          { t('next') }
-        </Button>
+        <div className="reveal-seed-phrase__buttons">
+          <Button
+            type="secondary"
+            className="first-time-flow__button"
+            onClick={this.handleSkip}
+          >
+            { t('remindMeLater') }
+          </Button>
+          <Button
+            type="primary"
+            className="first-time-flow__button"
+            onClick={this.handleNext}
+            disabled={!isShowingSeedPhrase}
+          >
+            { t('next') }
+          </Button>
+        </div>
       </div>
     )
   }
diff --git a/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js
new file mode 100644
index 000000000..7ada36afc
--- /dev/null
+++ b/ui/app/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.container.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux'
+import RevealSeedPhrase from './reveal-seed-phrase.component'
+import {
+  setCompletedOnboarding,
+  setSeedPhraseBackedUp,
+} from '../../../../store/actions'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setSeedPhraseBackedUp: (seedPhraseBackupState) => dispatch(setSeedPhraseBackedUp(seedPhraseBackupState)),
+    setCompletedOnboarding: () => dispatch(setCompletedOnboarding()),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(RevealSeedPhrase)
diff --git a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
index 0b19af18c..ae38757d9 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
@@ -6,45 +6,48 @@ import ConfirmSeedPhrase from './confirm-seed-phrase'
 import {
   INITIALIZE_SEED_PHRASE_ROUTE,
   INITIALIZE_CONFIRM_SEED_PHRASE_ROUTE,
+  INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
   DEFAULT_ROUTE,
 } from '../../../helpers/constants/routes'
 import HTML5Backend from 'react-dnd-html5-backend'
 import {DragDropContextProvider} from 'react-dnd'
+import MetaFoxLogo from '../../../components/ui/metafox-logo'
 
 export default class SeedPhrase extends PureComponent {
   static propTypes = {
     address: PropTypes.string,
     history: PropTypes.object,
     seedPhrase: PropTypes.string,
+    verifySeedPhrase: PropTypes.func,
+  }
+
+  state = {
+    verifiedSeedPhrase: '',
   }
 
   componentDidMount () {
-    const { seedPhrase, history } = this.props
+    const { seedPhrase, history, verifySeedPhrase } = this.props
 
     if (!seedPhrase) {
-      history.push(DEFAULT_ROUTE)
+      verifySeedPhrase()
+        .then(verifiedSeedPhrase => {
+          if (!verifiedSeedPhrase) {
+            history.push(DEFAULT_ROUTE)
+          } else {
+            this.setState({ verifiedSeedPhrase })
+          }
+        })
     }
   }
 
   render () {
     const { seedPhrase } = this.props
+    const { verifiedSeedPhrase } = this.state
 
     return (
       <DragDropContextProvider backend={HTML5Backend}>
         <div className="first-time-flow__wrapper">
-          <div className="app-header__logo-container">
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-              src="/images/logo/metamask-logo-horizontal.svg"
-              height={30}
-            />
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--icon"
-              src="/images/logo/metamask-fox.svg"
-              height={42}
-              width={42}
-            />
-          </div>
+          <MetaFoxLogo />
           <Switch>
             <Route
               exact
@@ -52,7 +55,7 @@ export default class SeedPhrase extends PureComponent {
               render={props => (
                 <ConfirmSeedPhrase
                   { ...props }
-                  seedPhrase={seedPhrase}
+                  seedPhrase={seedPhrase || verifiedSeedPhrase}
                 />
               )}
             />
@@ -62,7 +65,17 @@ export default class SeedPhrase extends PureComponent {
               render={props => (
                 <RevealSeedPhrase
                   { ...props }
-                  seedPhrase={seedPhrase}
+                  seedPhrase={seedPhrase || verifiedSeedPhrase}
+                />
+              )}
+            />
+            <Route
+              exact
+              path={INITIALIZE_BACKUP_SEED_PHRASE_ROUTE}
+              render={props => (
+                <RevealSeedPhrase
+                  { ...props }
+                  seedPhrase={seedPhrase || verifiedSeedPhrase}
                 />
               )}
             />
diff --git a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js
index 8339a6f6f..3d5f7f066 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js
+++ b/ui/app/pages/first-time-flow/seed-phrase/tests/confirm-seed-phrase-component.test.js
@@ -131,7 +131,7 @@ describe('ConfirmSeedPhrase Component', () => {
     assert.deepEqual(root.state().pendingSeedIndices, [2, 0, 1])
   })
 
-  it('should submit correctly', () => {
+  it('should submit correctly', async () => {
     const originalSeed = ['鼠', '牛', '虎', '兔', '龍', '蛇', '馬', '羊', '猴', '雞', '狗', '豬']
     const metricsEventSpy = sinon.spy()
     const pushSpy = sinon.spy()
@@ -139,6 +139,7 @@ describe('ConfirmSeedPhrase Component', () => {
       {
         seedPhrase: '鼠 牛 虎 兔 龍 蛇 馬 羊 猴 雞 狗 豬',
         history: { push: pushSpy },
+        setSeedPhraseBackedUp: () => Promise.resolve(),
       },
       {
         metricsEvent: metricsEventSpy,
@@ -157,6 +158,9 @@ describe('ConfirmSeedPhrase Component', () => {
     root.update()
 
     root.find('.first-time-flow__button').simulate('click')
+
+    await (new Promise(resolve => setTimeout(resolve, 100)))
+
     assert.deepEqual(metricsEventSpy.args[0][0], {
       eventOpts: {
         category: 'Onboarding',
diff --git a/ui/app/pages/first-time-flow/select-action/select-action.component.js b/ui/app/pages/first-time-flow/select-action/select-action.component.js
index 5af29a505..5379952f1 100644
--- a/ui/app/pages/first-time-flow/select-action/select-action.component.js
+++ b/ui/app/pages/first-time-flow/select-action/select-action.component.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Button from '../../../components/ui/button'
+import MetaFoxLogo from '../../../components/ui/metafox-logo'
 import {
   INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
 } from '../../../helpers/constants/routes'
@@ -39,20 +40,8 @@ export default class SelectAction extends PureComponent {
     const { t } = this.context
 
     return (
-       <div className="select-action">
-        <div className="app-header__logo-container">
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.svg"
-            height={30}
-          />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--icon"
-            src="/images/logo/metamask-fox.svg"
-            height={42}
-            width={42}
-          />
-        </div>
+      <div className="select-action">
+        <MetaFoxLogo />
 
         <div className="select-action__wrapper">
 
@@ -106,7 +95,7 @@ export default class SelectAction extends PureComponent {
           </div>
 
         </div>
-       </div>
+      </div>
     )
   }
 }
diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js
index 4d96c3131..66d962ff1 100644
--- a/ui/app/pages/home/home.component.js
+++ b/ui/app/pages/home/home.component.js
@@ -2,25 +2,49 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Media from 'react-media'
 import { Redirect } from 'react-router-dom'
+import HomeNotification from '../../components/app/home-notification'
+import MultipleNotifications from '../../components/app/multiple-notifications'
 import WalletView from '../../components/app/wallet-view'
 import TransactionView from '../../components/app/transaction-view'
 import ProviderApproval from '../provider-approval'
 
 import {
-  INITIALIZE_SEED_PHRASE_ROUTE,
   RESTORE_VAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
+  INITIALIZE_BACKUP_SEED_PHRASE_ROUTE,
 } from '../../helpers/constants/routes'
 
 export default class Home extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static defaultProps = {
+    activeTab: {},
+    unsetMigratedPrivacyMode: null,
+    forceApproveProviderRequestByOrigin: null,
+  }
+
   static propTypes = {
+    activeTab: PropTypes.shape({
+      origin: PropTypes.string,
+      protocol: PropTypes.string,
+      title: PropTypes.string,
+      url: PropTypes.string,
+    }),
     history: PropTypes.object,
     forgottenPassword: PropTypes.bool,
-    seedWords: PropTypes.string,
     suggestedTokens: PropTypes.object,
     unconfirmedTransactionsCount: PropTypes.number,
     providerRequests: PropTypes.array,
+    showPrivacyModeNotification: PropTypes.bool.isRequired,
+    unsetMigratedPrivacyMode: PropTypes.func,
+    viewingUnconnectedDapp: PropTypes.bool.isRequired,
+    forceApproveProviderRequestByOrigin: PropTypes.func,
+    shouldShowSeedPhraseReminder: PropTypes.bool,
+    rejectProviderRequestByOrigin: PropTypes.func,
+    isPopup: PropTypes.bool,
   }
 
   componentWillMount () {
@@ -42,23 +66,26 @@ export default class Home extends PureComponent {
 
     // suggested new tokens
     if (Object.keys(suggestedTokens).length > 0) {
-        history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
+      history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
     }
   }
 
   render () {
+    const { t } = this.context
     const {
+      activeTab,
       forgottenPassword,
-      seedWords,
       providerRequests,
       history,
+      showPrivacyModeNotification,
+      unsetMigratedPrivacyMode,
+      viewingUnconnectedDapp,
+      forceApproveProviderRequestByOrigin,
+      shouldShowSeedPhraseReminder,
+      rejectProviderRequestByOrigin,
+      isPopup,
     } = this.props
 
-    // seed words
-    if (seedWords) {
-      return <Redirect to={{ pathname: INITIALIZE_SEED_PHRASE_ROUTE }}/>
-    }
-
     if (forgottenPassword) {
       return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
     }
@@ -68,7 +95,6 @@ export default class Home extends PureComponent {
         <ProviderApproval providerRequest={providerRequests[0]} />
       )
     }
-
     return (
       <div className="main-container">
         <div className="account-and-transaction-details">
@@ -76,7 +102,58 @@ export default class Home extends PureComponent {
             query="(min-width: 576px)"
             render={() => <WalletView />}
           />
-          { !history.location.pathname.match(/^\/confirm-transaction/) ? <TransactionView /> : null }
+          { !history.location.pathname.match(/^\/confirm-transaction/)
+            ? (
+              <TransactionView>
+                <MultipleNotifications
+                  className
+                  notifications={[
+                    {
+                      shouldBeRendered: showPrivacyModeNotification,
+                      component: <HomeNotification
+                        descriptionText={t('privacyModeDefault')}
+                        acceptText={t('learnMore')}
+                        onAccept={() => {
+                          window.open('https://medium.com/metamask/42549d4870fa', '_blank', 'noopener')
+                          unsetMigratedPrivacyMode()
+                        }}
+                        key="home-privacyModeDefault"
+                      />,
+                    },
+                    {
+                      shouldBeRendered: viewingUnconnectedDapp,
+                      component: <HomeNotification
+                        descriptionText={t('shareAddressToConnect', [activeTab.origin])}
+                        acceptText={t('shareAddress')}
+                        onAccept={() => {
+                          forceApproveProviderRequestByOrigin(activeTab.origin)
+                        }}
+                        ignoreText={t('dismiss')}
+                        onIgnore={() => rejectProviderRequestByOrigin(activeTab.origin)}
+                        infoText={t('shareAddressInfo', [activeTab.origin])}
+                        key="home-shareAddressToConnect"
+                      />,
+                    },
+                    {
+                      shouldBeRendered: shouldShowSeedPhraseReminder,
+                      component: <HomeNotification
+                        descriptionText={t('backupApprovalNotice')}
+                        acceptText={t('backupNow')}
+                        onAccept={() => {
+                          if (isPopup) {
+                            global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
+                          } else {
+                            history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
+                          }
+                        }}
+                        infoText={t('backupApprovalInfo')}
+                        key="home-backupApprovalNotice"
+                      />,
+                    },
+                  ]}/>
+              </TransactionView>
+            )
+            : null }
         </div>
       </div>
     )
diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js
index d0a5d7b47..f03ffdc02 100644
--- a/ui/app/pages/home/home.container.js
+++ b/ui/app/pages/home/home.container.js
@@ -3,28 +3,65 @@ import { compose } from 'recompose'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { unconfirmedTransactionsCountSelector } from '../../selectors/confirm-transaction'
-``
+import { getCurrentEthBalance } from '../../selectors/selectors'
+import {
+  forceApproveProviderRequestByOrigin,
+  unsetMigratedPrivacyMode,
+  rejectProviderRequestByOrigin,
+} from '../../store/actions'
+import { getEnvironmentType } from '../../../../app/scripts/lib/util'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
+
+const activeTabDappProtocols = ['http:', 'https:', 'dweb:', 'ipfs:', 'ipns:', 'ssb:']
+
 const mapStateToProps = state => {
-  const { metamask, appState } = state
+  const { activeTab, metamask, appState } = state
   const {
+    approvedOrigins,
+    dismissedOrigins,
     lostAccounts,
-    seedWords,
     suggestedTokens,
     providerRequests,
+    migratedPrivacyMode,
+    featureFlags: {
+      privacyMode,
+    } = {},
+    seedPhraseBackedUp,
+    tokens,
   } = metamask
+  const accountBalance = getCurrentEthBalance(state)
   const { forgottenPassword } = appState
 
+  const isUnconnected = Boolean(
+    activeTab &&
+    activeTabDappProtocols.includes(activeTab.protocol) &&
+    privacyMode &&
+    !approvedOrigins[activeTab.origin] &&
+    !dismissedOrigins[activeTab.origin]
+  )
+  const isPopup = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP
+
   return {
     lostAccounts,
     forgottenPassword,
-    seedWords,
     suggestedTokens,
     unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
     providerRequests,
+    showPrivacyModeNotification: migratedPrivacyMode,
+    activeTab,
+    viewingUnconnectedDapp: isUnconnected && isPopup,
+    shouldShowSeedPhraseReminder: !seedPhraseBackedUp && (parseInt(accountBalance, 16) > 0 || tokens.length > 0),
+    isPopup,
   }
 }
 
+const mapDispatchToProps = (dispatch) => ({
+  unsetMigratedPrivacyMode: () => dispatch(unsetMigratedPrivacyMode()),
+  forceApproveProviderRequestByOrigin: (origin) => dispatch(forceApproveProviderRequestByOrigin(origin)),
+  rejectProviderRequestByOrigin: origin => dispatch(rejectProviderRequestByOrigin(origin)),
+})
+
 export default compose(
   withRouter,
-  connect(mapStateToProps)
+  connect(mapStateToProps, mapDispatchToProps)
 )(Home)
diff --git a/ui/app/pages/index.scss b/ui/app/pages/index.scss
index cb9f0d80c..e7242392b 100644
--- a/ui/app/pages/index.scss
+++ b/ui/app/pages/index.scss
@@ -2,6 +2,8 @@
 
 @import 'add-token/index';
 
+@import 'send/send';
+
 @import 'confirm-add-token/index';
 
 @import 'settings/index';
diff --git a/ui/app/pages/mobile-sync/index.js b/ui/app/pages/mobile-sync/index.js
index a8de4fce9..bd2385808 100644
--- a/ui/app/pages/mobile-sync/index.js
+++ b/ui/app/pages/mobile-sync/index.js
@@ -84,6 +84,9 @@ class MobileSyncPage extends Component {
   }
 
   initWebsockets () {
+    // Make sure there are no existing listeners
+    this.disconnectWebsockets()
+
     this.pubnub = new PubNub({
       subscribeKey: process.env.PUBNUB_SUB_KEY,
       publishKey: process.env.PUBNUB_PUB_KEY,
@@ -91,7 +94,7 @@ class MobileSyncPage extends Component {
       ssl: true,
     })
 
-    this.pubnubListener = this.pubnub.addListener({
+    this.pubnubListener = {
       message: (data) => {
         const {channel, message} = data
         // handle message
@@ -100,18 +103,20 @@ class MobileSyncPage extends Component {
         }
 
         if (message.event === 'start-sync') {
-            this.startSyncing()
+          this.startSyncing()
         } else if (message.event === 'connection-info') {
-            this.handle && clearTimeout(this.handle)
-            this.disconnectWebsockets()
-            this.initWithCipherKeyAndChannelName(message.cipher, message.channel)
-            this.initWebsockets()
+          this.handle && clearTimeout(this.handle)
+          this.disconnectWebsockets()
+          this.initWithCipherKeyAndChannelName(message.cipher, message.channel)
+          this.initWebsockets()
         } else if (message.event === 'end-sync') {
-            this.disconnectWebsockets()
-            this.setState({syncing: false, completed: true})
+          this.disconnectWebsockets()
+          this.setState({syncing: false, completed: true})
         }
       },
-    })
+    }
+
+    this.pubnub.addListener(this.pubnubListener)
 
     this.pubnub.subscribe({
       channels: [this.channelName],
@@ -122,14 +127,14 @@ class MobileSyncPage extends Component {
 
   disconnectWebsockets () {
     if (this.pubnub && this.pubnubListener) {
-      this.pubnub.disconnect(this.pubnubListener)
+      this.pubnub.removeListener(this.pubnubListener)
     }
   }
 
-    // Calculating a PubNub Message Payload Size.
+  // Calculating a PubNub Message Payload Size.
   calculatePayloadSize (channel, message) {
     return encodeURIComponent(
-        channel + JSON.stringify(message)
+      channel + JSON.stringify(message)
     ).length + 100
   }
 
@@ -153,14 +158,14 @@ class MobileSyncPage extends Component {
           channel: this.channelName,
           sendByPost: false, // true to send via post
           storeInHistory: false,
-      },
-      (status, response) => {
-        if (!status.error) {
-          resolve()
-        } else {
-          reject(response)
-        }
-      })
+        },
+        (status, response) => {
+          if (!status.error) {
+            resolve()
+          } else {
+            reject(response)
+          }
+        })
     })
   }
 
@@ -199,16 +204,16 @@ class MobileSyncPage extends Component {
   sendMessage (data, pkg, count) {
     return new Promise((resolve, reject) => {
       this.pubnub.publish(
-         {
-            message: {
-              event: 'syncing-data',
-              data,
-              totalPkg: count,
-              currentPkg: pkg,
-            },
-            channel: this.channelName,
-            sendByPost: false, // true to send via post
-            storeInHistory: false,
+        {
+          message: {
+            event: 'syncing-data',
+            data,
+            totalPkg: count,
+            currentPkg: pkg,
+          },
+          channel: this.channelName,
+          sendByPost: false, // true to send via post
+          storeInHistory: false,
         },
         (status, response) => {
           if (!status.error) {
@@ -229,7 +234,7 @@ class MobileSyncPage extends Component {
   renderWarning (text) {
     return (
       h('.page-container__warning-container', [
-       h('.page-container__warning-message', [
+        h('.page-container__warning-message', [
           h('div', [text]),
         ]),
       ])
@@ -245,12 +250,12 @@ class MobileSyncPage extends Component {
 
     if (this.state.completed) {
       return h('div.reveal-seed__content', {},
-          h('label.reveal-seed__label', {
-            style: {
-             width: '100%',
-             textAlign: 'center',
-            },
-          }, t('syncWithMobileComplete')),
+        h('label.reveal-seed__label', {
+          style: {
+            width: '100%',
+            textAlign: 'center',
+          },
+        }, t('syncWithMobileComplete')),
       )
     }
 
@@ -303,8 +308,8 @@ class MobileSyncPage extends Component {
       h('div', [
         h('label.reveal-seed__label', {
           style: {
-           width: '100%',
-           textAlign: 'center',
+            width: '100%',
+            textAlign: 'center',
           },
         }, t('syncWithMobileScanThisCode')),
         h('.div.qr-wrapper', {
@@ -370,7 +375,7 @@ class MobileSyncPage extends Component {
           this.state.screen === PASSWORD_PROMPT_SCREEN ? h('.page-container__subtitle', this.context.t('syncWithMobileDescNewUsers')) : null,
         ]),
         h('.page-container__content', [
-            this.renderContent(),
+          this.renderContent(),
         ]),
         this.renderFooter(),
       ])
diff --git a/ui/app/pages/routes/index.js b/ui/app/pages/routes/index.js
index 9eeac2da2..2f7caf3bf 100644
--- a/ui/app/pages/routes/index.js
+++ b/ui/app/pages/routes/index.js
@@ -6,7 +6,8 @@ import { compose } from 'recompose'
 import actions from '../../store/actions'
 import log from 'loglevel'
 import IdleTimer from 'react-idle-timer'
-import {getMetaMaskAccounts, getNetworkIdentifier, preferencesSelector} from '../../selectors/selectors'
+import {getNetworkIdentifier, preferencesSelector} from '../../selectors/selectors'
+import classnames from 'classnames'
 
 // init
 import FirstTimeFlow from '../first-time-flow'
@@ -24,7 +25,6 @@ import Settings from '../settings'
 import Authenticated from '../../helpers/higher-order-components/authenticated'
 import Initialized from '../../helpers/higher-order-components/initialized'
 import Lock from '../lock'
-import UiMigrationAnnouncement from '../../components/app/ui-migration-annoucement'
 const RestoreVaultPage = require('../keychains/restore-vault').default
 const RevealSeedConfirmation = require('../keychains/reveal-seed')
 const MobileSyncPage = require('../mobile-sync')
@@ -178,12 +178,21 @@ class Routes extends Component {
       setMouseUserState,
       sidebar,
       submittedPendingTransactions,
+      isMouseUser,
     } = this.props
     const isLoadingNetwork = network === 'loading' && currentView.name !== 'config'
     const loadMessage = loadingMessage || isLoadingNetwork ?
       this.getConnectingLabel(loadingMessage) : null
     log.debug('Main ui render function')
 
+    const {
+      isOpen: sidebarIsOpen,
+      transitionName: sidebarTransitionName,
+      type: sidebarType,
+      props,
+    } = sidebar
+    const { transaction: sidebarTransaction } = props || {}
+
     const sidebarOnOverlayClose = sidebarType === WALLET_VIEW_SIDEBAR
       ? () => {
         this.context.metricsEvent({
@@ -196,17 +205,9 @@ class Routes extends Component {
       }
       : null
 
-    const {
-      isOpen: sidebarIsOpen,
-      transitionName: sidebarTransitionName,
-      type: sidebarType,
-      props,
-    } = sidebar
-    const { transaction: sidebarTransaction } = props || {}
-
     return (
       <div
-        className="app"
+        className={classnames('app', { 'mouse-user-styles': isMouseUser})}
         onClick={() => setMouseUserState(true)}
         onKeyDown={e => {
           if (e.keyCode === 9) {
@@ -214,7 +215,6 @@ class Routes extends Component {
           }
         }}
       >
-        <UiMigrationAnnouncement />
         <Modal />
         <Alert
           visible={this.props.alertOpen}
@@ -259,7 +259,7 @@ class Routes extends Component {
       passwordBox.focus()
     } else {
       // currently active: deactivate
-      this.props.dispatch(actions.lockMetamask(false))
+      this.props.lockMetaMask()
     }
   }
 
@@ -330,32 +330,14 @@ Routes.propTypes = {
   sidebar: PropTypes.object,
   alertOpen: PropTypes.bool,
   hideSidebar: PropTypes.func,
-  isOnboarding: PropTypes.bool,
   isUnlocked: PropTypes.bool,
-  networkDropdownOpen: PropTypes.bool,
-  showNetworkDropdown: PropTypes.func,
-  hideNetworkDropdown: PropTypes.func,
   setLastActiveTime: PropTypes.func,
   history: PropTypes.object,
   location: PropTypes.object,
-  dispatch: PropTypes.func,
-  toggleAccountMenu: PropTypes.func,
-  selectedAddress: PropTypes.string,
-  lostAccounts: PropTypes.array,
-  isInitialized: PropTypes.bool,
-  forgottenPassword: PropTypes.bool,
-  activeAddress: PropTypes.string,
-  unapprovedTxs: PropTypes.object,
-  seedWords: PropTypes.string,
+  lockMetaMask: PropTypes.func,
   submittedPendingTransactions: PropTypes.array,
-  unapprovedMsgCount: PropTypes.number,
-  unapprovedPersonalMsgCount: PropTypes.number,
-  unapprovedTypedMessagesCount: PropTypes.number,
-  welcomeScreenSeen: PropTypes.bool,
-  isPopup: PropTypes.bool,
   isMouseUser: PropTypes.bool,
   setMouseUserState: PropTypes.func,
-  t: PropTypes.func,
   providerId: PropTypes.string,
   providerRequests: PropTypes.array,
   autoLogoutTimeLimit: PropTypes.number,
@@ -364,7 +346,6 @@ Routes.propTypes = {
 function mapStateToProps (state) {
   const { appState, metamask } = state
   const {
-    networkDropdownOpen,
     sidebar,
     alertOpen,
     alertMessage,
@@ -372,77 +353,34 @@ function mapStateToProps (state) {
     loadingMessage,
   } = appState
 
-  const accounts = getMetaMaskAccounts(state)
   const { autoLogoutTimeLimit = 0 } = preferencesSelector(state)
 
-  const {
-    identities,
-    address,
-    keyrings,
-    isInitialized,
-    seedWords,
-    unapprovedTxs,
-    lostAccounts,
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-    providerRequests,
-  } = metamask
-  const selected = address || Object.keys(accounts)[0]
-
   return {
     // state from plugin
-    networkDropdownOpen,
     sidebar,
     alertOpen,
     alertMessage,
     isLoading,
     loadingMessage,
-    isInitialized,
     isUnlocked: state.metamask.isUnlocked,
-    selectedAddress: state.metamask.selectedAddress,
     currentView: state.appState.currentView,
-    activeAddress: state.appState.activeAddress,
-    transForward: state.appState.transForward,
-    isOnboarding: Boolean(seedWords || !isInitialized),
-    isPopup: state.metamask.isPopup,
-    seedWords: state.metamask.seedWords,
     submittedPendingTransactions: submittedPendingTransactionsSelector(state),
-    unapprovedTxs,
-    unapprovedMsgs: state.metamask.unapprovedMsgs,
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-    menuOpen: state.appState.menuOpen,
     network: state.metamask.network,
     provider: state.metamask.provider,
-    forgottenPassword: state.appState.forgottenPassword,
-    lostAccounts,
     frequentRpcListDetail: state.metamask.frequentRpcListDetail || [],
     currentCurrency: state.metamask.currentCurrency,
     isMouseUser: state.appState.isMouseUser,
-    isRevealingSeedWords: state.metamask.isRevealingSeedWords,
-    Qr: state.appState.Qr,
-    welcomeScreenSeen: state.metamask.welcomeScreenSeen,
     providerId: getNetworkIdentifier(state),
     autoLogoutTimeLimit,
-
-    // state needed to get account dropdown temporarily rendering from app bar
-    identities,
-    selected,
-    keyrings,
-    providerRequests,
+    providerRequests: metamask.providerRequests,
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    dispatch,
+    lockMetaMask: () => dispatch(actions.lockMetamask(false)),
     hideSidebar: () => dispatch(actions.hideSidebar()),
-    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
-    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
     setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')),
-    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
     setMouseUserState: (isMouseUser) => dispatch(actions.setMouseUserState(isMouseUser)),
     setLastActiveTime: () => dispatch(actions.setLastActiveTime()),
   }
diff --git a/ui/app/pages/send/account-list-item/account-list-item.container.js b/ui/app/pages/send/account-list-item/account-list-item.container.js
index 21f800306..3fadec4f8 100644
--- a/ui/app/pages/send/account-list-item/account-list-item.container.js
+++ b/ui/app/pages/send/account-list-item/account-list-item.container.js
@@ -1,8 +1,8 @@
 import { connect } from 'react-redux'
 import {
-    getConversionRate,
-    getCurrentCurrency,
-    getNativeCurrency,
+  getConversionRate,
+  getCurrentCurrency,
+  getNativeCurrency,
 } from '../send.selectors.js'
 import {
   getIsMainnet,
diff --git a/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js
new file mode 100644
index 000000000..e5edbc08d
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.component.js
@@ -0,0 +1,243 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Fuse from 'fuse.js'
+import Identicon from '../../../../components/ui/identicon'
+import {isValidAddress} from '../../../../helpers/utils/util'
+import Dialog from '../../../../components/ui/dialog'
+import ContactList from '../../../../components/app/contact-list'
+import RecipientGroup from '../../../../components/app/contact-list/recipient-group/recipient-group.component'
+import {ellipsify} from '../../send.utils'
+
+export default class AddRecipient extends Component {
+
+  static propTypes = {
+    className: PropTypes.string,
+    query: PropTypes.string,
+    ownedAccounts: PropTypes.array,
+    addressBook: PropTypes.array,
+    updateGas: PropTypes.func,
+    updateSendTo: PropTypes.func,
+    ensResolution: PropTypes.string,
+    toError: PropTypes.string,
+    toWarning: PropTypes.string,
+    ensResolutionError: PropTypes.string,
+    selectedToken: PropTypes.object,
+    hasHexData: PropTypes.bool,
+    tokens: PropTypes.array,
+    addressBookEntryName: PropTypes.string,
+    contacts: PropTypes.array,
+    nonContacts: PropTypes.array,
+  }
+
+  constructor (props) {
+    super(props)
+    this.recentFuse = new Fuse(props.nonContacts, {
+      shouldSort: true,
+      threshold: 0.45,
+      location: 0,
+      distance: 100,
+      maxPatternLength: 32,
+      minMatchCharLength: 1,
+      keys: [
+        { name: 'address', weight: 0.5 },
+      ],
+    })
+
+    this.contactFuse = new Fuse(props.contacts, {
+      shouldSort: true,
+      threshold: 0.45,
+      location: 0,
+      distance: 100,
+      maxPatternLength: 32,
+      minMatchCharLength: 1,
+      keys: [
+        { name: 'name', weight: 0.5 },
+        { name: 'address', weight: 0.5 },
+      ],
+    })
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  state = {
+    isShowingTransfer: false,
+    isShowingAllRecent: false,
+  }
+
+  selectRecipient = (to, nickname = '') => {
+    const { updateSendTo, updateGas } = this.props
+
+    updateSendTo(to, nickname)
+    updateGas({ to })
+  }
+
+  searchForContacts = () => {
+    const { query, contacts } = this.props
+
+    let _contacts = contacts
+
+    if (query) {
+      this.contactFuse.setCollection(contacts)
+      _contacts = this.contactFuse.search(query)
+    }
+
+    return _contacts
+  }
+
+  searchForRecents = () => {
+    const { query, nonContacts } = this.props
+
+    let _nonContacts = nonContacts
+
+    if (query) {
+      this.recentFuse.setCollection(nonContacts)
+      _nonContacts = this.recentFuse.search(query)
+    }
+
+    return _nonContacts
+  }
+
+  render () {
+    const { ensResolution, query, addressBookEntryName } = this.props
+    const { isShowingTransfer } = this.state
+
+    let content
+
+    if (isValidAddress(query)) {
+      content = this.renderExplicitAddress(query)
+    } else if (ensResolution) {
+      content = this.renderExplicitAddress(ensResolution, addressBookEntryName || query)
+    } else if (isShowingTransfer) {
+      content = this.renderTransfer()
+    }
+
+    return (
+      <div className="send__select-recipient-wrapper">
+        { this.renderDialogs() }
+        { content || this.renderMain() }
+      </div>
+    )
+  }
+
+  renderExplicitAddress (address, name) {
+    return (
+      <div
+        key={address}
+        className="send__select-recipient-wrapper__group-item"
+        onClick={() => this.selectRecipient(address, name)}
+      >
+        <Identicon address={address} diameter={28} />
+        <div className="send__select-recipient-wrapper__group-item__content">
+          <div className="send__select-recipient-wrapper__group-item__title">
+            {name || ellipsify(address)}
+          </div>
+          {
+            name && (
+              <div className="send__select-recipient-wrapper__group-item__subtitle">
+                {ellipsify(address)}
+              </div>
+            )
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderTransfer () {
+    const { ownedAccounts } = this.props
+    const { t } = this.context
+
+    return (
+      <div className="send__select-recipient-wrapper__list">
+        <div
+          className="send__select-recipient-wrapper__list__link"
+          onClick={() => this.setState({ isShowingTransfer: false })}
+        >
+          <div className="send__select-recipient-wrapper__list__back-caret"/>
+          { t('backToAll') }
+        </div>
+        <RecipientGroup
+          label={t('myAccounts')}
+          items={ownedAccounts}
+          onSelect={this.selectRecipient}
+        />
+      </div>
+    )
+  }
+
+  renderMain () {
+    const { t } = this.context
+    const { query, ownedAccounts = [], addressBook } = this.props
+
+    return (
+      <div className="send__select-recipient-wrapper__list">
+        <ContactList
+          addressBook={addressBook}
+          searchForContacts={this.searchForContacts.bind(this)}
+          searchForRecents={this.searchForRecents.bind(this)}
+          selectRecipient={this.selectRecipient.bind(this)}
+        >
+          {
+            (ownedAccounts && ownedAccounts.length > 1) && !query && (
+              <div
+                className="send__select-recipient-wrapper__list__link"
+                onClick={() => this.setState({ isShowingTransfer: true })}
+              >
+                { t('transferBetweenAccounts') }
+              </div>
+            )
+          }
+        </ContactList>
+      </div>
+    )
+  }
+
+  renderDialogs () {
+    const { toError, toWarning, ensResolutionError, ensResolution } = this.props
+    const { t } = this.context
+    const contacts = this.searchForContacts()
+    const recents = this.searchForRecents()
+
+    if (contacts.length || recents.length) {
+      return null
+    }
+
+    if (ensResolutionError) {
+      return (
+        <Dialog
+          type="error"
+          className="send__error-dialog"
+        >
+          {ensResolutionError}
+        </Dialog>
+      )
+    }
+
+    if (toError && toError !== 'required' && !ensResolution) {
+      return (
+        <Dialog
+          type="error"
+          className="send__error-dialog"
+        >
+          {t(toError)}
+        </Dialog>
+      )
+    }
+
+
+    if (toWarning) {
+      return (
+        <Dialog
+          type="warning"
+          className="send__error-dialog"
+        >
+          {t(toWarning)}
+        </Dialog>
+      )
+    }
+  }
+
+}
diff --git a/ui/app/pages/send/send-content/add-recipient/add-recipient.container.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.container.js
new file mode 100644
index 000000000..eb980aa82
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.container.js
@@ -0,0 +1,44 @@
+import { connect } from 'react-redux'
+import {
+  accountsWithSendEtherInfoSelector,
+  getSendEnsResolution,
+  getSendEnsResolutionError,
+} from '../../send.selectors.js'
+import {
+  getAddressBook,
+  getAddressBookEntry,
+} from '../../../../selectors/selectors'
+import {
+  updateSendTo,
+} from '../../../../store/actions'
+import AddRecipient from './add-recipient.component'
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddRecipient)
+
+function mapStateToProps (state) {
+  const ensResolution = getSendEnsResolution(state)
+
+  let addressBookEntryName = ''
+  if (ensResolution) {
+    const addressBookEntry = getAddressBookEntry(state, ensResolution) || {}
+    addressBookEntryName = addressBookEntry.name
+  }
+
+  const addressBook = getAddressBook(state)
+
+  return {
+    ownedAccounts: accountsWithSendEtherInfoSelector(state),
+    addressBook,
+    ensResolution,
+    addressBookEntryName,
+    ensResolutionError: getSendEnsResolutionError(state),
+    contacts: addressBook.filter(({ name }) => !!name),
+    nonContacts: addressBook.filter(({ name }) => !name),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
+  }
+}
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.js
index b3b0d2da3..b3b0d2da3 100644
--- a/ui/app/pages/send/send-content/send-to-row/send-to-row.utils.js
+++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.js
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js b/ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js
index a6160d335..a39db7813 100644
--- a/ui/app/pages/send/send-content/send-to-row/send-to-row.selectors.js
+++ b/ui/app/pages/send/send-content/add-recipient/add-recipient.selectors.js
@@ -12,7 +12,7 @@ function getToDropdownOpen (state) {
 }
 
 function sendToIsInError (state) {
-    return Boolean(state.send.errors.to)
+  return Boolean(state.send.errors.to)
 }
 
 function sendToIsInWarning (state) {
diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.component.js b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js
new file mode 100644
index 000000000..498d72605
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/ens-input.component.js
@@ -0,0 +1,272 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import c from 'classnames'
+import { isValidENSAddress, isValidAddress, isValidAddressHead } from '../../../../helpers/utils/util'
+import {ellipsify} from '../../send.utils'
+
+import debounce from 'debounce'
+import copyToClipboard from 'copy-to-clipboard/index'
+import ENS from 'ethjs-ens'
+import networkMap from 'ethjs-ens/lib/network-map.json'
+import log from 'loglevel'
+
+
+// Local Constants
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
+const ZERO_X_ERROR_ADDRESS = '0x'
+
+export default class EnsInput extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    className: PropTypes.string,
+    network: PropTypes.string,
+    selectedAddress: PropTypes.string,
+    selectedName: PropTypes.string,
+    onChange: PropTypes.func,
+    updateSendTo: PropTypes.func,
+    updateEnsResolution: PropTypes.func,
+    scanQrCode: PropTypes.func,
+    updateEnsResolutionError: PropTypes.func,
+    addressBook: PropTypes.array,
+    onPaste: PropTypes.func,
+    onReset: PropTypes.func,
+    onValidAddressTyped: PropTypes.func,
+  }
+
+  state = {
+    recipient: null,
+    input: '',
+    toError: null,
+    toWarning: null,
+  }
+
+  componentDidMount () {
+    const network = this.props.network
+    const networkHasEnsSupport = getNetworkEnsSupport(network)
+    this.setState({ ensResolution: ZERO_ADDRESS })
+
+    if (networkHasEnsSupport) {
+      const provider = global.ethereumProvider
+      this.ens = new ENS({ provider, network })
+      this.checkName = debounce(this.lookupEnsName, 200)
+    }
+  }
+
+  // If an address is sent without a nickname, meaning not from ENS or from
+  // the user's own accounts, a default of a one-space string is used.
+  componentDidUpdate (prevProps) {
+    const {
+      input,
+    } = this.state
+    const {
+      network,
+    } = this.props
+
+    if (prevProps.network !== network) {
+      const provider = global.ethereumProvider
+      this.ens = new ENS({ provider, network })
+      this.onChange({ target: { value: input } })
+    }
+  }
+
+  resetInput = () => {
+    const { updateEnsResolution, updateEnsResolutionError, onReset } = this.props
+    this.onChange({ target: { value: '' } })
+    onReset()
+    updateEnsResolution('')
+    updateEnsResolutionError('')
+  }
+
+  lookupEnsName = (recipient) => {
+    recipient = recipient.trim()
+
+    log.info(`ENS attempting to resolve name: ${recipient}`)
+    this.ens.lookup(recipient)
+      .then((address) => {
+        if (address === ZERO_ADDRESS) throw new Error(this.context.t('noAddressForName'))
+        if (address === ZERO_X_ERROR_ADDRESS) throw new Error(this.context.t('ensRegistrationError'))
+        this.props.updateEnsResolution(address)
+      })
+      .catch((reason) => {
+        if (isValidENSAddress(recipient) && reason.message === 'ENS name not defined.') {
+          this.props.updateEnsResolutionError(this.context.t('ensNotFoundOnCurrentNetwork'))
+        } else {
+          log.error(reason)
+          this.props.updateEnsResolutionError(reason.message)
+        }
+      })
+  }
+
+  onPaste = event => {
+    event.clipboardData.items[0].getAsString(text => {
+      if (isValidAddress(text)) {
+        this.props.onPaste(text)
+      }
+    })
+  }
+
+  onChange = e => {
+    const { network, onChange, updateEnsResolution, updateEnsResolutionError, onValidAddressTyped } = this.props
+    const input = e.target.value
+    const networkHasEnsSupport = getNetworkEnsSupport(network)
+
+    this.setState({ input }, () => onChange(input))
+
+    // Empty ENS state if input is empty
+    // maybe scan ENS
+
+    if (!networkHasEnsSupport && !isValidAddress(input) && !isValidAddressHead(input)) {
+      updateEnsResolution('')
+      updateEnsResolutionError(!networkHasEnsSupport ? 'Network does not support ENS' : '')
+      return
+    }
+
+    if (isValidENSAddress(input)) {
+      this.lookupEnsName(input)
+    } else if (onValidAddressTyped && isValidAddress(input)) {
+      onValidAddressTyped(input)
+    } else {
+      updateEnsResolution('')
+      updateEnsResolutionError('')
+    }
+  }
+
+  render () {
+    const { t } = this.context
+    const { className, selectedAddress } = this.props
+    const { input } = this.state
+
+    if (selectedAddress) {
+      return this.renderSelected()
+    }
+
+    return (
+      <div className={c('ens-input', className)}>
+        <div
+          className={c('ens-input__wrapper', {
+            'ens-input__wrapper__status-icon--error': false,
+            'ens-input__wrapper__status-icon--valid': false,
+          })}
+        >
+          <div className="ens-input__wrapper__status-icon" />
+          <input
+            className="ens-input__wrapper__input"
+            type="text"
+            placeholder={t('recipientAddressPlaceholder')}
+            onChange={this.onChange}
+            onPaste={this.onPaste}
+            value={selectedAddress || input}
+            autoFocus
+          />
+          <div
+            className={c('ens-input__wrapper__action-icon', {
+              'ens-input__wrapper__action-icon--erase': input,
+              'ens-input__wrapper__action-icon--qrcode': !input,
+            })}
+            onClick={() => {
+              if (input) {
+                this.resetInput()
+              } else {
+                this.props.scanQrCode()
+              }
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderSelected () {
+    const { t } = this.context
+    const { className, selectedAddress, selectedName, addressBook } = this.props
+    const contact = addressBook.filter(item => item.address === selectedAddress)[0] || {}
+    const name = contact.name || selectedName
+
+
+    return (
+      <div className={c('ens-input', className)}>
+        <div
+          className="ens-input__wrapper ens-input__wrapper--valid"
+        >
+          <div className="ens-input__wrapper__status-icon ens-input__wrapper__status-icon--valid" />
+          <div
+            className="ens-input__wrapper__input ens-input__wrapper__input--selected"
+            placeholder={t('recipientAddress')}
+            onChange={this.onChange}
+          >
+            <div className="ens-input__selected-input__title">
+              {name || ellipsify(selectedAddress)}
+            </div>
+            { name && <div className="ens-input__selected-input__subtitle">{selectedAddress}</div> }
+          </div>
+          <div
+            className="ens-input__wrapper__action-icon ens-input__wrapper__action-icon--erase"
+            onClick={this.resetInput}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  ensIcon (recipient) {
+    const { hoverText } = this.state
+
+    return (
+      <span
+        className="#ensIcon"
+        title={hoverText}
+        style={{
+          position: 'absolute',
+          top: '16px',
+          left: '-25px',
+        }}
+      >
+        { this.ensIconContents(recipient) }
+      </span>
+    )
+  }
+
+  ensIconContents () {
+    const { loadingEns, ensFailure, ensResolution, toError } = this.state || { ensResolution: ZERO_ADDRESS }
+
+    if (toError) return
+
+    if (loadingEns) {
+      return (
+        <img
+          src="images/loading.svg"
+          style={{
+            width: '30px',
+            height: '30px',
+            transform: 'translateY(-6px)',
+          }}
+        />
+      )
+    }
+
+    if (ensFailure) {
+      return <i className="fa fa-warning fa-lg warning'" />
+    }
+
+    if (ensResolution && (ensResolution !== ZERO_ADDRESS)) {
+      return (
+        <i
+          className="fa fa-check-circle fa-lg cursor-pointer"
+          style={{ color: 'green' }}
+          onClick={event => {
+            event.preventDefault()
+            event.stopPropagation()
+            copyToClipboard(ensResolution)
+          }}
+        />
+      )
+    }
+  }
+}
+
+function getNetworkEnsSupport (network) {
+  return Boolean(networkMap[network])
+}
diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.container.js b/ui/app/pages/send/send-content/add-recipient/ens-input.container.js
new file mode 100644
index 000000000..d74f44832
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/ens-input.container.js
@@ -0,0 +1,20 @@
+import EnsInput from './ens-input.component'
+import {
+  getCurrentNetwork,
+  getSendTo,
+  getSendToNickname,
+} from '../../send.selectors'
+import {
+  getAddressBook,
+} from '../../../../selectors/selectors'
+const connect = require('react-redux').connect
+
+
+export default connect(
+  state => ({
+    network: getCurrentNetwork(state),
+    selectedAddress: getSendTo(state),
+    selectedName: getSendToNickname(state),
+    addressBook: getAddressBook(state),
+  })
+)(EnsInput)
diff --git a/ui/app/pages/send/send-content/add-recipient/ens-input.js b/ui/app/pages/send/send-content/add-recipient/ens-input.js
new file mode 100644
index 000000000..6833ccd03
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/ens-input.js
@@ -0,0 +1 @@
+export { default } from './ens-input.container'
diff --git a/ui/app/pages/send/send-content/add-recipient/index.js b/ui/app/pages/send/send-content/add-recipient/index.js
new file mode 100644
index 000000000..d661bd74b
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/index.js
@@ -0,0 +1 @@
+export { default } from './add-recipient.container'
diff --git a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js
new file mode 100644
index 000000000..7570e7fcb
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-component.test.js
@@ -0,0 +1,202 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import AddRecipient from '../add-recipient.component'
+import Dialog from '../../../../../components/ui/dialog'
+
+const propsMethodSpies = {
+  closeToDropdown: sinon.spy(),
+  openToDropdown: sinon.spy(),
+  updateGas: sinon.spy(),
+  updateSendTo: sinon.spy(),
+  updateSendToError: sinon.spy(),
+  updateSendToWarning: sinon.spy(),
+}
+
+describe('AddRecipient Component', function () {
+  let wrapper
+  let instance
+
+  beforeEach(() => {
+    wrapper = shallow(<AddRecipient
+      closeToDropdown={propsMethodSpies.closeToDropdown}
+      inError={false}
+      inWarning={false}
+      network={'mockNetwork'}
+      openToDropdown={propsMethodSpies.openToDropdown}
+      to={'mockTo'}
+      toAccounts={['mockAccount']}
+      toDropdownOpen={false}
+      updateGas={propsMethodSpies.updateGas}
+      updateSendTo={propsMethodSpies.updateSendTo}
+      updateSendToError={propsMethodSpies.updateSendToError}
+      updateSendToWarning={propsMethodSpies.updateSendToWarning}
+      addressBook={[{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 5' }]}
+      nonContacts={[{ address: '0x70F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 7' }]}
+      contacts={[{ address: '0x60F061544cC398520615B5d3e7A3BedD70cd4510', name: 'Fav 6' }]}
+    />, { context: { t: str => str + '_t' } })
+    instance = wrapper.instance()
+  })
+
+  afterEach(() => {
+    propsMethodSpies.closeToDropdown.resetHistory()
+    propsMethodSpies.openToDropdown.resetHistory()
+    propsMethodSpies.updateSendTo.resetHistory()
+    propsMethodSpies.updateSendToError.resetHistory()
+    propsMethodSpies.updateSendToWarning.resetHistory()
+    propsMethodSpies.updateGas.resetHistory()
+  })
+
+  describe('selectRecipient', () => {
+
+    it('should call updateSendTo', () => {
+      assert.equal(propsMethodSpies.updateSendTo.callCount, 0)
+      instance.selectRecipient('mockTo2', 'mockNickname')
+      assert.equal(propsMethodSpies.updateSendTo.callCount, 1)
+      assert.deepEqual(
+        propsMethodSpies.updateSendTo.getCall(0).args,
+        ['mockTo2', 'mockNickname']
+      )
+    })
+
+    it('should call updateGas if there is no to error', () => {
+      assert.equal(propsMethodSpies.updateGas.callCount, 0)
+      instance.selectRecipient(false)
+      assert.equal(propsMethodSpies.updateGas.callCount, 1)
+    })
+  })
+
+  describe('render', () => {
+    it('should render a component', () => {
+      assert.equal(wrapper.find('.send__select-recipient-wrapper').length, 1)
+    })
+
+    it('should render no content if there are no recents, transfers, and contacts', () => {
+      wrapper.setProps({
+        ownedAccounts: [],
+        addressBook: [],
+      })
+
+      assert.equal(wrapper.find('.send__select-recipient-wrapper__list__link').length, 0)
+      assert.equal(wrapper.find('.send__select-recipient-wrapper__group').length, 0)
+    })
+
+    it('should render transfer', () => {
+      wrapper.setProps({
+        ownedAccounts: [{ address: '0x123', name: '123' }, { address: '0x124', name: '124' }],
+        addressBook: [{ address: '0x456', name: 'test-name' }],
+      })
+      wrapper.setState({ isShowingTransfer: true })
+
+      const xferLink = wrapper.find('.send__select-recipient-wrapper__list__link')
+      assert.equal(xferLink.length, 1)
+
+
+      const groups = wrapper.find('RecipientGroup')
+      assert.equal(groups.shallow().find('.send__select-recipient-wrapper__group').length, 1)
+    })
+
+    it('should render ContactList', () => {
+      wrapper.setProps({
+        ownedAccounts: [{ address: '0x123', name: '123' }, { address: '0x124', name: '124' }],
+        addressBook: [{ address: '0x125' }],
+      })
+
+      const contactList = wrapper.find('ContactList')
+
+      assert.equal(contactList.length, 1)
+    })
+
+    it('should render contacts', () => {
+      wrapper.setProps({
+        addressBook: [
+          { address: '0x125', name: 'alice' },
+          { address: '0x126', name: 'alex' },
+          { address: '0x127', name: 'catherine' },
+        ],
+      })
+      wrapper.setState({ isShowingTransfer: false })
+
+      const xferLink = wrapper.find('.send__select-recipient-wrapper__list__link')
+      assert.equal(xferLink.length, 0)
+
+      const groups = wrapper.find('ContactList')
+      assert.equal(groups.length, 1)
+
+      assert.equal(groups.find('.send__select-recipient-wrapper__group-item').length, 0)
+    })
+
+    it('should render error when query has no results', () => {
+      wrapper.setProps({
+        addressBook: [],
+        toError: 'bad',
+        contacts: [],
+        nonContacts: [],
+      })
+
+      const dialog = wrapper.find(Dialog)
+
+      assert.equal(dialog.props().type, 'error')
+      assert.equal(dialog.props().children, 'bad_t')
+      assert.equal(dialog.length, 1)
+    })
+
+    it('should render error when query has ens does not resolve', () => {
+      wrapper.setProps({
+        addressBook: [],
+        toError: 'bad',
+        ensResolutionError: 'very bad',
+        contacts: [],
+        nonContacts: [],
+      })
+
+      const dialog = wrapper.find(Dialog)
+
+      assert.equal(dialog.props().type, 'error')
+      assert.equal(dialog.props().children, 'very bad')
+      assert.equal(dialog.length, 1)
+    })
+
+    it('should render warning', () => {
+      wrapper.setProps({
+        addressBook: [],
+        query: 'yo',
+        toWarning: 'watchout',
+      })
+
+      const dialog = wrapper.find(Dialog)
+
+      assert.equal(dialog.props().type, 'warning')
+      assert.equal(dialog.props().children, 'watchout_t')
+      assert.equal(dialog.length, 1)
+    })
+
+    it('should not render error when ens resolved', () => {
+      wrapper.setProps({
+        addressBook: [],
+        toError: 'bad',
+        ensResolution: '0x128',
+      })
+
+      const dialog = wrapper.find(Dialog)
+
+      assert.equal(dialog.length, 0)
+    })
+
+    it('should not render error when query has results', () => {
+      wrapper.setProps({
+        addressBook: [
+          { address: '0x125', name: 'alice' },
+          { address: '0x126', name: 'alex' },
+          { address: '0x127', name: 'catherine' },
+        ],
+        toError: 'bad',
+      })
+
+      const dialog = wrapper.find(Dialog)
+
+      assert.equal(dialog.length, 0)
+    })
+  })
+})
diff --git a/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-container.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-container.test.js
new file mode 100644
index 000000000..5ca0b2c23
--- /dev/null
+++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-container.test.js
@@ -0,0 +1,72 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
+
+let mapStateToProps
+let mapDispatchToProps
+
+const actionSpies = {
+  updateSendTo: sinon.spy(),
+}
+
+proxyquire('../add-recipient.container.js', {
+  'react-redux': {
+    connect: (ms, md) => {
+      mapStateToProps = ms
+      mapDispatchToProps = md
+      return () => ({})
+    },
+  },
+  '../../send.selectors.js': {
+    getSendEnsResolution: (s) => `mockSendEnsResolution:${s}`,
+    getSendEnsResolutionError: (s) => `mockSendEnsResolutionError:${s}`,
+    accountsWithSendEtherInfoSelector: (s) => `mockAccountsWithSendEtherInfoSelector:${s}`,
+  },
+  '../../../../selectors/selectors': {
+    getAddressBook: (s) => [{ name: `mockAddressBook:${s}` }],
+    getAddressBookEntry: (s) => `mockAddressBookEntry:${s}`,
+  },
+  '../../../../store/actions': actionSpies,
+})
+
+describe('add-recipient container', () => {
+
+  describe('mapStateToProps()', () => {
+
+    it('should map the correct properties to props', () => {
+      assert.deepEqual(mapStateToProps('mockState'), {
+        addressBook: [{ name: 'mockAddressBook:mockState' }],
+        contacts: [{ name: 'mockAddressBook:mockState' }],
+        ensResolution: 'mockSendEnsResolution:mockState',
+        ensResolutionError: 'mockSendEnsResolutionError:mockState',
+        ownedAccounts: 'mockAccountsWithSendEtherInfoSelector:mockState',
+        addressBookEntryName: undefined,
+        nonContacts: [],
+      })
+    })
+
+  })
+
+  describe('mapDispatchToProps()', () => {
+    let dispatchSpy
+    let mapDispatchToPropsObject
+
+    beforeEach(() => {
+      dispatchSpy = sinon.spy()
+      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
+    })
+
+    describe('updateSendTo()', () => {
+      it('should dispatch an action', () => {
+        mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname')
+        assert(dispatchSpy.calledOnce)
+        assert(actionSpies.updateSendTo.calledOnce)
+        assert.deepEqual(
+          actionSpies.updateSendTo.getCall(0).args,
+          ['mockTo', 'mockNickname']
+        )
+      })
+    })
+  })
+
+})
diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-selectors.test.js
index 0fa342d1e..82f481187 100644
--- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-selectors.test.js
+++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-selectors.test.js
@@ -3,9 +3,9 @@ import {
   getToDropdownOpen,
   getTokens,
   sendToIsInError,
-} from '../send-to-row.selectors.js'
+} from '../add-recipient.selectors.js'
 
-describe('send-to-row selectors', () => {
+describe('add-recipient selectors', () => {
 
   describe('getToDropdownOpen()', () => {
     it('should return send.getToDropdownOpen', () => {
diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-utils.test.js
index f8a6dd96f..182504c5d 100644
--- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-utils.test.js
+++ b/ui/app/pages/send/send-content/add-recipient/tests/add-recipient-utils.test.js
@@ -12,7 +12,7 @@ const stubs = {
   isValidAddress: sinon.stub().callsFake(to => Boolean(to.match(/^[0xabcdef123456798]+$/))),
 }
 
-const toRowUtils = proxyquire('../send-to-row.utils.js', {
+const toRowUtils = proxyquire('../add-recipient.js', {
   '../../../../helpers/utils/util': {
     isValidAddress: stubs.isValidAddress,
   },
@@ -22,7 +22,7 @@ const {
   getToWarningObject,
 } = toRowUtils
 
-describe('send-to-row utils', () => {
+describe('add-recipient utils', () => {
 
   describe('getToErrorObject()', () => {
     it('should return a required error if to is falsy', () => {
diff --git a/ui/app/pages/send/send-content/index.js b/ui/app/pages/send/send-content/index.js
index 891c17e6a..542da4674 100644
--- a/ui/app/pages/send/send-content/index.js
+++ b/ui/app/pages/send/send-content/index.js
@@ -1 +1 @@
-export { default } from './send-content.component'
+export { default } from './send-content.container'
diff --git a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
index 7901ccef6..05545669a 100644
--- a/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ b/ui/app/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
@@ -64,12 +64,12 @@ export default class AmountMaxButton extends Component {
     const { maxModeOn, buttonDataLoading, inError } = this.props
 
     return (
-          <div className={'send-v2__amount-max'} onClick={buttonDataLoading || inError ? null : this.onMaxClick}>
-            <input type="checkbox" checked={maxModeOn} />
-            <div className={classnames('send-v2__amount-max__button', { 'send-v2__amount-max__button__disabled': buttonDataLoading || inError })}>
-                {this.context.t('max')}
-            </div>
-          </div>
-      )
+      <div className={'send-v2__amount-max'} onClick={buttonDataLoading || inError ? null : this.onMaxClick}>
+        <input type="checkbox" checked={maxModeOn} />
+        <div className={classnames('send-v2__amount-max__button', { 'send-v2__amount-max__button__disabled': buttonDataLoading || inError })}>
+          {this.context.t('max')}
+        </div>
+      </div>
+    )
   }
 }
diff --git a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js
index de2d9462f..1dcd0bd2c 100644
--- a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js
+++ b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js
@@ -59,7 +59,7 @@ export default class SendAssetRow extends Component {
       <SendRowWrapper label={`${t('asset')}:`}>
         <div className="send-v2__asset-dropdown">
           { this.renderSelectedToken() }
-          { this.renderAssetDropdown() }
+          { this.props.tokens.length > 0 ? this.renderAssetDropdown() : null }
         </div>
       </SendRowWrapper>
     )
@@ -101,7 +101,7 @@ export default class SendAssetRow extends Component {
 
     return (
       <div
-        className="send-v2__asset-dropdown__asset"
+        className={ this.props.tokens.length > 0 ? 'send-v2__asset-dropdown__asset' : 'send-v2__asset-dropdown__single-asset' }
         onClick={() => this.selectToken()}
       >
         <div className="send-v2__asset-dropdown__asset-icon">
diff --git a/ui/app/pages/send/send-content/send-content.component.js b/ui/app/pages/send/send-content/send-content.component.js
index d799806c7..aff675e7a 100644
--- a/ui/app/pages/send/send-content/send-content.component.js
+++ b/ui/app/pages/send/send-content/send-content.component.js
@@ -2,18 +2,25 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import PageContainerContent from '../../../components/ui/page-container/page-container-content.component'
 import SendAmountRow from './send-amount-row'
-import SendFromRow from './send-from-row'
 import SendGasRow from './send-gas-row'
 import SendHexDataRow from './send-hex-data-row'
-import SendToRow from './send-to-row'
 import SendAssetRow from './send-asset-row'
+import Dialog from '../../../components/ui/dialog'
 
 export default class SendContent extends Component {
 
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
   static propTypes = {
     updateGas: PropTypes.func,
     scanQrCode: PropTypes.func,
+    showAddToAddressBookModal: PropTypes.func,
     showHexData: PropTypes.bool,
+    to: PropTypes.string,
+    ownedAccounts: PropTypes.array,
+    addressBook: PropTypes.array,
   }
 
   updateGas = (updateData) => this.props.updateGas(updateData)
@@ -22,22 +29,40 @@ export default class SendContent extends Component {
     return (
       <PageContainerContent>
         <div className="send-v2__form">
-          <SendFromRow />
-          <SendToRow
-            updateGas={this.updateGas}
-            scanQrCode={ _ => this.props.scanQrCode()}
-          />
+          { this.maybeRenderAddContact() }
           <SendAssetRow />
           <SendAmountRow updateGas={this.updateGas} />
           <SendGasRow />
-          {(this.props.showHexData && (
-            <SendHexDataRow
-              updateGas={this.updateGas}
-            />
-          ))}
+          {
+            this.props.showHexData && (
+              <SendHexDataRow
+                updateGas={this.updateGas}
+              />
+            )
+          }
         </div>
       </PageContainerContent>
     )
   }
 
+  maybeRenderAddContact () {
+    const { t } = this.context
+    const { to, addressBook = [], ownedAccounts = [], showAddToAddressBookModal } = this.props
+    const isOwnedAccount = !!ownedAccounts.find(({ address }) => address.toLowerCase() === to.toLowerCase())
+    const contact = addressBook.find(({ address }) => address === to) || {}
+
+    if (isOwnedAccount || contact.name) {
+      return
+    }
+
+    return (
+      <Dialog
+        type="message"
+        className="send__dialog"
+        onClick={showAddToAddressBookModal}
+      >
+        {t('newAccountDetectedDialogMessage')}
+      </Dialog>
+    )
+  }
 }
diff --git a/ui/app/pages/send/send-content/send-content.container.js b/ui/app/pages/send/send-content/send-content.container.js
new file mode 100644
index 000000000..a0732fc20
--- /dev/null
+++ b/ui/app/pages/send/send-content/send-content.container.js
@@ -0,0 +1,38 @@
+import { connect } from 'react-redux'
+import SendContent from './send-content.component'
+import {
+  accountsWithSendEtherInfoSelector,
+  getSendTo,
+} from '../send.selectors'
+import {
+  getAddressBook,
+} from '../../../selectors/selectors'
+import actions from '../../../store/actions'
+
+function mapStateToProps (state) {
+  return {
+    to: getSendTo(state),
+    addressBook: getAddressBook(state),
+    ownedAccounts: accountsWithSendEtherInfoSelector(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showAddToAddressBookModal: (recipient) => dispatch(actions.showModal({
+      name: 'ADD_TO_ADDRESSBOOK',
+      recipient,
+    })),
+  }
+}
+
+function mergeProps (stateProps, dispatchProps, ownProps) {
+  return {
+    ...ownProps,
+    ...stateProps,
+    ...dispatchProps,
+    showAddToAddressBookModal: () => dispatchProps.showAddToAddressBookModal(stateProps.to),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(SendContent)
diff --git a/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
index 3f5587318..37af59e29 100644
--- a/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
+++ b/ui/app/pages/send/send-content/send-gas-row/gas-fee-display/gas-fee-display.component.js
@@ -39,11 +39,11 @@ export default class GasFeeDisplay extends Component {
           )
           : gasLoadingError
             ? <div className="currency-display.currency-display--message">
-                {this.context.t('setGasPrice')}
-              </div>
+              {this.context.t('setGasPrice')}
+            </div>
             : <div className="currency-display">
-                {this.context.t('loading')}
-              </div>
+              {this.context.t('loading')}
+            </div>
         }
         <button
           className="gas-fee-reset"
diff --git a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
index 4c09ed564..ed064695e 100644
--- a/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
+++ b/ui/app/pages/send/send-content/send-gas-row/send-gas-row.component.js
@@ -90,26 +90,26 @@ export default class SendGasRow extends Component {
     const { metricsEvent } = this.context
 
     const gasPriceButtonGroup = <div>
-        <GasPriceButtonGroup
-          className="gas-price-button-group--small"
-          showCheck={false}
-          {...gasPriceButtonGroupProps}
-          handleGasPriceSelection={async (...args) => {
-            metricsEvent({
-              eventOpts: {
-                category: 'Transactions',
-                action: 'Edit Screen',
-                name: 'Changed Gas Button',
-              },
-            })
-            await gasPriceButtonGroupProps.handleGasPriceSelection(...args)
-            if (maxModeOn) {
-              this.setMaxAmount()
-            }
-          }}
-        />
-        { this.renderAdvancedOptionsButton() }
-      </div>
+      <GasPriceButtonGroup
+        className="gas-price-button-group--small"
+        showCheck={false}
+        {...gasPriceButtonGroupProps}
+        handleGasPriceSelection={async (...args) => {
+          metricsEvent({
+            eventOpts: {
+              category: 'Transactions',
+              action: 'Edit Screen',
+              name: 'Changed Gas Button',
+            },
+          })
+          await gasPriceButtonGroupProps.handleGasPriceSelection(...args)
+          if (maxModeOn) {
+            this.setMaxAmount()
+          }
+        }}
+      />
+      { this.renderAdvancedOptionsButton() }
+    </div>
     const gasFeeDisplay = <GasFeeDisplay
       conversionRate={conversionRate}
       convertedCurrency={convertedCurrency}
@@ -134,7 +134,7 @@ export default class SendGasRow extends Component {
         isSpeedUp={false}
       />
       { this.renderAdvancedOptionsButton() }
-     </div>
+    </div>
 
     if (advancedInlineGasShown) {
       return advancedGasInputs
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
index f1caa8f99..6ddddbb3d 100644
--- a/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
+++ b/ui/app/pages/send/send-content/send-row-wrapper/send-row-warning-message/send-row-warning-message.component.js
@@ -18,7 +18,7 @@ export default class SendRowWarningMessage extends Component {
     const warningMessage = warningType in warnings && warnings[warningType]
 
     return (
-        warningMessage
+      warningMessage
         ? <div className="send-v2__warning">{this.context.t(warningMessage)}</div>
         : null
     )
diff --git a/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
index 30280e1d0..533ca2ebe 100644
--- a/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
+++ b/ui/app/pages/send/send-content/send-row-wrapper/tests/send-row-wrapper-component.test.js
@@ -54,25 +54,25 @@ describe('SendContent Component', function () {
 
     it('should render its second child as a child of the send-v2__form-field, if it has two children', () => {
       wrapper = shallow(<SendRowWrapper
-      errorType={'mockErrorType'}
-      label={'mockLabel'}
-      showError={false}
-    >
-      <span>Mock Custom Label Content</span>
-      <span>Mock Form Field</span>
-    </SendRowWrapper>)
+        errorType={'mockErrorType'}
+        label={'mockLabel'}
+        showError={false}
+      >
+        <span>Mock Custom Label Content</span>
+        <span>Mock Form Field</span>
+      </SendRowWrapper>)
       assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-field').childAt(0).text(), 'Mock Form Field')
     })
 
     it('should render its first child as the last child of the send-v2__form-label, if it has two children', () => {
       wrapper = shallow(<SendRowWrapper
-      errorType={'mockErrorType'}
-      label={'mockLabel'}
-      showError={false}
-    >
-      <span>Mock Custom Label Content</span>
-      <span>Mock Form Field</span>
-    </SendRowWrapper>)
+        errorType={'mockErrorType'}
+        label={'mockLabel'}
+        showError={false}
+      >
+        <span>Mock Custom Label Content</span>
+        <span>Mock Form Field</span>
+      </SendRowWrapper>)
       assert.equal(wrapper.find('.send-v2__form-row > .send-v2__form-label').childAt(1).text(), 'Mock Custom Label Content')
     })
   })
diff --git a/ui/app/pages/send/send-content/send-to-row/index.js b/ui/app/pages/send/send-content/send-to-row/index.js
deleted file mode 100644
index 121f15148..000000000
--- a/ui/app/pages/send/send-content/send-to-row/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './send-to-row.container'
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md b/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md
deleted file mode 100644
index e69de29bb..000000000
--- a/ui/app/pages/send/send-content/send-to-row/send-to-row-README.md
+++ /dev/null
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js
deleted file mode 100644
index 9baf327c1..000000000
--- a/ui/app/pages/send/send-content/send-to-row/send-to-row.component.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import SendRowWrapper from '../send-row-wrapper'
-import EnsInput from '../../../../components/app/ens-input'
-import { getToErrorObject, getToWarningObject } from './send-to-row.utils.js'
-
-export default class SendToRow extends Component {
-
-  static propTypes = {
-    closeToDropdown: PropTypes.func,
-    hasHexData: PropTypes.bool.isRequired,
-    inError: PropTypes.bool,
-    inWarning: PropTypes.bool,
-    network: PropTypes.string,
-    openToDropdown: PropTypes.func,
-    selectedToken: PropTypes.object,
-    to: PropTypes.string,
-    toAccounts: PropTypes.array,
-    toDropdownOpen: PropTypes.bool,
-    tokens: PropTypes.array,
-    updateGas: PropTypes.func,
-    updateSendTo: PropTypes.func,
-    updateSendToError: PropTypes.func,
-    updateSendToWarning: PropTypes.func,
-    scanQrCode: PropTypes.func,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
-  }
-
-  handleToChange (to, nickname = '', toError, toWarning, network) {
-    const { hasHexData, updateSendTo, updateSendToError, updateGas, tokens, selectedToken, updateSendToWarning } = this.props
-    const toErrorObject = getToErrorObject(to, toError, hasHexData, tokens, selectedToken, network)
-    const toWarningObject = getToWarningObject(to, toWarning, tokens, selectedToken)
-    updateSendTo(to, nickname)
-    updateSendToError(toErrorObject)
-    updateSendToWarning(toWarningObject)
-    if (toErrorObject.to === null) {
-      updateGas({ to })
-    }
-  }
-
-  render () {
-    const {
-      closeToDropdown,
-      inError,
-      inWarning,
-      network,
-      openToDropdown,
-      to,
-      toAccounts,
-      toDropdownOpen,
-    } = this.props
-
-    return (
-      <SendRowWrapper
-        errorType={'to'}
-        label={`${this.context.t('to')}: `}
-        showError={inError}
-        showWarning={inWarning}
-        warningType={'to'}
-        >
-        <EnsInput
-          scanQrCode={_ => {
-            this.context.metricsEvent({
-              eventOpts: {
-                category: 'Transactions',
-                action: 'Edit Screen',
-                name: 'Used QR scanner',
-              },
-            })
-            this.props.scanQrCode()
-          }}
-          accounts={toAccounts}
-          closeDropdown={() => closeToDropdown()}
-          dropdownOpen={toDropdownOpen}
-          inError={inError}
-          name={'address'}
-          network={network}
-          onChange={({ toAddress, nickname, toError, toWarning }) => this.handleToChange(toAddress, nickname, toError, toWarning, this.props.network)}
-          openDropdown={() => openToDropdown()}
-          placeholder={this.context.t('recipientAddress')}
-          to={to}
-        />
-      </SendRowWrapper>
-    )
-  }
-
-}
diff --git a/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js b/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js
deleted file mode 100644
index 2cbe9fcd0..000000000
--- a/ui/app/pages/send/send-content/send-to-row/send-to-row.container.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { connect } from 'react-redux'
-import {
-    getCurrentNetwork,
-    getSelectedToken,
-    getSendTo,
-    getSendToAccounts,
-    getSendHexData,
-} from '../../send.selectors.js'
-import {
-    getToDropdownOpen,
-    getTokens,
-    sendToIsInError,
-    sendToIsInWarning,
-} from './send-to-row.selectors.js'
-import {
-    updateSendTo,
-} from '../../../../store/actions'
-import {
-  updateSendErrors,
-  updateSendWarnings,
-  openToDropdown,
-  closeToDropdown,
-} from '../../../../ducks/send/send.duck'
-import SendToRow from './send-to-row.component'
-
-export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
-
-function mapStateToProps (state) {
-  return {
-    hasHexData: Boolean(getSendHexData(state)),
-    inError: sendToIsInError(state),
-    inWarning: sendToIsInWarning(state),
-    network: getCurrentNetwork(state),
-    selectedToken: getSelectedToken(state),
-    to: getSendTo(state),
-    toAccounts: getSendToAccounts(state),
-    toDropdownOpen: getToDropdownOpen(state),
-    tokens: getTokens(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    closeToDropdown: () => dispatch(closeToDropdown()),
-    openToDropdown: () => dispatch(openToDropdown()),
-    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
-    updateSendToError: (toErrorObject) => {
-        dispatch(updateSendErrors(toErrorObject))
-    },
-    updateSendToWarning: (toWarningObject) => {
-      dispatch(updateSendWarnings(toWarningObject))
-  },
-  }
-}
diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js
deleted file mode 100644
index c180d97f1..000000000
--- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-component.test.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import React from 'react'
-import assert from 'assert'
-import { shallow } from 'enzyme'
-import sinon from 'sinon'
-import proxyquire from 'proxyquire'
-
-const SendToRow = proxyquire('../send-to-row.component.js', {
-  './send-to-row.utils.js': {
-    getToErrorObject: (to, toError) => ({
-      to: to === false ? null : `mockToErrorObject:${to}${toError}`,
-    }),
-    getToWarningObject: (to, toWarning) => ({
-      to: to === false ? null : `mockToWarningObject:${to}${toWarning}`,
-    }),
-  },
-}).default
-
-import SendRowWrapper from '../../send-row-wrapper/send-row-wrapper.component'
-import EnsInput from '../../../../../components/app/ens-input'
-
-const propsMethodSpies = {
-  closeToDropdown: sinon.spy(),
-  openToDropdown: sinon.spy(),
-  updateGas: sinon.spy(),
-  updateSendTo: sinon.spy(),
-  updateSendToError: sinon.spy(),
-  updateSendToWarning: sinon.spy(),
-}
-
-sinon.spy(SendToRow.prototype, 'handleToChange')
-
-describe('SendToRow Component', function () {
-  let wrapper
-  let instance
-
-  beforeEach(() => {
-    wrapper = shallow(<SendToRow
-      closeToDropdown={propsMethodSpies.closeToDropdown}
-      inError={false}
-      inWarning={false}
-      network={'mockNetwork'}
-      openToDropdown={propsMethodSpies.openToDropdown}
-      to={'mockTo'}
-      toAccounts={['mockAccount']}
-      toDropdownOpen={false}
-      updateGas={propsMethodSpies.updateGas}
-      updateSendTo={propsMethodSpies.updateSendTo}
-      updateSendToError={propsMethodSpies.updateSendToError}
-      updateSendToWarning={propsMethodSpies.updateSendToWarning}
-    />, { context: { t: str => str + '_t' } })
-    instance = wrapper.instance()
-  })
-
-  afterEach(() => {
-    propsMethodSpies.closeToDropdown.resetHistory()
-    propsMethodSpies.openToDropdown.resetHistory()
-    propsMethodSpies.updateSendTo.resetHistory()
-    propsMethodSpies.updateSendToError.resetHistory()
-    propsMethodSpies.updateSendToWarning.resetHistory()
-    SendToRow.prototype.handleToChange.resetHistory()
-  })
-
-  describe('handleToChange', () => {
-
-    it('should call updateSendTo', () => {
-      assert.equal(propsMethodSpies.updateSendTo.callCount, 0)
-      instance.handleToChange('mockTo2', 'mockNickname')
-      assert.equal(propsMethodSpies.updateSendTo.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendTo.getCall(0).args,
-        ['mockTo2', 'mockNickname']
-      )
-    })
-
-    it('should call updateSendToError', () => {
-      assert.equal(propsMethodSpies.updateSendToError.callCount, 0)
-      instance.handleToChange('mockTo2', '', 'mockToError')
-      assert.equal(propsMethodSpies.updateSendToError.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendToError.getCall(0).args,
-        [{ to: 'mockToErrorObject:mockTo2mockToError' }]
-      )
-    })
-
-    it('should call updateSendToWarning', () => {
-      assert.equal(propsMethodSpies.updateSendToWarning.callCount, 0)
-      instance.handleToChange('mockTo2', '', '', 'mockToWarning')
-      assert.equal(propsMethodSpies.updateSendToWarning.callCount, 1)
-      assert.deepEqual(
-        propsMethodSpies.updateSendToWarning.getCall(0).args,
-        [{ to: 'mockToWarningObject:mockTo2mockToWarning' }]
-      )
-    })
-
-    it('should not call updateGas if there is a to error', () => {
-      assert.equal(propsMethodSpies.updateGas.callCount, 0)
-      instance.handleToChange('mockTo2')
-      assert.equal(propsMethodSpies.updateGas.callCount, 0)
-    })
-
-    it('should call updateGas if there is no to error', () => {
-      assert.equal(propsMethodSpies.updateGas.callCount, 0)
-      instance.handleToChange(false)
-      assert.equal(propsMethodSpies.updateGas.callCount, 1)
-    })
-  })
-
-  describe('render', () => {
-    it('should render a SendRowWrapper component', () => {
-      assert.equal(wrapper.find(SendRowWrapper).length, 1)
-    })
-
-    it('should pass the correct props to SendRowWrapper', () => {
-      const {
-        errorType,
-        label,
-        showError,
-      } = wrapper.find(SendRowWrapper).props()
-
-      assert.equal(errorType, 'to')
-
-      assert.equal(label, 'to_t: ')
-
-      assert.equal(showError, false)
-    })
-
-    it('should render an EnsInput as a child of the SendRowWrapper', () => {
-      assert(wrapper.find(SendRowWrapper).childAt(0).is(EnsInput))
-    })
-
-    it('should render the EnsInput with the correct props', () => {
-      const {
-        accounts,
-        closeDropdown,
-        dropdownOpen,
-        inError,
-        name,
-        network,
-        onChange,
-        openDropdown,
-        placeholder,
-        to,
-      } = wrapper.find(SendRowWrapper).childAt(0).props()
-      assert.deepEqual(accounts, ['mockAccount'])
-      assert.equal(dropdownOpen, false)
-      assert.equal(inError, false)
-      assert.equal(name, 'address')
-      assert.equal(network, 'mockNetwork')
-      assert.equal(placeholder, 'recipientAddress_t')
-      assert.equal(to, 'mockTo')
-      assert.equal(propsMethodSpies.closeToDropdown.callCount, 0)
-      closeDropdown()
-      assert.equal(propsMethodSpies.closeToDropdown.callCount, 1)
-      assert.equal(propsMethodSpies.openToDropdown.callCount, 0)
-      openDropdown()
-      assert.equal(propsMethodSpies.openToDropdown.callCount, 1)
-      assert.equal(SendToRow.prototype.handleToChange.callCount, 0)
-      onChange({ toAddress: 'mockNewTo', nickname: 'mockNewNickname', toError: 'mockToError', toWarning: 'mockToWarning' })
-      assert.equal(SendToRow.prototype.handleToChange.callCount, 1)
-      assert.deepEqual(
-        SendToRow.prototype.handleToChange.getCall(0).args,
-        ['mockNewTo', 'mockNewNickname', 'mockToError', 'mockToWarning', 'mockNetwork' ]
-      )
-    })
-  })
-})
diff --git a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js
deleted file mode 100644
index bb8702e9a..000000000
--- a/ui/app/pages/send/send-content/send-to-row/tests/send-to-row-container.test.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import assert from 'assert'
-import proxyquire from 'proxyquire'
-import sinon from 'sinon'
-
-let mapStateToProps
-let mapDispatchToProps
-
-const actionSpies = {
-  updateSendTo: sinon.spy(),
-}
-const duckActionSpies = {
-  closeToDropdown: sinon.spy(),
-  openToDropdown: sinon.spy(),
-  updateSendErrors: sinon.spy(),
-  updateSendWarnings: sinon.spy(),
-}
-
-proxyquire('../send-to-row.container.js', {
-  'react-redux': {
-    connect: (ms, md) => {
-      mapStateToProps = ms
-      mapDispatchToProps = md
-      return () => ({})
-    },
-  },
-  '../../send.selectors.js': {
-    getCurrentNetwork: (s) => `mockNetwork:${s}`,
-    getSelectedToken: (s) => `mockSelectedToken:${s}`,
-    getSendHexData: (s) => s,
-    getSendTo: (s) => `mockTo:${s}`,
-    getSendToAccounts: (s) => `mockToAccounts:${s}`,
-  },
-  './send-to-row.selectors.js': {
-    getToDropdownOpen: (s) => `mockToDropdownOpen:${s}`,
-    sendToIsInError: (s) => `mockInError:${s}`,
-    sendToIsInWarning: (s) => `mockInWarning:${s}`,
-    getTokens: (s) => `mockTokens:${s}`,
-  },
-  '../../../../store/actions': actionSpies,
-  '../../../../ducks/send/send.duck': duckActionSpies,
-})
-
-describe('send-to-row container', () => {
-
-  describe('mapStateToProps()', () => {
-
-    it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        hasHexData: true,
-        inError: 'mockInError:mockState',
-        inWarning: 'mockInWarning:mockState',
-        network: 'mockNetwork:mockState',
-        selectedToken: 'mockSelectedToken:mockState',
-        to: 'mockTo:mockState',
-        toAccounts: 'mockToAccounts:mockState',
-        toDropdownOpen: 'mockToDropdownOpen:mockState',
-        tokens: 'mockTokens:mockState',
-      })
-    })
-
-  })
-
-  describe('mapDispatchToProps()', () => {
-    let dispatchSpy
-    let mapDispatchToPropsObject
-
-    beforeEach(() => {
-      dispatchSpy = sinon.spy()
-      mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy)
-    })
-
-    describe('closeToDropdown()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.closeToDropdown()
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.closeToDropdown.calledOnce)
-        assert.equal(
-          duckActionSpies.closeToDropdown.getCall(0).args[0],
-          undefined
-        )
-      })
-    })
-
-    describe('openToDropdown()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.openToDropdown()
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.openToDropdown.calledOnce)
-        assert.equal(
-          duckActionSpies.openToDropdown.getCall(0).args[0],
-          undefined
-        )
-      })
-    })
-
-    describe('updateSendTo()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendTo('mockTo', 'mockNickname')
-        assert(dispatchSpy.calledOnce)
-        assert(actionSpies.updateSendTo.calledOnce)
-        assert.deepEqual(
-          actionSpies.updateSendTo.getCall(0).args,
-          ['mockTo', 'mockNickname']
-        )
-      })
-    })
-
-    describe('updateSendToError()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendToError('mockToErrorObject')
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.updateSendErrors.calledOnce)
-        assert.equal(
-          duckActionSpies.updateSendErrors.getCall(0).args[0],
-          'mockToErrorObject'
-        )
-      })
-    })
-
-    describe('updateSendToWarning()', () => {
-      it('should dispatch an action', () => {
-        mapDispatchToPropsObject.updateSendToWarning('mockToWarningObject')
-        assert(dispatchSpy.calledOnce)
-        assert(duckActionSpies.updateSendWarnings.calledOnce)
-        assert.equal(
-          duckActionSpies.updateSendWarnings.getCall(0).args[0],
-          'mockToWarningObject'
-        )
-      })
-    })
-
-  })
-
-})
diff --git a/ui/app/pages/send/send-content/tests/send-content-component.test.js b/ui/app/pages/send/send-content/tests/send-content-component.test.js
index 521c6523e..451d2ea53 100644
--- a/ui/app/pages/send/send-content/tests/send-content-component.test.js
+++ b/ui/app/pages/send/send-content/tests/send-content-component.test.js
@@ -5,17 +5,21 @@ import SendContent from '../send-content.component.js'
 
 import PageContainerContent from '../../../../components/ui/page-container/page-container-content.component'
 import SendAmountRow from '../send-amount-row/send-amount-row.container'
-import SendFromRow from '../send-from-row/send-from-row.container'
 import SendGasRow from '../send-gas-row/send-gas-row.container'
-import SendToRow from '../send-to-row/send-to-row.container'
 import SendHexDataRow from '../send-hex-data-row/send-hex-data-row.container'
 import SendAssetRow from '../send-asset-row/send-asset-row.container'
+import Dialog from '../../../../components/ui/dialog'
 
 describe('SendContent Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<SendContent showHexData={true} />)
+    wrapper = shallow(
+      <SendContent
+        showHexData={true}
+      />,
+      { context: { t: str => str + '_t' } }
+    )
   })
 
   describe('render', () => {
@@ -31,23 +35,55 @@ describe('SendContent Component', function () {
 
     it('should render the correct row components as grandchildren of the PageContainerContent component', () => {
       const PageContainerContentChild = wrapper.find(PageContainerContent).children()
-      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
-      assert(PageContainerContentChild.childAt(1).is(SendToRow))
-      assert(PageContainerContentChild.childAt(2).is(SendAssetRow))
-      assert(PageContainerContentChild.childAt(3).is(SendAmountRow))
-      assert(PageContainerContentChild.childAt(4).is(SendGasRow))
-      assert(PageContainerContentChild.childAt(5).is(SendHexDataRow))
+      assert(PageContainerContentChild.childAt(0).is(Dialog), 'row[0] should be Dialog')
+      assert(PageContainerContentChild.childAt(1).is(SendAssetRow), 'row[1] should be SendAssetRow')
+      assert(PageContainerContentChild.childAt(2).is(SendAmountRow), 'row[2] should be SendAmountRow')
+      assert(PageContainerContentChild.childAt(3).is(SendGasRow), 'row[3] should be SendGasRow')
+      assert(PageContainerContentChild.childAt(4).is(SendHexDataRow), 'row[4] should be SendHexDataRow')
     })
 
     it('should not render the SendHexDataRow if props.showHexData is false', () => {
       wrapper.setProps({ showHexData: false })
       const PageContainerContentChild = wrapper.find(PageContainerContent).children()
-      assert(PageContainerContentChild.childAt(0).is(SendFromRow))
-      assert(PageContainerContentChild.childAt(1).is(SendToRow))
-      assert(PageContainerContentChild.childAt(2).is(SendAssetRow))
-      assert(PageContainerContentChild.childAt(3).is(SendAmountRow))
-      assert(PageContainerContentChild.childAt(4).is(SendGasRow))
-      assert.equal(PageContainerContentChild.childAt(5).exists(), false)
+      assert(PageContainerContentChild.childAt(0).is(Dialog), 'row[0] should be Dialog')
+      assert(PageContainerContentChild.childAt(1).is(SendAssetRow), 'row[1] should be SendAssetRow')
+      assert(PageContainerContentChild.childAt(2).is(SendAmountRow), 'row[2] should be SendAmountRow')
+      assert(PageContainerContentChild.childAt(3).is(SendGasRow), 'row[3] should be SendGasRow')
+      assert.equal(PageContainerContentChild.childAt(4).exists(), false)
     })
+
+    it('should not render the Dialog if addressBook contains "to" address', () => {
+      wrapper.setProps({
+        showHexData: false,
+        to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
+        addressBook: [{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'dinodan' }],
+      })
+      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
+      assert(PageContainerContentChild.childAt(0).is(SendAssetRow), 'row[1] should be SendAssetRow')
+      assert(PageContainerContentChild.childAt(1).is(SendAmountRow), 'row[2] should be SendAmountRow')
+      assert(PageContainerContentChild.childAt(2).is(SendGasRow), 'row[3] should be SendGasRow')
+      assert.equal(PageContainerContentChild.childAt(3).exists(), false)
+    })
+
+    it('should not render the Dialog if ownedAccounts contains "to" address', () => {
+      wrapper.setProps({
+        showHexData: false,
+        to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
+        addressBook: [],
+        ownedAccounts: [{ address: '0x80F061544cC398520615B5d3e7A3BedD70cd4510', name: 'dinodan' }],
+      })
+      const PageContainerContentChild = wrapper.find(PageContainerContent).children()
+      assert(PageContainerContentChild.childAt(0).is(SendAssetRow), 'row[1] should be SendAssetRow')
+      assert(PageContainerContentChild.childAt(1).is(SendAmountRow), 'row[2] should be SendAmountRow')
+      assert(PageContainerContentChild.childAt(2).is(SendGasRow), 'row[3] should be SendGasRow')
+      assert.equal(PageContainerContentChild.childAt(3).exists(), false)
+    })
+  })
+
+  it('should not render the asset dropdown if token length is 0 ', () => {
+    wrapper.setProps({ tokens: [] })
+    const PageContainerContentChild = wrapper.find(PageContainerContent).children()
+    assert(PageContainerContentChild.childAt(1).is(SendAssetRow))
+    assert(PageContainerContentChild.childAt(1).find('send-v2__asset-dropdown__single-asset'), true)
   })
 })
diff --git a/ui/app/pages/send/send-footer/send-footer.utils.js b/ui/app/pages/send/send-footer/send-footer.utils.js
index 91ac29014..ce65535a6 100644
--- a/ui/app/pages/send/send-footer/send-footer.utils.js
+++ b/ui/app/pages/send/send-footer/send-footer.utils.js
@@ -76,7 +76,7 @@ function constructUpdatedTx ({
 
 function addressIsNew (toAccounts, newAddress) {
   const newAddressNormalized = newAddress.toLowerCase()
-  const foundMatching = toAccounts.some(({ address }) => address === newAddressNormalized)
+  const foundMatching = toAccounts.some(({ address }) => address.toLowerCase() === newAddressNormalized)
   return !foundMatching
 }
 
diff --git a/ui/app/pages/send/send-header/send-header.component.js b/ui/app/pages/send/send-header/send-header.component.js
index 76e35494a..5bc76fcd3 100644
--- a/ui/app/pages/send/send-header/send-header.component.js
+++ b/ui/app/pages/send/send-header/send-header.component.js
@@ -24,8 +24,10 @@ export default class SendHeader extends Component {
   render () {
     return (
       <PageContainerHeader
+        className="send__header"
         onClose={() => this.onClose()}
         title={this.context.t(this.props.titleKey)}
+        headerCloseText={this.context.t('cancel')}
       />
     )
   }
diff --git a/ui/app/pages/send/send-header/send-header.selectors.js b/ui/app/pages/send/send-header/send-header.selectors.js
index d7c9d3766..01b90409b 100644
--- a/ui/app/pages/send/send-header/send-header.selectors.js
+++ b/ui/app/pages/send/send-header/send-header.selectors.js
@@ -1,6 +1,7 @@
 const {
   getSelectedToken,
   getSendEditingTransactionId,
+  getSendTo,
 } = require('../send.selectors.js')
 
 const selectors = {
@@ -14,6 +15,10 @@ function getTitleKey (state) {
   const isEditing = Boolean(getSendEditingTransactionId(state))
   const isToken = Boolean(getSelectedToken(state))
 
+  if (!getSendTo(state)) {
+    return 'addRecipient'
+  }
+
   if (isEditing) {
     return 'edit'
   } else if (isToken) {
@@ -24,14 +29,14 @@ function getTitleKey (state) {
 }
 
 function getSubtitleParams (state) {
-    const isEditing = Boolean(getSendEditingTransactionId(state))
-    const token = getSelectedToken(state)
+  const isEditing = Boolean(getSendEditingTransactionId(state))
+  const token = getSelectedToken(state)
 
-    if (isEditing) {
-      return [ 'editingTransaction' ]
-    } else if (token) {
-      return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ]
-    } else {
-      return [ 'onlySendToEtherAddress' ]
-    }
+  if (isEditing) {
+    return [ 'editingTransaction' ]
+  } else if (token) {
+    return [ 'onlySendTokensToAccountAddress', [ token.symbol ] ]
+  } else {
+    return [ 'onlySendToEtherAddress' ]
+  }
 }
diff --git a/ui/app/pages/send/send-header/tests/send-header-selectors.test.js b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js
index e0c6a3ab3..d22845f84 100644
--- a/ui/app/pages/send/send-header/tests/send-header-selectors.test.js
+++ b/ui/app/pages/send/send-header/tests/send-header-selectors.test.js
@@ -8,39 +8,44 @@ const {
   '../send.selectors': {
     getSelectedToken: (mockState) => mockState.t,
     getSendEditingTransactionId: (mockState) => mockState.e,
+    getSendTo: (mockState) => mockState.to,
   },
 })
 
 describe('send-header selectors', () => {
 
   describe('getTitleKey()', () => {
+    it('should return the correct key when "to" is empty', () => {
+      assert.equal(getTitleKey({ e: 1, t: true, to: '' }), 'addRecipient')
+    })
+
     it('should return the correct key when getSendEditingTransactionId is truthy', () => {
-      assert.equal(getTitleKey({ e: 1, t: true }), 'edit')
+      assert.equal(getTitleKey({ e: 1, t: true, to: '0x123' }), 'edit')
     })
 
     it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
-      assert.equal(getTitleKey({ e: null, t: 'abc' }), 'sendTokens')
+      assert.equal(getTitleKey({ e: null, t: 'abc', to: '0x123' }), 'sendTokens')
     })
 
     it('should return the correct key when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
-      assert.equal(getTitleKey({ e: null }), 'sendETH')
+      assert.equal(getTitleKey({ e: null, to: '0x123' }), 'sendETH')
     })
   })
 
   describe('getSubtitleParams()', () => {
     it('should return the correct params when getSendEditingTransactionId is truthy', () => {
-      assert.deepEqual(getSubtitleParams({ e: 1, t: true }), [ 'editingTransaction' ])
+      assert.deepEqual(getSubtitleParams({ e: 1, t: true, to: '0x123' }), [ 'editingTransaction' ])
     })
 
     it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is truthy', () => {
       assert.deepEqual(
-        getSubtitleParams({ e: null, t: { symbol: 'ABC' } }),
+        getSubtitleParams({ e: null, t: { symbol: 'ABC' }, to: '0x123' }),
         [ 'onlySendTokensToAccountAddress', [ 'ABC' ] ]
       )
     })
 
     it('should return the correct params when getSendEditingTransactionId is falsy and getSelectedToken is falsy', () => {
-      assert.deepEqual(getSubtitleParams({ e: null }), [ 'onlySendToEtherAddress' ])
+      assert.deepEqual(getSubtitleParams({ e: null, to: '0x123' }), [ 'onlySendToEtherAddress' ])
     })
   })
 
diff --git a/ui/app/pages/send/send.component.js b/ui/app/pages/send/send.component.js
index 5f0c9c9f2..cb07dcb59 100644
--- a/ui/app/pages/send/send.component.js
+++ b/ui/app/pages/send/send.component.js
@@ -7,10 +7,14 @@ import {
   getToAddressForGasUpdate,
   doesAmountErrorRequireUpdate,
 } from './send.utils'
-
+import debounce from 'lodash.debounce'
+import { getToWarningObject, getToErrorObject } from './send-content/add-recipient/add-recipient'
 import SendHeader from './send-header'
+import AddRecipient from './send-content/add-recipient'
 import SendContent from './send-content'
 import SendFooter from './send-footer'
+import EnsInput from './send-content/add-recipient/ens-input'
+
 
 export default class SendTransactionScreen extends PersistentForm {
 
@@ -27,12 +31,14 @@ export default class SendTransactionScreen extends PersistentForm {
     gasLimit: PropTypes.string,
     gasPrice: PropTypes.string,
     gasTotal: PropTypes.string,
+    to: PropTypes.string,
     history: PropTypes.object,
     network: PropTypes.string,
     primaryCurrency: PropTypes.string,
     recentBlocks: PropTypes.array,
     selectedAddress: PropTypes.string,
     selectedToken: PropTypes.object,
+    tokens: PropTypes.array,
     tokenBalance: PropTypes.string,
     tokenContract: PropTypes.object,
     fetchBasicGasEstimates: PropTypes.func,
@@ -42,10 +48,24 @@ export default class SendTransactionScreen extends PersistentForm {
     scanQrCode: PropTypes.func,
     qrCodeDetected: PropTypes.func,
     qrCodeData: PropTypes.object,
+    ensResolution: PropTypes.string,
+    ensResolutionError: PropTypes.string,
   }
 
   static contextTypes = {
     t: PropTypes.func,
+    metricsEvent: PropTypes.func,
+  }
+
+  state = {
+    query: '',
+    toError: null,
+    toWarning: null,
+  }
+
+  constructor (props) {
+    super(props)
+    this.dValidate = debounce(this.validate, 1000)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -63,34 +83,6 @@ export default class SendTransactionScreen extends PersistentForm {
     }
   }
 
-  updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
-    const {
-      amount,
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      recentBlocks,
-      selectedAddress,
-      selectedToken = {},
-      to: currentToAddress,
-      updateAndSetGasLimit,
-    } = this.props
-
-    updateAndSetGasLimit({
-      blockGasLimit,
-      editingTransactionId,
-      gasLimit,
-      gasPrice,
-      recentBlocks,
-      selectedAddress,
-      selectedToken,
-      to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
-      value: value || amount,
-      data,
-    })
-  }
-
   componentDidUpdate (prevProps) {
     const {
       amount,
@@ -105,6 +97,10 @@ export default class SendTransactionScreen extends PersistentForm {
       updateSendErrors,
       updateSendTokenBalance,
       tokenContract,
+      to,
+      toNickname,
+      addressBook,
+      updateToNicknameIfNecessary,
     } = this.props
 
     const {
@@ -159,6 +155,7 @@ export default class SendTransactionScreen extends PersistentForm {
           tokenContract,
           address,
         })
+        updateToNicknameIfNecessary(to, toNickname, addressBook)
         this.updateGas()
       }
     }
@@ -173,9 +170,9 @@ export default class SendTransactionScreen extends PersistentForm {
 
   componentDidMount () {
     this.props.fetchBasicGasEstimates()
-    .then(() => {
-      this.updateGas()
-    })
+      .then(() => {
+        this.updateGas()
+      })
   }
 
   componentWillMount () {
@@ -196,6 +193,39 @@ export default class SendTransactionScreen extends PersistentForm {
     this.props.resetSendState()
   }
 
+  onRecipientInputChange = query => {
+    if (query) {
+      this.dValidate(query)
+    } else {
+      this.validate(query)
+    }
+
+    this.setState({
+      query,
+    })
+  }
+
+  validate (query) {
+    const {
+      hasHexData,
+      tokens,
+      selectedToken,
+      network,
+    } = this.props
+
+    if (!query) {
+      return this.setState({ toError: '', toWarning: '' })
+    }
+
+    const toErrorObject = getToErrorObject(query, null, hasHexData, tokens, selectedToken, network)
+    const toWarningObject = getToWarningObject(query, null, tokens, selectedToken)
+
+    this.setState({
+      toError: toErrorObject.to,
+      toWarning: toWarningObject.to,
+    })
+  }
+
   updateSendToken () {
     const {
       from: { address },
@@ -211,20 +241,104 @@ export default class SendTransactionScreen extends PersistentForm {
     })
   }
 
+  updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
+    const {
+      amount,
+      blockGasLimit,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      recentBlocks,
+      selectedAddress,
+      selectedToken = {},
+      to: currentToAddress,
+      updateAndSetGasLimit,
+    } = this.props
+
+    updateAndSetGasLimit({
+      blockGasLimit,
+      editingTransactionId,
+      gasLimit,
+      gasPrice,
+      recentBlocks,
+      selectedAddress,
+      selectedToken,
+      to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
+      value: value || amount,
+      data,
+    })
+  }
+
   render () {
-    const { history, showHexData } = this.props
+    const { history, to } = this.props
+    let content
+
+    if (to) {
+      content = this.renderSendContent()
+    } else {
+      content = this.renderAddRecipient()
+    }
 
     return (
       <div className="page-container">
-        <SendHeader history={history}/>
-        <SendContent
-          updateGas={(updateData) => this.updateGas(updateData)}
-          scanQrCode={_ => this.props.scanQrCode()}
-          showHexData={showHexData}
-        />
-        <SendFooter history={history}/>
+        <SendHeader history={history} />
+        { this.renderInput() }
+        { content }
       </div>
     )
   }
 
+  renderInput () {
+    return (
+      <EnsInput
+        className="send__to-row"
+        scanQrCode={_ => {
+          this.context.metricsEvent({
+            eventOpts: {
+              category: 'Transactions',
+              action: 'Edit Screen',
+              name: 'Used QR scanner',
+            },
+          })
+          this.props.scanQrCode()
+        }}
+        onChange={this.onRecipientInputChange}
+        onValidAddressTyped={(address) => this.props.updateSendTo(address, '')}
+        onPaste={text => this.props.updateSendTo(text)}
+        onReset={() => this.props.updateSendTo('', '')}
+        updateEnsResolution={this.props.updateSendEnsResolution}
+        updateEnsResolutionError={this.props.updateSendEnsResolutionError}
+      />
+    )
+  }
+
+  renderAddRecipient () {
+    const { scanQrCode } = this.props
+    const { toError, toWarning } = this.state
+
+    return (
+      <AddRecipient
+        updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })}
+        scanQrCode={scanQrCode}
+        query={this.state.query}
+        toError={toError}
+        toWarning={toWarning}
+      />
+    )
+  }
+
+  renderSendContent () {
+    const { history, showHexData, scanQrCode } = this.props
+
+    return [
+      <SendContent
+        key="send-content"
+        updateGas={({ to, amount, data } = {}) => this.updateGas({ to, amount, data })}
+        scanQrCode={scanQrCode}
+        showHexData={showHexData}
+      />,
+      <SendFooter key="send-footer" history={history} />,
+    ]
+  }
+
 }
diff --git a/ui/app/pages/send/send.container.js b/ui/app/pages/send/send.container.js
index 69adbb765..0863c60d4 100644
--- a/ui/app/pages/send/send.container.js
+++ b/ui/app/pages/send/send.container.js
@@ -24,16 +24,25 @@ import {
   getSendHexDataFeatureFlagState,
   getSendFromObject,
   getSendTo,
+  getSendToNickname,
   getTokenBalance,
   getQrCodeData,
+  getSendEnsResolution,
+  getSendEnsResolutionError,
 } from './send.selectors'
 import {
+  getAddressBook,
+} from '../../selectors/selectors'
+import { getTokens } from './send-content/add-recipient/add-recipient.selectors'
+import {
   updateSendTo,
   updateSendTokenBalance,
   updateGasData,
   setGasTotal,
   showQrScanner,
   qrCodeDetected,
+  updateSendEnsResolution,
+  updateSendEnsResolutionError,
 } from '../../store/actions'
 import {
   resetSendState,
@@ -45,6 +54,9 @@ import {
 import {
   calcGasTotal,
 } from './send.utils.js'
+import {
+  isValidENSAddress,
+} from '../../helpers/utils/util'
 
 import {
   SEND_ROUTE,
@@ -72,11 +84,16 @@ function mapStateToProps (state) {
     selectedAddress: getSelectedAddress(state),
     selectedToken: getSelectedToken(state),
     showHexData: getSendHexDataFeatureFlagState(state),
+    ensResolution: getSendEnsResolution(state),
+    ensResolutionError: getSendEnsResolutionError(state),
     to: getSendTo(state),
+    toNickname: getSendToNickname(state),
+    tokens: getTokens(state),
     tokenBalance: getTokenBalance(state),
     tokenContract: getSelectedTokenContract(state),
     tokenToFiatRate: getSelectedTokenToFiatRate(state),
     qrCodeData: getQrCodeData(state),
+    addressBook: getAddressBook(state),
   }
 }
 
@@ -111,5 +128,15 @@ function mapDispatchToProps (dispatch) {
     qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
     updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
     fetchBasicGasEstimates: () => dispatch(fetchBasicGasEstimates()),
+    updateSendEnsResolution: (ensResolution) => dispatch(updateSendEnsResolution(ensResolution)),
+    updateSendEnsResolutionError: (message) => dispatch(updateSendEnsResolutionError(message)),
+    updateToNicknameIfNecessary: (to, toNickname, addressBook) => {
+      if (isValidENSAddress(toNickname)) {
+        const addressBookEntry = addressBook.find(({ address}) => to === address) || {}
+        if (!addressBookEntry.name !== toNickname) {
+          dispatch(updateSendTo(to, addressBookEntry.name || ''))
+        }
+      }
+    },
   }
 }
diff --git a/ui/app/pages/send/send.scss b/ui/app/pages/send/send.scss
index e69de29bb..9b95f1b39 100644
--- a/ui/app/pages/send/send.scss
+++ b/ui/app/pages/send/send.scss
@@ -0,0 +1,233 @@
+.send {
+  &__header {
+    position: relative;
+    background-color: $Grey-000;
+    border-bottom: none;
+    padding: 14px 0 3px 0;
+
+    .page-container__title {
+      @extend %h4;
+      text-align: center;
+    }
+
+    .page-container__header-close-text {
+      @extend %link;
+      font-size: 1rem;
+      line-height: 1.1875rem;
+      position: absolute;
+      right: 1rem;
+    }
+  }
+
+  &__dialog {
+    margin: 1rem;
+    cursor: pointer;
+  }
+
+  &__error-dialog {
+    margin: 1rem;
+  }
+
+  &__to-row {
+    margin: 0;
+    padding: .5rem;
+    flex: 0 0 auto;
+    background-color: $Grey-000;
+    border-bottom: 1px solid $alto;
+  }
+
+  &__select-recipient-wrapper {
+    @extend %col-nowrap;
+    flex: 1 1 auto;
+    height: 0;
+
+    &__list {
+      overflow-y: auto;
+
+      &__link {
+        @extend %link;
+        @extend %row-nowrap;
+        padding: 1rem;
+        font-size: 1rem;
+        border-bottom: 1px solid $alto;
+        align-items: center;
+      }
+
+      &__back-caret {
+        @extend %bg-contain;
+        display: block;
+        background-image: url('/images/caret-left.svg');
+        width: 18px;
+        height: 18px;
+        margin-right: .5rem;
+      }
+    }
+
+    &__recent-group-wrapper {
+      @extend %col-nowrap;
+
+      &__load-more {
+        @extend %link;
+        font-size: .75rem;
+        line-height: 1.0625rem;
+        padding: .5rem;
+        text-align: center;
+        border-bottom: 1px solid $alto;
+      }
+    }
+
+    &__group {
+      @extend %col-nowrap;
+    }
+
+    &__group-label {
+      @extend %h8;
+      background-color: $Grey-000;
+      color: $Grey-600;
+      line-height: .875rem;
+      padding: .5rem 1rem;
+      border-bottom: 1px solid $alto;
+
+      &:first-of-type {
+        border-top: 1px solid $alto;
+      }
+    }
+
+    &__group-item, &__group-item--selected {
+      @extend %row-nowrap;
+      padding: .75rem 1rem;
+      align-items: center;
+      border-bottom: 1px solid $alto;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba($alto, 0.2);
+      }
+
+      .identicon {
+        margin-right: 1rem;
+        flex: 0 0 auto;
+      }
+
+      &__content {
+        @extend %col-nowrap;
+        flex: 1 1 auto;
+        width: 0;
+      }
+
+      &__title {
+        font-size: .875rem;
+        line-height: 1.25rem;
+        color: $black;
+      }
+
+      &__subtitle {
+        @extend %h8;
+        color: $Grey-500;
+      }
+    }
+
+    &__group-item--selected {
+      border: 2px solid #2b7cd6;
+      border-radius: 8px;
+    }
+  }
+}
+
+.ens-input {
+  @extend %row-nowrap;
+
+  &__wrapper {
+    @extend %row-nowrap;
+    flex: 1 1 auto;
+    width: 0;
+    align-items: center;
+    background: $white;
+    border-radius: .5rem;
+    padding: .75rem .5rem;
+    border: 1px solid $Grey-100;
+    transition: border-color 150ms ease-in-out;
+
+    &:focus-within {
+      border-color: $Grey-500;
+    }
+
+    &__status-icon {
+      @extend %bg-contain;
+      background-image: url("/images/search-black.svg");
+      width: 1.125rem;
+      height: 1.125rem;
+      margin: .25rem .5rem .25rem .25rem;
+
+      &--error {
+
+      }
+
+      &--valid {
+        background-image: url("/images/check-green-solid.svg");
+      }
+    }
+
+    &__input {
+      @extend %h6;
+      flex: 1 1 auto;
+      width: 0;
+      border: 0;
+      outline: none;
+
+      &::placeholder {
+        color: $Grey-200;
+      }
+    }
+
+    &__action-icon {
+      @extend %bg-contain;
+      cursor: pointer;
+
+      &--erase {
+        background-image: url("/images/close-gray.svg");
+        width: .75rem;
+        height: .75rem;
+        margin: 0 .25rem;
+      }
+
+      &--qrcode {
+        background-image: url("/images/qr-blue.svg");
+        width: 1.5rem;
+        height: 1.5rem;
+        margin: 0 .25rem;
+      }
+    }
+
+    &--valid {
+      border-color: $Blue-500;
+
+      .ens-input__wrapper {
+        &__status-icon {
+          background-image: url("/images/check-green-solid.svg");
+        }
+
+        &__input {
+          @extend %col-nowrap;
+          font-size: .75rem;
+          line-height: .75rem;
+          font-weight: 400;
+          color: $Blue-500;
+        }
+      }
+    }
+  }
+
+  &__selected-input {
+    &__title {
+      @extend %ellipsify;
+      font-size: .875rem;
+    }
+
+    &__subtitle {
+      font-size: 0.75rem;
+      color: $Grey-500;
+      margin-top: .25rem;
+    }
+  }
+}
diff --git a/ui/app/pages/send/send.selectors.js b/ui/app/pages/send/send.selectors.js
index d4035df28..ed2917020 100644
--- a/ui/app/pages/send/send.selectors.js
+++ b/ui/app/pages/send/send.selectors.js
@@ -6,6 +6,7 @@ const {
 const {
   getMetaMaskAccounts,
   getSelectedAddress,
+  getAddressBook,
 } = require('../../selectors/selectors')
 const {
   estimateGasPriceFromRecentBlocks,
@@ -17,7 +18,6 @@ import {
 
 const selectors = {
   accountsWithSendEtherInfoSelector,
-  getAddressBook,
   getAmountConversionRate,
   getBlockGasLimit,
   getConversionRate,
@@ -43,6 +43,8 @@ const selectors = {
   getSendHexData,
   getSendHexDataFeatureFlagState,
   getSendEditingTransactionId,
+  getSendEnsResolution,
+  getSendEnsResolutionError,
   getSendErrors,
   getSendFrom,
   getSendFromBalance,
@@ -50,6 +52,7 @@ const selectors = {
   getSendMaxModeState,
   getSendTo,
   getSendToAccounts,
+  getSendToNickname,
   getSendWarnings,
   getTokenBalance,
   getTokenExchangeRate,
@@ -63,7 +66,6 @@ module.exports = selectors
 function accountsWithSendEtherInfoSelector (state) {
   const accounts = getMetaMaskAccounts(state)
   const { identities } = state.metamask
-
   const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
     return Object.assign({}, account, identities[key])
   })
@@ -71,10 +73,6 @@ function accountsWithSendEtherInfoSelector (state) {
   return accountsWithSendEtherInfo
 }
 
-function getAddressBook (state) {
-  return state.metamask.addressBook
-}
-
 function getAmountConversionRate (state) {
   return getSelectedToken(state)
     ? getSelectedTokenToFiatRate(state)
@@ -237,6 +235,10 @@ function getSendTo (state) {
   return state.metamask.send.to
 }
 
+function getSendToNickname (state) {
+  return state.metamask.send.toNickname
+}
+
 function getSendToAccounts (state) {
   const fromAccounts = accountsWithSendEtherInfoSelector(state)
   const addressBookAccounts = getAddressBook(state)
@@ -251,6 +253,14 @@ function getTokenBalance (state) {
   return state.metamask.send.tokenBalance
 }
 
+function getSendEnsResolution (state) {
+  return state.metamask.send.ensResolution
+}
+
+function getSendEnsResolutionError (state) {
+  return state.metamask.send.ensResolutionError
+}
+
 function getTokenExchangeRate (state, tokenSymbol) {
   const pair = `${tokenSymbol.toLowerCase()}_eth`
   const tokenExchangeRates = state.metamask.tokenExchangeRates
diff --git a/ui/app/pages/send/send.utils.js b/ui/app/pages/send/send.utils.js
index 4acc174f9..1f9bc202a 100644
--- a/ui/app/pages/send/send.utils.js
+++ b/ui/app/pages/send/send.utils.js
@@ -35,6 +35,7 @@ module.exports = {
   isBalanceSufficient,
   isTokenBalanceSufficient,
   removeLeadingZeroes,
+  ellipsify,
 }
 
 function calcGasTotal (gasLimit = '0', gasPrice = '0') {
@@ -318,7 +319,7 @@ function estimateGasPriceFromRecentBlocks (recentBlocks) {
       return parseInt(next, 16) < parseInt(currentLowest, 16) ? next : currentLowest
     })
   })
-  .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1)
+    .sort((a, b) => parseInt(a, 16) > parseInt(b, 16) ? 1 : -1)
 
   return lowestPrices[Math.floor(lowestPrices.length / 2)]
 }
@@ -330,3 +331,7 @@ function getToAddressForGasUpdate (...addresses) {
 function removeLeadingZeroes (str) {
   return str.replace(/^0*(?=\d)/, '')
 }
+
+function ellipsify (text, first = 6, last = 4) {
+  return `${text.slice(0, first)}...${text.slice(-last)}`
+}
diff --git a/ui/app/pages/send/tests/send-component.test.js b/ui/app/pages/send/tests/send-component.test.js
index 81955cc1d..5b7cafed5 100644
--- a/ui/app/pages/send/tests/send-component.test.js
+++ b/ui/app/pages/send/tests/send-component.test.js
@@ -5,8 +5,9 @@ import { shallow } from 'enzyme'
 import sinon from 'sinon'
 import timeout from '../../../../lib/test-timeout'
 
+import AddRecipient from '../send-content/add-recipient/add-recipient.container'
 import SendHeader from '../send-header/send-header.container'
-import SendContent from '../send-content/send-content.component'
+import SendContent from '../send-content/send-content.container'
 import SendFooter from '../send-footer/send-footer.container'
 
 const mockBasicGasEstimates = {
@@ -20,6 +21,7 @@ const propsMethodSpies = {
   resetSendState: sinon.spy(),
   fetchBasicGasEstimates: sinon.stub().returns(Promise.resolve(mockBasicGasEstimates)),
   fetchGasEstimates: sinon.spy(),
+  updateToNicknameIfNecessary: sinon.spy(),
 }
 const utilsMethodStubs = {
   getAmountErrorObject: sinon.stub().returns({ amount: 'mockAmountError' }),
@@ -63,6 +65,7 @@ describe('Send Component', function () {
       updateSendErrors={propsMethodSpies.updateSendErrors}
       updateSendTokenBalance={propsMethodSpies.updateSendTokenBalance}
       resetSendState={propsMethodSpies.resetSendState}
+      updateToNicknameIfNecessary={propsMethodSpies.updateToNicknameIfNecessary}
     />)
   })
 
@@ -332,13 +335,18 @@ describe('Send Component', function () {
       assert.equal(wrapper.find('.page-container').length, 1)
     })
 
-    it('should render SendHeader, SendContent and SendFooter', () => {
+    it('should render SendHeader and AddRecipient', () => {
       assert.equal(wrapper.find(SendHeader).length, 1)
-      assert.equal(wrapper.find(SendContent).length, 1)
-      assert.equal(wrapper.find(SendFooter).length, 1)
+      assert.equal(wrapper.find(AddRecipient).length, 1)
     })
 
     it('should pass the history prop to SendHeader and SendFooter', () => {
+      wrapper.setProps({
+        to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
+      })
+      assert.equal(wrapper.find(SendHeader).length, 1)
+      assert.equal(wrapper.find(SendContent).length, 1)
+      assert.equal(wrapper.find(SendFooter).length, 1)
       assert.deepEqual(
         wrapper.find(SendFooter).props(),
         {
@@ -348,7 +356,93 @@ describe('Send Component', function () {
     })
 
     it('should pass showHexData to SendContent', () => {
+      wrapper.setProps({
+        to: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
+      })
       assert.equal(wrapper.find(SendContent).props().showHexData, true)
     })
   })
+
+  describe('validate when input change', () => {
+    let clock
+
+    beforeEach(() => {
+      clock = sinon.useFakeTimers()
+    })
+
+    afterEach(() => {
+      clock.restore()
+    })
+
+    it('should validate when input changes', () => {
+      const instance = wrapper.instance()
+      instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7A3BedD70cd4510')
+
+      assert.deepEqual(instance.state, {
+        query: '0x80F061544cC398520615B5d3e7A3BedD70cd4510',
+        toError: null,
+        toWarning: null,
+      })
+    })
+
+    it('should validate when input changes and has error', () => {
+      const instance = wrapper.instance()
+      instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510')
+
+      clock.tick(1001)
+      assert.deepEqual(instance.state, {
+        query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
+        toError: 'invalidAddressRecipient',
+        toWarning: null,
+      })
+    })
+
+    it('should validate when input changes and has error', () => {
+      wrapper.setProps({ network: 'bad' })
+      const instance = wrapper.instance()
+      instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510')
+
+      clock.tick(1001)
+      assert.deepEqual(instance.state, {
+        query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
+        toError: 'invalidAddressRecipientNotEthNetwork',
+        toWarning: null,
+      })
+    })
+
+    it('should synchronously validate when input changes to ""', () => {
+      wrapper.setProps({ network: 'bad' })
+      const instance = wrapper.instance()
+      instance.onRecipientInputChange('0x80F061544cC398520615B5d3e7a3BedD70cd4510')
+
+      clock.tick(1001)
+      assert.deepEqual(instance.state, {
+        query: '0x80F061544cC398520615B5d3e7a3BedD70cd4510',
+        toError: 'invalidAddressRecipientNotEthNetwork',
+        toWarning: null,
+      })
+
+      instance.onRecipientInputChange('')
+      assert.deepEqual(instance.state, {
+        query: '',
+        toError: '',
+        toWarning: '',
+      })
+    })
+
+    it('should warn when send to a known token contract address', () => {
+      wrapper.setProps({
+        selectedToken: '0x888',
+      })
+      const instance = wrapper.instance()
+      instance.onRecipientInputChange('0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64')
+
+      clock.tick(1001)
+      assert.deepEqual(instance.state, {
+        query: '0x13cb85823f78Cff38f0B0E90D3e975b8CB3AAd64',
+        toError: null,
+        toWarning: 'knownAddressRecipient',
+      })
+    })
+  })
 })
diff --git a/ui/app/pages/send/tests/send-container.test.js b/ui/app/pages/send/tests/send-container.test.js
index 131c42f59..f4142bc2d 100644
--- a/ui/app/pages/send/tests/send-container.test.js
+++ b/ui/app/pages/send/tests/send-container.test.js
@@ -41,12 +41,19 @@ proxyquire('../send.container.js', {
     getSendHexDataFeatureFlagState: (s) => `mockSendHexDataFeatureFlagState:${s}`,
     getSendAmount: (s) => `mockAmount:${s}`,
     getSendTo: (s) => `mockTo:${s}`,
+    getSendToNickname: (s) => `mockToNickname:${s}`,
     getSendEditingTransactionId: (s) => `mockEditingTransactionId:${s}`,
     getSendFromObject: (s) => `mockFrom:${s}`,
     getTokenBalance: (s) => `mockTokenBalance:${s}`,
     getQrCodeData: (s) => `mockQrCodeData:${s}`,
+    getSendEnsResolution: (s) => `mockSendEnsResolution:${s}`,
+    getSendEnsResolutionError: (s) => `mockSendEnsResolutionError:${s}`,
+  },
+  './send-content/add-recipient/add-recipient.selectors': {
+    getTokens: s => `mockTokens:${s}`,
   },
   '../../selectors/selectors': {
+    getAddressBook: (s) => `mockAddressBook:${s}`,
     getSelectedAddress: (s) => `mockSelectedAddress:${s}`,
   },
   '../../store/actions': actionSpies,
@@ -83,6 +90,11 @@ describe('send container', () => {
         tokenContract: 'mockTokenContract:mockState',
         tokenToFiatRate: 'mockTokenToFiatRate:mockState',
         qrCodeData: 'mockQrCodeData:mockState',
+        tokens: 'mockTokens:mockState',
+        ensResolution: 'mockSendEnsResolution:mockState',
+        ensResolutionError: 'mockSendEnsResolutionError:mockState',
+        toNickname: 'mockToNickname:mockState',
+        addressBook: 'mockAddressBook:mockState',
       })
     })
 
diff --git a/ui/app/pages/send/tests/send-selectors-test-data.js b/ui/app/pages/send/tests/send-selectors-test-data.js
index cff26a191..54a494b63 100644
--- a/ui/app/pages/send/tests/send-selectors-test-data.js
+++ b/ui/app/pages/send/tests/send-selectors-test-data.js
@@ -60,6 +60,7 @@ module.exports = {
       {
         'address': '0x06195827297c7a80a443b6894d3bdb8824b43896',
         'name': 'Address Book Account 1',
+        'chainId': '3',
       },
     ],
     'tokens': [
diff --git a/ui/app/pages/send/tests/send-selectors.test.js b/ui/app/pages/send/tests/send-selectors.test.js
index ccc126795..e199aa97e 100644
--- a/ui/app/pages/send/tests/send-selectors.test.js
+++ b/ui/app/pages/send/tests/send-selectors.test.js
@@ -4,7 +4,6 @@ import selectors from '../send.selectors.js'
 const {
   accountsWithSendEtherInfoSelector,
   // autoAddToBetaUI,
-  getAddressBook,
   getBlockGasLimit,
   getAmountConversionRate,
   getConversionRate,
@@ -103,20 +102,6 @@ describe('send selectors', () => {
   //   })
   // })
 
-  describe('getAddressBook()', () => {
-    it('should return the address book', () => {
-      assert.deepEqual(
-        getAddressBook(mockState),
-        [
-          {
-            address: '0x06195827297c7a80a443b6894d3bdb8824b43896',
-            name: 'Address Book Account 1',
-          },
-        ],
-      )
-    })
-  })
-
   describe('getAmountConversionRate()', () => {
     it('should return the token conversion rate if a token is selected', () => {
       assert.equal(
@@ -511,6 +496,7 @@ describe('send selectors', () => {
           {
             address: '0x06195827297c7a80a443b6894d3bdb8824b43896',
             name: 'Address Book Account 1',
+            chainId: '3',
           },
         ]
       )
diff --git a/ui/app/pages/send/tests/send-utils.test.js b/ui/app/pages/send/tests/send-utils.test.js
index bf9cba14a..4930b7ee1 100644
--- a/ui/app/pages/send/tests/send-utils.test.js
+++ b/ui/app/pages/send/tests/send-utils.test.js
@@ -72,9 +72,9 @@ describe('send utils', () => {
         call_,
         [12, 15, {
           toNumericBase: 'hex',
-           multiplicandBase: 16,
-           multiplierBase: 16,
-         } ]
+          multiplicandBase: 16,
+          multiplierBase: 16,
+        } ]
       )
     })
   })
diff --git a/ui/app/pages/send/to-autocomplete.component.js b/ui/app/pages/send/to-autocomplete.component.js
index 183967c58..c65f93c07 100644
--- a/ui/app/pages/send/to-autocomplete.component.js
+++ b/ui/app/pages/send/to-autocomplete.component.js
@@ -27,10 +27,10 @@ export default class ToAutoComplete extends Component {
   getListItemIcon (listItemAddress, toAddress) {
     return toAddress && listItemAddress === toAddress
       ? <i className={'fa fa-check fa-lg'}
-          style={{
-            color: '#02c9b1',
-          }}
-        />
+        style={{
+          color: '#02c9b1',
+        }}
+      />
       : null
   }
 
@@ -121,8 +121,8 @@ export default class ToAutoComplete extends Component {
         />
         {
           to
-          ? null
-          : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'}
+            ? null
+            : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'}
               onClick={() => this.handleInputEvent()}
               style={{
                 style: {color: '#dedede'},
@@ -131,8 +131,8 @@ export default class ToAutoComplete extends Component {
         }
         {
           dropdownOpen
-          ? this.renderDropdown()
-          : null
+            ? this.renderDropdown()
+            : null
         }
       </div>
     )
diff --git a/ui/app/pages/send/to-autocomplete/to-autocomplete.js b/ui/app/pages/send/to-autocomplete/to-autocomplete.js
index 328a5b62b..8ad579958 100644
--- a/ui/app/pages/send/to-autocomplete/to-autocomplete.js
+++ b/ui/app/pages/send/to-autocomplete/to-autocomplete.js
@@ -37,11 +37,7 @@ ToAutoComplete.prototype.renderDropdown = function () {
   } = this.props
   const { accountsToRender } = this.state
 
-  return accountsToRender.length && h('div', {}, [
-
-    h('div.send-v2__from-dropdown__close-area', {
-      onClick: closeDropdown,
-    }),
+  return !!accountsToRender.length && h('div', {}, [
 
     h('div.send-v2__from-dropdown__list', {}, [
 
@@ -93,7 +89,6 @@ ToAutoComplete.prototype.componentDidUpdate = function (nextProps) {
 ToAutoComplete.prototype.render = function () {
   const {
     to,
-    dropdownOpen,
     onChange,
     inError,
     qrScanner,
@@ -118,12 +113,8 @@ ToAutoComplete.prototype.render = function () {
       style: { color: '#33333' },
       onClick: () => this.props.scanQrCode(),
     })),
-    !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
-      style: { color: '#dedede' },
-      onClick: () => this.handleInputEvent(),
-    }),
 
-    dropdownOpen && this.renderDropdown(),
+    this.renderDropdown(),
 
   ])
 }
diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js
index 3d27fe349..d92b14501 100644
--- a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js
@@ -1,8 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import validUrl from 'valid-url'
 import { exportAsFile } from '../../../helpers/utils/util'
-import ToggleButton from 'react-toggle-button'
+import ToggleButton from '../../../components/ui/toggle-button'
 import TextField from '../../../components/ui/text-field'
 import Button from '../../../components/ui/button'
 import { MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes'
@@ -29,160 +28,12 @@ export default class AdvancedTab extends PureComponent {
     setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired,
   }
 
-  state = {
-    newRpc: '',
-    chainId: '',
-    showOptions: false,
-    ticker: '',
-    nickname: '',
-  }
-
-  renderNewRpcUrl () {
-    const { t } = this.context
-    const { newRpc, chainId, ticker, nickname } = this.state
-
-    return (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('newNetwork') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <TextField
-              type="text"
-              id="new-rpc"
-              placeholder={t('rpcUrl')}
-              value={newRpc}
-              onChange={e => this.setState({ newRpc: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <TextField
-              type="text"
-              id="chainid"
-              placeholder={t('optionalChainId')}
-              value={chainId}
-              onChange={e => this.setState({ chainId: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              style={{
-                display: this.state.showOptions ? null : 'none',
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <TextField
-              type="text"
-              id="ticker"
-              placeholder={t('optionalSymbol')}
-              value={ticker}
-              onChange={e => this.setState({ ticker: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              style={{
-                display: this.state.showOptions ? null : 'none',
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <TextField
-              type="text"
-              id="nickname"
-              placeholder={t('optionalNickname')}
-              value={nickname}
-              onChange={e => this.setState({ nickname: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              style={{
-                display: this.state.showOptions ? null : 'none',
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <div className="flex-row flex-align-center space-between">
-              <span className="settings-tab__advanced-link"
-                    onClick={e => {
-                      e.preventDefault()
-                      this.setState({ showOptions: !this.state.showOptions })
-                    }}
-              >
-                { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') }
-              </span>
-              <button
-                className="button btn-primary settings-tab__rpc-save-button"
-                onClick={e => {
-                  e.preventDefault()
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }}
-              >
-                { t('save') }
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  validateRpc (newRpc, chainId, ticker = 'ETH', nickname) {
-    const { setRpcTarget, displayWarning } = this.props
-    if (validUrl.isWebUri(newRpc)) {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Settings',
-          action: 'Custom RPC',
-          name: 'Success',
-        },
-        customVariables: {
-          networkId: newRpc,
-          chainId,
-        },
-      })
-      if (!!chainId && Number.isNaN(parseInt(chainId))) {
-        return displayWarning(`${this.context.t('invalidInput')} chainId`)
-      }
-
-      setRpcTarget(newRpc, chainId, ticker, nickname)
-    } else {
-      this.context.metricsEvent({
-        eventOpts: {
-          category: 'Settings',
-          action: 'Custom RPC',
-          name: 'Error',
-        },
-        customVariables: {
-          networkId: newRpc,
-          chainId,
-        },
-      })
-      const appendedRpc = `http://${newRpc}`
-
-      if (validUrl.isWebUri(appendedRpc)) {
-        displayWarning(this.context.t('uriErrorMsg'))
-      } else {
-        displayWarning(this.context.t('invalidRPC'))
-      }
-    }
-  }
+  state = { autoLogoutTimeLimit: this.props.autoLogoutTimeLimit }
 
   renderMobileSync () {
     const { t } = this.context
     const { history } = this.props
-//
+    //
     return (
       <div className="settings-page__content-row">
         <div className="settings-page__content-item">
@@ -293,8 +144,8 @@ export default class AdvancedTab extends PureComponent {
             <ToggleButton
               value={sendHexData}
               onToggle={value => setHexDataFeatureFlag(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
@@ -319,8 +170,8 @@ export default class AdvancedTab extends PureComponent {
             <ToggleButton
               value={advancedInlineGas}
               onToggle={value => setAdvancedInlineGasFeatureFlag(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
@@ -348,8 +199,8 @@ export default class AdvancedTab extends PureComponent {
             <ToggleButton
               value={showFiatInTestnets}
               onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
@@ -407,7 +258,6 @@ export default class AdvancedTab extends PureComponent {
         { warning && <div className="settings-tab__error">{ warning }</div> }
         { this.renderStateLogs() }
         { this.renderMobileSync() }
-        { this.renderNewRpcUrl() }
         { this.renderResetAccount() }
         { this.renderAdvancedGasInputInline() }
         { this.renderHexDataOptIn() }
diff --git a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js
index f81329533..31cdd747c 100644
--- a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js
+++ b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js
@@ -16,7 +16,7 @@ describe('AdvancedTab Component', () => {
       }
     )
 
-    assert.equal(root.find('.settings-page__content-row').length, 8)
+    assert.equal(root.find('.settings-page__content-row').length, 7)
   })
 
   it('should update autoLogoutTimeLimit', () => {
diff --git a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js
index 62122073d..3f54350c5 100644
--- a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js
+++ b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-container.test.js
@@ -35,12 +35,12 @@ describe('AdvancedTab Container', () => {
   it('should map dispatch to props correctly', () => {
     const props = mapDispatchToProps(() => 'mockDispatch')
 
-      assert.ok(typeof props.setHexDataFeatureFlag === 'function')
-      assert.ok(typeof props.setRpcTarget === 'function')
-      assert.ok(typeof props.displayWarning === 'function')
-      assert.ok(typeof props.showResetAccountConfirmationModal === 'function')
-      assert.ok(typeof props.setAdvancedInlineGasFeatureFlag === 'function')
-      assert.ok(typeof props.setShowFiatConversionOnTestnetsPreference === 'function')
-      assert.ok(typeof props.setAutoLogoutTimeLimit === 'function')
+    assert.ok(typeof props.setHexDataFeatureFlag === 'function')
+    assert.ok(typeof props.setRpcTarget === 'function')
+    assert.ok(typeof props.displayWarning === 'function')
+    assert.ok(typeof props.showResetAccountConfirmationModal === 'function')
+    assert.ok(typeof props.setAdvancedInlineGasFeatureFlag === 'function')
+    assert.ok(typeof props.setShowFiatConversionOnTestnetsPreference === 'function')
+    assert.ok(typeof props.setAutoLogoutTimeLimit === 'function')
   })
 })
diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js
new file mode 100644
index 000000000..f8c079fc3
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.component.js
@@ -0,0 +1,131 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Identicon from '../../../../components/ui/identicon'
+import TextField from '../../../../components/ui/text-field'
+import { CONTACT_LIST_ROUTE } from '../../../../helpers/constants/routes'
+import { isValidAddress, isValidENSAddress } from '../../../../helpers/utils/util'
+import EnsInput from '../../../../pages/send/send-content/add-recipient/ens-input'
+import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer'
+import debounce from 'lodash.debounce'
+
+export default class AddContact extends PureComponent {
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    addToAddressBook: PropTypes.func,
+    history: PropTypes.object,
+    scanQrCode: PropTypes.func,
+    qrCodeData: PropTypes.object,
+    qrCodeDetected: PropTypes.func,
+  }
+
+  state = {
+    nickname: '',
+    ethAddress: '',
+    ensAddress: '',
+    error: '',
+    ensError: '',
+  }
+
+  constructor (props) {
+    super(props)
+    this.dValidate = debounce(this.validate, 1000)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.qrCodeData) {
+      if (nextProps.qrCodeData.type === 'address') {
+        const scannedAddress = nextProps.qrCodeData.values.address.toLowerCase()
+        const currentAddress = this.state.ensAddress || this.state.ethAddress
+        if (currentAddress.toLowerCase() !== scannedAddress) {
+          this.setState({ ethAddress: scannedAddress, ensAddress: '' })
+          // Clean up QR code data after handling
+          this.props.qrCodeDetected(null)
+        }
+      }
+    }
+  }
+
+  validate = address => {
+    const valid = isValidAddress(address)
+    const validEnsAddress = isValidENSAddress(address)
+    if (valid || validEnsAddress || address === '') {
+      this.setState({ error: '', ethAddress: address })
+    } else {
+      this.setState({ error: 'Invalid Address' })
+    }
+  }
+
+  renderInput () {
+    return (
+      <EnsInput
+        className="send__to-row"
+        scanQrCode={_ => { this.props.scanQrCode() }}
+        onChange={this.dValidate}
+        onPaste={text => this.setState({ ethAddress: text })}
+        onReset={() => this.setState({ ethAddress: '', ensAddress: '' })}
+        updateEnsResolution={address => {
+          this.setState({ ensAddress: address, error: '', ensError: '' })
+        }}
+        updateEnsResolutionError={message => this.setState({ ensError: message })}
+      />
+    )
+  }
+
+  render () {
+    const { t } = this.context
+    const { history, addToAddressBook } = this.props
+
+    const errorToRender = this.state.ensError || this.state.error
+
+    return (
+      <div className="settings-page__content-row address-book__add-contact">
+        {this.state.ensAddress && <div className="address-book__view-contact__group">
+          <Identicon address={this.state.ensAddress} diameter={60} />
+          <div className="address-book__view-contact__group__value">
+            { this.state.ensAddress }
+          </div>
+        </div>}
+        <div className="address-book__add-contact__content">
+          <div className="address-book__view-contact__group">
+            <div className="address-book__view-contact__group__label">
+              { t('userName') }
+            </div>
+            <TextField
+              type="text"
+              id="nickname"
+              value={this.state.newName}
+              onChange={e => this.setState({ newName: e.target.value })}
+              fullWidth
+              margin="dense"
+            />
+          </div>
+
+          <div className="address-book__view-contact__group">
+            <div className="address-book__view-contact__group__label">
+              { t('ethereumPublicAddress') }
+            </div>
+            { this.renderInput() }
+            { errorToRender && <div className="address-book__add-contact__error">{errorToRender}</div>}
+          </div>
+        </div>
+        <PageContainerFooter
+          cancelText={this.context.t('cancel')}
+          disabled={Boolean(this.state.error)}
+          onSubmit={() => {
+            addToAddressBook(this.state.ensAddress || this.state.ethAddress, this.state.newName)
+            history.push(CONTACT_LIST_ROUTE)
+          }}
+          onCancel={() => {
+            history.push(CONTACT_LIST_ROUTE)
+          }}
+          submitText={this.context.t('save')}
+          submitButtonType={'confirm'}
+        />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js
new file mode 100644
index 000000000..0a0fc450c
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/add-contact/add-contact.container.js
@@ -0,0 +1,30 @@
+import AddContact from './add-contact.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { addToAddressBook, showQrScanner, qrCodeDetected } from '../../../../store/actions'
+import {
+  CONTACT_ADD_ROUTE,
+} from '../../../../helpers/constants/routes'
+import {
+  getQrCodeData,
+} from '../../../../pages/send/send.selectors'
+
+const mapStateToProps = state => {
+  return {
+    qrCodeData: getQrCodeData(state),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addToAddressBook: (recipient, nickname) => dispatch(addToAddressBook(recipient, nickname)),
+    scanQrCode: () => dispatch(showQrScanner(CONTACT_ADD_ROUTE)),
+    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(AddContact)
diff --git a/ui/app/pages/settings/contact-list-tab/add-contact/index.js b/ui/app/pages/settings/contact-list-tab/add-contact/index.js
new file mode 100644
index 000000000..ce73025a3
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/add-contact/index.js
@@ -0,0 +1 @@
+export { default } from './add-contact.container'
diff --git a/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js
new file mode 100644
index 000000000..f7a01d672
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js
@@ -0,0 +1,132 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ContactList from '../../../components/app/contact-list'
+import EditContact from './edit-contact'
+import AddContact from './add-contact'
+import ViewContact from './view-contact'
+import MyAccounts from './my-accounts'
+import {
+  CONTACT_ADD_ROUTE,
+  CONTACT_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_ROUTE,
+} from '../../../helpers/constants/routes'
+
+export default class ContactListTab extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    addressBook: PropTypes.array,
+    history: PropTypes.object,
+    selectedAddress: PropTypes.string,
+    viewingContact: PropTypes.bool,
+    editingContact: PropTypes.bool,
+    addingContact: PropTypes.bool,
+    showContactContent: PropTypes.bool,
+    hideAddressBook: PropTypes.bool,
+    showingMyAccounts: PropTypes.bool,
+  }
+
+  renderAddresses () {
+    const { addressBook, history, selectedAddress } = this.props
+    const contacts = addressBook.filter(({ name }) => !!name)
+    const nonContacts = addressBook.filter(({ name }) => !name)
+
+    return (
+      <div>
+        <ContactList
+          searchForContacts={() => contacts}
+          searchForRecents={() => nonContacts}
+          selectRecipient={(address) => {
+            history.push(`${CONTACT_VIEW_ROUTE}/${address}`)
+          }}
+          selectedAddress={selectedAddress}
+        />
+      </div>
+    )
+  }
+
+  renderAddButton () {
+    const { history } = this.props
+    return <div
+      className="address-book-add-button__button"
+      onClick={() => {
+        history.push(CONTACT_ADD_ROUTE)
+      }}>
+      <img
+        className="account-menu__item-icon"
+        src="images/plus-btn-white.svg"
+      />
+    </div>
+  }
+
+  renderMyAccountsButton () {
+    const { history } = this.props
+    const { t } = this.context
+    return (
+      <div
+        className="address-book__my-accounts-button"
+        onClick={() => {
+          history.push(CONTACT_MY_ACCOUNTS_ROUTE)
+        }}
+      >
+        <div className="address-book__my-accounts-button__header">{t('myWalletAccounts')}</div>
+        <div className="address-book__my-accounts-button__content">
+          <div className="address-book__my-accounts-button__text">
+            { t('myWalletAccountsDescription') }
+          </div>
+          <div className="address-book__my-accounts-button__caret" />
+        </div>
+      </div>
+    )
+  }
+
+  renderContactContent () {
+    const { viewingContact, editingContact, addingContact, showContactContent } = this.props
+
+    if (!showContactContent) {
+      return null
+    }
+
+    let ContactContentComponent = null
+    if (viewingContact) {
+      ContactContentComponent = ViewContact
+    } else if (editingContact) {
+      ContactContentComponent = EditContact
+    } else if (addingContact) {
+      ContactContentComponent = AddContact
+    }
+
+    return (ContactContentComponent && <div className="address-book-contact-content">
+      <ContactContentComponent />
+    </div>)
+  }
+
+  renderAddressBookContent () {
+    const { hideAddressBook, showingMyAccounts } = this.props
+
+    if (!hideAddressBook && !showingMyAccounts) {
+      return (<div className="address-book">
+        { this.renderMyAccountsButton() }
+        { this.renderAddresses() }
+      </div>)
+    } else if (!hideAddressBook && showingMyAccounts) {
+      return (<MyAccounts />)
+    }
+  }
+
+  render () {
+    const { addingContact } = this.props
+
+    return (
+      <div className="address-book-wrapper">
+        { this.renderAddressBookContent() }
+        { this.renderContactContent() }
+        {!addingContact && <div className="address-book-add-button">
+          { this.renderAddButton() }
+        </div>}
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js b/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js
new file mode 100644
index 000000000..2c7139b5d
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/contact-list-tab.container.js
@@ -0,0 +1,54 @@
+import ContactListTab from './contact-list-tab.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { getAddressBook } from '../../../selectors/selectors'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
+
+import {
+  CONTACT_ADD_ROUTE,
+  CONTACT_EDIT_ROUTE,
+  CONTACT_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_ROUTE,
+  CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
+} from '../../../helpers/constants/routes'
+
+
+const mapStateToProps = (state, ownProps) => {
+  const { location } = ownProps
+  const { pathname } = location
+
+  const pathNameTail = pathname.match(/[^/]+$/)[0]
+  const pathNameTailIsAddress = pathNameTail.includes('0x')
+
+  const viewingContact = Boolean(pathname.match(CONTACT_VIEW_ROUTE) || pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE))
+  const editingContact = Boolean(pathname.match(CONTACT_EDIT_ROUTE) || pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE))
+  const addingContact = Boolean(pathname.match(CONTACT_ADD_ROUTE))
+  const showingMyAccounts = Boolean(
+    pathname.match(CONTACT_MY_ACCOUNTS_ROUTE) ||
+    pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE) ||
+    pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE)
+  )
+  const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+
+  const hideAddressBook = envIsPopup && (viewingContact || editingContact || addingContact)
+
+  return {
+    viewingContact,
+    editingContact,
+    addingContact,
+    showingMyAccounts,
+    addressBook: getAddressBook(state),
+    selectedAddress: pathNameTailIsAddress ? pathNameTail : '',
+    hideAddressBook,
+    envIsPopup,
+    showContactContent: !envIsPopup || hideAddressBook,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps)
+)(ContactListTab)
diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
new file mode 100644
index 000000000..4852bbc6a
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.component.js
@@ -0,0 +1,135 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Identicon from '../../../../components/ui/identicon'
+import Button from '../../../../components/ui/button/button.component'
+import TextField from '../../../../components/ui/text-field'
+import { isValidAddress } from '../../../../helpers/utils/util'
+import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer'
+
+export default class EditContact extends PureComponent {
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    addToAddressBook: PropTypes.func,
+    removeFromAddressBook: PropTypes.func,
+    history: PropTypes.object,
+    name: PropTypes.string,
+    address: PropTypes.string,
+    memo: PropTypes.string,
+    viewRoute: PropTypes.string,
+    listRoute: PropTypes.string,
+    setAccountLabel: PropTypes.func,
+  }
+
+  state = {
+    newName: '',
+    newAddress: '',
+    newMemo: '',
+    error: '',
+  }
+
+  render () {
+    const { t } = this.context
+    const { history, name, addToAddressBook, removeFromAddressBook, address, memo, viewRoute, listRoute, setAccountLabel } = this.props
+
+    return (
+      <div className="settings-page__content-row address-book__edit-contact">
+        <div className="settings-page__header address-book__header--edit">
+          <Identicon address={address} diameter={60}/>
+          <Button
+            type="link"
+            className="settings-page__address-book-button"
+            onClick={() => {
+              removeFromAddressBook(address)
+              history.push(listRoute)
+            }}
+          >
+            {t('deleteAccount')}
+          </Button>
+        </div>
+        <div className="address-book__edit-contact__content">
+          <div className="address-book__view-contact__group">
+            <div className="address-book__view-contact__group__label">
+              { t('userName') }
+            </div>
+            <TextField
+              type="text"
+              id="nickname"
+              placeholder={this.context.t('addAlias')}
+              value={this.state.newName || name}
+              onChange={e => this.setState({ newName: e.target.value })}
+              fullWidth
+              margin="dense"
+            />
+          </div>
+
+          <div className="address-book__view-contact__group">
+            <div className="address-book__view-contact__group__label">
+              { t('ethereumPublicAddress') }
+            </div>
+            <TextField
+              type="text"
+              id="address"
+              placeholder={address}
+              value={this.state.newAddress || address}
+              error={this.state.error}
+              onChange={e => this.setState({ newAddress: e.target.value })}
+              fullWidth
+              margin="dense"
+            />
+          </div>
+
+          <div className="address-book__view-contact__group">
+            <div className="address-book__view-contact__group__label--capitalized">
+              { t('memo') }
+            </div>
+            <TextField
+              type="text"
+              id="memo"
+              placeholder={memo}
+              value={this.state.newMemo || memo}
+              onChange={e => this.setState({ newMemo: e.target.value })}
+              fullWidth
+              margin="dense"
+              multiline={true}
+              rows={3}
+              classes={{
+                inputMultiline: 'address-book__view-contact__text-area',
+                inputRoot: 'address-book__view-contact__text-area-wrapper',
+              }}
+            />
+          </div>
+        </div>
+        <PageContainerFooter
+          cancelText={this.context.t('cancel')}
+          onSubmit={() => {
+            if (this.state.newAddress !== '' && this.state.newAddress !== address) {
+              // if the user makes a valid change to the address field, remove the original address
+              if (isValidAddress(this.state.newAddress)) {
+                removeFromAddressBook(address)
+                addToAddressBook(this.state.newAddress, this.state.newName || name, this.state.newMemo || memo)
+                setAccountLabel(this.state.newAddress, this.state.newName || name)
+                history.push(listRoute)
+              } else {
+                this.setState({ error: 'invalid address' })
+              }
+            } else {
+              // update name
+              addToAddressBook(address, this.state.newName || name, this.state.newMemo || memo)
+              setAccountLabel(address, this.state.newName || name)
+              history.push(listRoute)
+            }
+          }}
+          onCancel={() => {
+            history.push(`${viewRoute}/${address}`)
+          }}
+          submitText={this.context.t('save')}
+          submitButtonType={'confirm'}
+        />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js
new file mode 100644
index 000000000..8841ff791
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/edit-contact/edit-contact.container.js
@@ -0,0 +1,47 @@
+import EditContact from './edit-contact.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { getAddressBookEntry } from '../../../../selectors/selectors'
+import {
+  CONTACT_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_ROUTE,
+  CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
+  CONTACT_LIST_ROUTE,
+} from '../../../../helpers/constants/routes'
+import { addToAddressBook, removeFromAddressBook, setAccountLabel } from '../../../../store/actions'
+
+const mapStateToProps = (state, ownProps) => {
+  const { location } = ownProps
+  const { pathname } = location
+  const pathNameTail = pathname.match(/[^/]+$/)[0]
+  const pathNameTailIsAddress = pathNameTail.includes('0x')
+  const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id
+
+  const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address]
+
+  const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE))
+
+  return {
+    address,
+    name,
+    memo,
+    viewRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_VIEW_ROUTE : CONTACT_VIEW_ROUTE,
+    listRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_ROUTE : CONTACT_LIST_ROUTE,
+    showingMyAccounts,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addToAddressBook: (recipient, nickname, memo) => dispatch(addToAddressBook(recipient, nickname, memo)),
+    removeFromAddressBook: (addressToRemove) => dispatch(removeFromAddressBook(addressToRemove)),
+    setAccountLabel: (address, label) => dispatch(setAccountLabel(address, label)),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(EditContact)
diff --git a/ui/app/pages/settings/contact-list-tab/edit-contact/index.js b/ui/app/pages/settings/contact-list-tab/edit-contact/index.js
new file mode 100644
index 000000000..fe5ee206a
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/edit-contact/index.js
@@ -0,0 +1 @@
+export { default } from './edit-contact.container'
diff --git a/ui/app/pages/settings/contact-list-tab/index.js b/ui/app/pages/settings/contact-list-tab/index.js
new file mode 100644
index 000000000..c09e9787b
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/index.js
@@ -0,0 +1 @@
+export { default } from './contact-list-tab.container'
diff --git a/ui/app/pages/settings/contact-list-tab/index.scss b/ui/app/pages/settings/contact-list-tab/index.scss
new file mode 100644
index 000000000..c7e99095f
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/index.scss
@@ -0,0 +1,234 @@
+.address-book-wrapper {
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.address-book {
+  flex: 0.4 1 40%;
+  max-width: 40%;
+
+  @media screen and (max-width: 576px) {
+    flex: 1;
+    max-width: 100%;
+  }
+
+  &__entry {
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 16px 14px;
+    flex: 0 0 auto;
+    border-bottom: 1px solid #dedede;
+
+    &:hover {
+      border: 1px solid #037DD6;
+      cursor: pointer;
+    }
+  }
+
+  &__name {
+    padding: 3px;
+  }
+
+  &__header, &__header--edit {
+    &__name {
+      font-family: Roboto;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 24px;
+      line-height: 34px;
+      margin-left: 24px;
+    }
+  }
+
+  &__header--edit {
+    display: flex;
+    justify-content: space-between;
+
+    .button {
+      justify-content: flex-end;
+      color: #D73A49;
+      font-size: 14px;
+    }
+  }
+
+  &__input {
+    @extend %input-2;
+    margin-top: .25rem;
+
+    &--address {
+      font-size: 0.875rem;
+    }
+  }
+
+  &__view-contact {
+    &__text-area-wrapper {
+      height: 96px !important;
+    }
+
+    &__text-area {
+      line-height: initial !important;
+    }
+
+    &__group {
+      display: flex;
+      flex-flow: column nowrap;
+      padding: 1.5rem 1.5rem 0 1.5rem;
+
+      &__label, &__label--capitalized {
+        font-size: .75rem;
+        color: $Grey-500;
+        margin-bottom: .25rem;
+      }
+
+      &__label--capitalized {
+        text-transform: capitalize;
+      }
+
+      &__value, &__static-address {
+        display: flex;
+        flex-flow: row nowrap;
+        font-size: 1.125rem;
+        color: $Grey-800;
+        word-break: break-word;
+
+        &--address {
+          font-size: 0.875rem;
+        }
+
+        &--copy-icon {
+          padding-left: 4px;
+        }
+      }
+
+      &__static-address {
+        font-size: 0.875rem;
+        &--copy-icon {
+          cursor: pointer;
+
+          &:hover {
+            color: black;
+          }
+        }
+      }
+
+      .unit-input__input {
+        max-width: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  &__edit-contact {
+    display: flex;
+    flex-flow: column nowrap;
+    padding-bottom: 0 !important;
+    height: 100%;
+
+    &__content {
+      flex: 1 1 auto;
+
+      > div {
+        padding-top: 0;
+      }
+
+    }
+
+    .page-container__footer {
+      border-top: none;
+    }
+  }
+
+  &__add-contact {
+    display: flex;
+    flex-flow: column nowrap;
+    padding-bottom: 0 !important;
+    height: 100%;
+
+    &__content {
+      flex: 1 1 auto;
+      height: 100%;
+    }
+
+    &__error {
+      font-size: 12px;
+      line-height: 12px;
+      left: 8px;
+      color: $red;
+    }
+  }
+
+  &__my-accounts-button {
+    display: flex;
+    flex-flow: column;
+    cursor: pointer;
+    padding: 15px;
+
+    &:hover {
+      background-color: rgba(222, 222, 222, 0.2);
+    }
+
+    &__header {
+      font-family: Roboto;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 18px;
+      line-height: 25px;
+      color: #000000;
+    }
+
+    &__content {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &__text {
+      font-family: Roboto;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 20px;
+      color: #6A737D;
+    }
+
+    &__caret {
+      display: block;
+      background-image: url(/images/caret-right.svg);
+      width: 30px;
+      opacity: .5;
+      background-repeat: no-repeat;
+    }
+  }
+}
+
+.address-book-add-button {
+  &__button {
+    position: absolute;
+    top: 10px;
+    right: 16px;
+    height: 56px;
+    width: 56px;
+    border-radius: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    border-width: 2px;
+    background: #037DD6;
+    margin-right: 5px;
+    cursor: pointer;
+    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.25);
+  }
+}
+
+.address-book--hidden {
+  display: none;
+}
+
+.address-book-contact-content {
+  flex: 0.4 1 40%;
+
+  @media screen and (max-width: 576px) {
+    flex: 1
+  }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/index.js b/ui/app/pages/settings/contact-list-tab/my-accounts/index.js
new file mode 100644
index 000000000..13a7a9cbf
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/my-accounts/index.js
@@ -0,0 +1 @@
+export { default } from './my-accounts.container'
diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js
new file mode 100644
index 000000000..f43b59e07
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.component.js
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import ContactList from '../../../../components/app/contact-list'
+import { CONTACT_MY_ACCOUNTS_VIEW_ROUTE } from '../../../../helpers/constants/routes'
+
+export default class ViewContact extends PureComponent {
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    myAccounts: PropTypes.array,
+    history: PropTypes.object,
+  }
+
+  renderMyAccounts () {
+    const { myAccounts, history } = this.props
+
+    return (
+      <div>
+        <ContactList
+          searchForMyAccounts={() => myAccounts}
+          selectRecipient={(address) => {
+            history.push(`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${address}`)
+          }}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    return (
+      <div className="address-book">
+        { this.renderMyAccounts() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js
new file mode 100644
index 000000000..6380c9d4c
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/my-accounts/my-accounts.container.js
@@ -0,0 +1,18 @@
+import ViewContact from './my-accounts.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { accountsWithSendEtherInfoSelector } from '../../../../selectors/selectors'
+
+const mapStateToProps = (state,) => {
+  const myAccounts = accountsWithSendEtherInfoSelector(state)
+
+  return {
+    myAccounts,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps)
+)(ViewContact)
diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/index.js b/ui/app/pages/settings/contact-list-tab/view-contact/index.js
new file mode 100644
index 000000000..78bf19d18
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/view-contact/index.js
@@ -0,0 +1 @@
+export { default } from './view-contact.container'
diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js
new file mode 100644
index 000000000..d4fe045eb
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.component.js
@@ -0,0 +1,78 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Identicon from '../../../../components/ui/identicon'
+
+import Button from '../../../../components/ui/button/button.component'
+import copyToClipboard from 'copy-to-clipboard'
+
+function quadSplit (address) {
+  return '0x ' + address.slice(2).match(/.{1,4}/g).join(' ')
+}
+
+export default class ViewContact extends PureComponent {
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    removeFromAddressBook: PropTypes.func,
+    name: PropTypes.string,
+    address: PropTypes.string,
+    history: PropTypes.object,
+    checkSummedAddress: PropTypes.string,
+    memo: PropTypes.string,
+    editRoute: PropTypes.string,
+  }
+
+  render () {
+    const { t } = this.context
+    const { history, name, address, checkSummedAddress, memo, editRoute } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <div className="settings-page__header address-book__header">
+            <Identicon address={address} diameter={60} />
+            <div className="address-book__header__name">{ name }</div>
+          </div>
+          <div className="address-book__view-contact__group">
+            <Button
+              type="secondary"
+              onClick={() => {
+                history.push(`${editRoute}/${address}`)
+              }}
+            >
+              {t('edit')}
+            </Button>
+          </div>
+          <div className="address-book__view-contact__group">
+            <div className="address-book__view-contact__group__label">
+              { t('ethereumPublicAddress') }
+            </div>
+            <div className="address-book__view-contact__group__value">
+              <div
+                className="address-book__view-contact__group__static-address"
+              >
+                { quadSplit(checkSummedAddress) }
+              </div>
+              <img
+                className="address-book__view-contact__group__static-address--copy-icon"
+                onClick={() => copyToClipboard(checkSummedAddress)}
+                src="/images/copy-to-clipboard.svg"
+              />
+            </div>
+          </div>
+          <div className="address-book__view-contact__group">
+            <div className="address-book__view-contact__group__label--capitalized">
+              { t('memo') }
+            </div>
+            <div className="address-book__view-contact__group__static-address">
+              { memo }
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js
new file mode 100644
index 000000000..b1196d936
--- /dev/null
+++ b/ui/app/pages/settings/contact-list-tab/view-contact/view-contact.container.js
@@ -0,0 +1,43 @@
+import ViewContact from './view-contact.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { getAddressBookEntry } from '../../../../selectors/selectors'
+import { removeFromAddressBook } from '../../../../store/actions'
+import { checksumAddress } from '../../../../helpers/utils/util'
+import {
+  CONTACT_EDIT_ROUTE,
+  CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
+  CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+} from '../../../../helpers/constants/routes'
+
+const mapStateToProps = (state, ownProps) => {
+  const { location } = ownProps
+  const { pathname } = location
+  const pathNameTail = pathname.match(/[^/]+$/)[0]
+  const pathNameTailIsAddress = pathNameTail.includes('0x')
+  const address = pathNameTailIsAddress ? pathNameTail.toLowerCase() : ownProps.match.params.id
+
+  const { memo, name } = getAddressBookEntry(state, address) || state.metamask.identities[address]
+
+  const showingMyAccounts = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_VIEW_ROUTE))
+
+  return {
+    name,
+    address,
+    checkSummedAddress: checksumAddress(address),
+    memo,
+    editRoute: showingMyAccounts ? CONTACT_MY_ACCOUNTS_EDIT_ROUTE : CONTACT_EDIT_ROUTE,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    removeFromAddressBook: (addressToRemove) => dispatch(removeFromAddressBook(addressToRemove)),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ViewContact)
diff --git a/ui/app/pages/settings/index.js b/ui/app/pages/settings/index.js
index 44a9ffa63..d2dd7f795 100644
--- a/ui/app/pages/settings/index.js
+++ b/ui/app/pages/settings/index.js
@@ -1 +1 @@
-export { default } from './settings.component'
+export { default } from './settings.container'
diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss
index c516a84bb..73f36806d 100644
--- a/ui/app/pages/settings/index.scss
+++ b/ui/app/pages/settings/index.scss
@@ -4,6 +4,8 @@
 
 @import 'settings-tab/index';
 
+@import 'contact-list-tab/index';
+
 .settings-page {
   position: relative;
   background: $white;
@@ -23,7 +25,7 @@
     }
   }
 
-  &__subheader {
+  &__subheader, &__subheader--link {
     padding: 16px 4px;
     font-size: 20px;
     border-bottom: 1px solid $alto;
@@ -38,6 +40,16 @@
     }
   }
 
+  &__subheader--link {
+    cursor: pointer;
+    margin-right: 4px;
+  }
+
+  &__subheader--link:hover {
+    cursor: pointer;
+    color: #037DD6;
+  }
+
   &__sub-header {
     height: 72px;
     border-bottom: 1px solid #D8D8D8;
@@ -116,6 +128,8 @@
     &__modules {
       overflow-y: auto;
       flex: 1 1 auto;
+      display: flex;
+      flex-flow: column;
 
       @media screen and (max-width: 575px) {
         display: none;
@@ -142,7 +156,7 @@
     min-width: 0;
     display: flex;
     flex-direction: column;
-    min-height: 71px;
+    margin-bottom: 20px;
 
     @media screen and (max-width: 575px) {
       height: initial;
@@ -175,6 +189,37 @@
     }
   }
 
+  &__copyable-address {
+    display: flex;
+  }
+
+  &__copy-icon {
+    padding-left: 4px;
+  }
+
+  &__button-group {
+    display:flex;
+    margin-left: auto;
+  }
+
+  &__address-book-button {
+      //align-self: flex-end;
+      //padding: 5px;
+      //text-transform: uppercase;
+      //cursor: pointer;
+      //width: 25%;
+      //min-width: 80px;
+      //height: 33px;
+    font-size: 1rem;
+    line-height: 1.1875rem;
+    padding: 0;
+
+  }
+
+  &__address-book-button + &__address-book-button {
+    margin-left: 1.875rem;
+  }
+
   &--selected {
     .settings-page {
       &__content {
diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
index 388e2665f..0349aa14f 100644
--- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
+++ b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
@@ -12,7 +12,7 @@ export default class NetworkForm extends PureComponent {
 
   static propTypes = {
     editRpc: PropTypes.func.isRequired,
-    delRpcTarget: PropTypes.func.isRequired,
+    showConfirmDeleteNetworkModal: PropTypes.func.isRequired,
     rpcUrl: PropTypes.string,
     chainId: PropTypes.string,
     ticker: PropTypes.string,
@@ -131,10 +131,14 @@ export default class NetworkForm extends PureComponent {
   }
 
   onDelete = () => {
-    const { delRpcTarget, rpcUrl, onClear } = this.props
-    delRpcTarget(rpcUrl)
-    this.resetForm()
-    onClear()
+    const { showConfirmDeleteNetworkModal, rpcUrl, onClear } = this.props
+    showConfirmDeleteNetworkModal({
+      target: rpcUrl,
+      onConfirm: () => {
+        this.resetForm()
+        onClear()
+      },
+    })
   }
 
   stateIsUnchanged () {
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
index f6c8443cf..40e1a902f 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.component.js
@@ -25,7 +25,7 @@ export default class NetworksTab extends PureComponent {
     setNetworksTabAddMode: PropTypes.func.isRequired,
     setRpcTarget: PropTypes.func.isRequired,
     setSelectedSettingsRpcUrl: PropTypes.func.isRequired,
-    delRpcTarget: PropTypes.func.isRequired,
+    showConfirmDeleteNetworkModal: PropTypes.func.isRequired,
     providerUrl: PropTypes.string,
     providerType: PropTypes.string,
     networkDefaultedToProvider: PropTypes.bool,
@@ -50,16 +50,16 @@ export default class NetworksTab extends PureComponent {
 
     return (
       <div className="settings-page__sub-header">
-          <div
-            className="networks-tab__back-button"
-            onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode
-              ? () => {
-                  setNetworksTabAddMode(false)
-                  setSelectedSettingsRpcUrl(null)
-                }
-              : () => this.props.history.push(SETTINGS_ROUTE)
+        <div
+          className="networks-tab__back-button"
+          onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode
+            ? () => {
+              setNetworksTabAddMode(false)
+              setSelectedSettingsRpcUrl(null)
             }
-          />
+            : () => this.props.history.push(SETTINGS_ROUTE)
+          }
+        />
         <span className="settings-page__sub-header-text">{ this.context.t('networks') }</span>
         <div className="networks-tab__add-network-header-button-wrapper">
           <Button
@@ -109,7 +109,7 @@ export default class NetworksTab extends PureComponent {
           setNetworksTabAddMode(false)
           setSelectedSettingsRpcUrl(rpcUrl)
         }}
-       >
+      >
         <NetworkDropdownIcon
           backgroundColor={iconColor || 'white'}
           innerBorder={border}
@@ -126,7 +126,7 @@ export default class NetworksTab extends PureComponent {
 
   renderNetworksList () {
     const { networksToRender, selectedNetwork, networkIsSelected, networksTabIsInAddMode, networkDefaultedToProvider } = this.props
-    console.log(networksToRender)
+
     return (
       <div
         className={classnames('networks-tab__networks-list', {
@@ -160,7 +160,7 @@ export default class NetworksTab extends PureComponent {
     const { t } = this.context
     const {
       setRpcTarget,
-      delRpcTarget,
+      showConfirmDeleteNetworkModal,
       setSelectedSettingsRpcUrl,
       setNetworksTabAddMode,
       selectedNetwork: {
@@ -199,7 +199,7 @@ export default class NetworksTab extends PureComponent {
                   setNetworksTabAddMode(false)
                   setSelectedSettingsRpcUrl(null)
                 }}
-                delRpcTarget={delRpcTarget}
+                showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal}
                 viewOnly={viewOnly}
                 isCurrentRpcTarget={providerUrl === rpcUrl}
                 networksTabIsInAddMode={networksTabIsInAddMode}
@@ -223,16 +223,16 @@ export default class NetworksTab extends PureComponent {
         {this.renderNetworksTabContent()}
         {!networkIsSelected && !networksTabIsInAddMode
           ? <div className="networks-tab__add-network-button-wrapper">
-              <Button
-                type="primary"
-                onClick={event => {
-                  event.preventDefault()
-                  setSelectedSettingsRpcUrl(null)
-                  setNetworksTabAddMode(true)
-                }}
-              >
-                { this.context.t('addNetwork') }
-              </Button>
+            <Button
+              type="primary"
+              onClick={event => {
+                event.preventDefault()
+                setSelectedSettingsRpcUrl(null)
+                setNetworksTabAddMode(true)
+              }}
+            >
+              { this.context.t('addNetwork') }
+            </Button>
           </div>
           : null
         }
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js
index 9e1098922..8cc18a4bd 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.container.js
+++ b/ui/app/pages/settings/networks-tab/networks-tab.container.js
@@ -8,7 +8,7 @@ import {
   displayWarning,
   setNetworksTabAddMode,
   editRpc,
-  delRpcTarget,
+  showModal,
 } from '../../../store/actions'
 import { defaultNetworksData } from './networks-tab.constants'
 const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true }))
@@ -64,8 +64,8 @@ const mapDispatchToProps = dispatch => {
     setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => {
       dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs))
     },
-    delRpcTarget: (target) => {
-      dispatch(delRpcTarget(target))
+    showConfirmDeleteNetworkModal: ({ target, onConfirm }) => {
+      return dispatch(showModal({ name: 'CONFIRM_DELETE_NETWORK', target, onConfirm }))
     },
     displayWarning: warning => dispatch(displayWarning(warning)),
     setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)),
diff --git a/ui/app/pages/settings/security-tab/security-tab.component.js b/ui/app/pages/settings/security-tab/security-tab.component.js
index 01a28bac7..0d367abfb 100644
--- a/ui/app/pages/settings/security-tab/security-tab.component.js
+++ b/ui/app/pages/settings/security-tab/security-tab.component.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { exportAsFile } from '../../../helpers/utils/util'
-import ToggleButton from 'react-toggle-button'
+import ToggleButton from '../../../components/ui/toggle-button'
 import { REVEAL_SEED_ROUTE } from '../../../helpers/constants/routes'
 import Button from '../../../components/ui/button'
 
@@ -140,8 +140,8 @@ export default class SecurityTab extends PureComponent {
             <ToggleButton
               value={privacyMode}
               onToggle={value => setPrivacyMode(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
@@ -166,8 +166,8 @@ export default class SecurityTab extends PureComponent {
             <ToggleButton
               value={participateInMetaMetrics}
               onToggle={value => setParticipateInMetaMetrics(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
diff --git a/ui/app/pages/settings/settings-tab/settings-tab.component.js b/ui/app/pages/settings/settings-tab/settings-tab.component.js
index 57e80be0d..f8daa98f9 100644
--- a/ui/app/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/app/pages/settings/settings-tab/settings-tab.component.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import infuraCurrencies from '../../../helpers/constants/infura-conversion.json'
 import SimpleDropdown from '../../../components/app/dropdowns/simple-dropdown'
-import ToggleButton from 'react-toggle-button'
+import ToggleButton from '../../../components/ui/toggle-button'
 import locales from '../../../../../app/_locales/index.json'
 
 const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
@@ -105,6 +105,7 @@ export default class SettingsTab extends PureComponent {
 
 
   renderBlockieOptIn () {
+    const { t } = this.context
     const { useBlockie, setUseBlockie } = this.props
 
     return (
@@ -117,8 +118,8 @@ export default class SettingsTab extends PureComponent {
             <ToggleButton
               value={useBlockie}
               onToggle={value => setUseBlockie(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js
index 7f2045244..79f383dc4 100644
--- a/ui/app/pages/settings/settings.component.js
+++ b/ui/app/pages/settings/settings.component.js
@@ -1,8 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Route, matchPath, withRouter } from 'react-router-dom'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
-import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import TabBar from '../../components/app/tab-bar'
 import c from 'classnames'
 import SettingsTab from './settings-tab'
@@ -10,6 +8,7 @@ import NetworksTab from './networks-tab'
 import AdvancedTab from './advanced-tab'
 import InfoTab from './info-tab'
 import SecurityTab from './security-tab'
+import ContactListTab from './contact-list-tab'
 import {
   DEFAULT_ROUTE,
   ADVANCED_ROUTE,
@@ -18,19 +17,28 @@ import {
   ABOUT_US_ROUTE,
   SETTINGS_ROUTE,
   NETWORKS_ROUTE,
+  CONTACT_LIST_ROUTE,
+  CONTACT_ADD_ROUTE,
+  CONTACT_EDIT_ROUTE,
+  CONTACT_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_ROUTE,
+  CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
 } from '../../helpers/constants/routes'
 
-const ROUTES_TO_I18N_KEYS = {
-  [GENERAL_ROUTE]: 'general',
-  [ADVANCED_ROUTE]: 'advanced',
-  [SECURITY_ROUTE]: 'securityAndPrivacy',
-  [ABOUT_US_ROUTE]: 'about',
-}
-
 class SettingsPage extends PureComponent {
   static propTypes = {
-    location: PropTypes.object,
+    addressName: PropTypes.string,
+    backRoute: PropTypes.string,
+    currentPath: PropTypes.string,
     history: PropTypes.object,
+    isAddressEntryPage: PropTypes.bool,
+    isPopupView: PropTypes.bool,
+    location: PropTypes.object,
+    pathnameI18nKey: PropTypes.string,
+    initialBreadCrumbRoute: PropTypes.string,
+    breadCrumbTextKey: PropTypes.string,
+    initialBreadCrumbKey: PropTypes.string,
     t: PropTypes.func,
   }
 
@@ -38,35 +46,25 @@ class SettingsPage extends PureComponent {
     t: PropTypes.func,
   }
 
-  isCurrentPath (pathname) {
-    return this.props.location.pathname === pathname
-  }
-
   render () {
-    const { t } = this.context
-    const { history, location } = this.props
-
-    const pathnameI18nKey = ROUTES_TO_I18N_KEYS[location.pathname]
-    const isPopupView = getEnvironmentType(location.href) === ENVIRONMENT_TYPE_POPUP
+    const { history, backRoute, currentPath } = this.props
 
     return (
       <div
         className={c('main-container settings-page', {
-          'settings-page--selected': !this.isCurrentPath(SETTINGS_ROUTE),
+          'settings-page--selected': currentPath !== SETTINGS_ROUTE,
         })}
       >
         <div className="settings-page__header">
           {
-            !this.isCurrentPath(SETTINGS_ROUTE) && !this.isCurrentPath(NETWORKS_ROUTE) && (
+            currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && (
               <div
                 className="settings-page__back-button"
-                onClick={() => history.push(SETTINGS_ROUTE)}
+                onClick={() => history.push(backRoute)}
               />
             )
           }
-          <div className="settings-page__header__title">
-            {t(pathnameI18nKey && isPopupView ? pathnameI18nKey : 'settings')}
-          </div>
+          { this.renderTitle() }
           <div
             className="settings-page__close-button"
             onClick={() => history.push(DEFAULT_ROUTE)}
@@ -85,19 +83,65 @@ class SettingsPage extends PureComponent {
     )
   }
 
+  renderTitle () {
+    const { t } = this.context
+    const { isPopupView, pathnameI18nKey, addressName } = this.props
+
+    let titleText
+
+    if (isPopupView && addressName) {
+      titleText = addressName
+    } else if (pathnameI18nKey && isPopupView) {
+      titleText = t(pathnameI18nKey)
+    } else {
+      titleText = t('settings')
+    }
+
+    return (
+      <div className="settings-page__header__title">
+        {titleText}
+      </div>
+    )
+  }
+
   renderSubHeader () {
     const { t } = this.context
-    const { location: { pathname } } = this.props
+    const {
+      currentPath,
+      isPopupView,
+      isAddressEntryPage,
+      pathnameI18nKey,
+      addressName,
+      initialBreadCrumbRoute,
+      breadCrumbTextKey,
+      history,
+      initialBreadCrumbKey,
+    } = this.props
+
+    let subheaderText
 
-    return pathname !== NETWORKS_ROUTE && (
+    if (isPopupView && isAddressEntryPage) {
+      subheaderText = t('settings')
+    } else if (initialBreadCrumbKey) {
+      subheaderText = t(initialBreadCrumbKey)
+    } else {
+      subheaderText = t(pathnameI18nKey || 'general')
+    }
+
+    return currentPath !== NETWORKS_ROUTE && (
       <div className="settings-page__subheader">
-        {t(ROUTES_TO_I18N_KEYS[pathname] || 'general')}
+        <div
+          className={c({ 'settings-page__subheader--link': initialBreadCrumbRoute })}
+          onClick={() => initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)}
+        >{subheaderText}</div>
+        {breadCrumbTextKey && <div><span>{'> '}</span>{t(breadCrumbTextKey)}</div>}
+        {isAddressEntryPage && <div><span>{' > '}</span>{addressName}</div>}
       </div>
     )
   }
 
   renderTabs () {
-    const { history, location } = this.props
+    const { history, currentPath } = this.props
     const { t } = this.context
 
     return (
@@ -105,15 +149,16 @@ class SettingsPage extends PureComponent {
         tabs={[
           { content: t('general'), description: t('generalSettingsDescription'), key: GENERAL_ROUTE },
           { content: t('advanced'), description: t('advancedSettingsDescription'), key: ADVANCED_ROUTE },
+          { content: t('contactList'), description: t('contactListDescription'), key: CONTACT_LIST_ROUTE },
           { content: t('securityAndPrivacy'), description: t('securitySettingsDescription'), key: SECURITY_ROUTE },
           { content: t('networks'), description: t('networkSettingsDescription'), key: NETWORKS_ROUTE },
           { content: t('about'), description: t('aboutSettingsDescription'), key: ABOUT_US_ROUTE },
         ]}
         isActive={key => {
-          if (key === GENERAL_ROUTE && this.isCurrentPath(SETTINGS_ROUTE)) {
+          if (key === GENERAL_ROUTE && currentPath === SETTINGS_ROUTE) {
             return true
           }
-          return matchPath(location.pathname, { path: key, exact: true })
+          return matchPath(currentPath, { path: key, exact: true })
         }}
         onSelect={key => history.push(key)}
       />
@@ -149,6 +194,41 @@ class SettingsPage extends PureComponent {
           component={SecurityTab}
         />
         <Route
+          exact
+          path={CONTACT_LIST_ROUTE}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={CONTACT_ADD_ROUTE}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={CONTACT_MY_ACCOUNTS_ROUTE}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={`${CONTACT_EDIT_ROUTE}/:id`}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={`${CONTACT_VIEW_ROUTE}/:id`}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={`${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/:id`}
+          component={ContactListTab}
+        />
+        <Route
+          exact
+          path={`${CONTACT_MY_ACCOUNTS_EDIT_ROUTE}/:id`}
+          component={ContactListTab}
+        />
+        <Route
           component={SettingsTab}
         />
       </Switch>
diff --git a/ui/app/pages/settings/settings.container.js b/ui/app/pages/settings/settings.container.js
new file mode 100644
index 000000000..79b191483
--- /dev/null
+++ b/ui/app/pages/settings/settings.container.js
@@ -0,0 +1,92 @@
+import Settings from './settings.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import { getAddressBookEntryName } from '../../selectors/selectors'
+import { isValidAddress } from '../../helpers/utils/util'
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../app/scripts/lib/util'
+
+import {
+  ADVANCED_ROUTE,
+  SECURITY_ROUTE,
+  GENERAL_ROUTE,
+  ABOUT_US_ROUTE,
+  SETTINGS_ROUTE,
+  CONTACT_LIST_ROUTE,
+  CONTACT_ADD_ROUTE,
+  CONTACT_EDIT_ROUTE,
+  CONTACT_VIEW_ROUTE,
+  CONTACT_MY_ACCOUNTS_ROUTE,
+  CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
+  CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+} from '../../helpers/constants/routes'
+
+const ROUTES_TO_I18N_KEYS = {
+  [GENERAL_ROUTE]: 'general',
+  [ADVANCED_ROUTE]: 'advanced',
+  [SECURITY_ROUTE]: 'securityAndPrivacy',
+  [ABOUT_US_ROUTE]: 'about',
+  [CONTACT_LIST_ROUTE]: 'contactList',
+  [CONTACT_ADD_ROUTE]: 'newContact',
+  [CONTACT_EDIT_ROUTE]: 'editContact',
+  [CONTACT_VIEW_ROUTE]: 'viewContact',
+  [CONTACT_MY_ACCOUNTS_ROUTE]: 'myAccounts',
+}
+
+const mapStateToProps = (state, ownProps) => {
+  const { location } = ownProps
+  const { pathname } = location
+  const pathNameTail = pathname.match(/[^/]+$/)[0]
+
+  const isAddressEntryPage = pathNameTail.includes('0x')
+  const isMyAccountsPage = pathname.match('my-accounts')
+  const isAddContactPage = Boolean(pathname.match(CONTACT_ADD_ROUTE))
+  const isEditContactPage = Boolean(pathname.match(CONTACT_EDIT_ROUTE))
+  const isEditMyAccountsContactPage = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE))
+
+  const isPopupView = getEnvironmentType(location.href) === ENVIRONMENT_TYPE_POPUP
+  const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname]
+
+  let backRoute
+  if (isMyAccountsPage && isAddressEntryPage) {
+    backRoute = CONTACT_MY_ACCOUNTS_ROUTE
+  } else if (isEditContactPage) {
+    backRoute = `${CONTACT_VIEW_ROUTE}/${pathNameTail}`
+  } else if (isEditMyAccountsContactPage) {
+    backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}`
+  } else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) {
+    backRoute = CONTACT_LIST_ROUTE
+  } else {
+    backRoute = SETTINGS_ROUTE
+  }
+
+  let initialBreadCrumbRoute
+  let breadCrumbTextKey
+  let initialBreadCrumbKey
+  if (isMyAccountsPage) {
+    initialBreadCrumbRoute = CONTACT_LIST_ROUTE
+    breadCrumbTextKey = 'myWalletAccounts'
+    initialBreadCrumbKey = ROUTES_TO_I18N_KEYS[initialBreadCrumbRoute]
+  }
+
+  const addressName = getAddressBookEntryName(state, isValidAddress(pathNameTail) ? pathNameTail : '')
+
+  return {
+    isAddressEntryPage,
+    isMyAccountsPage,
+    backRoute,
+    currentPath: pathname,
+    isPopupView,
+    pathnameI18nKey,
+    addressName,
+    initialBreadCrumbRoute,
+    breadCrumbTextKey,
+    initialBreadCrumbKey,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps)
+)(Settings)
diff --git a/ui/app/selectors/selectors.js b/ui/app/selectors/selectors.js
index 56591b7b0..0cf382d2c 100644
--- a/ui/app/selectors/selectors.js
+++ b/ui/app/selectors/selectors.js
@@ -9,6 +9,9 @@ import {
 const {
   multiplyCurrencies,
 } = require('../helpers/utils/conversion-util')
+import {
+  addressSlicer,
+} from '../helpers/utils/util'
 
 const selectors = {
   getSelectedAddress,
@@ -52,6 +55,8 @@ const selectors = {
   getMetaMetricState,
   getRpcPrefsForCurrentProvider,
   getKnownMethodData,
+  getAddressBookEntry,
+  getAddressBookEntryName,
 }
 
 module.exports = selectors
@@ -203,7 +208,22 @@ function conversionRateSelector (state) {
 }
 
 function getAddressBook (state) {
-  return state.metamask.addressBook
+  const network = state.metamask.network
+  const addressBookEntries = Object.values(state.metamask.addressBook)
+    .filter(entry => entry.chainId && entry.chainId.toString() === network)
+
+  return addressBookEntries
+}
+
+function getAddressBookEntry (state, address) {
+  const addressBook = getAddressBook(state)
+  const entry = addressBook.find(contact => contact.address.toLowerCase() === address.toLowerCase())
+  return entry
+}
+
+function getAddressBookEntryName (state, address) {
+  const entry = getAddressBookEntry(state, address) || state.metamask.identities[address]
+  return entry && entry.name !== '' ? entry.name : addressSlicer(address)
 }
 
 function accountsWithSendEtherInfoSelector (state) {
diff --git a/ui/app/selectors/tests/selectors-test-data.js b/ui/app/selectors/tests/selectors-test-data.js
new file mode 100644
index 000000000..54a494b63
--- /dev/null
+++ b/ui/app/selectors/tests/selectors-test-data.js
@@ -0,0 +1,232 @@
+module.exports = {
+  'metamask': {
+    'isInitialized': true,
+    'isUnlocked': true,
+    'featureFlags': {'sendHexData': true},
+    'rpcTarget': 'https://rawtestrpc.metamask.io/',
+    'identities': {
+      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
+        'address': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
+        'name': 'Send Account 1',
+      },
+      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
+        'address': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+        'name': 'Send Account 2',
+      },
+      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
+        'address': '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
+        'name': 'Send Account 3',
+      },
+      '0xd85a4b6a394794842887b8284293d69163007bbb': {
+        'address': '0xd85a4b6a394794842887b8284293d69163007bbb',
+        'name': 'Send Account 4',
+      },
+    },
+    'cachedBalances': {},
+    'currentBlockGasLimit': '0x4c1878',
+    'currentCurrency': 'USD',
+    'conversionRate': 1200.88200327,
+    'conversionDate': 1489013762,
+    'nativeCurrency': 'ETH',
+    'frequentRpcList': [],
+    'network': '3',
+    'accounts': {
+      '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
+        'code': '0x',
+        'balance': '0x47c9d71831c76efe',
+        'nonce': '0x1b',
+        'address': '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825',
+      },
+      '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb': {
+        'code': '0x',
+        'balance': '0x37452b1315889f80',
+        'nonce': '0xa',
+        'address': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+      },
+      '0x2f8d4a878cfa04a6e60d46362f5644deab66572d': {
+        'code': '0x',
+        'balance': '0x30c9d71831c76efe',
+        'nonce': '0x1c',
+        'address': '0x2f8d4a878cfa04a6e60d46362f5644deab66572d',
+      },
+      '0xd85a4b6a394794842887b8284293d69163007bbb': {
+        'code': '0x',
+        'balance': '0x0',
+        'nonce': '0x0',
+        'address': '0xd85a4b6a394794842887b8284293d69163007bbb',
+      },
+    },
+    'addressBook': [
+      {
+        'address': '0x06195827297c7a80a443b6894d3bdb8824b43896',
+        'name': 'Address Book Account 1',
+        'chainId': '3',
+      },
+    ],
+    'tokens': [
+      {
+        'address': '0x1a195821297c7a80a433b6894d3bdb8824b43896',
+        'decimals': 18,
+        'symbol': 'ABC',
+      },
+      {
+        'address': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+        'decimals': 4,
+        'symbol': 'DEF',
+      },
+      {
+        'address': '0xa42084c8d1d9a2198631988579bb36b48433a72b',
+        'decimals': 18,
+        'symbol': 'GHI',
+      },
+    ],
+    'tokenExchangeRates': {
+      'def_eth': {
+        rate: 2.0,
+      },
+      'ghi_eth': {
+        rate: 31.01,
+      },
+    },
+    'transactions': {},
+    'selectedAddressTxList': [
+      {
+        'id': 'mockTokenTx1',
+        'txParams': {
+          'to': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+        },
+        'time': 1700000000000,
+      },
+      {
+        'id': 'mockTokenTx2',
+        'txParams': {
+          'to': '0xafaketokenaddress',
+        },
+        'time': 1600000000000,
+      },
+      {
+        'id': 'mockTokenTx3',
+        'txParams': {
+          'to': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+        },
+        'time': 1500000000000,
+      },
+      {
+        'id': 'mockEthTx1',
+        'txParams': {
+          'to': '0xd85a4b6a394794842887b8284293d69163007bbb',
+        },
+        'time': 1400000000000,
+      },
+    ],
+    'selectedTokenAddress': '0x8d6b81208414189a58339873ab429b6c47ab92d3',
+    'unapprovedMsgs': {
+      '0xabc': { id: 'unapprovedMessage1', 'time': 1650000000000 },
+      '0xdef': { id: 'unapprovedMessage2', 'time': 1550000000000 },
+      '0xghi': { id: 'unapprovedMessage3', 'time': 1450000000000 },
+    },
+    'unapprovedMsgCount': 0,
+    'unapprovedPersonalMsgs': {},
+    'unapprovedPersonalMsgCount': 0,
+    'keyringTypes': [
+      'Simple Key Pair',
+      'HD Key Tree',
+    ],
+    'keyrings': [
+      {
+        'type': 'HD Key Tree',
+        'accounts': [
+          'fdea65c8e26263f6d9a1b5de9555d2931a33b825',
+          'c5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+          '2f8d4a878cfa04a6e60d46362f5644deab66572d',
+        ],
+      },
+      {
+        'type': 'Simple Key Pair',
+        'accounts': [
+          '0xd85a4b6a394794842887b8284293d69163007bbb',
+        ],
+      },
+    ],
+    'selectedAddress': '0xd85a4b6a394794842887b8284293d69163007bbb',
+    'provider': {
+      'type': 'testnet',
+    },
+    'shapeShiftTxList': [
+      { id: 'shapeShiftTx1', 'time': 1675000000000 },
+      { id: 'shapeShiftTx2', 'time': 1575000000000 },
+      { id: 'shapeShiftTx3', 'time': 1475000000000 },
+    ],
+    'lostAccounts': [],
+    'send': {
+      'gasLimit': '0xFFFF',
+      'gasPrice': '0xaa',
+      'gasTotal': '0xb451dc41b578',
+      'tokenBalance': 3434,
+      'from': {
+        'address': '0xabcdefg',
+        'balance': '0x5f4e3d2c1',
+      },
+      'to': '0x987fedabc',
+      'amount': '0x080',
+      'memo': '',
+      'errors': {
+        'someError': null,
+      },
+      'maxModeOn': false,
+      'editingTransactionId': 97531,
+      'forceGasMin': true,
+    },
+    'unapprovedTxs': {
+      '4768706228115573': {
+        'id': 4768706228115573,
+        'time': 1487363153561,
+        'status': 'unapproved',
+        'gasMultiplier': 1,
+        'metamaskNetworkId': '3',
+        'txParams': {
+          'from': '0xc5b8dbac4c1d3f152cdeb400e2313f309c410acb',
+          'to': '0x18a3462427bcc9133bb46e88bcbe39cd7ef0e761',
+          'value': '0xde0b6b3a7640000',
+          'metamaskId': 4768706228115573,
+          'metamaskNetworkId': '3',
+          'gas': '0x5209',
+        },
+        'gasLimitSpecified': false,
+        'estimatedGas': '0x5209',
+        'txFee': '17e0186e60800',
+        'txValue': 'de0b6b3a7640000',
+        'maxCost': 'de234b52e4a0800',
+        'gasPrice': '4a817c800',
+      },
+    },
+    'currentLocale': 'en',
+    recentBlocks: ['mockBlock1', 'mockBlock2', 'mockBlock3'],
+  },
+  'appState': {
+    'menuOpen': false,
+    'currentView': {
+      'name': 'accountDetail',
+      'detailView': null,
+      'context': '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+    },
+    'accountDetail': {
+      'subview': 'transactions',
+    },
+    'modal': {
+      'modalState': {},
+      'previousModalState': {},
+    },
+    'transForward': true,
+    'isLoading': false,
+    'warning': null,
+    'scrollToBottom': false,
+    'forgottenPassword': null,
+  },
+  'identities': {},
+  'send': {
+    'fromDropdownOpen': false,
+    'toDropdownOpen': false,
+    'errors': { 'someError': null },
+  },
+}
diff --git a/ui/app/selectors/tests/selectors.test.js b/ui/app/selectors/tests/selectors.test.js
new file mode 100644
index 000000000..5560b9833
--- /dev/null
+++ b/ui/app/selectors/tests/selectors.test.js
@@ -0,0 +1,25 @@
+import assert from 'assert'
+import selectors from '../selectors.js'
+const {
+  getAddressBook,
+} = selectors
+import mockState from './selectors-test-data'
+
+describe('selectors', () => {
+
+  describe('getAddressBook()', () => {
+    it('should return the address book', () => {
+      assert.deepEqual(
+        getAddressBook(mockState),
+        [
+          {
+            address: '0x06195827297c7a80a443b6894d3bdb8824b43896',
+            name: 'Address Book Account 1',
+            chainId: '3',
+          },
+        ],
+      )
+    })
+  })
+
+})
diff --git a/ui/app/store/actions.js b/ui/app/store/actions.js
index 3ed82044d..adb5fe450 100644
--- a/ui/app/store/actions.js
+++ b/ui/app/store/actions.js
@@ -1,7 +1,7 @@
 const abi = require('human-standard-token-abi')
 const pify = require('pify')
 const getBuyEthUrl = require('../../../app/scripts/lib/buy-eth-url')
-const { getTokenAddressFromTokenObject } = require('../helpers/utils/util')
+const { getTokenAddressFromTokenObject, checksumAddress } = require('../helpers/utils/util')
 const {
   calcTokenBalance,
   estimateGas,
@@ -26,6 +26,9 @@ var actions = {
   MODAL_CLOSE: 'UI_MODAL_CLOSE',
   showModal: showModal,
   hideModal: hideModal,
+  // notification state
+  CLOSE_NOTIFICATION_WINDOW: 'CLOSE_NOTIFICATION_WINDOW',
+  closeNotifacationWindow: closeNotifacationWindow,
   // sidebar state
   SIDEBAR_OPEN: 'UI_SIDEBAR_OPEN',
   SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE',
@@ -64,7 +67,6 @@ var actions = {
   markPasswordForgotten,
   unMarkPasswordForgotten,
   SHOW_INIT_MENU: 'SHOW_INIT_MENU',
-  SHOW_NEW_VAULT_SEED: 'SHOW_NEW_VAULT_SEED',
   SHOW_INFO_PAGE: 'SHOW_INFO_PAGE',
   SHOW_IMPORT_PAGE: 'SHOW_IMPORT_PAGE',
   SHOW_NEW_ACCOUNT_PAGE: 'SHOW_NEW_ACCOUNT_PAGE',
@@ -78,7 +80,6 @@ var actions = {
   showImportPage,
   showNewAccountPage,
   setNewAccountForm,
-  createNewVaultAndKeychain: createNewVaultAndKeychain,
   createNewVaultAndRestore: createNewVaultAndRestore,
   createNewVaultInProgress: createNewVaultInProgress,
   createNewVaultAndGetSeedPhrase,
@@ -94,14 +95,12 @@ var actions = {
   navigateToNewAccountScreen,
   resetAccount,
   removeAccount,
-  showNewVaultSeed: showNewVaultSeed,
   showInfoPage: showInfoPage,
   CLOSE_WELCOME_SCREEN: 'CLOSE_WELCOME_SCREEN',
   closeWelcomeScreen,
   // seed recovery actions
   REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION',
   revealSeedConfirmation: revealSeedConfirmation,
-  requestRevealSeed: requestRevealSeed,
   requestRevealSeedWords,
   // unlock screen
   UNLOCK_IN_PROGRESS: 'UNLOCK_IN_PROGRESS',
@@ -136,6 +135,8 @@ var actions = {
   showSendTokenPage,
   ADD_TO_ADDRESS_BOOK: 'ADD_TO_ADDRESS_BOOK',
   addToAddressBook: addToAddressBook,
+  REMOVE_FROM_ADDRESS_BOOK: 'REMOVE_FROM_ADDRESS_BOOK',
+  removeFromAddressBook: removeFromAddressBook,
   REQUEST_ACCOUNT_EXPORT: 'REQUEST_ACCOUNT_EXPORT',
   requestExportAccount: requestExportAccount,
   EXPORT_ACCOUNT: 'EXPORT_ACCOUNT',
@@ -195,6 +196,10 @@ var actions = {
   CLOSE_FROM_DROPDOWN: 'CLOSE_FROM_DROPDOWN',
   GAS_LOADING_STARTED: 'GAS_LOADING_STARTED',
   GAS_LOADING_FINISHED: 'GAS_LOADING_FINISHED',
+  UPDATE_SEND_ENS_RESOLUTION: 'UPDATE_SEND_ENS_RESOLUTION',
+  UPDATE_SEND_ENS_RESOLUTION_ERROR: 'UPDATE_SEND_ENS_RESOLUTION_ERROR',
+  updateSendEnsResolution,
+  updateSendEnsResolutionError,
   setGasLimit,
   setGasPrice,
   updateGasData,
@@ -214,7 +219,6 @@ var actions = {
   gasLoadingStarted,
   gasLoadingFinished,
   // app messages
-  confirmSeedWords: confirmSeedWords,
   showAccountDetail: showAccountDetail,
   BACK_TO_ACCOUNT_DETAIL: 'BACK_TO_ACCOUNT_DETAIL',
   backToAccountDetail: backToAccountDetail,
@@ -270,12 +274,12 @@ var actions = {
   showSubLoadingIndication: showSubLoadingIndication,
   HIDE_SUB_LOADING_INDICATION: 'HIDE_SUB_LOADING_INDICATION',
   hideSubLoadingIndication: hideSubLoadingIndication,
-// QR STUFF:
+  // QR STUFF:
   SHOW_QR: 'SHOW_QR',
   showQrView: showQrView,
   reshowQrCode: reshowQrCode,
   SHOW_QR_VIEW: 'SHOW_QR_VIEW',
-// FORGOT PASSWORD:
+  // FORGOT PASSWORD:
   BACK_TO_INIT_MENU: 'BACK_TO_INIT_MENU',
   goBackToInitView: goBackToInitView,
   RECOVERY_IN_PROGRESS: 'RECOVERY_IN_PROGRESS',
@@ -320,11 +324,7 @@ var actions = {
   setUseNativeCurrencyAsPrimaryCurrencyPreference,
   setShowFiatConversionOnTestnetsPreference,
   setAutoLogoutTimeLimit,
-
-  // Migration of users to new UI
-  setCompletedUiMigration,
-  completeUiMigration,
-  COMPLETE_UI_MIGRATION: 'COMPLETE_UI_MIGRATION',
+  unsetMigratedPrivacyMode,
 
   // Onboarding
   setCompletedOnboarding,
@@ -349,6 +349,7 @@ var actions = {
 
   approveProviderRequestByOrigin,
   rejectProviderRequestByOrigin,
+  forceApproveProviderRequestByOrigin,
   clearApprovedOrigins,
 
   setFirstTimeFlowType,
@@ -374,6 +375,10 @@ var actions = {
   LOADING_TOKEN_PARAMS_STARTED: 'LOADING_TOKEN_PARAMS_STARTED',
   loadingTokenParamsFinished,
   LOADING_TOKEN_PARAMS_FINISHED: 'LOADING_TOKEN_PARAMS_FINISHED',
+
+  setSeedPhraseBackedUp,
+  verifySeedPhrase,
+  SET_SEED_PHRASE_BACKED_UP_TO_TRUE: 'SET_SEED_PHRASE_BACKED_UP_TO_TRUE',
 }
 
 module.exports = actions
@@ -446,44 +451,18 @@ function transitionBackward () {
   }
 }
 
-function confirmSeedWords () {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.clearSeedWordCache`)
-    return new Promise((resolve, reject) => {
-      background.clearSeedWordCache((err, account) => {
-        dispatch(actions.hideLoadingIndication())
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        log.info('Seed word cache cleared. ' + account)
-        dispatch(actions.showAccountsPage())
-        resolve(account)
-      })
-    })
-  }
-}
-
 function createNewVaultAndRestore (password, seed) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.createNewVaultAndRestore`)
 
     return new Promise((resolve, reject) => {
-      background.clearSeedWordCache((err) => {
+      background.createNewVaultAndRestore(password, seed, (err) => {
         if (err) {
           return reject(err)
         }
 
-        background.createNewVaultAndRestore(password, seed, (err) => {
-          if (err) {
-            return reject(err)
-          }
-
-          resolve()
-        })
+        resolve()
       })
     })
       .then(() => dispatch(actions.unMarkPasswordForgotten()))
@@ -499,36 +478,6 @@ function createNewVaultAndRestore (password, seed) {
   }
 }
 
-function createNewVaultAndKeychain (password) {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.createNewVaultAndKeychain`)
-
-    return new Promise((resolve, reject) => {
-      background.createNewVaultAndKeychain(password, err => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        log.debug(`background.placeSeedWords`)
-
-        background.placeSeedWords((err) => {
-          if (err) {
-            dispatch(actions.displayWarning(err.message))
-            return reject(err)
-          }
-
-          resolve()
-        })
-      })
-    })
-      .then(() => forceUpdateMetamaskState(dispatch))
-      .then(() => dispatch(actions.hideLoadingIndication()))
-      .catch(() => dispatch(actions.hideLoadingIndication()))
-  }
-}
-
 function createNewVaultAndGetSeedPhrase (password) {
   return async dispatch => {
     dispatch(actions.showLoadingIndication())
@@ -618,33 +567,6 @@ function verifySeedPhrase () {
   })
 }
 
-function requestRevealSeed (password) {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    log.debug(`background.submitPassword`)
-    return new Promise((resolve, reject) => {
-      background.submitPassword(password, err => {
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        log.debug(`background.placeSeedWords`)
-        background.placeSeedWords((err, result) => {
-          if (err) {
-            dispatch(actions.displayWarning(err.message))
-            return reject(err)
-          }
-
-          dispatch(actions.showNewVaultSeed(result))
-          dispatch(actions.hideLoadingIndication())
-          resolve()
-        })
-      })
-    })
-  }
-}
-
 function requestRevealSeedWords (password) {
   return async dispatch => {
     dispatch(actions.showLoadingIndication())
@@ -875,22 +797,22 @@ function showInfoPage () {
 function showQrScanner (ROUTE) {
   return (dispatch) => {
     return WebcamUtils.checkStatus()
-    .then(status => {
-      if (!status.environmentReady) {
-         // We need to switch to fullscreen mode to ask for permission
-         global.platform.openExtensionInBrowser(`${ROUTE}`, `scan=true`)
-      } else {
+      .then(status => {
+        if (!status.environmentReady) {
+          // We need to switch to fullscreen mode to ask for permission
+          global.platform.openExtensionInBrowser(`${ROUTE}`, `scan=true`)
+        } else {
+          dispatch(actions.showModal({
+            name: 'QR_SCANNER',
+          }))
+        }
+      }).catch(e => {
         dispatch(actions.showModal({
           name: 'QR_SCANNER',
+          error: true,
+          errorType: e.type,
         }))
-      }
-    }).catch(e => {
-      dispatch(actions.showModal({
-        name: 'QR_SCANNER',
-        error: true,
-        errorType: e.type,
-      }))
-    })
+      })
   }
 }
 
@@ -918,7 +840,7 @@ function setCurrentCurrency (currencyCode) {
 
 function signMsg (msgData) {
   log.debug('action - signMsg')
-  return (dispatch, getState) => {
+  return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     window.onbeforeunload = null
 
@@ -936,11 +858,7 @@ function signMsg (msgData) {
         }
 
         dispatch(actions.completedTx(msgData.metamaskId))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
+        dispatch(closeCurrentNotificationWindow())
 
         return resolve(msgData)
       })
@@ -950,7 +868,7 @@ function signMsg (msgData) {
 
 function signPersonalMsg (msgData) {
   log.debug('action - signPersonalMsg')
-  return (dispatch, getState) => {
+  return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     window.onbeforeunload = null
     return new Promise((resolve, reject) => {
@@ -967,11 +885,7 @@ function signPersonalMsg (msgData) {
         }
 
         dispatch(actions.completedTx(msgData.metamaskId))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
+        dispatch(closeCurrentNotificationWindow())
 
         return resolve(msgData)
       })
@@ -981,7 +895,7 @@ function signPersonalMsg (msgData) {
 
 function signTypedMsg (msgData) {
   log.debug('action - signTypedMsg')
-  return (dispatch, getState) => {
+  return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     window.onbeforeunload = null
     return new Promise((resolve, reject) => {
@@ -998,11 +912,7 @@ function signTypedMsg (msgData) {
         }
 
         dispatch(actions.completedTx(msgData.metamaskId))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
+        dispatch(closeCurrentNotificationWindow())
 
         return resolve(msgData)
       })
@@ -1063,17 +973,17 @@ function updateGasData ({
       estimateGasPrice: gasPrice,
       data,
     })
-    .then(gas => {
-      dispatch(actions.setGasLimit(gas))
-      dispatch(gasDuck.setCustomGasLimit(gas))
-      dispatch(updateSendErrors({ gasLoadingError: null }))
-      dispatch(actions.gasLoadingFinished())
-    })
-    .catch(err => {
-      log.error(err)
-      dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' }))
-      dispatch(actions.gasLoadingFinished())
-    })
+      .then(gas => {
+        dispatch(actions.setGasLimit(gas))
+        dispatch(gasDuck.setCustomGasLimit(gas))
+        dispatch(updateSendErrors({ gasLoadingError: null }))
+        dispatch(actions.gasLoadingFinished())
+      })
+      .catch(err => {
+        log.error(err)
+        dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' }))
+        dispatch(actions.gasLoadingFinished())
+      })
   }
 }
 
@@ -1181,6 +1091,20 @@ function clearSend () {
   }
 }
 
+function updateSendEnsResolution (ensResolution) {
+  return {
+    type: actions.UPDATE_SEND_ENS_RESOLUTION,
+    payload: ensResolution,
+  }
+}
+
+function updateSendEnsResolutionError (errorMessage) {
+  return {
+    type: actions.UPDATE_SEND_ENS_RESOLUTION_ERROR,
+    payload: errorMessage,
+  }
+}
+
 
 function sendTx (txData) {
   log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
@@ -1215,6 +1139,20 @@ function signTokenTx (tokenAddress, toAddress, amount, txData) {
   }
 }
 
+const updateMetamaskStateFromBackground = () => {
+  log.debug(`background.getState`)
+
+  return new Promise((resolve, reject) => {
+    background.getState((error, newState) => {
+      if (error) {
+        return reject(error)
+      }
+
+      resolve(newState)
+    })
+  })
+}
+
 function updateTransaction (txData) {
   log.info('actions: updateTx: ' + JSON.stringify(txData))
   return dispatch => {
@@ -1234,9 +1172,9 @@ function updateTransaction (txData) {
         resolve(txData)
       })
     })
-    .then(() => updateMetamaskStateFromBackground())
-    .then(newState => dispatch(actions.updateMetamaskState(newState)))
-    .then(() => {
+      .then(() => updateMetamaskStateFromBackground())
+      .then(newState => dispatch(actions.updateMetamaskState(newState)))
+      .then(() => {
         dispatch(actions.showConfTxPage({ id: txData.id }))
         dispatch(actions.hideLoadingIndication())
         return txData
@@ -1246,7 +1184,7 @@ function updateTransaction (txData) {
 
 function updateAndApproveTx (txData) {
   log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
-  return (dispatch, getState) => {
+  return (dispatch) => {
     log.debug(`actions calling background.updateAndApproveTx`)
     dispatch(actions.showLoadingIndication())
     window.onbeforeunload = null
@@ -1271,11 +1209,7 @@ function updateAndApproveTx (txData) {
         dispatch(actions.clearSend())
         dispatch(actions.completedTx(txData.id))
         dispatch(actions.hideLoadingIndication())
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
+        dispatch(closeCurrentNotificationWindow())
 
         return txData
       })
@@ -1309,7 +1243,7 @@ function txError (err) {
 }
 
 function cancelMsg (msgData) {
-  return (dispatch, getState) => {
+  return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     window.onbeforeunload = null
     return new Promise((resolve, reject) => {
@@ -1323,11 +1257,7 @@ function cancelMsg (msgData) {
         }
 
         dispatch(actions.completedTx(msgData.id))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
+        dispatch(closeCurrentNotificationWindow())
 
         return resolve(msgData)
       })
@@ -1336,7 +1266,7 @@ function cancelMsg (msgData) {
 }
 
 function cancelPersonalMsg (msgData) {
-  return (dispatch, getState) => {
+  return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     window.onbeforeunload = null
     return new Promise((resolve, reject) => {
@@ -1350,11 +1280,7 @@ function cancelPersonalMsg (msgData) {
         }
 
         dispatch(actions.completedTx(id))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
+        dispatch(closeCurrentNotificationWindow())
 
         return resolve(msgData)
       })
@@ -1363,7 +1289,7 @@ function cancelPersonalMsg (msgData) {
 }
 
 function cancelTypedMsg (msgData) {
-  return (dispatch, getState) => {
+  return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     window.onbeforeunload = null
     return new Promise((resolve, reject) => {
@@ -1377,11 +1303,7 @@ function cancelTypedMsg (msgData) {
         }
 
         dispatch(actions.completedTx(id))
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
+        dispatch(closeCurrentNotificationWindow())
 
         return resolve(msgData)
       })
@@ -1390,7 +1312,7 @@ function cancelTypedMsg (msgData) {
 }
 
 function cancelTx (txData) {
-  return (dispatch, getState) => {
+  return (dispatch) => {
     log.debug(`background.cancelTransaction`)
     dispatch(actions.showLoadingIndication())
     window.onbeforeunload = null
@@ -1409,11 +1331,7 @@ function cancelTx (txData) {
         dispatch(actions.clearSend())
         dispatch(actions.completedTx(txData.id))
         dispatch(actions.hideLoadingIndication())
-
-        if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
-          !hasUnconfirmedTransactions(getState())) {
-          return global.platform.closeCurrentWindow()
-        }
+        dispatch(closeCurrentNotificationWindow())
 
         return txData
       })
@@ -1467,7 +1385,9 @@ function cancelAllTx (txsData) {
     txsData.forEach((txData, i) => {
       background.cancelTransaction(txData.id, () => {
         dispatch(actions.completedTx(txData.id))
-        i === txsData.length - 1 ? dispatch(actions.goHome()) : null
+        if (i === txsData.length - 1) {
+          dispatch(actions.goHome())
+        }
       })
     })
   }
@@ -1549,13 +1469,6 @@ function createNewVaultInProgress () {
   }
 }
 
-function showNewVaultSeed (seed) {
-  return {
-    type: actions.SHOW_NEW_VAULT_SEED,
-    value: seed,
-  }
-}
-
 function closeWelcomeScreen () {
   return {
     type: actions.CLOSE_WELCOME_SCREEN,
@@ -1623,20 +1536,6 @@ const backgroundSetLocked = () => {
   })
 }
 
-const updateMetamaskStateFromBackground = () => {
-  log.debug(`background.getState`)
-
-  return new Promise((resolve, reject) => {
-    background.getState((error, newState) => {
-      if (error) {
-        return reject(error)
-      }
-
-      resolve(newState)
-    })
-  })
-}
-
 function lockMetamask () {
   log.debug(`background.setLocked`)
 
@@ -1818,10 +1717,10 @@ function addTokens (tokens) {
       dispatch(actions.setSelectedToken(getTokenAddressFromTokenObject(tokens)))
       return Promise.all(
         Object
-        .entries(tokens)
-        .map(([_, { address, symbol, decimals }]) => (
-          dispatch(addToken(address, symbol, decimals))
-        ))
+          .entries(tokens)
+          .map(([_, { address, symbol, decimals }]) => (
+            dispatch(addToken(address, symbol, decimals))
+          ))
       )
     }
   }
@@ -1844,8 +1743,8 @@ function removeSuggestedTokens () {
         resolve(suggestedTokens)
       })
     })
-    .then(() => updateMetamaskStateFromBackground())
-    .then(suggestedTokens => dispatch(actions.updateMetamaskState({...suggestedTokens})))
+      .then(() => updateMetamaskStateFromBackground())
+      .then(suggestedTokens => dispatch(actions.updateMetamaskState({...suggestedTokens})))
   }
 }
 
@@ -1920,8 +1819,8 @@ function createCancelTransaction (txId, customGasPrice) {
         resolve(newState)
       })
     })
-    .then(newState => dispatch(actions.updateMetamaskState(newState)))
-    .then(() => newTxId)
+      .then(newState => dispatch(actions.updateMetamaskState(newState)))
+      .then(() => newTxId)
   }
 }
 
@@ -1942,8 +1841,8 @@ function createSpeedUpTransaction (txId, customGasPrice) {
         resolve(newState)
       })
     })
-    .then(newState => dispatch(actions.updateMetamaskState(newState)))
-    .then(() => newTx)
+      .then(newState => dispatch(actions.updateMetamaskState(newState)))
+      .then(() => newTx)
   }
 }
 
@@ -2037,27 +1936,42 @@ function setRpcTarget (newRpc, chainId, ticker = 'ETH', nickname) {
 function delRpcTarget (oldRpc) {
   return (dispatch) => {
     log.debug(`background.delRpcTarget: ${oldRpc}`)
-    background.delCustomRpc(oldRpc, (err) => {
-      if (err) {
-        log.error(err)
-        return dispatch(self.displayWarning('Had a problem removing network!'))
-      }
-      dispatch(actions.setSelectedToken())
+    return new Promise((resolve, reject) => {
+      background.delCustomRpc(oldRpc, (err) => {
+        if (err) {
+          log.error(err)
+          dispatch(self.displayWarning('Had a problem removing network!'))
+          return reject(err)
+        }
+        dispatch(actions.setSelectedToken())
+        resolve()
+      })
     })
   }
 }
 
-
 // Calls the addressBookController to add a new address.
-function addToAddressBook (recipient, nickname = '') {
+function addToAddressBook (recipient, nickname = '', memo = '') {
   log.debug(`background.addToAddressBook`)
-  return (dispatch) => {
-    background.setAddressBook(recipient, nickname, (err) => {
-      if (err) {
-        log.error(err)
-        return dispatch(self.displayWarning('Address book failed to update'))
-      }
-    })
+
+  return (dispatch, getState) => {
+    const chainId = getState().metamask.network
+    const set = background.setAddressBook(checksumAddress(recipient), nickname, chainId, memo)
+    if (!set) {
+      return dispatch(displayWarning('Address book failed to update'))
+    }
+  }
+}
+
+/**
+ * @description Calls the addressBookController to remove an existing address.
+ * @param {String} addressToRemove - Address of the entry to remove from the address book
+ */
+function removeFromAddressBook (addressToRemove) {
+  log.debug(`background.removeFromAddressBook`)
+
+  return () => {
+    background.removeFromAddressBook(checksumAddress(addressToRemove))
   }
 }
 
@@ -2096,6 +2010,23 @@ function hideModal (payload) {
   }
 }
 
+function closeCurrentNotificationWindow () {
+  return (dispatch, getState) => {
+    if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION &&
+      !hasUnconfirmedTransactions(getState())) {
+      global.platform.closeCurrentWindow()
+
+      dispatch(closeNotifacationWindow())
+    }
+  }
+}
+
+function closeNotifacationWindow () {
+  return {
+    type: actions.CLOSE_NOTIFICATION_WINDOW,
+  }
+}
+
 function showSidebar ({ transitionName, type, props }) {
   return {
     type: actions.SIDEBAR_OPEN,
@@ -2146,10 +2077,10 @@ function showLoadingIndication (message) {
 }
 
 function setHardwareWalletDefaultHdPath ({ device, path }) {
-    return {
-      type: actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH,
-      value: {device, path},
-    }
+  return {
+    type: actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH,
+    value: {device, path},
+  }
 }
 
 function hideLoadingIndication () {
@@ -2395,18 +2326,21 @@ function reshowQrCode (data, coin) {
   }
 }
 
-function shapeShiftRequest (query, options, cb) {
+function shapeShiftRequest (query, options = {}, cb) {
   var queryResponse, method
-  !options ? options = {} : null
   options.method ? method = options.method : method = 'GET'
 
   var requestListner = function () {
     try {
       queryResponse = JSON.parse(this.responseText)
-      cb ? cb(queryResponse) : null
+      if (cb) {
+        cb(queryResponse)
+      }
       return queryResponse
     } catch (e) {
-      cb ? cb({error: e}) : null
+      if (cb) {
+        cb({error: e})
+      }
       return e
     }
   }
@@ -2509,31 +2443,6 @@ function completeOnboarding () {
   }
 }
 
-function setCompletedUiMigration () {
-  return dispatch => {
-    dispatch(actions.showLoadingIndication())
-    return new Promise((resolve, reject) => {
-      background.completeUiMigration(err => {
-        dispatch(actions.hideLoadingIndication())
-
-        if (err) {
-          dispatch(actions.displayWarning(err.message))
-          return reject(err)
-        }
-
-        dispatch(actions.completeUiMigration())
-        resolve()
-      })
-    })
-  }
-}
-
-function completeUiMigration () {
-  return {
-    type: actions.COMPLETE_UI_MIGRATION,
-  }
-}
-
 function setNetworkNonce (networkNonce) {
   return {
     type: actions.SET_NETWORK_NONCE,
@@ -2734,6 +2643,12 @@ function approveProviderRequestByOrigin (origin) {
   }
 }
 
+function forceApproveProviderRequestByOrigin (origin) {
+  return () => {
+    background.forceApproveProviderRequestByOrigin(origin)
+  }
+}
+
 function rejectProviderRequestByOrigin (origin) {
   return () => {
     background.rejectProviderRequestByOrigin(origin)
@@ -2855,3 +2770,24 @@ function getTokenParams (tokenAddress) {
       })
   }
 }
+
+function unsetMigratedPrivacyMode () {
+  return () => {
+    background.unsetMigratedPrivacyMode()
+  }
+}
+
+function setSeedPhraseBackedUp (seedPhraseBackupState) {
+  return (dispatch) => {
+    log.debug(`background.setSeedPhraseBackedUp`)
+    return new Promise((resolve, reject) => {
+      background.setSeedPhraseBackedUp(seedPhraseBackupState, (err) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        return forceUpdateMetamaskState(dispatch).then(() => resolve())
+      })
+    })
+  }
+}
diff --git a/ui/app/store/store.js b/ui/app/store/store.js
index 9f12f469e..2edb6a7d3 100644
--- a/ui/app/store/store.js
+++ b/ui/app/store/store.js
@@ -1,21 +1,18 @@
-const createStore = require('redux').createStore
-const applyMiddleware = require('redux').applyMiddleware
-const thunkMiddleware = require('redux-thunk').default
+const { createStore, applyMiddleware } = require('redux')
+const { default: thunkMiddleware } = require('redux-thunk')
+const { composeWithDevTools } = require('remote-redux-devtools')
 const rootReducer = require('../ducks')
-const createLogger = require('redux-logger').createLogger
 
-global.METAMASK_DEBUG = process.env.METAMASK_DEBUG
-
-module.exports = configureStore
-
-const loggerMiddleware = createLogger({
-  predicate: () => global.METAMASK_DEBUG,
-})
-
-const middlewares = [thunkMiddleware, loggerMiddleware]
-
-const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore)
-
-function configureStore (initialState) {
-  return createStoreWithMiddleware(rootReducer, initialState)
+module.exports = function configureStore (initialState) {
+  const composeEnhancers = composeWithDevTools({
+    name: 'MetaMask',
+    hostname: 'localhost',
+    port: 8000,
+    realtime: Boolean(process.env.METAMASK_DEBUG),
+  })
+  return createStore(rootReducer, initialState, composeEnhancers(
+    applyMiddleware(
+      thunkMiddleware,
+    ),
+  ))
 }
diff --git a/ui/css.js b/ui/css.js
deleted file mode 100644
index d8f954434..000000000
--- a/ui/css.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-
-module.exports = bundleCss
-
-var cssFiles = {
-  'index.css': fs.readFileSync(path.join(__dirname, '/app/css/output/index.css'), 'utf8'),
-  'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'),
-  'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8'),
-}
-
-function bundleCss () {
-  var cssBundle = Object.keys(cssFiles).reduce(function (bundle, fileName) {
-    var fileContent = cssFiles[fileName]
-    var output = String()
-
-    output += '/*========== ' + fileName + ' ==========*/\n\n'
-    output += fileContent
-    output += '\n\n'
-
-    return bundle + output
-  }, String())
-
-  return cssBundle
-}
diff --git a/ui/design/00-metamask-SignIn.jpg b/ui/design/00-metamask-SignIn.jpg
index 2becdb032..d6f0d346e 100644
--- a/ui/design/00-metamask-SignIn.jpg
+++ b/ui/design/00-metamask-SignIn.jpg
diff --git a/ui/design/01-metamask-SelectAcc.jpg b/ui/design/01-metamask-SelectAcc.jpg
index 239091a98..250e62f5e 100644
--- a/ui/design/01-metamask-SelectAcc.jpg
+++ b/ui/design/01-metamask-SelectAcc.jpg
diff --git a/ui/design/02-metamask-AccDetails.jpg b/ui/design/02-metamask-AccDetails.jpg
index d7d408ffc..618498936 100644
--- a/ui/design/02-metamask-AccDetails.jpg
+++ b/ui/design/02-metamask-AccDetails.jpg
diff --git a/ui/design/02a-metamask-AccDetails-OverToken.jpg b/ui/design/02a-metamask-AccDetails-OverToken.jpg
index f26ff31e8..69ac74406 100644
--- a/ui/design/02a-metamask-AccDetails-OverToken.jpg
+++ b/ui/design/02a-metamask-AccDetails-OverToken.jpg
diff --git a/ui/design/02a-metamask-AccDetails-OverTransaction.jpg b/ui/design/02a-metamask-AccDetails-OverTransaction.jpg
index 8a06be6b9..a2d32e57f 100644
--- a/ui/design/02a-metamask-AccDetails-OverTransaction.jpg
+++ b/ui/design/02a-metamask-AccDetails-OverTransaction.jpg
diff --git a/ui/design/02a-metamask-AccDetails.jpg b/ui/design/02a-metamask-AccDetails.jpg
index c37e0f539..5e915f757 100644
--- a/ui/design/02a-metamask-AccDetails.jpg
+++ b/ui/design/02a-metamask-AccDetails.jpg
diff --git a/ui/design/02b-metamask-AccDetails-Send.jpg b/ui/design/02b-metamask-AccDetails-Send.jpg
index 10f2d27fd..47a49f161 100644
--- a/ui/design/02b-metamask-AccDetails-Send.jpg
+++ b/ui/design/02b-metamask-AccDetails-Send.jpg
diff --git a/ui/design/03-metamask-Qr.jpg b/ui/design/03-metamask-Qr.jpg
index 9c09de42f..0f13673b0 100644
--- a/ui/design/03-metamask-Qr.jpg
+++ b/ui/design/03-metamask-Qr.jpg
diff --git a/ui/design/05-metamask-Menu.jpg b/ui/design/05-metamask-Menu.jpg
index 0a43d7b2a..df66f3032 100644
--- a/ui/design/05-metamask-Menu.jpg
+++ b/ui/design/05-metamask-Menu.jpg
diff --git a/ui/design/chromeStorePics/final_screen_dao_accounts.png b/ui/design/chromeStorePics/final_screen_dao_accounts.png
index 805cc96b6..9d79c3934 100644
--- a/ui/design/chromeStorePics/final_screen_dao_accounts.png
+++ b/ui/design/chromeStorePics/final_screen_dao_accounts.png
diff --git a/ui/design/chromeStorePics/final_screen_dao_locked.png b/ui/design/chromeStorePics/final_screen_dao_locked.png
index 9d9e33930..011b0ef6e 100644
--- a/ui/design/chromeStorePics/final_screen_dao_locked.png
+++ b/ui/design/chromeStorePics/final_screen_dao_locked.png
diff --git a/ui/design/chromeStorePics/final_screen_dao_notification.png b/ui/design/chromeStorePics/final_screen_dao_notification.png
index d56a5ce62..cc73b3690 100644
--- a/ui/design/chromeStorePics/final_screen_dao_notification.png
+++ b/ui/design/chromeStorePics/final_screen_dao_notification.png
diff --git a/ui/design/chromeStorePics/final_screen_wei_account.png b/ui/design/chromeStorePics/final_screen_wei_account.png
index d503ff301..2f0cf000e 100644
--- a/ui/design/chromeStorePics/final_screen_wei_account.png
+++ b/ui/design/chromeStorePics/final_screen_wei_account.png
diff --git a/ui/design/chromeStorePics/final_screen_wei_notification.png b/ui/design/chromeStorePics/final_screen_wei_notification.png
index 3560c51ff..c95ffed10 100644
--- a/ui/design/chromeStorePics/final_screen_wei_notification.png
+++ b/ui/design/chromeStorePics/final_screen_wei_notification.png
diff --git a/ui/design/chromeStorePics/icon-128.png b/ui/design/chromeStorePics/icon-128.png
index ae687147d..754b4cc79 100644
--- a/ui/design/chromeStorePics/icon-128.png
+++ b/ui/design/chromeStorePics/icon-128.png
diff --git a/ui/design/chromeStorePics/icon-64.png b/ui/design/chromeStorePics/icon-64.png
index 7062cf4f1..f964b01d6 100644
--- a/ui/design/chromeStorePics/icon-64.png
+++ b/ui/design/chromeStorePics/icon-64.png
diff --git a/ui/design/chromeStorePics/promo1400560.png b/ui/design/chromeStorePics/promo1400560.png
index d3637ecc8..9ada2622e 100644
--- a/ui/design/chromeStorePics/promo1400560.png
+++ b/ui/design/chromeStorePics/promo1400560.png
diff --git a/ui/design/chromeStorePics/promo440280.png b/ui/design/chromeStorePics/promo440280.png
index c1f92b1c0..599b53a01 100644
--- a/ui/design/chromeStorePics/promo440280.png
+++ b/ui/design/chromeStorePics/promo440280.png
diff --git a/ui/design/chromeStorePics/promo920680.png b/ui/design/chromeStorePics/promo920680.png
index 726bd810a..58c343ff0 100644
--- a/ui/design/chromeStorePics/promo920680.png
+++ b/ui/design/chromeStorePics/promo920680.png
diff --git a/ui/design/chromeStorePics/screen_dao_accounts.png b/ui/design/chromeStorePics/screen_dao_accounts.png
index 1a2e8052c..2b3c75e3e 100644
--- a/ui/design/chromeStorePics/screen_dao_accounts.png
+++ b/ui/design/chromeStorePics/screen_dao_accounts.png
diff --git a/ui/design/chromeStorePics/screen_dao_locked.png b/ui/design/chromeStorePics/screen_dao_locked.png
index 6592c17e4..d865abdd6 100644
--- a/ui/design/chromeStorePics/screen_dao_locked.png
+++ b/ui/design/chromeStorePics/screen_dao_locked.png
diff --git a/ui/design/chromeStorePics/screen_dao_notification.png b/ui/design/chromeStorePics/screen_dao_notification.png
index baeb2ec39..4ae489540 100644
--- a/ui/design/chromeStorePics/screen_dao_notification.png
+++ b/ui/design/chromeStorePics/screen_dao_notification.png
diff --git a/ui/design/chromeStorePics/screen_wei_account.png b/ui/design/chromeStorePics/screen_wei_account.png
index 23301e4bf..80fea67c8 100644
--- a/ui/design/chromeStorePics/screen_wei_account.png
+++ b/ui/design/chromeStorePics/screen_wei_account.png
diff --git a/ui/design/metamask-logo-eyes.png b/ui/design/metamask-logo-eyes.png
index c29331b28..b439a0122 100644
--- a/ui/design/metamask-logo-eyes.png
+++ b/ui/design/metamask-logo-eyes.png
diff --git a/ui/design/wireframes/metamask_wfs_jan_13.png b/ui/design/wireframes/metamask_wfs_jan_13.png
index d71d7bdb4..e13be18b7 100644
--- a/ui/design/wireframes/metamask_wfs_jan_13.png
+++ b/ui/design/wireframes/metamask_wfs_jan_13.png
diff --git a/ui/example.js b/ui/example.js
deleted file mode 100644
index d940d3bc8..000000000
--- a/ui/example.js
+++ /dev/null
@@ -1,123 +0,0 @@
-const injectCss = require('inject-css')
-const MetaMaskUi = require('./index.js')
-const MetaMaskUiCss = require('./css.js')
-const EventEmitter = require('events').EventEmitter
-
-// account management
-
-var identities = {
-  '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111': {
-    name: 'Walrus',
-    img: 'QmW6hcwYzXrNkuHrpvo58YeZvbZxUddv69ATSHY3BHpPdd',
-    address: '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111',
-    balance: 220,
-    txCount: 4,
-  },
-  '0x222462427bcc9133bb46e88bcbe39cd7ef0e7222': {
-    name: 'Tardus',
-    img: 'QmQYaRdrf2EhRhJWaHnts8Meu1mZiXrNib5W1P6cYmXWRL',
-    address: '0x222462427bcc9133bb46e88bcbe39cd7ef0e7222',
-    balance: 10.005,
-    txCount: 16,
-  },
-  '0x333462427bcc9133bb46e88bcbe39cd7ef0e7333': {
-    name: 'Gambler',
-    img: 'QmW6hcwYzXrNkuHrpvo58YeZvbZxUddv69ATSHY3BHpPdd',
-    address: '0x333462427bcc9133bb46e88bcbe39cd7ef0e7333',
-    balance: 0.000001,
-    txCount: 1,
-  },
-}
-
-var unapprovedTxs = {}
-addUnconfTx({
-  from: '0x222462427bcc9133bb46e88bcbe39cd7ef0e7222',
-  to: '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111',
-  value: '0x123',
-})
-addUnconfTx({
-  from: '0x1113462427bcc9133bb46e88bcbe39cd7ef0e111',
-  to: '0x333462427bcc9133bb46e88bcbe39cd7ef0e7333',
-  value: '0x0000',
-  data: '0x000462427bcc9133bb46e88bcbe39cd7ef0e7000',
-})
-
-function addUnconfTx (txParams) {
-  var time = (new Date()).getTime()
-  var id = createRandomId()
-  unapprovedTxs[id] = {
-    id: id,
-    txParams: txParams,
-    time: time,
-  }
-}
-
-var isUnlocked = false
-var selectedAccount = null
-
-function getState () {
-  return {
-    isUnlocked: isUnlocked,
-    identities: isUnlocked ? identities : {},
-    unapprovedTxs: isUnlocked ? unapprovedTxs : {},
-    selectedAccount: selectedAccount,
-  }
-}
-
-var accountManager = new EventEmitter()
-
-accountManager.getState = function (cb) {
-  cb(null, getState())
-}
-
-accountManager.setLocked = function () {
-  isUnlocked = false
-  this._didUpdate()
-}
-
-accountManager.submitPassword = function (password, cb) {
-  if (password === 'test') {
-    isUnlocked = true
-    cb(null, getState())
-    this._didUpdate()
-  } else {
-    cb(new Error('Bad password -- try "test"'))
-  }
-}
-
-accountManager.setSelectedAccount = function (address, cb) {
-  selectedAccount = address
-  cb(null, getState())
-  this._didUpdate()
-}
-
-accountManager.signTransaction = function () {
-  alert('signing tx....')
-}
-
-accountManager._didUpdate = function () {
-  this.emit('update', getState())
-}
-
-// start app
-
-var container = document.getElementById('app-content')
-
-var css = MetaMaskUiCss()
-injectCss(css)
-
-MetaMaskUi({
-  container: container,
-  accountManager: accountManager,
-})
-
-// util
-
-function createRandomId () {
-  // 13 time digits
-  var datePart = new Date().getTime() * Math.pow(10, 3)
-  // 3 random digits
-  var extraPart = Math.floor(Math.random() * Math.pow(10, 3))
-  // 16 digits
-  return datePart + extraPart
-}
diff --git a/ui/index.js b/ui/index.js
index ac860e0db..db9292761 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -12,19 +12,19 @@ module.exports = launchMetamaskUi
 log.setLevel(global.METAMASK_DEBUG ? 'debug' : 'warn')
 
 function launchMetamaskUi (opts, cb) {
-  var accountManager = opts.accountManager
-  actions._setBackgroundConnection(accountManager)
+  var {backgroundConnection} = opts
+  actions._setBackgroundConnection(backgroundConnection)
   // check if we are unlocked first
-  accountManager.getState(function (err, metamaskState) {
+  backgroundConnection.getState(function (err, metamaskState) {
     if (err) return cb(err)
-    startApp(metamaskState, accountManager, opts)
+    startApp(metamaskState, backgroundConnection, opts)
       .then((store) => {
         cb(null, store)
       })
   })
 }
 
-async function startApp (metamaskState, accountManager, opts) {
+async function startApp (metamaskState, backgroundConnection, opts) {
   // parse opts
   if (!metamaskState.featureFlags) metamaskState.featureFlags = {}
 
@@ -34,6 +34,7 @@ async function startApp (metamaskState, accountManager, opts) {
   const enLocaleMessages = await fetchLocale('en')
 
   const store = configureStore({
+    activeTab: opts.activeTab,
 
     // metamaskState represents the cross-tab state
     metamask: metamaskState,
@@ -59,7 +60,7 @@ async function startApp (metamaskState, accountManager, opts) {
     }))
   }
 
-  accountManager.on('update', function (metamaskState) {
+  backgroundConnection.on('update', function (metamaskState) {
     store.dispatch(actions.updateMetamaskState(metamaskState))
   })
 
@@ -79,7 +80,7 @@ async function startApp (metamaskState, accountManager, opts) {
       // inject initial state
       store: store,
     }
-  ), opts.container)
+    ), opts.container)
 
   return store
 }
diff --git a/ui/lib/webcam-utils.js b/ui/lib/webcam-utils.js
index eb717b23a..bd7a5a0e0 100644
--- a/ui/lib/webcam-utils.js
+++ b/ui/lib/webcam-utils.js
@@ -14,16 +14,16 @@ class WebcamUtils {
       try {
         DetectRTC.load(_ => {
           if (DetectRTC.hasWebcam) {
-              let environmentReady = true
-              if ((isFirefoxOrBrave && isPopup) || (isPopup && !DetectRTC.isWebsiteHasWebcamPermissions)) {
-                environmentReady = false
-              }
-              resolve({
-                permissions: DetectRTC.isWebsiteHasWebcamPermissions,
-                environmentReady,
-              })
+            let environmentReady = true
+            if ((isFirefoxOrBrave && isPopup) || (isPopup && !DetectRTC.isWebsiteHasWebcamPermissions)) {
+              environmentReady = false
+            }
+            resolve({
+              permissions: DetectRTC.isWebsiteHasWebcamPermissions,
+              environmentReady,
+            })
           } else {
-              reject({type: 'NO_WEBCAM_FOUND'})
+            reject({type: 'NO_WEBCAM_FOUND'})
           }
         })
       } catch (e) {