Merge branch 'master' into mascara-deploy

186 files changed, 21366 insertions, 9237 deletions

diff --git a/ui/app/account-and-transaction-details.js b/ui/app/account-and-transaction-details.js
new file mode 100644
index 000000000..03101d37a
--- /dev/null
+++ b/ui/app/account-and-transaction-details.js
@@ -0,0 +1,33 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+// Main Views
+const TxView = require('./components/tx-view')
+const WalletView = require('./components/wallet-view')
+
+module.exports = AccountAndTransactionDetails
+
+inherits(AccountAndTransactionDetails, Component)
+function AccountAndTransactionDetails () {
+  Component.call(this)
+}
+
+AccountAndTransactionDetails.prototype.render = function () {
+  return h('div.account-and-transaction-details', [
+    // wallet
+    h(WalletView, {
+      style: {
+      },
+      responsiveDisplayClassname: '.lap-visible',
+    }, [
+    ]),
+
+    // transaction
+    h(TxView, {
+      style: {
+      },
+    }, [
+    ]),
+  ])
+}
+
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 018e74893..0da435298 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -3,20 +3,13 @@ const extend = require('xtend')
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const CopyButton = require('./components/copyButton')
-const AccountInfoLink = require('./components/account-info-link')
 const actions = require('./actions')
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const valuesFor = require('./util').valuesFor
-
-const Identicon = require('./components/identicon')
-const EthBalance = require('./components/eth-balance')
 const TransactionList = require('./components/transaction-list')
 const ExportAccountView = require('./components/account-export')
-const ethUtil = require('ethereumjs-util')
-const EditableLabel = require('./components/editable-label')
-const Tooltip = require('./components/tooltip')
-const BuyButtonSubview = require('./components/buy-button-subview')
+const TabBar = require('./components/tab-bar')
+const TokenList = require('./components/token-list')
+
 module.exports = connect(mapStateToProps)(AccountDetailScreen)
 
 function mapStateToProps (state) {
@@ -30,6 +23,11 @@ function mapStateToProps (state) {
     unapprovedMsgs: valuesFor(state.metamask.unapprovedMsgs),
     shapeShiftTxList: state.metamask.shapeShiftTxList,
     transactions: state.metamask.selectedAddressTxList || [],
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
+    currentAccountTab: state.metamask.currentAccountTab,
+    tokens: state.metamask.tokens,
+    computedBalances: state.metamask.computedBalances,
   }
 }
 
@@ -38,191 +36,11 @@ function AccountDetailScreen () {
   Component.call(this)
 }
 
-AccountDetailScreen.prototype.render = function () {
-  var props = this.props
-  var selected = props.address || Object.keys(props.accounts)[0]
-  var checksumAddress = selected && ethUtil.toChecksumAddress(selected)
-  var identity = props.identities[selected]
-  var account = props.accounts[selected]
-  const { network } = props
-
-  return (
-
-    h('.account-detail-section', [
-
-      // identicon, label, balance, etc
-      h('.account-data-subsection', {
-        style: {
-          margin: '0 20px',
-        },
-      }, [
-
-        // header - identicon + nav
-        h('div', {
-          style: {
-            paddingTop: '20px',
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'flex-start',
-          },
-        }, [
-
-          // large identicon and addresses
-          h('.identicon-wrapper.select-none', [
-            h(Identicon, {
-              diameter: 62,
-              address: selected,
-            }),
-          ]),
-          h('flex-column', {
-            style: {
-              lineHeight: '10px',
-              marginLeft: '15px',
-            },
-          }, [
-            h(EditableLabel, {
-              textValue: identity ? identity.name : '',
-              state: {
-                isEditingLabel: false,
-              },
-              saveText: (text) => {
-                props.dispatch(actions.saveAccountLabel(selected, text))
-              },
-            }, [
-
-              // What is shown when not editing + edit text:
-              h('label.editing-label', [h('.edit-text', 'edit')]),
-              h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name),
-            ]),
-            h('.flex-row', {
-              style: {
-                width: '15em',
-                justifyContent: 'space-between',
-                alignItems: 'baseline',
-              },
-            }, [
-
-              // address
-
-              h('div', {
-                style: {
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  paddingTop: '3px',
-                  width: '5em',
-                  fontSize: '13px',
-                  fontFamily: 'Montserrat Light',
-                  textRendering: 'geometricPrecision',
-                  marginTop: '10px',
-                  marginBottom: '15px',
-                  color: '#AEAEAE',
-                },
-              }, checksumAddress),
-
-              // copy and export
-
-              h('.flex-row', {
-                style: {
-                  justifyContent: 'flex-end',
-                },
-              }, [
-
-                h(AccountInfoLink, { selected, network }),
-
-                h(CopyButton, {
-                  value: checksumAddress,
-                }),
-
-                h(Tooltip, {
-                  title: 'QR Code',
-                }, [
-                  h('i.fa.fa-qrcode.pointer.pop-hover', {
-                    onClick: () => props.dispatch(actions.showQrView(selected, identity ? identity.name : '')),
-                    style: {
-                      fontSize: '18px',
-                      position: 'relative',
-                      color: 'rgb(247, 134, 28)',
-                      top: '5px',
-                      marginLeft: '3px',
-                      marginRight: '3px',
-                    },
-                  }),
-                ]),
-
-                h(Tooltip, {
-                  title: 'Export Private Key',
-                }, [
-                  h('div', {
-                    style: {
-                      display: 'flex',
-                      alignItems: 'center',
-                    },
-                  }, [
-                    h('img.cursor-pointer.color-orange', {
-                      src: 'images/key-32.png',
-                      onClick: () => this.requestAccountExport(selected),
-                      style: {
-                        height: '19px',
-                      },
-                    }),
-                  ]),
-                ]),
-              ]),
-            ]),
-
-            // account ballence
-
-          ]),
-        ]),
-        h('.flex-row', {
-          style: {
-            justifyContent: 'space-between',
-            alignItems: 'flex-start',
-          },
-        }, [
-
-          h(EthBalance, {
-            value: account && account.balance,
-            style: {
-              lineHeight: '7px',
-              marginTop: '10px',
-            },
-          }),
-
-          h('button', {
-            onClick: () => props.dispatch(actions.buyEthView(selected)),
-            style: {
-              marginBottom: '20px',
-              marginRight: '8px',
-              position: 'absolute',
-              left: '219px',
-            },
-          }, 'BUY'),
-
-          h('button', {
-            onClick: () => props.dispatch(actions.showSendPage()),
-            style: {
-              marginBottom: '20px',
-              marginRight: '8px',
-            },
-          }, 'SEND'),
-
-        ]),
-      ]),
-
-      // subview (tx history, pk export confirm, buy eth warning)
-      h(ReactCSSTransitionGroup, {
-        className: 'css-transition-group',
-        transitionName: 'main',
-        transitionEnterTimeout: 300,
-        transitionLeaveTimeout: 300,
-      }, [
-        this.subview(),
-      ]),
-
-    ])
-  )
-}
+// Note: This component is no longer used. Leaving the file for reference:
+//   - structuring routing for add token
+//   - state required for TxList
+// Delete file when those features are complete
+AccountDetailScreen.prototype.render = function () {}
 
 AccountDetailScreen.prototype.subview = function () {
   var subview
@@ -234,23 +52,62 @@ AccountDetailScreen.prototype.subview = function () {
 
   switch (subview) {
     case 'transactions':
-      return this.transactionList()
+      return this.tabSections()
     case 'export':
       var state = extend({key: 'export'}, this.props)
       return h(ExportAccountView, state)
-    case 'buyForm':
-      return h(BuyButtonSubview, extend({key: 'buyForm'}, this.props))
+    default:
+      return this.tabSections()
+  }
+}
+
+AccountDetailScreen.prototype.tabSections = function () {
+  const { currentAccountTab } = this.props
+
+  return h('section.tabSection.full-flex-height.grow-tenx', [
+
+    h(TabBar, {
+      tabs: [
+        { content: 'Sent', key: 'history' },
+        { content: 'Tokens', key: 'tokens' },
+      ],
+      defaultTab: currentAccountTab || 'history',
+      tabSelected: (key) => {
+        this.props.dispatch(actions.setCurrentAccountTab(key))
+      },
+    }),
+
+    this.tabSwitchView(),
+  ])
+}
+
+AccountDetailScreen.prototype.tabSwitchView = function () {
+  const props = this.props
+  const { address, network } = props
+  const { currentAccountTab, tokens } = this.props
+
+  switch (currentAccountTab) {
+    case 'tokens':
+      return h(TokenList, {
+        userAddress: address,
+        network,
+        tokens,
+        addToken: () => this.props.dispatch(actions.showAddTokenPage()),
+      })
     default:
       return this.transactionList()
   }
 }
 
 AccountDetailScreen.prototype.transactionList = function () {
-  const {transactions, unapprovedMsgs, address, network, shapeShiftTxList } = this.props
+  const {transactions, unapprovedMsgs, address,
+    network, shapeShiftTxList, conversionRate } = this.props
+
   return h(TransactionList, {
     transactions: transactions.sort((a, b) => b.time - a.time),
     network,
     unapprovedMsgs,
+    conversionRate,
     address,
     shapeShiftTxList,
     viewPendingTx: (txId) => {
@@ -258,19 +115,3 @@ AccountDetailScreen.prototype.transactionList = function () {
     },
   })
 }
-
-AccountDetailScreen.prototype.requestAccountExport = function () {
-  this.props.dispatch(actions.requestExportAccount())
-}
-
-
-AccountDetailScreen.prototype.buyButtonDeligator = function () {
-  var props = this.props
-  var selected = props.address || Object.keys(props.accounts)[0]
-
-  if (this.props.accountDetail.subview === 'buyForm') {
-    props.dispatch(actions.backToAccountDetail(props.address))
-  } else {
-    props.dispatch(actions.buyEthView(selected))
-  }
-}
diff --git a/ui/app/accounts/account-list-item.js b/ui/app/accounts/account-list-item.js
deleted file mode 100644
index 2a3c13d05..000000000
--- a/ui/app/accounts/account-list-item.js
+++ /dev/null
@@ -1,88 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const ethUtil = require('ethereumjs-util')
-
-const EthBalance = require('../components/eth-balance')
-const CopyButton = require('../components/copyButton')
-const Identicon = require('../components/identicon')
-
-module.exports = AccountListItem
-
-inherits(AccountListItem, Component)
-function AccountListItem () {
-  Component.call(this)
-}
-
-AccountListItem.prototype.render = function () {
-  const { identity, selectedAddress, accounts, onShowDetail } = this.props
-
-  const checksumAddress = identity && identity.address && ethUtil.toChecksumAddress(identity.address)
-  const isSelected = selectedAddress === identity.address
-  const account = accounts[identity.address]
-  const selectedClass = isSelected ? '.selected' : ''
-
-  return (
-    h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, {
-      key: `account-panel-${identity.address}`,
-      onClick: (event) => onShowDetail(identity.address, event),
-    }, [
-
-      h('.identicon-wrapper.flex-column.flex-center.select-none', [
-        this.pendingOrNot(),
-        this.indicateIfLoose(),
-        h(Identicon, {
-          address: identity.address,
-          imageify: true,
-        }),
-      ]),
-
-      // account address, balance
-      h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', {
-        style: {
-          width: '200px',
-        },
-      }, [
-        h('span', identity.name),
-        h('span.font-small', {
-          style: {
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          },
-        }, checksumAddress),
-        h(EthBalance, {
-          value: account && account.balance,
-          style: {
-            lineHeight: '7px',
-            marginTop: '10px',
-          },
-        }),
-      ]),
-
-      // copy button
-      h('.identity-copy.flex-column', {
-        style: {
-          margin: '0 20px',
-        },
-      }, [
-        h(CopyButton, {
-          value: checksumAddress,
-        }),
-      ]),
-    ])
-  )
-}
-
-AccountListItem.prototype.indicateIfLoose = function () {
-  try { // Sometimes keyrings aren't loaded yet:
-    const type = this.props.keyring.type
-    const isLoose = type !== 'HD Key Tree'
-    return isLoose ? h('.keyring-label', 'LOOSE') : null
-  } catch (e) { return }
-}
-
-AccountListItem.prototype.pendingOrNot = function () {
-  const pending = this.props.pending
-  if (pending.length === 0) return null
-  return h('.pending-dot', pending.length)
-}
diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
index 96350852a..71eb9ae23 100644
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@@ -33,26 +33,14 @@ AccountImportSubview.prototype.render = function () {
   const { type } = state
 
   return (
-    h('div', {
-      style: {
-      },
-    }, [
-      h('div', {
-        style: {
-          padding: '10px',
-          color: 'rgb(174, 174, 174)',
-        },
-      }, [
+    h('div.new-account-import-form', [
 
-        h('h3', { style: { padding: '3px' } }, 'SELECT TYPE'),
+      h('div.new-account-import-form__select-section', [
 
-        h('style', `
-          .has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label {
-            color: rgb(174,174,174);
-          }
-        `),
+        h('div.new-account-import-form__select-label', 'Select Type'),
 
         h(Select, {
+          className: 'new-account-import-form__select',
           name: 'import-type-select',
           clearable: false,
           value: type || menuItems[0],
@@ -66,6 +54,7 @@ AccountImportSubview.prototype.render = function () {
             this.setState({ type: opt.value })
           },
         }),
+
       ]),
 
       this.renderImportView(),
@@ -73,7 +62,7 @@ AccountImportSubview.prototype.render = function () {
   )
 }
 
-AccountImportSubview.prototype.renderImportView = function() {
+AccountImportSubview.prototype.renderImportView = function () {
   const props = this.props
   const state = this.state || {}
   const { type } = state
diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js
index 5ed31ab0a..dd5dfad22 100644
--- a/ui/app/accounts/import/json.js
+++ b/ui/app/accounts/import/json.js
@@ -5,6 +5,8 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const FileInput = require('react-simple-file-input').default
 
+const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
+
 module.exports = connect(mapStateToProps)(JsonImportSubview)
 
 function mapStateToProps (state) {
@@ -22,43 +24,44 @@ JsonImportSubview.prototype.render = function () {
   const { error } = this.props
 
   return (
-    h('div', {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        padding: '5px 15px 0px 15px',
-      },
-    }, [
+    h('div.new-account-import-form__json', [
 
       h('p', 'Used by a variety of different clients'),
+      h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
 
       h(FileInput, {
         readAs: 'text',
         onLoad: this.onLoad.bind(this),
         style: {
-          margin: '20px 0px 12px 20px',
+          margin: '20px 0px 12px 34%',
           fontSize: '15px',
+          display: 'flex',
+          justifyContent: 'center',
         },
       }),
 
-      h('input.large-input.letter-spacey', {
+      h('input.new-account-import-form__input-password', {
         type: 'password',
         placeholder: 'Enter password',
         id: 'json-password-box',
         onKeyPress: this.createKeyringOnEnter.bind(this),
-        style: {
-          width: 260,
-          marginTop: 12,
-        },
       }),
 
-      h('button.primary', {
-        onClick: this.createNewKeychain.bind(this),
-        style: {
-          margin: 12,
-        },
-      }, 'Import'),
+      h('div.new-account-create-form__buttons', {}, [
+
+        h('button.new-account-create-form__button-cancel', {
+          onClick: () => this.props.goHome(),
+        }, [
+          'CANCEL',
+        ]),
+
+        h('button.new-account-create-form__button-create', {
+          onClick: () => this.createNewKeychain.bind(this),
+        }, [
+          'IMPORT',
+        ]),
+
+      ]),
 
       error ? h('span.error', error) : null,
     ])
@@ -78,6 +81,12 @@ JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
 
 JsonImportSubview.prototype.createNewKeychain = function () {
   const state = this.state
+
+  if (!state) {
+    const message = 'You must select a valid file to import.'
+    return this.props.dispatch(actions.displayWarning(message))
+  }
+
   const { fileContents } = state
 
   if (!fileContents) {
diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js
index 68ccee58e..12f3a6430 100644
--- a/ui/app/accounts/import/private-key.js
+++ b/ui/app/accounts/import/private-key.js
@@ -4,7 +4,7 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 
-module.exports = connect(mapStateToProps)(PrivateKeyImportView)
+module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView)
 
 function mapStateToProps (state) {
   return {
@@ -12,41 +12,54 @@ function mapStateToProps (state) {
   }
 }
 
+function mapDispatchToProps (dispatch) {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+    importNewAccount: (strategy, [ privateKey ]) => {
+      dispatch(actions.importNewAccount(strategy, [ privateKey ]))
+    },
+    displayWarning: () => dispatch(actions.displayWarning(null)),
+  }
+}
+
 inherits(PrivateKeyImportView, Component)
 function PrivateKeyImportView () {
   Component.call(this)
 }
 
 PrivateKeyImportView.prototype.render = function () {
-  const { error } = this.props
+  const { error, goHome } = this.props
 
   return (
-    h('div', {
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        padding: '5px 15px 0px 15px',
-      },
-    }, [
-      h('span', 'Paste your private key string here'),
-
-      h('input.large-input.letter-spacey', {
-        type: 'password',
-        id: 'private-key-box',
-        onKeyPress: this.createKeyringOnEnter.bind(this),
-        style: {
-          width: 260,
-          marginTop: 12,
-        },
-      }),
-
-      h('button.primary', {
-        onClick: this.createNewKeychain.bind(this),
-        style: {
-          margin: 12,
-        },
-      }, 'Import'),
+    h('div.new-account-import-form__private-key', [
+
+      h('div.new-account-import-form__private-key-password-container', [
+
+        h('span.new-account-import-form__instruction', 'Paste your private key string here:'),
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          id: 'private-key-box',
+          onKeyPress: () => this.createKeyringOnEnter(),
+        }),
+
+      ]),
+
+      h('div.new-account-import-form__buttons', {}, [
+
+        h('button.new-account-create-form__button-cancel', {
+          onClick: () => goHome(),
+        }, [
+          'CANCEL',
+        ]),
+
+        h('button.new-account-create-form__button-create', {
+          onClick: () => this.createNewKeychain(),
+        }, [
+          'IMPORT',
+        ]),
+
+      ]),
 
       error ? h('span.error', error) : null,
     ])
@@ -63,5 +76,6 @@ PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
 PrivateKeyImportView.prototype.createNewKeychain = function () {
   const input = document.getElementById('private-key-box')
   const privateKey = input.value
-  this.props.dispatch(actions.importNewAccount('Private Key', [ privateKey ]))
+
+  this.props.importNewAccount('Private Key', [ privateKey ])
 }
diff --git a/ui/app/accounts/index.js b/ui/app/accounts/index.js
deleted file mode 100644
index 9584ebad9..000000000
--- a/ui/app/accounts/index.js
+++ /dev/null
@@ -1,160 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../actions')
-const valuesFor = require('../util').valuesFor
-const findDOMNode = require('react-dom').findDOMNode
-const AccountListItem = require('./account-list-item')
-
-module.exports = connect(mapStateToProps)(AccountsScreen)
-
-function mapStateToProps (state) {
-  const pendingTxs = valuesFor(state.metamask.unapprovedTxs)
-  .filter(txMeta => txMeta.metamaskNetworkId === state.metamask.network)
-  const pendingMsgs = valuesFor(state.metamask.unapprovedMsgs)
-  const pending = pendingTxs.concat(pendingMsgs)
-
-  return {
-    accounts: state.metamask.accounts,
-    identities: state.metamask.identities,
-    unapprovedTxs: state.metamask.unapprovedTxs,
-    selectedAddress: state.metamask.selectedAddress,
-    scrollToBottom: state.appState.scrollToBottom,
-    pending,
-    keyrings: state.metamask.keyrings,
-  }
-}
-
-inherits(AccountsScreen, Component)
-function AccountsScreen () {
-  Component.call(this)
-}
-
-AccountsScreen.prototype.render = function () {
-  const props = this.props
-  const { keyrings } = props
-  const identityList = valuesFor(props.identities)
-  const unapprovedTxList = valuesFor(props.unapprovedTxs)
-
-  return (
-
-    h('.accounts-section.flex-grow', [
-
-      // subtitle and nav
-      h('.section-title.flex-center', [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          onClick: this.goHome.bind(this),
-        }),
-        h('h2.page-subtitle', 'Select Account'),
-      ]),
-
-      h('hr.horizontal-line'),
-
-      // identity selection
-      h('section.identity-section', {
-        style: {
-          height: '418px',
-          overflowY: 'auto',
-          overflowX: 'hidden',
-        },
-      },
-        [
-          identityList.map((identity) => {
-            const pending = this.props.pending.filter((txOrMsg) => {
-              if ('txParams' in txOrMsg) {
-                return txOrMsg.txParams.from === identity.address
-              } else if ('msgParams' in txOrMsg) {
-                return txOrMsg.msgParams.from === identity.address
-              } else {
-                return false
-              }
-            })
-
-            const simpleAddress = identity.address.substring(2).toLowerCase()
-            const keyring = keyrings.find((kr) => {
-              return kr.accounts.includes(simpleAddress) ||
-                kr.accounts.includes(identity.address)
-            })
-
-            return h(AccountListItem, {
-              key: `acct-panel-${identity.address}`,
-              identity,
-              selectedAddress: this.props.selectedAddress,
-              accounts: this.props.accounts,
-              onShowDetail: this.onShowDetail.bind(this),
-              pending,
-              keyring,
-            })
-          }),
-
-          h('hr.horizontal-line'),
-          h('div.footer.hover-white.pointer', {
-            key: 'reveal-account-bar',
-            onClick: () => {
-              this.addNewAccount()
-            },
-            style: {
-              display: 'flex',
-              height: '40px',
-              padding: '10px',
-              justifyContent: 'center',
-              alignItems: 'center',
-            },
-          }, [
-            h('i.fa.fa-plus.fa-lg', {key: ''}),
-          ]),
-          h('hr.horizontal-line'),
-        ]),
-
-      unapprovedTxList.length ? (
-
-        h('.unconftx-link.flex-row.flex-center', {
-          onClick: this.navigateToConfTx.bind(this),
-        }, [
-          h('span', 'Unconfirmed Txs'),
-          h('i.fa.fa-arrow-right.fa-lg'),
-        ])
-
-      ) : (
-        null
-      ),
-    ])
-  )
-}
-
-// If a new account was revealed, scroll to the bottom
-AccountsScreen.prototype.componentDidUpdate = function () {
-  const scrollToBottom = this.props.scrollToBottom
-
-  if (scrollToBottom) {
-    var container = findDOMNode(this)
-    var scrollable = container.querySelector('.identity-section')
-    scrollable.scrollTop = scrollable.scrollHeight
-  }
-}
-
-AccountsScreen.prototype.navigateToConfTx = function () {
-  event.stopPropagation()
-  this.props.dispatch(actions.showConfTxPage())
-}
-
-AccountsScreen.prototype.onShowDetail = function (address, event) {
-  event.stopPropagation()
-  this.props.dispatch(actions.showAccountDetail(address))
-}
-
-AccountsScreen.prototype.addNewAccount = function () {
-  this.props.dispatch(actions.addNewAccount(0))
-}
-
-/* An optional view proposed in this design:
- * https://consensys.quip.com/zZVrAysM5znY
-AccountsScreen.prototype.addNewAccount = function () {
-  this.props.dispatch(actions.navigateToNewAccountScreen())
-}
-*/
-
-AccountsScreen.prototype.goHome = function () {
-  this.props.dispatch(actions.goHome())
-}
diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js
new file mode 100644
index 000000000..a6b3bba4b
--- /dev/null
+++ b/ui/app/accounts/new-account/create-form.js
@@ -0,0 +1,99 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../actions')
+
+class NewAccountCreateForm extends Component {
+  constructor (props) {
+    super(props)
+
+    const { numberOfExistingAccounts = 0 } = props
+    const newAccountNumber = numberOfExistingAccounts + 1
+
+    this.state = {
+      newAccountName: '',
+      defaultAccountName: `Account ${newAccountNumber}`,
+    }
+  }
+
+  render () {
+    const { newAccountName, defaultAccountName } = this.state
+    
+
+    return h('div.new-account-create-form', [
+
+      h('div.new-account-create-form__input-label', {}, [
+        'Account Name',
+      ]),
+
+      h('div.new-account-create-form__input-wrapper', {}, [
+        h('input.new-account-create-form__input', {
+          value: newAccountName,
+          placeholder: defaultAccountName,
+          onChange: event => this.setState({ newAccountName: event.target.value }),
+        }, []),
+      ]),
+
+      h('div.new-account-create-form__buttons', {}, [
+
+        h('button.new-account-create-form__button-cancel', {
+          onClick: () => this.props.goHome(),
+        }, [
+          'CANCEL',
+        ]),
+
+        h('button.new-account-create-form__button-create', {
+          onClick: () => this.props.createAccount(newAccountName || defaultAccountName),
+        }, [
+          'CREATE',
+        ]),
+
+      ]),
+
+    ])
+  }
+}
+
+NewAccountCreateForm.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  createAccount: PropTypes.func,
+  goHome: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { network, selectedAddress, identities = {} } } = state
+  const numberOfExistingAccounts = Object.keys(identities).length
+
+  return {
+    network,
+    address: selectedAddress,
+    numberOfExistingAccounts,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    createAccount: (newAccountName) => {
+      dispatch(actions.addNewAccount())
+        .then((newAccountAddress) => {
+          if (newAccountName) {
+            dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
+          }
+          dispatch(actions.goHome())
+        })
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+    goHome: () => dispatch(actions.goHome()),
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm)
diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js
new file mode 100644
index 000000000..acf0dc6e4
--- /dev/null
+++ b/ui/app/accounts/new-account/index.js
@@ -0,0 +1,81 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const { getCurrentViewContext } = require('../../selectors')
+const classnames = require('classnames')
+
+const NewAccountCreateForm = require('./create-form')
+const NewAccountImportForm = require('../import')
+
+function mapStateToProps (state) {
+  return {
+    displayedForm: getCurrentViewContext(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    displayForm: form => dispatch(actions.setNewAccountForm(form)),
+    showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    showExportPrivateKeyModal: () => {
+      dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+    },
+    hideModal: () => dispatch(actions.hideModal()),
+    saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)),
+  }
+}
+
+inherits(AccountDetailsModal, Component)
+function AccountDetailsModal (props) {
+  Component.call(this)
+
+  this.state = {
+    displayedForm: props.displayedForm,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
+
+AccountDetailsModal.prototype.render = function () {
+  const { displayedForm, displayForm } = this.props
+
+  return h('div.new-account', {}, [
+    
+    h('div.new-account__header', [
+
+      h('div.new-account__title', 'New Account'),
+
+      h('div.new-account__tabs', [
+
+        h('div.new-account__tabs__tab', {
+          className: classnames('new-account__tabs__tab', {
+            'new-account__tabs__selected': displayedForm === 'CREATE',
+            'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE',
+          }),
+          onClick: () => displayForm('CREATE'),
+        }, 'Create'),
+
+        h('div.new-account__tabs__tab', {
+          className: classnames('new-account__tabs__tab', {
+            'new-account__tabs__selected': displayedForm === 'IMPORT',
+            'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT',
+          }),
+          onClick: () => displayForm('IMPORT'),
+        }, 'Import'),
+
+      ]),
+
+    ]),
+
+    h('div.new-account__form', [
+
+      displayedForm === 'CREATE'
+        ? h(NewAccountCreateForm)
+        : h(NewAccountImportForm),
+
+    ]),
+
+  ])
+}
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 8934299e7..64d5b67e0 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -1,10 +1,28 @@
+const abi = require('human-standard-token-abi')
 const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url')
+const { getTokenAddressFromTokenObject } = require('./util')
+const ethUtil = require('ethereumjs-util')
 
 var actions = {
   _setBackgroundConnection: _setBackgroundConnection,
 
   GO_HOME: 'GO_HOME',
   goHome: goHome,
+  // modal state
+  MODAL_OPEN: 'UI_MODAL_OPEN',
+  MODAL_CLOSE: 'UI_MODAL_CLOSE',
+  showModal: showModal,
+  hideModal: hideModal,
+  // sidebar state
+  SIDEBAR_OPEN: 'UI_SIDEBAR_OPEN',
+  SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE',
+  showSidebar: showSidebar,
+  hideSidebar: hideSidebar,
+  // network dropdown open
+  NETWORK_DROPDOWN_OPEN: 'UI_NETWORK_DROPDOWN_OPEN',
+  NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE',
+  showNetworkDropdown: showNetworkDropdown,
+  hideNetworkDropdown: hideNetworkDropdown,
   // menu state
   getNetworkStatus: 'getNetworkStatus',
   // transition state
@@ -29,16 +47,23 @@ var actions = {
   SHOW_RESTORE_VAULT: 'SHOW_RESTORE_VAULT',
   FORGOT_PASSWORD: 'FORGOT_PASSWORD',
   forgotPassword: forgotPassword,
+  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',
+  SET_NEW_ACCOUNT_FORM: 'SET_NEW_ACCOUNT_FORM',
   unlockMetamask: unlockMetamask,
   unlockFailed: unlockFailed,
+  unlockSucceeded,
   showCreateVault: showCreateVault,
   showRestoreVault: showRestoreVault,
   showInitializeMenu: showInitializeMenu,
   showImportPage,
+  showNewAccountPage,
+  setNewAccountForm,
   createNewVaultAndKeychain: createNewVaultAndKeychain,
   createNewVaultAndRestore: createNewVaultAndRestore,
   createNewVaultInProgress: createNewVaultInProgress,
@@ -47,15 +72,18 @@ var actions = {
   addNewAccount,
   NEW_ACCOUNT_SCREEN: 'NEW_ACCOUNT_SCREEN',
   navigateToNewAccountScreen,
+  resetAccount,
   showNewVaultSeed: showNewVaultSeed,
   showInfoPage: showInfoPage,
   // seed recovery actions
   REVEAL_SEED_CONFIRMATION: 'REVEAL_SEED_CONFIRMATION',
   revealSeedConfirmation: revealSeedConfirmation,
   requestRevealSeed: requestRevealSeed,
+
   // unlock screen
   UNLOCK_IN_PROGRESS: 'UNLOCK_IN_PROGRESS',
   UNLOCK_FAILED: 'UNLOCK_FAILED',
+  UNLOCK_SUCCEEDED: 'UNLOCK_SUCCEEDED',
   UNLOCK_METAMASK: 'UNLOCK_METAMASK',
   LOCK_METAMASK: 'LOCK_METAMASK',
   tryUnlockMetamask: tryUnlockMetamask,
@@ -68,15 +96,20 @@ var actions = {
   hideWarning: hideWarning,
   // accounts screen
   SET_SELECTED_ACCOUNT: 'SET_SELECTED_ACCOUNT',
+  SET_SELECTED_TOKEN: 'SET_SELECTED_TOKEN',
+  setSelectedToken,
   SHOW_ACCOUNT_DETAIL: 'SHOW_ACCOUNT_DETAIL',
   SHOW_ACCOUNTS_PAGE: 'SHOW_ACCOUNTS_PAGE',
   SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE',
   SHOW_CONF_MSG_PAGE: 'SHOW_CONF_MSG_PAGE',
   SET_CURRENT_FIAT: 'SET_CURRENT_FIAT',
   setCurrentCurrency: setCurrentCurrency,
+  setCurrentAccountTab,
   // account detail screen
   SHOW_SEND_PAGE: 'SHOW_SEND_PAGE',
   showSendPage: showSendPage,
+  SHOW_SEND_TOKEN_PAGE: 'SHOW_SEND_TOKEN_PAGE',
+  showSendTokenPage,
   ADD_TO_ADDRESS_BOOK: 'ADD_TO_ADDRESS_BOOK',
   addToAddressBook: addToAddressBook,
   REQUEST_ACCOUNT_EXPORT: 'REQUEST_ACCOUNT_EXPORT',
@@ -85,6 +118,7 @@ var actions = {
   exportAccount: exportAccount,
   SHOW_PRIVATE_KEY: 'SHOW_PRIVATE_KEY',
   showPrivateKey: showPrivateKey,
+  exportAccountComplete,
   SAVE_ACCOUNT_LABEL: 'SAVE_ACCOUNT_LABEL',
   saveAccountLabel: saveAccountLabel,
   // tx conf screen
@@ -92,20 +126,57 @@ var actions = {
   TRANSACTION_ERROR: 'TRANSACTION_ERROR',
   NEXT_TX: 'NEXT_TX',
   PREVIOUS_TX: 'PREV_TX',
+  EDIT_TX: 'EDIT_TX',
   signMsg: signMsg,
   cancelMsg: cancelMsg,
   signPersonalMsg,
   cancelPersonalMsg,
+  signTypedMsg,
+  cancelTypedMsg,
   sendTx: sendTx,
   signTx: signTx,
+  signTokenTx: signTokenTx,
+  updateTransaction,
   updateAndApproveTx,
   cancelTx: cancelTx,
   completedTx: completedTx,
   txError: txError,
   nextTx: nextTx,
+  editTx,
   previousTx: previousTx,
+  cancelAllTx: cancelAllTx,
   viewPendingTx: viewPendingTx,
   VIEW_PENDING_TX: 'VIEW_PENDING_TX',
+  updateTransactionParams,
+  UPDATE_TRANSACTION_PARAMS: 'UPDATE_TRANSACTION_PARAMS',
+  // send screen
+  estimateGas,
+  getGasPrice,
+  UPDATE_GAS_LIMIT: 'UPDATE_GAS_LIMIT',
+  UPDATE_GAS_PRICE: 'UPDATE_GAS_PRICE',
+  UPDATE_GAS_TOTAL: 'UPDATE_GAS_TOTAL',
+  UPDATE_SEND_FROM: 'UPDATE_SEND_FROM',
+  UPDATE_SEND_TOKEN_BALANCE: 'UPDATE_SEND_TOKEN_BALANCE',
+  UPDATE_SEND_TO: 'UPDATE_SEND_TO',
+  UPDATE_SEND_AMOUNT: 'UPDATE_SEND_AMOUNT',
+  UPDATE_SEND_MEMO: 'UPDATE_SEND_MEMO',
+  UPDATE_SEND_ERRORS: 'UPDATE_SEND_ERRORS',
+  UPDATE_MAX_MODE: 'UPDATE_MAX_MODE',
+  UPDATE_SEND: 'UPDATE_SEND',
+  CLEAR_SEND: 'CLEAR_SEND',
+  updateGasLimit,
+  updateGasPrice,
+  updateGasTotal,
+  updateSendTokenBalance,
+  updateSendFrom,
+  updateSendTo,
+  updateSendAmount,
+  updateSendMemo,
+  updateSendErrors,
+  setMaxModeTo,
+  updateSend,
+  clearSend,
+  setSelectedAddress,
   // app messages
   confirmSeedWords: confirmSeedWords,
   showAccountDetail: showAccountDetail,
@@ -118,30 +189,36 @@ var actions = {
   SET_RPC_TARGET: 'SET_RPC_TARGET',
   SET_DEFAULT_RPC_TARGET: 'SET_DEFAULT_RPC_TARGET',
   SET_PROVIDER_TYPE: 'SET_PROVIDER_TYPE',
-  USE_ETHERSCAN_PROVIDER: 'USE_ETHERSCAN_PROVIDER',
-  useEtherscanProvider: useEtherscanProvider,
-  showConfigPage: showConfigPage,
+  showConfigPage,
+  SHOW_ADD_TOKEN_PAGE: 'SHOW_ADD_TOKEN_PAGE',
+  showAddTokenPage,
+  addToken,
+  addTokens,
+  removeToken,
+  updateTokens,
+  UPDATE_TOKENS: 'UPDATE_TOKENS',
   setRpcTarget: setRpcTarget,
-  setDefaultRpcTarget: setDefaultRpcTarget,
   setProviderType: setProviderType,
+  updateProviderType,
   // loading overlay
   SHOW_LOADING: 'SHOW_LOADING_INDICATION',
   HIDE_LOADING: 'HIDE_LOADING_INDICATION',
   showLoadingIndication: showLoadingIndication,
   hideLoadingIndication: hideLoadingIndication,
   // buy Eth with coinbase
+  onboardingBuyEthView,
+  ONBOARDING_BUY_ETH_VIEW: 'ONBOARDING_BUY_ETH_VIEW',
   BUY_ETH: 'BUY_ETH',
   buyEth: buyEth,
   buyEthView: buyEthView,
+  buyWithShapeShift,
   BUY_ETH_VIEW: 'BUY_ETH_VIEW',
-  UPDATE_COINBASE_AMOUNT: 'UPDATE_COIBASE_AMOUNT',
-  updateCoinBaseAmount: updateCoinBaseAmount,
-  UPDATE_BUY_ADDRESS: 'UPDATE_BUY_ADDRESS',
-  updateBuyAddress: updateBuyAddress,
   COINBASE_SUBVIEW: 'COINBASE_SUBVIEW',
   coinBaseSubview: coinBaseSubview,
   SHAPESHIFT_SUBVIEW: 'SHAPESHIFT_SUBVIEW',
   shapeShiftSubview: shapeShiftSubview,
+  UPDATE_TOKEN_EXCHANGE_RATE: 'UPDATE_TOKEN_EXCHANGE_RATE',
+  updateTokenExchangeRate,
   PAIR_UPDATE: 'PAIR_UPDATE',
   pairUpdate: pairUpdate,
   coinShiftRquest: coinShiftRquest,
@@ -166,6 +243,29 @@ var actions = {
 
   callBackgroundThenUpdate,
   forceUpdateMetamaskState,
+
+  TOGGLE_ACCOUNT_MENU: 'TOGGLE_ACCOUNT_MENU',
+  toggleAccountMenu,
+
+  useEtherscanProvider,
+
+  SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
+  setUseBlockie,
+
+  // Feature Flags
+  setFeatureFlag,
+  updateFeatureFlags,
+  UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS',
+
+  setMouseUserState,
+  SET_MOUSE_USER_STATE: 'SET_MOUSE_USER_STATE',
+
+  // Network
+  setNetworkEndpoints,
+  updateNetworkEndpointType,
+  UPDATE_NETWORK_ENDPOINT_TYPE: 'UPDATE_NETWORK_ENDPOINT_TYPE',
+
+  retryTransaction,
 }
 
 module.exports = actions
@@ -193,6 +293,7 @@ function tryUnlockMetamask (password) {
       if (err) {
         dispatch(actions.unlockFailed(err.message))
       } else {
+        dispatch(actions.unlockSucceeded())
         dispatch(actions.transitionForward())
         forceUpdateMetamaskState(dispatch)
       }
@@ -216,14 +317,18 @@ function confirmSeedWords () {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.clearSeedWordCache`)
-    background.clearSeedWordCache((err, account) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
+    return new Promise((resolve, reject) => {
+      background.clearSeedWordCache((err, account) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
 
-      console.log('Seed word cache cleared. ' + account)
-      dispatch(actions.showAccountDetail(account))
+        log.info('Seed word cache cleared. ' + account)
+        dispatch(actions.showAccountsPage())
+        resolve(account)
+      })
     })
   }
 }
@@ -232,10 +337,20 @@ function createNewVaultAndRestore (password, seed) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.createNewVaultAndRestore`)
-    background.createNewVaultAndRestore(password, seed, (err) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) return dispatch(actions.displayWarning(err.message))
-      dispatch(actions.showAccountsPage())
+
+    return new Promise((resolve, reject) => {
+      background.createNewVaultAndRestore(password, seed, (err) => {
+
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.showAccountsPage())
+        resolve()
+      })
     })
   }
 }
@@ -244,19 +359,26 @@ function createNewVaultAndKeychain (password) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.createNewVaultAndKeychain`)
-    background.createNewVaultAndKeychain(password, (err) => {
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-      log.debug(`background.placeSeedWords`)
-      background.placeSeedWords((err) => {
+
+    return new Promise((resolve, reject) => {
+      background.createNewVaultAndKeychain(password, (err) => {
         if (err) {
-          return dispatch(actions.displayWarning(err.message))
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
         }
-        dispatch(actions.hideLoadingIndication())
-        forceUpdateMetamaskState(dispatch)
+        log.debug(`background.placeSeedWords`)
+        background.placeSeedWords((err) => {
+          if (err) {
+            dispatch(actions.displayWarning(err.message))
+            return reject(err)
+          }
+          dispatch(actions.hideLoadingIndication())
+          forceUpdateMetamaskState(dispatch)
+          resolve()
+        })
       })
     })
+
   }
 }
 
@@ -284,6 +406,20 @@ function requestRevealSeed (password) {
   }
 }
 
+function resetAccount () {
+    return (dispatch) => {
+        background.resetAccount((err, account) => {
+            dispatch(actions.hideLoadingIndication())
+            if (err) {
+                dispatch(actions.displayWarning(err.message))
+            }
+
+            log.info('Transaction history reset for ' + account)
+            dispatch(actions.showAccountsPage())
+        })
+    }
+}
+
 function addNewKeyring (type, opts) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
@@ -300,25 +436,32 @@ function importNewAccount (strategy, args) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication('This may take a while, be patient.'))
     log.debug(`background.importAccountWithStrategy`)
-    background.importAccountWithStrategy(strategy, args, (err) => {
-      if (err) return dispatch(actions.displayWarning(err.message))
-      log.debug(`background.getState`)
-      background.getState((err, newState) => {
-        dispatch(actions.hideLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.importAccountWithStrategy(strategy, args, (err) => {
         if (err) {
-          return dispatch(actions.displayWarning(err.message))
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
         }
-        dispatch(actions.updateMetamaskState(newState))
-        dispatch({
-          type: actions.SHOW_ACCOUNT_DETAIL,
-          value: newState.selectedAddress,
+        log.debug(`background.getState`)
+        background.getState((err, newState) => {
+          dispatch(actions.hideLoadingIndication())
+          if (err) {
+            dispatch(actions.displayWarning(err.message))
+            return reject(err)
+          }
+          dispatch(actions.updateMetamaskState(newState))
+          dispatch({
+            type: actions.SHOW_ACCOUNT_DETAIL,
+            value: newState.selectedAddress,
+          })
+          resolve(newState)
         })
       })
     })
   }
 }
 
-function navigateToNewAccountScreen() {
+function navigateToNewAccountScreen () {
   return {
     type: this.NEW_ACCOUNT_SCREEN,
   }
@@ -326,7 +469,24 @@ function navigateToNewAccountScreen() {
 
 function addNewAccount () {
   log.debug(`background.addNewAccount`)
-  return callBackgroundThenUpdate(background.addNewAccount)
+  return (dispatch, getState) => {
+    const oldIdentities = getState().metamask.identities
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.addNewAccount((err, { identities: newIdentities}) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        const newAccountAddress = Object.keys(newIdentities).find(address => !oldIdentities[address])
+
+        dispatch(actions.hideLoadingIndication())
+
+        forceUpdateMetamaskState(dispatch)
+        return resolve(newAccountAddress)
+      })
+    })
+  }
 }
 
 function showInfoPage () {
@@ -337,16 +497,16 @@ function showInfoPage () {
 
 function setCurrentCurrency (currencyCode) {
   return (dispatch) => {
-    dispatch(this.showLoadingIndication())
+    dispatch(actions.showLoadingIndication())
     log.debug(`background.setCurrentCurrency`)
     background.setCurrentCurrency(currencyCode, (err, data) => {
-      dispatch(this.hideLoadingIndication())
+      dispatch(actions.hideLoadingIndication())
       if (err) {
-        console.error(err.stack)
+        log.error(err.stack)
         return dispatch(actions.displayWarning(err.message))
       }
       dispatch({
-        type: this.SET_CURRENT_FIAT,
+        type: actions.SET_CURRENT_FIAT,
         value: {
           currentCurrency: data.currentCurrency,
           conversionRate: data.conversionRate,
@@ -395,17 +555,153 @@ function signPersonalMsg (msgData) {
   }
 }
 
+function signTypedMsg (msgData) {
+  log.debug('action - signTypedMsg')
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+
+    log.debug(`actions calling background.signTypedMessage`)
+    background.signTypedMessage(msgData, (err, newState) => {
+      log.debug('signTypedMessage called back')
+      dispatch(actions.updateMetamaskState(newState))
+      dispatch(actions.hideLoadingIndication())
+
+      if (err) log.error(err)
+      if (err) return dispatch(actions.displayWarning(err.message))
+
+      dispatch(actions.completedTx(msgData.metamaskId))
+    })
+  }
+}
+
 function signTx (txData) {
   return (dispatch) => {
-    web3.eth.sendTransaction(txData, (err, data) => {
+    dispatch(actions.showLoadingIndication())
+    global.ethQuery.sendTransaction(txData, (err, data) => {
       dispatch(actions.hideLoadingIndication())
       if (err) return dispatch(actions.displayWarning(err.message))
       dispatch(actions.hideWarning())
     })
-    dispatch(this.showConfTxPage())
+    dispatch(actions.showConfTxPage({}))
+  }
+}
+
+function estimateGas (params = {}) {
+  return (dispatch) => {
+    return new Promise((resolve, reject) => {
+      global.ethQuery.estimateGas(params, (err, data) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        dispatch(actions.hideWarning())
+        dispatch(actions.updateGasLimit(data))
+        return resolve(data)
+      })
+    })
+  }
+}
+
+function updateGasLimit (gasLimit) {
+  return {
+    type: actions.UPDATE_GAS_LIMIT,
+    value: gasLimit,
+  }
+}
+
+function getGasPrice () {
+  return (dispatch) => {
+    return new Promise((resolve, reject) => {
+      global.ethQuery.gasPrice((err, data) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        dispatch(actions.hideWarning())
+        dispatch(actions.updateGasPrice(data))
+        return resolve(data)
+      })
+    })
+  }
+}
+
+function updateGasPrice (gasPrice) {
+  return {
+    type: actions.UPDATE_GAS_PRICE,
+    value: gasPrice,
+  }
+}
+
+function updateGasTotal (gasTotal) {
+  return {
+    type: actions.UPDATE_GAS_TOTAL,
+    value: gasTotal,
+  }
+}
+
+function updateSendTokenBalance (tokenBalance) {
+  return {
+    type: actions.UPDATE_SEND_TOKEN_BALANCE,
+    value: tokenBalance,
+  }
+}
+
+function updateSendFrom (from) {
+  return {
+    type: actions.UPDATE_SEND_FROM,
+    value: from,
+  }
+}
+
+function updateSendTo (to) {
+  return {
+    type: actions.UPDATE_SEND_TO,
+    value: to,
   }
 }
 
+function updateSendAmount (amount) {
+  return {
+    type: actions.UPDATE_SEND_AMOUNT,
+    value: amount,
+  }
+}
+
+function updateSendMemo (memo) {
+  return {
+    type: actions.UPDATE_SEND_MEMO,
+    value: memo,
+  }
+}
+
+function updateSendErrors (error) {
+  return {
+    type: actions.UPDATE_SEND_ERRORS,
+    value: error,
+  }
+}
+
+function setMaxModeTo (bool) {
+  return {
+    type: actions.UPDATE_MAX_MODE,
+    value: bool,
+  }
+}
+
+function updateSend (newSend) {
+  return {
+    type: actions.UPDATE_SEND,
+    value: newSend,
+  }
+}
+
+function clearSend () {
+  return {
+    type: actions.CLEAR_SEND,
+  }
+}
+
+
 function sendTx (txData) {
   log.info(`actions - sendTx: ${JSON.stringify(txData.txParams)}`)
   return (dispatch) => {
@@ -413,22 +709,55 @@ function sendTx (txData) {
     background.approveTransaction(txData.id, (err) => {
       if (err) {
         dispatch(actions.txError(err))
-        return console.error(err.message)
+        return log.error(err.message)
       }
       dispatch(actions.completedTx(txData.id))
     })
   }
 }
 
+function signTokenTx (tokenAddress, toAddress, amount, txData) {
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+    const token = global.eth.contract(abi).at(tokenAddress)
+    token.transfer(toAddress, ethUtil.addHexPrefix(amount), txData)
+      .catch(err => {
+        dispatch(actions.hideLoadingIndication())
+        dispatch(actions.displayWarning(err.message))
+      })
+    dispatch(actions.showConfTxPage({}))
+  }
+}
+
+function updateTransaction (txData) {
+  log.info('actions: updateTx: ' + JSON.stringify(txData))
+  return (dispatch) => {
+    log.debug(`actions calling background.updateTx`)
+    background.updateTransaction(txData, (err) => {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
+      if (err) {
+        dispatch(actions.txError(err))
+        dispatch(actions.goHome())
+        return log.error(err.message)
+      }
+      dispatch(actions.showConfTxPage({ id: txData.id }))
+    })
+  }
+}
+
 function updateAndApproveTx (txData) {
   log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
   return (dispatch) => {
     log.debug(`actions calling background.updateAndApproveTx`)
     background.updateAndApproveTransaction(txData, (err) => {
       dispatch(actions.hideLoadingIndication())
+      dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
+      dispatch(actions.clearSend())
       if (err) {
         dispatch(actions.txError(err))
-        return console.error(err.message)
+        dispatch(actions.goHome())
+        return log.error(err.message)
       }
       dispatch(actions.completedTx(txData.id))
     })
@@ -442,6 +771,14 @@ function completedTx (id) {
   }
 }
 
+function updateTransactionParams (id, txParams) {
+  return {
+    type: actions.UPDATE_TRANSACTION_PARAMS,
+    id,
+    value: txParams,
+  }
+}
+
 function txError (err) {
   return {
     type: actions.TRANSACTION_ERROR,
@@ -461,12 +798,32 @@ function cancelPersonalMsg (msgData) {
   return actions.completedTx(id)
 }
 
+function cancelTypedMsg (msgData) {
+  const id = msgData.id
+  background.cancelTypedMessage(id)
+  return actions.completedTx(id)
+}
+
 function cancelTx (txData) {
-  log.debug(`background.cancelTransaction`)
-  background.cancelTransaction(txData.id)
-  return actions.completedTx(txData.id)
+  return (dispatch) => {
+    log.debug(`background.cancelTransaction`)
+    background.cancelTransaction(txData.id, () => {
+      dispatch(actions.clearSend())
+      dispatch(actions.completedTx(txData.id))
+    })
+  }
 }
 
+function cancelAllTx (txsData) {
+  return (dispatch) => {
+    txsData.forEach((txData, i) => {
+      background.cancelTransaction(txData.id, () => {
+        dispatch(actions.completedTx(txData.id))
+        i === txsData.length - 1 ? dispatch(actions.goHome()) : null
+      })
+    })
+  }
+}
 //
 // initialize screen
 //
@@ -483,6 +840,25 @@ function showRestoreVault () {
   }
 }
 
+function markPasswordForgotten () {
+  return (dispatch) => {
+    return background.markPasswordForgotten(() => {
+      dispatch(actions.hideLoadingIndication())
+      dispatch(actions.forgotPassword())
+      forceUpdateMetamaskState(dispatch)
+    })
+  }
+}
+
+function unMarkPasswordForgotten () {
+  return (dispatch) => {
+    return background.unMarkPasswordForgotten(() => {
+      dispatch(actions.forgotPassword())
+      forceUpdateMetamaskState(dispatch)
+    })
+  }
+}
+
 function forgotPassword () {
   return {
     type: actions.FORGOT_PASSWORD,
@@ -501,6 +877,20 @@ function showImportPage () {
   }
 }
 
+function showNewAccountPage (formToSelect) {
+  return {
+    type: actions.SHOW_NEW_ACCOUNT_PAGE,
+    formToSelect,
+  }
+}
+
+function setNewAccountForm (formToSelect) {
+  return {
+    type: actions.SET_NEW_ACCOUNT_FORM,
+    formToSelect,
+  }
+}
+
 function createNewVaultInProgress () {
   return {
     type: actions.CREATE_NEW_VAULT_IN_PROGRESS,
@@ -543,6 +933,13 @@ function unlockFailed (message) {
   }
 }
 
+function unlockSucceeded (message) {
+  return {
+    type: actions.UNLOCK_SUCCEEDED,
+    value: message,
+  }
+}
+
 function unlockMetamask (account) {
   return {
     type: actions.UNLOCK_METAMASK,
@@ -557,9 +954,79 @@ function updateMetamaskState (newState) {
   }
 }
 
+const backgroundSetLocked = () => {
+  return new Promise((resolve, reject) => {
+    background.setLocked(error => {
+      if (error) {
+        return reject(error)
+      }
+
+      resolve()
+    })
+  })
+}
+
+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`)
-  return callBackgroundThenUpdate(background.setLocked)
+
+  return dispatch => {
+    dispatch(actions.showLoadingIndication())
+
+    return backgroundSetLocked()
+      .then(() => updateMetamaskStateFromBackground())
+      .catch(error => {
+        dispatch(actions.displayWarning(error.message))
+        return Promise.reject(error)
+      })
+      .then(newState => {
+        dispatch(actions.updateMetamaskState(newState))
+        dispatch(actions.hideLoadingIndication())
+        dispatch({ type: actions.LOCK_METAMASK })
+      })
+      .catch(() => {
+        dispatch(actions.hideLoadingIndication())
+        dispatch({ type: actions.LOCK_METAMASK })
+      })
+  }
+}
+
+function setCurrentAccountTab (newTabName) {
+  log.debug(`background.setCurrentAccountTab: ${newTabName}`)
+  return callBackgroundThenUpdateNoSpinner(background.setCurrentAccountTab, newTabName)
+}
+
+function setSelectedToken (tokenAddress) {
+  return {
+    type: actions.SET_SELECTED_TOKEN,
+    value: tokenAddress || null,
+  }
+}
+
+function setSelectedAddress (address) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.setSelectedAddress`)
+    background.setSelectedAddress(address, (err) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+    })
+  }
 }
 
 function showAccountDetail (address) {
@@ -575,6 +1042,7 @@ function showAccountDetail (address) {
         type: actions.SHOW_ACCOUNT_DETAIL,
         value: address,
       })
+      dispatch(actions.setSelectedToken())
     })
   }
 }
@@ -592,10 +1060,11 @@ function showAccountsPage () {
   }
 }
 
-function showConfTxPage (transForward = true) {
+function showConfTxPage ({transForward = true, id}) {
   return {
     type: actions.SHOW_CONF_TX_PAGE,
-    transForward: transForward,
+    transForward,
+    id,
   }
 }
 
@@ -618,6 +1087,13 @@ function previousTx () {
   }
 }
 
+function editTx (txId) {
+  return {
+    type: actions.EDIT_TX,
+    value: txId,
+  }
+}
+
 function showConfigPage (transitionForward = true) {
   return {
     type: actions.SHOW_CONFIG_PAGE,
@@ -625,6 +1101,74 @@ function showConfigPage (transitionForward = true) {
   }
 }
 
+function showAddTokenPage (transitionForward = true) {
+  return {
+    type: actions.SHOW_ADD_TOKEN_PAGE,
+    value: transitionForward,
+  }
+}
+
+function addToken (address, symbol, decimals) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.addToken(address, symbol, decimals, (err, tokens) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+        dispatch(actions.updateTokens(tokens))
+        resolve(tokens)
+      })
+    })
+  }
+}
+
+function removeToken (address) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.removeToken(address, (err, tokens) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+        dispatch(actions.updateTokens(tokens))
+        resolve(tokens)
+      })
+    })
+  }
+}
+
+function addTokens (tokens) {
+  return dispatch => {
+    if (Array.isArray(tokens)) {
+      dispatch(actions.setSelectedToken(getTokenAddressFromTokenObject(tokens[0])))
+      return Promise.all(tokens.map(({ address, symbol, decimals }) => (
+        dispatch(addToken(address, symbol, decimals))
+      )))
+    } else {
+      dispatch(actions.setSelectedToken(getTokenAddressFromTokenObject(tokens)))
+      return Promise.all(
+        Object
+        .entries(tokens)
+        .map(([_, { address, symbol, decimals }]) => (
+          dispatch(addToken(address, symbol, decimals))
+        ))
+      )
+    }
+  }
+}
+
+function updateTokens (newTokens) {
+  return {
+    type: actions.UPDATE_TOKENS,
+    newTokens,
+  }
+}
+
 function goBackToInitView () {
   return {
     type: actions.BACK_TO_INIT_MENU,
@@ -637,21 +1181,23 @@ function goBackToInitView () {
 
 function markNoticeRead (notice) {
   return (dispatch) => {
-    dispatch(this.showLoadingIndication())
+    dispatch(actions.showLoadingIndication())
     log.debug(`background.markNoticeRead`)
-    background.markNoticeRead(notice, (err, notice) => {
-      dispatch(this.hideLoadingIndication())
-      if (err) {
-        return dispatch(actions.displayWarning(err))
-      }
-      if (notice) {
-        return dispatch(actions.showNotice(notice))
-      } else {
-        dispatch(this.clearNotices())
-        return {
-          type: actions.SHOW_ACCOUNTS_PAGE,
+    return new Promise((resolve, reject) => {
+      background.markNoticeRead(notice, (err, notice) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err))
+          return reject(err)
         }
-      }
+        if (notice) {
+          dispatch(actions.showNotice(notice))
+          resolve()
+        } else {
+          dispatch(actions.clearNotices())
+          resolve()
+        }
+      })
     })
   }
 }
@@ -669,30 +1215,52 @@ function clearNotices () {
   }
 }
 
-function markAccountsFound() {
+function markAccountsFound () {
   log.debug(`background.markAccountsFound`)
   return callBackgroundThenUpdate(background.markAccountsFound)
 }
 
+function retryTransaction (txId) {
+  log.debug(`background.retryTransaction`)
+  return (dispatch) => {
+    background.retryTransaction(txId, (err, newState) => {
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+      dispatch(actions.updateMetamaskState(newState))
+      dispatch(actions.viewPendingTx(txId))
+    })
+  }
+}
+
 //
 // config
 //
 
-// default rpc target refers to localhost:8545 in this instance.
-function setDefaultRpcTarget (rpcList) {
-  log.debug(`background.setDefaultRpcTarget`)
+function setProviderType (type) {
   return (dispatch) => {
-    background.setDefaultRpc((err, result) => {
+    log.debug(`background.setProviderType`)
+    background.setProviderType(type, (err, result) => {
       if (err) {
         log.error(err)
-        return dispatch(self.displayWarning('Had a problem changing networks.'))
+        return dispatch(self.displayWarning('Had a problem changing networks!'))
       }
+      dispatch(actions.updateProviderType(type))
+      dispatch(actions.setSelectedToken())
     })
+
+  }
+}
+
+function updateProviderType (type) {
+  return {
+    type: actions.SET_PROVIDER_TYPE,
+    value: type,
   }
 }
 
 function setRpcTarget (newRpc) {
-  log.debug(`background.setRpcTarget`)
+  log.debug(`background.setRpcTarget: ${newRpc}`)
   return (dispatch) => {
     background.setCustomRpc(newRpc, (err, result) => {
       if (err) {
@@ -704,7 +1272,7 @@ function setRpcTarget (newRpc) {
 }
 
 // Calls the addressBookController to add a new address.
-function addToAddressBook (recipient, nickname) {
+function addToAddressBook (recipient, nickname = '') {
   log.debug(`background.addToAddressBook`)
   return (dispatch) => {
     background.setAddressBook(recipient, nickname, (err, result) => {
@@ -716,15 +1284,6 @@ function addToAddressBook (recipient, nickname) {
   }
 }
 
-function setProviderType (type) {
-  log.debug(`background.setProviderType`)
-  background.setProviderType(type)
-  return {
-    type: actions.SET_PROVIDER_TYPE,
-    value: type,
-  }
-}
-
 function useEtherscanProvider () {
   log.debug(`background.useEtherscanProvider`)
   background.useEtherscanProvider()
@@ -733,6 +1292,46 @@ function useEtherscanProvider () {
   }
 }
 
+function showNetworkDropdown () {
+  return {
+    type: actions.NETWORK_DROPDOWN_OPEN,
+  }
+}
+
+function hideNetworkDropdown () {
+  return {
+    type: actions.NETWORK_DROPDOWN_CLOSE,
+  }
+}
+
+
+function showModal (payload) {
+  return {
+    type: actions.MODAL_OPEN,
+    payload,
+  }
+}
+
+function hideModal (payload) {
+  return {
+    type: actions.MODAL_CLOSE,
+    payload,
+  }
+}
+
+function showSidebar () {
+  return {
+    type: actions.SIDEBAR_OPEN,
+  }
+}
+
+function hideSidebar () {
+  return {
+    type: actions.SIDEBAR_CLOSE,
+  }
+}
+
+
 function showLoadingIndication (message) {
   return {
     type: actions.SHOW_LOADING,
@@ -784,27 +1383,40 @@ function exportAccount (password, address) {
     dispatch(self.showLoadingIndication())
 
     log.debug(`background.submitPassword`)
-    background.submitPassword(password, function (err) {
-      if (err) {
-        log.error('Error in submiting password.')
-        dispatch(self.hideLoadingIndication())
-        return dispatch(self.displayWarning('Incorrect Password.'))
-      }
-      log.debug(`background.exportAccount`)
-      background.exportAccount(address, function (err, result) {
-        dispatch(self.hideLoadingIndication())
-
+    return new Promise((resolve, reject) => {
+      background.submitPassword(password, function (err) {
         if (err) {
-          log.error(err)
-          return dispatch(self.displayWarning('Had a problem exporting the account.'))
+          log.error('Error in submiting password.')
+          dispatch(self.hideLoadingIndication())
+          dispatch(self.displayWarning('Incorrect Password.'))
+          return reject(err)
         }
+        log.debug(`background.exportAccount`)
+        return background.exportAccount(address, function (err, result) {
+          dispatch(self.hideLoadingIndication())
+
+          if (err) {
+            log.error(err)
+            dispatch(self.displayWarning('Had a problem exporting the account.'))
+            return reject(err)
+          }
+
+          // dispatch(self.exportAccountComplete())
+          dispatch(self.showPrivateKey(result))
 
-        dispatch(self.showPrivateKey(result))
+          return resolve(result)
+        })
       })
     })
   }
 }
 
+function exportAccountComplete () {
+  return {
+    type: actions.EXPORT_ACCOUNT,
+  }
+}
+
 function showPrivateKey (key) {
   return {
     type: actions.SHOW_PRIVATE_KEY,
@@ -816,14 +1428,22 @@ function saveAccountLabel (account, label) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.saveAccountLabel`)
-    background.saveAccountLabel(account, label, (err) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-      dispatch({
-        type: actions.SAVE_ACCOUNT_LABEL,
-        value: { account, label },
+
+    return new Promise((resolve, reject) => {
+      background.saveAccountLabel(account, label, (err) => {
+        dispatch(actions.hideLoadingIndication())
+
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          reject(err)
+        }
+
+        dispatch({
+          type: actions.SAVE_ACCOUNT_LABEL,
+          value: { account, label },
+        })
+
+        resolve(account)
       })
     })
   }
@@ -835,6 +1455,12 @@ function showSendPage () {
   }
 }
 
+function showSendTokenPage () {
+  return {
+    type: actions.SHOW_SEND_TOKEN_PAGE,
+  }
+}
+
 function buyEth (opts) {
   return (dispatch) => {
     const url = getBuyEthUrl(opts)
@@ -845,24 +1471,17 @@ function buyEth (opts) {
   }
 }
 
-function buyEthView (address) {
+function onboardingBuyEthView (address) {
   return {
-    type: actions.BUY_ETH_VIEW,
+    type: actions.ONBOARDING_BUY_ETH_VIEW,
     value: address,
   }
 }
 
-function updateCoinBaseAmount (value) {
-  return {
-    type: actions.UPDATE_COINBASE_AMOUNT,
-    value,
-  }
-}
-
-function updateBuyAddress (value) {
+function buyEthView (address) {
   return {
-    type: actions.UPDATE_BUY_ADDRESS,
-    value,
+    type: actions.BUY_ETH_VIEW,
+    value: address,
   }
 }
 
@@ -890,7 +1509,6 @@ function pairUpdate (coin) {
 
 function shapeShiftSubview (network) {
   var pair = 'btc_eth'
-
   return (dispatch) => {
     dispatch(actions.showSubLoadingIndication())
     shapeShiftRequest('marketinfo', {pair}, (mktResponse) => {
@@ -916,7 +1534,7 @@ function coinShiftRquest (data, marketData) {
       dispatch(actions.hideLoadingIndication())
       if (response.error) return dispatch(actions.displayWarning(response.error))
       var message = `
-        Deposit your ${response.depositType} to the address bellow:`
+        Deposit your ${response.depositType} to the address below:`
       log.debug(`background.createShapeShiftTx`)
       background.createShapeShiftTx(response.deposit, response.depositType)
       dispatch(actions.showQrView(response.deposit, [message].concat(marketData)))
@@ -924,6 +1542,18 @@ function coinShiftRquest (data, marketData) {
   }
 }
 
+function buyWithShapeShift (data) {
+  return dispatch => new Promise((resolve, reject) => {
+    shapeShiftRequest('shift', { method: 'POST', data}, (response) => {
+      if (response.error) {
+        return reject(response.error)
+      }
+      background.createShapeShiftTx(response.deposit, response.depositType)
+      return resolve(response)
+    })
+  })
+}
+
 function showQrView (data, message) {
   return {
     type: actions.SHOW_QR_VIEW,
@@ -940,13 +1570,17 @@ function reshowQrCode (data, coin) {
       if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
 
       var message = [
-        `Deposit your ${coin} to the address bellow:`,
+        `Deposit your ${coin} to the address below:`,
         `Deposit Limit: ${mktResponse.limit}`,
         `Deposit Minimum:${mktResponse.minimum}`,
       ]
 
       dispatch(actions.hideLoadingIndication())
       return dispatch(actions.showQrView(data, message))
+      // return dispatch(actions.showModal({
+      //   name: 'SHAPESHIFT_DEPOSIT_TX',
+      //   Qr: { data, message },
+      // }))
     })
   }
 }
@@ -957,9 +1591,14 @@ function shapeShiftRequest (query, options, cb) {
   options.method ? method = options.method : method = 'GET'
 
   var requestListner = function (request) {
-    queryResponse = JSON.parse(this.responseText)
-    cb ? cb(queryResponse) : null
-    return queryResponse
+    try {
+      queryResponse = JSON.parse(this.responseText)
+      cb ? cb(queryResponse) : null
+      return queryResponse
+    } catch (e) {
+      cb ? cb({error: e}) : null
+      return e
+    }
   }
 
   var shapShiftReq = new XMLHttpRequest()
@@ -975,6 +1614,60 @@ function shapeShiftRequest (query, options, cb) {
   }
 }
 
+function updateTokenExchangeRate (token = '') {
+  const pair = `${token.toLowerCase()}_eth`
+
+  return dispatch => {
+    if (!token) {
+      return
+    }
+
+    shapeShiftRequest('marketinfo', { pair }, marketinfo => {
+      if (!marketinfo.error) {
+        dispatch({
+          type: actions.UPDATE_TOKEN_EXCHANGE_RATE,
+          payload: {
+            pair,
+            marketinfo,
+          },
+        })
+      }
+    })
+  }
+}
+
+function setFeatureFlag (feature, activated, notificationType) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.setFeatureFlag(feature, activated, (err, updatedFeatureFlags) => {
+        dispatch(actions.hideLoadingIndication())
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        dispatch(actions.updateFeatureFlags(updatedFeatureFlags))
+        notificationType && dispatch(actions.showModal({ name: notificationType }))
+        resolve(updatedFeatureFlags)
+      })
+    })
+  }
+}
+
+function updateFeatureFlags (updatedFeatureFlags) {
+  return {
+    type: actions.UPDATE_FEATURE_FLAGS,
+    value: updatedFeatureFlags,
+  }
+}
+
+function setMouseUserState (isMouseUser) {
+  return {
+    type: actions.SET_MOUSE_USER_STATE,
+    value: isMouseUser,
+  }
+}
+
 // Call Background Then Update
 //
 // A function generator for a common pattern wherein:
@@ -983,6 +1676,17 @@ function shapeShiftRequest (query, options, cb) {
 // We hide loading indication.
 // If it errored, we show a warning.
 // If it didn't, we update the state.
+function callBackgroundThenUpdateNoSpinner (method, ...args) {
+  return (dispatch) => {
+    method.call(background, ...args, (err) => {
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+      forceUpdateMetamaskState(dispatch)
+    })
+  }
+}
+
 function callBackgroundThenUpdate (method, ...args) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
@@ -996,7 +1700,7 @@ function callBackgroundThenUpdate (method, ...args) {
   }
 }
 
-function forceUpdateMetamaskState(dispatch){
+function forceUpdateMetamaskState (dispatch) {
   log.debug(`background.getState`)
   background.getState((err, newState) => {
     if (err) {
@@ -1005,3 +1709,50 @@ function forceUpdateMetamaskState(dispatch){
     dispatch(actions.updateMetamaskState(newState))
   })
 }
+
+function toggleAccountMenu () {
+  return {
+    type: actions.TOGGLE_ACCOUNT_MENU,
+  }
+}
+
+function setUseBlockie (val) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    log.debug(`background.setUseBlockie`)
+    background.setUseBlockie(val, (err) => {
+      dispatch(actions.hideLoadingIndication())
+      if (err) {
+        return dispatch(actions.displayWarning(err.message))
+      }
+    })
+    dispatch({
+      type: actions.SET_USE_BLOCKIE,
+      value: val,
+    })
+  }
+}
+
+function setNetworkEndpoints (networkEndpointType) {
+  return dispatch => {
+    log.debug('background.setNetworkEndpoints')
+    return new Promise((resolve, reject) => {
+      background.setNetworkEndpoints(networkEndpointType, err => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        dispatch(actions.updateNetworkEndpointType(networkEndpointType))
+        resolve(networkEndpointType)
+      })
+    })
+  }
+}
+
+function updateNetworkEndpointType (networkEndpointType) {
+  return {
+    type: actions.UPDATE_NETWORK_ENDPOINT_TYPE,
+    value: networkEndpointType,
+  }
+}
diff --git a/ui/app/add-token.js b/ui/app/add-token.js
new file mode 100644
index 000000000..3a806d34b
--- /dev/null
+++ b/ui/app/add-token.js
@@ -0,0 +1,362 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const classnames = require('classnames')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const R = require('ramda')
+const Fuse = require('fuse.js')
+const contractMap = require('eth-contract-metadata')
+const TokenBalance = require('./components/token-balance')
+const Identicon = require('./components/identicon')
+const contractList = Object.entries(contractMap)
+  .map(([ _, tokenData]) => tokenData)
+  .filter(tokenData => Boolean(tokenData.erc20))
+const fuse = new Fuse(contractList, {
+    shouldSort: true,
+    threshold: 0.45,
+    location: 0,
+    distance: 100,
+    maxPatternLength: 32,
+    minMatchCharLength: 1,
+    keys: [
+      { name: 'name', weight: 0.5 },
+      { name: 'symbol', weight: 0.5 },
+    ],
+})
+const actions = require('./actions')
+const ethUtil = require('ethereumjs-util')
+const { tokenInfoGetter } = require('./token-util')
+
+const emptyAddr = '0x0000000000000000000000000000000000000000'
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AddTokenScreen)
+
+function mapStateToProps (state) {
+  const { identities, tokens } = state.metamask
+  return {
+    identities,
+    tokens,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+    addTokens: tokens => dispatch(actions.addTokens(tokens)),
+  }
+}
+
+inherits(AddTokenScreen, Component)
+function AddTokenScreen () {
+  this.state = {
+    isShowingConfirmation: false,
+    customAddress: '',
+    customSymbol: '',
+    customDecimals: 0,
+    searchQuery: '',
+    isCollapsed: true,
+    selectedTokens: {},
+    errors: {},
+  }
+  this.tokenAddressDidChange = this.tokenAddressDidChange.bind(this)
+  this.onNext = this.onNext.bind(this)
+  Component.call(this)
+}
+
+AddTokenScreen.prototype.componentWillMount = function () {
+  this.tokenInfoGetter = tokenInfoGetter()
+}
+
+AddTokenScreen.prototype.toggleToken = function (address, token) {
+  const { selectedTokens, errors } = this.state
+  const { [address]: selectedToken } = selectedTokens
+  this.setState({
+    selectedTokens: {
+      ...selectedTokens,
+      [address]: selectedToken ? null : token,
+    },
+    errors: {
+      ...errors,
+      tokenSelector: null,
+    },
+  })
+}
+
+AddTokenScreen.prototype.onNext = function () {
+  const { isValid, errors } = this.validate()
+
+  return !isValid
+    ? this.setState({ errors })
+    : this.setState({ isShowingConfirmation: true })
+}
+
+AddTokenScreen.prototype.tokenAddressDidChange = function (e) {
+  const customAddress = e.target.value.trim()
+  this.setState({ customAddress })
+  if (ethUtil.isValidAddress(customAddress) && customAddress !== emptyAddr) {
+    this.attemptToAutoFillTokenParams(customAddress)
+  } else {
+    this.setState({
+      customSymbol: '',
+      customDecimals: 0,
+    })
+  }
+}
+
+AddTokenScreen.prototype.checkExistingAddresses = function (address) {
+  if (!address) return false
+  const tokensList = this.props.tokens
+  const matchesAddress = existingToken => {
+    return existingToken.address.toLowerCase() === address.toLowerCase()
+  }
+
+  return R.any(matchesAddress)(tokensList)
+}
+
+AddTokenScreen.prototype.validate = function () {
+  const errors = {}
+  const identitiesList = Object.keys(this.props.identities)
+  const { customAddress, customSymbol, customDecimals, selectedTokens } = this.state
+  const standardAddress = ethUtil.addHexPrefix(customAddress).toLowerCase()
+
+  if (customAddress) {
+    const validAddress = ethUtil.isValidAddress(customAddress)
+    if (!validAddress) {
+      errors.customAddress = 'Address is invalid. '
+    }
+
+    const validDecimals = customDecimals >= 0 && customDecimals < 36
+    if (!validDecimals) {
+      errors.customDecimals = 'Decimals must be at least 0, and not over 36.'
+    }
+
+    const symbolLen = customSymbol.trim().length
+    const validSymbol = symbolLen > 0 && symbolLen < 10
+    if (!validSymbol) {
+      errors.customSymbol = 'Symbol must be between 0 and 10 characters.'
+    }
+
+    const ownAddress = identitiesList.includes(standardAddress)
+    if (ownAddress) {
+      errors.customAddress = 'Personal address detected. Input the token contract address.'
+    }
+
+    const tokenAlreadyAdded = this.checkExistingAddresses(customAddress)
+    if (tokenAlreadyAdded) {
+      errors.customAddress = 'Token has already been added.'
+    }
+  } else if (
+    Object.entries(selectedTokens)
+      .reduce((isEmpty, [ symbol, isSelected ]) => (
+        isEmpty && !isSelected
+      ), true)
+  ) {
+    errors.tokenSelector = 'Must select at least 1 token.'
+  }
+
+  return {
+    isValid: !Object.keys(errors).length,
+    errors,
+  }
+}
+
+AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address) {
+  const { symbol, decimals } = await this.tokenInfoGetter(address)
+  if (symbol && decimals) {
+    this.setState({
+      customSymbol: symbol,
+      customDecimals: decimals.toString(),
+    })
+  }
+}
+
+AddTokenScreen.prototype.renderCustomForm = function () {
+  const { customAddress, customSymbol, customDecimals, errors } = this.state
+
+  return !this.state.isCollapsed && (
+    h('div.add-token__add-custom-form', [
+      h('div', {
+        className: classnames('add-token__add-custom-field', {
+          'add-token__add-custom-field--error': errors.customAddress,
+        }),
+      }, [
+        h('div.add-token__add-custom-label', 'Token Address'),
+        h('input.add-token__add-custom-input', {
+          type: 'text',
+          onChange: this.tokenAddressDidChange,
+          value: customAddress,
+        }),
+        h('div.add-token__add-custom-error-message', errors.customAddress),
+      ]),
+      h('div', {
+        className: classnames('add-token__add-custom-field', {
+          'add-token__add-custom-field--error': errors.customSymbol,
+        }),
+      }, [
+        h('div.add-token__add-custom-label', 'Token Symbol'),
+        h('input.add-token__add-custom-input', {
+          type: 'text',
+          value: customSymbol,
+          disabled: true,
+        }),
+        h('div.add-token__add-custom-error-message', errors.customSymbol),
+      ]),
+      h('div', {
+        className: classnames('add-token__add-custom-field', {
+          'add-token__add-custom-field--error': errors.customDecimals,
+        }),
+      }, [
+        h('div.add-token__add-custom-label', 'Decimals of Precision'),
+        h('input.add-token__add-custom-input', {
+          type: 'number',
+          value: customDecimals,
+          disabled: true,
+        }),
+        h('div.add-token__add-custom-error-message', errors.customDecimals),
+      ]),
+    ])
+  )
+}
+
+AddTokenScreen.prototype.renderTokenList = function () {
+  const { searchQuery = '', selectedTokens } = this.state
+  const fuseSearchResult = fuse.search(searchQuery)
+  const addressSearchResult = contractList.filter(token => {
+    return token.address.toLowerCase() === searchQuery.toLowerCase()
+  })
+  const results = [...addressSearchResult, ...fuseSearchResult]
+
+  return Array(6).fill(undefined)
+    .map((_, i) => {
+      const { logo, symbol, name, address } = results[i] || {}
+      const tokenAlreadyAdded = this.checkExistingAddresses(address)
+      return Boolean(logo || symbol || name) && (
+        h('div.add-token__token-wrapper', {
+          className: classnames({
+            'add-token__token-wrapper--selected': selectedTokens[address],
+            'add-token__token-wrapper--disabled': tokenAlreadyAdded,
+          }),
+          onClick: () => !tokenAlreadyAdded && this.toggleToken(address, results[i]),
+        }, [
+          h('div.add-token__token-icon', {
+            style: {
+              backgroundImage: `url(images/contract/${logo})`,
+            },
+          }),
+          h('div.add-token__token-data', [
+            h('div.add-token__token-symbol', symbol),
+            h('div.add-token__token-name', name),
+          ]),
+          // tokenAlreadyAdded && (
+          //   h('div.add-token__token-message', 'Already added')
+          // ),
+        ])
+      )
+    })
+}
+
+AddTokenScreen.prototype.renderConfirmation = function () {
+  const {
+    customAddress: address,
+    customSymbol: symbol,
+    customDecimals: decimals,
+    selectedTokens,
+  } = this.state
+
+  const { addTokens, goHome } = this.props
+
+  const customToken = {
+    address,
+    symbol,
+    decimals,
+  }
+
+  const tokens = address && symbol && decimals
+    ? { ...selectedTokens, [address]: customToken }
+    : selectedTokens
+
+  return (
+    h('div.add-token', [
+      h('div.add-token__wrapper', [
+        h('div.add-token__title-container.add-token__confirmation-title', [
+          h('div.add-token__title', 'Add Token'),
+          h('div.add-token__description', 'Would you like to add these tokens?'),
+        ]),
+        h('div.add-token__content-container.add-token__confirmation-content', [
+          h('div.add-token__description.add-token__confirmation-description', 'Your balances'),
+          h('div.add-token__confirmation-token-list',
+            Object.entries(tokens)
+              .map(([ address, token ]) => (
+                h('span.add-token__confirmation-token-list-item', [
+                  h(Identicon, {
+                    className: 'add-token__confirmation-token-icon',
+                    diameter: 75,
+                    address,
+                  }),
+                  h(TokenBalance, { token }),
+                ])
+              ))
+          ),
+        ]),
+      ]),
+      h('div.add-token__buttons', [
+        h('button.btn-cancel.add-token__button', {
+          onClick: () => this.setState({ isShowingConfirmation: false }),
+        }, 'Back'),
+        h('button.btn-clear.add-token__button', {
+          onClick: () => addTokens(tokens).then(goHome),
+        }, 'Add Tokens'),
+      ]),
+    ])
+  )
+}
+
+AddTokenScreen.prototype.render = function () {
+  const { isCollapsed, errors, isShowingConfirmation } = this.state
+  const { goHome } = this.props
+
+  return isShowingConfirmation
+    ? this.renderConfirmation()
+    : (
+    h('div.add-token', [
+      h('div.add-token__wrapper', [
+        h('div.add-token__title-container', [
+          h('div.add-token__title', 'Add Token'),
+          h('div.add-token__description', 'Keep track of the tokens you’ve bought with your MetaMask account. If you bought tokens using a different account, those tokens will not appear here.'),
+          h('div.add-token__description', 'Search for tokens or select from our list of popular tokens.'),
+        ]),
+        h('div.add-token__content-container', [
+          h('div.add-token__input-container', [
+            h('input.add-token__input', {
+              type: 'text',
+              placeholder: 'Search',
+              onChange: e => this.setState({ searchQuery: e.target.value }),
+            }),
+            h('div.add-token__search-input-error-message', errors.tokenSelector),
+          ]),
+          h(
+            'div.add-token__token-icons-container',
+            this.renderTokenList(),
+          ),
+        ]),
+        h('div.add-token__footers', [
+          h('div.add-token__add-custom', {
+            onClick: () => this.setState({ isCollapsed: !isCollapsed }),
+          }, [
+            'Add custom token',
+            h(`i.fa.fa-angle-${isCollapsed ? 'down' : 'up'}`),
+          ]),
+          this.renderCustomForm(),
+        ]),
+      ]),
+      h('div.add-token__buttons', [
+        h('button.btn-cancel.add-token__button', {
+          onClick: goHome,
+        }, 'Cancel'),
+        h('button.btn-clear.add-token__button', {
+          onClick: this.onNext,
+        }, 'Next'),
+      ]),
+    ])
+  )
+}
diff --git a/ui/app/app.js b/ui/app/app.js
index 5a7596aca..58e38a077 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -3,341 +3,333 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('./actions')
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+const classnames = require('classnames')
+
+// mascara
+const MascaraFirstTime = require('../../mascara/src/app/first-time').default
+const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default
 // init
-const InitializeMenuScreen = require('./first-time/init-menu')
+const OldUIInitializeMenuScreen = require('./first-time/init-menu')
+const InitializeMenuScreen = MascaraFirstTime
 const NewKeyChainScreen = require('./new-keychain')
-// unlock
-const UnlockScreen = require('./unlock')
 // accounts
-const AccountsScreen = require('./accounts')
-const AccountDetailScreen = require('./account-detail')
-const SendTransactionScreen = require('./send')
+const MainContainer = require('./main-container')
+const SendTransactionScreen2 = require('./components/send/send-v2-container')
 const ConfirmTxScreen = require('./conf-tx')
 // notice
 const NoticeScreen = require('./components/notice')
 const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
+
+// slideout menu
+const WalletView = require('./components/wallet-view')
+
 // other views
-const ConfigScreen = require('./config')
+const Settings = require('./settings')
+const AddTokenScreen = require('./add-token')
 const Import = require('./accounts/import')
-const InfoScreen = require('./info')
-const LoadingIndicator = require('./components/loading')
-const SandwichExpando = require('sandwich-expando')
-const MenuDroppo = require('menu-droppo')
-const DropMenuItem = require('./components/drop-menu-item')
+const NewAccount = require('./accounts/new-account')
+const Loading = require('./components/loading')
 const NetworkIndicator = require('./components/network')
-const Tooltip = require('./components/tooltip')
+const Identicon = require('./components/identicon')
 const BuyView = require('./components/buy-button-subview')
-const QrView = require('./components/qr-code')
 const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
 const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
 const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+const NetworkDropdown = require('./components/dropdowns/network-dropdown')
+const AccountMenu = require('./components/account-menu')
+const QrView = require('./components/qr-code')
+
+// Global Modals
+const Modal = require('./components/modals/index').Modal
 
-module.exports = connect(mapStateToProps)(App)
+module.exports = connect(mapStateToProps, mapDispatchToProps)(App)
 
 inherits(App, Component)
 function App () { Component.call(this) }
 
 function mapStateToProps (state) {
+  const {
+    identities,
+    accounts,
+    address,
+    keyrings,
+    isInitialized,
+    noActiveNotices,
+    seedWords,
+  } = state.metamask
+  const selected = address || Object.keys(accounts)[0]
+
   return {
     // state from plugin
+    networkDropdownOpen: state.appState.networkDropdownOpen,
+    sidebarOpen: state.appState.sidebarOpen,
     isLoading: state.appState.isLoading,
     loadingMessage: state.appState.loadingMessage,
     noActiveNotices: state.metamask.noActiveNotices,
     isInitialized: state.metamask.isInitialized,
     isUnlocked: state.metamask.isUnlocked,
+    selectedAddress: state.metamask.selectedAddress,
     currentView: state.appState.currentView,
     activeAddress: state.appState.activeAddress,
     transForward: state.appState.transForward,
+    isMascara: state.metamask.isMascara,
+    isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
+    isPopup: state.metamask.isPopup,
     seedWords: state.metamask.seedWords,
     unapprovedTxs: state.metamask.unapprovedTxs,
     unapprovedMsgs: state.metamask.unapprovedMsgs,
     menuOpen: state.appState.menuOpen,
     network: state.metamask.network,
     provider: state.metamask.provider,
-    forgottenPassword: state.appState.forgottenPassword,
+    forgottenPassword: state.metamask.forgottenPassword,
     lastUnreadNotice: state.metamask.lastUnreadNotice,
     lostAccounts: state.metamask.lostAccounts,
     frequentRpcList: state.metamask.frequentRpcList || [],
+    currentCurrency: state.metamask.currentCurrency,
+    isMouseUser: state.appState.isMouseUser,
+    betaUI: state.metamask.featureFlags.betaUI,
+
+    // state needed to get account dropdown temporarily rendering from app bar
+    identities,
+    selected,
+    keyrings,
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  return {
+    dispatch,
+    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)),
+  }
+}
+
+App.prototype.componentWillMount = function () {
+  if (!this.props.currentCurrency) {
+    this.props.setCurrentCurrencyToUSD()
   }
 }
 
 App.prototype.render = function () {
   var props = this.props
-  const { isLoading, loadingMessage, transForward } = props
+  const {
+    isLoading,
+    loadingMessage,
+    network,
+    isMouseUser,
+    setMouseUserState,
+  } = props
+  const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config'
+  const loadMessage = loadingMessage || isLoadingNetwork ?
+    `Connecting to ${this.getNetworkName()}` : null
   log.debug('Main ui render function')
 
   return (
-
-    h('.flex-column.flex-grow.full-height', {
+    h('.flex-column.full-height', {
+      className: classnames({ 'mouse-user-styles': isMouseUser }),
       style: {
-        // Windows was showing a vertical scroll bar:
-        overflow: 'hidden',
+        overflowX: 'hidden',
         position: 'relative',
+        alignItems: 'center',
+      },
+      tabIndex: '0',
+      onClick: () => setMouseUserState(true),
+      onKeyDown: (e) => {
+        if (e.keyCode === 9) {
+          setMouseUserState(false)
+        }
       },
     }, [
 
-      h(LoadingIndicator, { isLoading, loadingMessage }),
+      // global modal
+      h(Modal, {}, []),
 
       // app bar
       this.renderAppBar(),
-      this.renderNetworkDropdown(),
-      this.renderDropdown(),
 
-      // panel content
-      h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
-        style: {
-          height: '380px',
-          width: '360px',
-        },
-      }, [
-        h(ReactCSSTransitionGroup, {
-          className: 'css-transition-group',
-          transitionName: 'main',
-          transitionEnterTimeout: 300,
-          transitionLeaveTimeout: 300,
-        }, [
-          this.renderPrimary(),
-        ]),
-      ]),
+      // sidebar
+      this.renderSidebar(),
+
+      // network dropdown
+      h(NetworkDropdown, {
+        provider: this.props.provider,
+        frequentRpcList: this.props.frequentRpcList,
+      }, []),
+
+      h(AccountMenu),
+
+      (isLoading || isLoadingNetwork) && h(Loading, {
+        loadingMessage: loadMessage,
+      }),
+
+      // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
+
+      // content
+      this.renderPrimary(),
     ])
   )
 }
 
+App.prototype.renderGlobalModal = function () {
+  return h(Modal, {
+    ref: 'modalRef',
+  }, [
+    // h(BuyOptions, {}, []),
+  ])
+}
+
+App.prototype.renderSidebar = function () {
+
+  return h('div', {
+  }, [
+    h('style', `
+      .sidebar-enter {
+        transition: transform 300ms ease-in-out;
+        transform: translateX(-100%);
+      }
+      .sidebar-enter.sidebar-enter-active {
+        transition: transform 300ms ease-in-out;
+        transform: translateX(0%);
+      }
+      .sidebar-leave {
+        transition: transform 200ms ease-out;
+        transform: translateX(0%);
+      }
+      .sidebar-leave.sidebar-leave-active {
+        transition: transform 200ms ease-out;
+        transform: translateX(-100%);
+      }
+    `),
+
+    h(ReactCSSTransitionGroup, {
+      transitionName: 'sidebar',
+      transitionEnterTimeout: 300,
+      transitionLeaveTimeout: 200,
+    }, [
+      // A second instance of Walletview is used for non-mobile viewports
+      this.props.sidebarOpen ? h(WalletView, {
+        responsiveDisplayClassname: '.sidebar',
+        style: {},
+      }) : undefined,
+
+    ]),
+
+    // overlay
+    // TODO: add onClick for overlay to close sidebar
+    this.props.sidebarOpen ? h('div.sidebar-overlay', {
+      style: {},
+      onClick: () => {
+        this.props.hideSidebar()
+      },
+    }, []) : undefined,
+  ])
+}
+
 App.prototype.renderAppBar = function () {
+  const {
+    isUnlocked,
+    network,
+    provider,
+    networkDropdownOpen,
+    showNetworkDropdown,
+    hideNetworkDropdown,
+    currentView,
+  } = this.props
+
   if (window.METAMASK_UI_TYPE === 'notification') {
     return null
   }
 
   const props = this.props
-  const state = this.state || {}
-  const isNetworkMenuOpen = state.isNetworkMenuOpen || false
+  const {isMascara, isOnboarding} = props
+
+  // Do not render header if user is in mascara onboarding
+  if (isMascara && isOnboarding) {
+    return null
+  }
+
+  // Do not render header if user is in mascara buy ether
+  if (isMascara && props.currentView.name === 'buyEth') {
+    return null
+  }
 
   return (
 
-    h('div', [
+    h('.full-width', {
+      style: {},
+    }, [
 
       h('.app-header.flex-row.flex-space-between', {
-        style: {
-          alignItems: 'center',
-          visibility: props.isUnlocked ? 'visible' : 'none',
-          background: props.isUnlocked ? 'white' : 'none',
-          height: '36px',
-          position: 'relative',
-          zIndex: 10,
-        },
+        className: classnames({
+          'app-header--initialized': !isOnboarding,
+        }),
       }, [
-
-        h('div', {
-          style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        }, [
-
-          // mini logo
-          h('img', {
-            height: 24,
-            width: 24,
-            src: '/images/icon-128.png',
-          }),
-
-          h('#network-spacer.flex-center', {
-            style: {
-              marginRight: '-72px',
+        h('div.app-header-contents', {}, [
+          h('div.left-menu-wrapper', {
+            onClick: () => {
+              props.dispatch(actions.backToAccountDetail(props.activeAddress))
             },
           }, [
-            h(NetworkIndicator, {
-              network: this.props.network,
-              provider: this.props.provider,
-              onClick: (event) => {
-                event.preventDefault()
-                event.stopPropagation()
-                this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
-              },
+            // mini logo
+            h('img.metafox-icon', {
+              height: 42,
+              width: 42,
+              src: '/images/metamask-fox.svg',
             }),
-          ]),
-        ]),
-
-        // metamask name
-        props.isUnlocked && h('h1', {
-          style: {
-            position: 'relative',
-            left: '9px',
-          },
-        }, 'MetaMask'),
 
-        props.isUnlocked && h('div', {
-          style: {
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        }, [
+            // metamask name
+            h('h1', 'MetaMask'),
 
-          // small accounts nav
-          props.isUnlocked && h(Tooltip, { title: 'Switch Accounts' }, [
-            h('img.cursor-pointer.color-orange', {
-              src: 'images/switch_acc.svg',
-              style: {
-                width: '23.5px',
-                marginRight: '8px',
-              },
-              onClick: (event) => {
-                event.stopPropagation()
-                this.props.dispatch(actions.showAccountsPage())
-              },
-            }),
           ]),
 
-          // hamburger
-          props.isUnlocked && h(SandwichExpando, {
-            width: 16,
-            barHeight: 2,
-            padding: 0,
-            isOpen: state.isMainMenuOpen,
-            color: 'rgb(247,146,30)',
-            onClick: (event) => {
-              event.preventDefault()
-              event.stopPropagation()
-              this.setState({ isMainMenuOpen: !state.isMainMenuOpen })
-            },
-          }),
+          h('div.header__right-actions', [
+            h('div.network-component-wrapper', {
+              style: {},
+            }, [
+              // Network Indicator
+              h(NetworkIndicator, {
+                network,
+                provider,
+                disabled: currentView.name === 'confTx',
+                onClick: (event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  return networkDropdownOpen === false
+                    ? showNetworkDropdown()
+                    : hideNetworkDropdown()
+                },
+              }),
+
+            ]),
+
+            isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [
+              h(Identicon, {
+                address: this.props.selectedAddress,
+                diameter: 32,
+              }),
+            ]),
+          ]),
         ]),
       ]),
+
     ])
   )
 }
 
-App.prototype.renderNetworkDropdown = function () {
-  const props = this.props
-  const rpcList = props.frequentRpcList
-  const state = this.state || {}
-  const isOpen = state.isNetworkMenuOpen
-
-  return h(MenuDroppo, {
-    isOpen,
-    onClickOutside: (event) => {
-      this.setState({ isNetworkMenuOpen: !isOpen })
-    },
-    zIndex: 1,
-    style: {
-      position: 'absolute',
-      left: 0,
-      top: '36px',
-    },
-    innerStyle: {
-      background: 'white',
-      boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
-    },
-  }, [ // DROP MENU ITEMS
-    h('style', `
-      .drop-menu-item:hover { background:rgb(235, 235, 235); }
-      .drop-menu-item i { margin: 11px; }
-    `),
+App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) {
+  const { isMascara } = this.props
 
-    h(DropMenuItem, {
-      label: 'Main Ethereum Network',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-      action: () => props.dispatch(actions.setProviderType('mainnet')),
-      icon: h('.menu-icon.diamond'),
-      activeNetworkRender: props.network,
-      provider: props.provider,
-    }),
-
-    h(DropMenuItem, {
-      label: 'Ropsten Test Network',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-      action: () => props.dispatch(actions.setProviderType('testnet')),
-      icon: h('.menu-icon.red-dot'),
-      activeNetworkRender: props.network,
-      provider: props.provider,
-    }),
-
-    h(DropMenuItem, {
-      label: 'Kovan Test Network',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false}),
-      action: () => props.dispatch(actions.setProviderType('kovan')),
-      icon: h('.menu-icon.hollow-diamond'),
-      activeNetworkRender: props.network,
-      provider: props.provider,
-    }),
-
-    h(DropMenuItem, {
-      label: 'Localhost 8545',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-      action: () => props.dispatch(actions.setDefaultRpcTarget(rpcList)),
-      icon: h('i.fa.fa-question-circle.fa-lg'),
-      activeNetworkRender: props.provider.rpcTarget,
-    }),
-
-    this.renderCustomOption(props.provider),
-    this.renderCommonRpc(rpcList, props.provider),
-
-    h(DropMenuItem, {
-      label: 'Custom RPC',
-      closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-      action: () => this.props.dispatch(actions.showConfigPage()),
-      icon: h('i.fa.fa-question-circle.fa-lg'),
-    }),
-
-  ])
-}
-
-App.prototype.renderDropdown = function () {
-  const state = this.state || {}
-  const isOpen = state.isMainMenuOpen
-
-  return h(MenuDroppo, {
-    isOpen: isOpen,
-    zIndex: 1,
-    onClickOutside: (event) => {
-      this.setState({ isMainMenuOpen: !isOpen })
-    },
-    style: {
-      position: 'absolute',
-      right: 0,
-      top: '36px',
-    },
-    innerStyle: {
-      background: 'white',
-      boxShadow: '1px 1px 2px rgba(0,0,0,0.1)',
-    },
-  }, [ // DROP MENU ITEMS
-    h('style', `
-      .drop-menu-item:hover { background:rgb(235, 235, 235); }
-      .drop-menu-item i { margin: 11px; }
-    `),
-
-    h(DropMenuItem, {
-      label: 'Settings',
-      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      action: () => this.props.dispatch(actions.showConfigPage()),
-      icon: h('i.fa.fa-gear.fa-lg'),
-    }),
-
-    h(DropMenuItem, {
-      label: 'Import Account',
-      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      action: () => this.props.dispatch(actions.showImportPage()),
-      icon: h('i.fa.fa-arrow-circle-o-up.fa-lg'),
-    }),
-
-    h(DropMenuItem, {
-      label: 'Lock',
-      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      action: () => this.props.dispatch(actions.lockMetamask()),
-      icon: h('i.fa.fa-lock.fa-lg'),
-    }),
-
-    h(DropMenuItem, {
-      label: 'Info',
-      closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
-      action: () => this.props.dispatch(actions.showInfoPage()),
-      icon: h('i.fa.fa-question.fa-lg'),
-    }),
-  ])
+  return isMascara
+    ? null
+    : h(Loading, {
+      isLoading: isLoading || isLoadingNetwork,
+      loadingMessage: loadMessage,
+    })
 }
 
 App.prototype.renderBackButton = function (style, justArrow = false) {
@@ -362,6 +354,11 @@ App.prototype.renderBackButton = function (style, justArrow = false) {
 App.prototype.renderPrimary = function () {
   log.debug('rendering primary')
   var props = this.props
+  const {isMascara, isOnboarding, betaUI} = props
+
+  if ((isMascara || betaUI) && isOnboarding && !props.isPopup) {
+    return h(MascaraFirstTime)
+  }
 
   // notices
   if (!props.noActiveNotices) {
@@ -380,59 +377,56 @@ App.prototype.renderPrimary = function () {
     })
   }
 
-  if (props.seedWords) {
-    log.debug('rendering seed words')
-    return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'})
-  }
-
-  // show initialize screen
-  if (!props.isInitialized || props.forgottenPassword) {
-    // show current view
-    log.debug('rendering an initialize screen')
-    switch (props.currentView.name) {
-
-      case 'restoreVault':
-        log.debug('rendering restore vault screen')
-        return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
-
-      default:
-        log.debug('rendering menu screen')
-        return h(InitializeMenuScreen, {key: 'menuScreenInit'})
-    }
+  if (props.isInitialized && props.forgottenPassword) {
+    log.debug('rendering restore vault screen')
+    return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
+  } else if (!props.isInitialized && !props.isUnlocked) {
+    log.debug('rendering menu screen')
+    return props.isPopup
+      ? h(OldUIInitializeMenuScreen, {key: 'menuScreenInit'})
+      : h(InitializeMenuScreen, {key: 'menuScreenInit'})
   }
 
   // show unlock screen
   if (!props.isUnlocked) {
-    switch (props.currentView.name) {
-
-      case 'restoreVault':
-        log.debug('rendering restore vault screen')
-        return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
-
-      case 'config':
-        log.debug('rendering config screen from unlock screen.')
-        return h(ConfigScreen, {key: 'config'})
+    return h(MainContainer, {
+      currentViewName: props.currentView.name,
+      isUnlocked: props.isUnlocked,
+    })
+  }
 
-      default:
-        log.debug('rendering locked screen')
-        return h(UnlockScreen, {key: 'locked'})
-    }
+  // show seed words screen
+  if (props.seedWords) {
+    log.debug('rendering seed words')
+    return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'})
   }
 
   // show current view
   switch (props.currentView.name) {
 
-    case 'accounts':
-      log.debug('rendering accounts screen')
-      return h(AccountsScreen, {key: 'accounts'})
-
     case 'accountDetail':
-      log.debug('rendering account detail screen')
-      return h(AccountDetailScreen, {key: 'account-detail'})
+      log.debug('rendering main container')
+      return h(MainContainer, {key: 'account-detail'})
 
     case 'sendTransaction':
       log.debug('rendering send tx screen')
-      return h(SendTransactionScreen, {key: 'send-transaction'})
+
+      // Going to leave this here until we are ready to delete SendTransactionScreen v1
+      // const SendComponentToRender = checkFeatureToggle('send-v2')
+      //   ? SendTransactionScreen2
+      //   : SendTransactionScreen
+
+      return h(SendTransactionScreen2, {key: 'send-transaction'})
+
+    case 'sendToken':
+      log.debug('rendering send token screen')
+
+      // Going to leave this here until we are ready to delete SendTransactionScreen v1
+      // const SendTokenComponentToRender = checkFeatureToggle('send-v2')
+      //   ? SendTransactionScreen2
+      //   : SendTokenScreen
+
+      return h(SendTransactionScreen2, {key: 'sendToken'})
 
     case 'newKeychain':
       log.debug('rendering new keychain screen')
@@ -442,26 +436,38 @@ App.prototype.renderPrimary = function () {
       log.debug('rendering confirm tx screen')
       return h(ConfirmTxScreen, {key: 'confirm-tx'})
 
+    case 'add-token':
+      log.debug('rendering add-token screen from unlock screen.')
+      return h(AddTokenScreen, {key: 'add-token'})
+
     case 'config':
       log.debug('rendering config screen')
-      return h(ConfigScreen, {key: 'config'})
+      return h(Settings, {key: 'config'})
 
     case 'import-menu':
       log.debug('rendering import screen')
       return h(Import, {key: 'import-menu'})
 
+    case 'new-account-page':
+      log.debug('rendering new account screen')
+      return h(NewAccount, {key: 'new-account'})
+
     case 'reveal-seed-conf':
       log.debug('rendering reveal seed confirmation screen')
       return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'})
 
     case 'info':
       log.debug('rendering info screen')
-      return h(InfoScreen, {key: 'info'})
+      return h(Settings, {key: 'info', tab: 'info'})
 
     case 'buyEth':
       log.debug('rendering buy ether screen')
       return h(BuyView, {key: 'buyEthView'})
 
+    case 'onboardingBuyEth':
+      log.debug('rendering onboarding buy ether screen')
+      return h(MascaraBuyEtherScreen, {key: 'buyEthView'})
+
     case 'qr':
       log.debug('rendering show qr screen')
       return h('div', {
@@ -492,7 +498,7 @@ App.prototype.renderPrimary = function () {
 
     default:
       log.debug('rendering default, account detail screen')
-      return h(AccountDetailScreen, {key: 'account-detail'})
+      return h(MainContainer, {key: 'account-detail'})
   }
 }
 
@@ -508,49 +514,23 @@ App.prototype.toggleMetamaskActive = function () {
   }
 }
 
-App.prototype.renderCustomOption = function (provider) {
-  const { rpcTarget, type } = provider
-  if (type !== 'rpc') return null
-
-  // Concatenate long URLs
-  let label = rpcTarget
-  if (rpcTarget.length > 31) {
-    label = label.substr(0, 34) + '...'
-  }
-
-  switch (rpcTarget) {
+App.prototype.getNetworkName = function () {
+  const { provider } = this.props
+  const providerName = provider.type
 
-    case 'http://localhost:8545':
-      return null
+  let name
 
-    default:
-      return h(DropMenuItem, {
-        label,
-        key: rpcTarget,
-        closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-        icon: h('i.fa.fa-question-circle.fa-lg'),
-        activeNetworkRender: 'custom',
-      })
+  if (providerName === 'mainnet') {
+    name = 'Main Ethereum Network'
+  } else if (providerName === 'ropsten') {
+    name = 'Ropsten Test Network'
+  } else if (providerName === 'kovan') {
+    name = 'Kovan Test Network'
+  } else if (providerName === 'rinkeby') {
+    name = 'Rinkeby Test Network'
+  } else {
+    name = 'Unknown Private Network'
   }
-}
-
-App.prototype.renderCommonRpc = function (rpcList, provider) {
-  const { rpcTarget } = provider
-  const props = this.props
-
-  return rpcList.map((rpc) => {
-    if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
-      return null
-    } else {
-      return h(DropMenuItem, {
-        label: rpc,
-        key: rpc,
-        closeMenu: () => this.setState({ isNetworkMenuOpen: false }),
-        action: () => props.dispatch(actions.setRpcTarget(rpc)),
-        icon: h('i.fa.fa-question-circle.fa-lg'),
-        activeNetworkRender: rpc,
-      })
-    }
-  })
 
+  return name
 }
diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
new file mode 100644
index 000000000..f69a6ca68
--- /dev/null
+++ b/ui/app/components/account-dropdowns.js
@@ -0,0 +1,320 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const actions = require('../actions')
+const genAccountLink = require('etherscan-link').createAccountLink
+const connect = require('react-redux').connect
+const Dropdown = require('./dropdown').Dropdown
+const DropdownMenuItem = require('./dropdown').DropdownMenuItem
+const Identicon = require('./identicon')
+const ethUtil = require('ethereumjs-util')
+const copyToClipboard = require('copy-to-clipboard')
+
+class AccountDropdowns extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      accountSelectorActive: false,
+      optionsMenuActive: false,
+    }
+    this.accountSelectorToggleClassName = 'accounts-selector'
+    this.optionsMenuToggleClassName = 'fa-ellipsis-h'
+  }
+
+  renderAccounts () {
+    const { identities, selected, keyrings } = this.props
+
+    return Object.keys(identities).map((key, index) => {
+      const identity = identities[key]
+      const isSelected = identity.address === selected
+
+      const simpleAddress = identity.address.substring(2).toLowerCase()
+
+      const keyring = keyrings.find((kr) => {
+        return kr.accounts.includes(simpleAddress) ||
+          kr.accounts.includes(identity.address)
+      })
+
+      return h(
+        DropdownMenuItem,
+        {
+          closeMenu: () => {},
+          onClick: () => {
+            this.props.actions.showAccountDetail(identity.address)
+          },
+          style: {
+            marginTop: index === 0 ? '5px' : '',
+            fontSize: '24px',
+          },
+        },
+        [
+          h(
+            Identicon,
+            {
+              address: identity.address,
+              diameter: 32,
+              style: {
+                marginLeft: '10px',
+              },
+            },
+          ),
+          this.indicateIfLoose(keyring),
+          h('span', {
+            style: {
+              marginLeft: '20px',
+              fontSize: '24px',
+              maxWidth: '145px',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            },
+          }, identity.name || ''),
+          h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
+        ]
+      )
+    })
+  }
+
+  indicateIfLoose (keyring) {
+    try { // Sometimes keyrings aren't loaded yet:
+      const type = keyring.type
+      const isLoose = type !== 'HD Key Tree'
+      return isLoose ? h('.keyring-label', 'LOOSE') : null
+    } catch (e) { return }
+  }
+
+  renderAccountSelector () {
+    const { actions } = this.props
+    const { accountSelectorActive } = this.state
+
+    return h(
+      Dropdown,
+      {
+        useCssTransition: true, // Hardcoded because account selector is temporarily in app-header
+        style: {
+          marginLeft: '-238px',
+          marginTop: '38px',
+          minWidth: '180px',
+          overflowY: 'auto',
+          maxHeight: '300px',
+          width: '300px',
+        },
+        innerStyle: {
+          padding: '8px 25px',
+        },
+        isOpen: accountSelectorActive,
+        onClickOutside: (event) => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
+          if (accountSelectorActive && isNotToggleElement) {
+            this.setState({ accountSelectorActive: false })
+          }
+        },
+      },
+      [
+        ...this.renderAccounts(),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => actions.addNewAccount(),
+          },
+          [
+            h(
+              Identicon,
+              {
+                style: {
+                  marginLeft: '10px',
+                },
+                diameter: 32,
+              },
+            ),
+            h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, 'Create Account'),
+          ],
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => actions.showImportPage(),
+          },
+          [
+            h(
+              Identicon,
+              {
+                style: {
+                  marginLeft: '10px',
+                },
+                diameter: 32,
+              },
+            ),
+            h('span', {
+              style: {
+                marginLeft: '20px',
+                fontSize: '24px',
+                marginBottom: '5px',
+              },
+            }, 'Import Account'),
+          ]
+        ),
+      ]
+    )
+  }
+
+  renderAccountOptions () {
+    const { actions } = this.props
+    const { optionsMenuActive } = this.state
+
+    return h(
+      Dropdown,
+      {
+        style: {
+          marginLeft: '-215px',
+          minWidth: '180px',
+        },
+        isOpen: optionsMenuActive,
+        onClickOutside: () => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
+          if (optionsMenuActive && isNotToggleElement) {
+            this.setState({ optionsMenuActive: false })
+          }
+        },
+      },
+      [
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected, network } = this.props
+              const url = genAccountLink(selected, network)
+              global.platform.openWindow({ url })
+            },
+          },
+          'View account on Etherscan',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected, identities } = this.props
+              var identity = identities[selected]
+              actions.showQrView(selected, identity ? identity.name : '')
+            },
+          },
+          'Show QR Code',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected } = this.props
+              const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
+              copyToClipboard(checkSumAddress)
+            },
+          },
+          'Copy Address to clipboard',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              actions.requestAccountExport()
+            },
+          },
+          'Export Private Key',
+        ),
+      ]
+    )
+  }
+
+  render () {
+    const { style, enableAccountsSelector, enableAccountOptions } = this.props
+    const { optionsMenuActive, accountSelectorActive } = this.state
+
+    return h(
+      'span',
+      {
+        style: style,
+      },
+      [
+        enableAccountsSelector && h(
+          // 'i.fa.fa-angle-down',
+          'div.cursor-pointer.color-orange.accounts-selector',
+          {
+            style: {
+              // fontSize: '1.8em',
+              background: 'url(images/switch_acc.svg) white center center no-repeat',
+              height: '25px',
+              width: '25px',
+              transform: 'scale(0.75)',
+              marginRight: '3px',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: !accountSelectorActive,
+                optionsMenuActive: false,
+              })
+            },
+          },
+          this.renderAccountSelector(),
+        ),
+        enableAccountOptions && h(
+          'i.fa.fa-ellipsis-h',
+          {
+            style: {
+              marginRight: '0.5em',
+              fontSize: '1.8em',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: false,
+                optionsMenuActive: !optionsMenuActive,
+              })
+            },
+          },
+          this.renderAccountOptions()
+        ),
+      ]
+    )
+  }
+}
+
+AccountDropdowns.defaultProps = {
+  enableAccountsSelector: false,
+  enableAccountOptions: false,
+}
+
+AccountDropdowns.propTypes = {
+  identities: PropTypes.objectOf(PropTypes.object),
+  selected: PropTypes.string,
+  keyrings: PropTypes.array,
+  actions: PropTypes.objectOf(PropTypes.func),
+  network: PropTypes.string,
+  style: PropTypes.object,
+  enableAccountOptions: PropTypes.bool,
+  enableAccountsSelector: PropTypes.bool,
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    actions: {
+      showConfigPage: () => dispatch(actions.showConfigPage()),
+      requestAccountExport: () => dispatch(actions.requestExportAccount()),
+      showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
+      addNewAccount: () => dispatch(actions.addNewAccount()),
+      showImportPage: () => dispatch(actions.showImportPage()),
+      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    },
+  }
+}
+
+module.exports = {
+  AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns),
+}
diff --git a/ui/app/components/account-export.js b/ui/app/components/account-export.js
index 888196c5d..32b103c86 100644
--- a/ui/app/components/account-export.js
+++ b/ui/app/components/account-export.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const exportAsFile = require('../util').exportAsFile
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const ethUtil = require('ethereumjs-util')
@@ -20,22 +21,21 @@ function mapStateToProps (state) {
 }
 
 ExportAccountView.prototype.render = function () {
-  console.log('EXPORT VIEW')
-  console.dir(this.props)
-  var state = this.props
-  var accountDetail = state.accountDetail
+  const state = this.props
+  const accountDetail = state.accountDetail
+  const nickname = state.identities[state.address].name
 
   if (!accountDetail) return h('div')
-  var accountExport = accountDetail.accountExport
+  const accountExport = accountDetail.accountExport
 
-  var notExporting = accountExport === 'none'
-  var exportRequested = accountExport === 'requested'
-  var accountExported = accountExport === 'completed'
+  const notExporting = accountExport === 'none'
+  const exportRequested = accountExport === 'requested'
+  const accountExported = accountExport === 'completed'
 
   if (notExporting) return h('div')
 
   if (exportRequested) {
-    var warning = `Export private keys at your own risk.`
+    const warning = `Export private keys at your own risk.`
     return (
       h('div', {
         style: {
@@ -91,6 +91,8 @@ ExportAccountView.prototype.render = function () {
   }
 
   if (accountExported) {
+    const plainKey = ethUtil.stripHexPrefix(accountDetail.privateKey)
+
     return h('div.privateKey', {
       style: {
         margin: '0 20px',
@@ -102,15 +104,21 @@ ExportAccountView.prototype.render = function () {
           textOverflow: 'ellipsis',
           overflow: 'hidden',
           webkitUserSelect: 'text',
-          width: '100%',
+          maxWidth: '275px',
         },
         onClick: function (event) {
           copyToClipboard(ethUtil.stripHexPrefix(accountDetail.privateKey))
         },
-      }, ethUtil.stripHexPrefix(accountDetail.privateKey)),
+      }, plainKey),
       h('button', {
         onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
       }, 'Done'),
+      h('button', {
+        style: {
+          marginLeft: '10px',
+        },
+        onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey),
+      }, 'Save as File'),
     ])
   }
 }
@@ -119,6 +127,6 @@ ExportAccountView.prototype.onExportKeyPress = function (event) {
   if (event.key !== 'Enter') return
   event.preventDefault()
 
-  var input = document.getElementById('exportAccount').value
+  const input = document.getElementById('exportAccount').value
   this.props.dispatch(actions.exportAccount(input, this.props.address))
 }
diff --git a/ui/app/components/account-info-link.js b/ui/app/components/account-info-link.js
deleted file mode 100644
index 6526ab502..000000000
--- a/ui/app/components/account-info-link.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const Tooltip = require('./tooltip')
-const genAccountLink = require('../../lib/account-link')
-
-module.exports = AccountInfoLink
-
-inherits(AccountInfoLink, Component)
-function AccountInfoLink () {
-  Component.call(this)
-}
-
-AccountInfoLink.prototype.render = function () {
-  const { selected, network } = this.props
-  const title = 'View account on Etherscan'
-  const url = genAccountLink(selected, network)
-
-  if (!url) {
-    return null
-  }
-
-  return h('.account-info-link', {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-  }, [
-
-    h(Tooltip, {
-      title,
-    }, [
-      h('i.fa.fa-info-circle.cursor-pointer.color-orange', {
-        style: {
-          margin: '5px',
-        },
-        onClick () { global.platform.openWindow({ url }) },
-      }),
-    ]),
-  ])
-}
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
new file mode 100644
index 000000000..1a0103d4f
--- /dev/null
+++ b/ui/app/components/account-menu/index.js
@@ -0,0 +1,160 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const actions = require('../../actions')
+const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
+const Identicon = require('../identicon')
+const { formatBalance } = require('../../util')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu)
+
+inherits(AccountMenu, Component)
+function AccountMenu () { Component.call(this) }
+
+function mapStateToProps (state) {
+  return {
+    selectedAddress: state.metamask.selectedAddress,
+    isAccountMenuOpen: state.metamask.isAccountMenuOpen,
+    keyrings: state.metamask.keyrings,
+    identities: state.metamask.identities,
+    accounts: state.metamask.accounts,
+
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
+    showAccountDetail: address => {
+      dispatch(actions.showAccountDetail(address))
+      dispatch(actions.hideSidebar())
+      dispatch(actions.toggleAccountMenu())
+    },
+    lockMetamask: () => {
+      dispatch(actions.lockMetamask())
+      dispatch(actions.hideWarning())
+      dispatch(actions.hideSidebar())
+      dispatch(actions.toggleAccountMenu())
+    },
+    showConfigPage: () => {
+      dispatch(actions.showConfigPage())
+      dispatch(actions.hideSidebar())
+      dispatch(actions.toggleAccountMenu())
+    },
+    showNewAccountPage: (formToSelect) => {
+      dispatch(actions.showNewAccountPage(formToSelect))
+      dispatch(actions.hideSidebar())
+      dispatch(actions.toggleAccountMenu())
+    },
+    showInfoPage: () => {
+      dispatch(actions.showInfoPage())
+      dispatch(actions.hideSidebar())
+      dispatch(actions.toggleAccountMenu())
+    },
+  }
+}
+
+AccountMenu.prototype.render = function () {
+  const {
+    isAccountMenuOpen,
+    toggleAccountMenu,
+    showNewAccountPage,
+    lockMetamask,
+    showConfigPage,
+    showInfoPage,
+  } = this.props
+
+  return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [
+    h(CloseArea, { onClick: toggleAccountMenu }),
+    h(Item, {
+      className: 'account-menu__header',
+    }, [
+      'My Accounts',
+      h('button.account-menu__logout-button', {
+        onClick: lockMetamask,
+      }, 'Log out'),
+    ]),
+    h(Divider),
+    h('div.account-menu__accounts', this.renderAccounts()),
+    h(Divider),
+    h(Item, {
+      onClick: () => showNewAccountPage('CREATE'),
+      icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
+      text: 'Create Account',
+    }),
+    h(Item, {
+      onClick: () => showNewAccountPage('IMPORT'),
+      icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
+      text: 'Import Account',
+    }),
+    h(Divider),
+    h(Item, {
+      onClick: showInfoPage,
+      icon: h('img.account-menu__item-icon', { src: 'images/mm-info-icon.svg' }),
+      text: 'Info & Help',
+    }),
+    h(Item, {
+      onClick: showConfigPage,
+      icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
+      text: 'Settings',
+    }),
+  ])
+}
+
+AccountMenu.prototype.renderAccounts = function () {
+  const {
+    identities,
+    accounts,
+    selectedAddress,
+    keyrings,
+    showAccountDetail,
+  } = this.props
+
+  return Object.keys(identities).map((key, index) => {
+    const identity = identities[key]
+    const isSelected = identity.address === selectedAddress
+
+    const balanceValue = accounts[key] ? accounts[key].balance : ''
+    const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+    const simpleAddress = identity.address.substring(2).toLowerCase()
+
+    const keyring = keyrings.find((kr) => {
+      return kr.accounts.includes(simpleAddress) ||
+        kr.accounts.includes(identity.address)
+    })
+
+    return h(
+      'div.account-menu__account.menu__item--clickable',
+      { onClick: () => showAccountDetail(identity.address) },
+      [
+        h('div.account-menu__check-mark', [
+          isSelected ? h('div.account-menu__check-mark-icon') : null,
+        ]),
+
+        h(
+          Identicon,
+          {
+            address: identity.address,
+            diameter: 24,
+          },
+        ),
+
+        h('div.account-menu__account-info', [
+          h('div.account-menu__name', identity.name || ''),
+          h('div.account-menu__balance', formattedBalance),
+        ]),
+
+        this.indicateIfLoose(keyring),
+      ],
+    )
+  })
+}
+
+AccountMenu.prototype.indicateIfLoose = function (keyring) {
+  try { // Sometimes keyrings aren't loaded yet:
+    const type = keyring.type
+    const isLoose = type !== 'HD Key Tree'
+    return isLoose ? h('.keyring-label', 'IMPORTED') : null
+  } catch (e) { return }
+}
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
new file mode 100644
index 000000000..d591ab455
--- /dev/null
+++ b/ui/app/components/balance-component.js
@@ -0,0 +1,121 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const TokenBalance = require('./token-balance')
+const Identicon = require('./identicon')
+
+const { formatBalance, generateBalanceObject } = require('../util')
+
+module.exports = connect(mapStateToProps)(BalanceComponent)
+
+function mapStateToProps (state) {
+  const accounts = state.metamask.accounts
+  const network = state.metamask.network
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const account = accounts[selectedAddress]
+
+  return {
+    account,
+    network,
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
+  }
+}
+
+inherits(BalanceComponent, Component)
+function BalanceComponent () {
+  Component.call(this)
+}
+
+BalanceComponent.prototype.render = function () {
+  const props = this.props
+  const { token, network } = props
+
+  return h('div.balance-container', {}, [
+
+    // TODO: balance icon needs to be passed in
+    // h('img.balance-icon', {
+    //   src: '../images/eth_logo.svg',
+    //   style: {},
+    // }),
+    h(Identicon, {
+      diameter: 50,
+      address: token && token.address,
+      network,
+    }),
+
+    token ? this.renderTokenBalance() : this.renderBalance(),
+  ])
+}
+
+BalanceComponent.prototype.renderTokenBalance = function () {
+  const { token } = this.props
+
+  return h('div.flex-column.balance-display', [
+    h('div.token-amount', [ h(TokenBalance, { token }) ]),
+  ])
+}
+
+BalanceComponent.prototype.renderBalance = function () {
+  const props = this.props
+  const { shorten, account } = props
+  const balanceValue = account && account.balance
+  const needsParse = 'needsParse' in props ? props.needsParse : true
+  const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse) : '...'
+  const showFiat = 'showFiat' in props ? props.showFiat : true
+
+  if (formattedBalance === 'None' || formattedBalance === '...') {
+    return h('div.flex-column.balance-display', {}, [
+      h('div.token-amount', {
+        style: {},
+      }, formattedBalance),
+    ])
+  }
+
+  return h('div.flex-column.balance-display', {}, [
+    h('div.token-amount', {
+      style: {},
+    }, this.getTokenBalance(formattedBalance, shorten)),
+
+    showFiat ? this.renderFiatValue(formattedBalance) : null,
+  ])
+}
+
+BalanceComponent.prototype.renderFiatValue = function (formattedBalance) {
+
+  const { conversionRate, currentCurrency } = this.props
+
+  const fiatDisplayNumber = this.getFiatDisplayNumber(formattedBalance, conversionRate)
+
+  const fiatPrefix = currentCurrency === 'USD' ? '$' : ''
+
+  return this.renderFiatAmount(fiatDisplayNumber, currentCurrency, fiatPrefix)
+}
+
+BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatSuffix, fiatPrefix) {
+  const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0
+  if (shouldNotRenderFiat) return null
+
+  return h('div.fiat-amount', {
+    style: {},
+  }, `${fiatPrefix}${fiatDisplayNumber} ${fiatSuffix}`)
+}
+
+BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) {
+  const balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3)
+
+  const balanceValue = shorten ? balanceObj.shortBalance : balanceObj.balance
+  const label = balanceObj.label
+
+  return `${balanceValue} ${label}`
+}
+
+BalanceComponent.prototype.getFiatDisplayNumber = function (formattedBalance, conversionRate) {
+  if (formattedBalance === 'None') return formattedBalance
+  if (conversionRate === 0) return 'N/A'
+
+  const splitBalance = formattedBalance.split(' ')
+
+  return (Number(splitBalance[0]) * conversionRate).toFixed(2)
+}
diff --git a/ui/app/components/balance.js b/ui/app/components/balance.js
new file mode 100644
index 000000000..57ca84564
--- /dev/null
+++ b/ui/app/components/balance.js
@@ -0,0 +1,89 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const formatBalance = require('../util').formatBalance
+const generateBalanceObject = require('../util').generateBalanceObject
+const Tooltip = require('./tooltip.js')
+const FiatValue = require('./fiat-value.js')
+
+module.exports = EthBalanceComponent
+
+inherits(EthBalanceComponent, Component)
+function EthBalanceComponent () {
+  Component.call(this)
+}
+
+EthBalanceComponent.prototype.render = function () {
+  var props = this.props
+  let { value } = props
+  var style = props.style
+  var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
+  value = value ? formatBalance(value, 6, needsParse) : '...'
+  var width = props.width
+
+  return (
+
+    h('.ether-balance.ether-balance-amount', {
+      style: style,
+    }, [
+      h('div', {
+        style: {
+          display: 'inline',
+          width: width,
+        },
+      }, this.renderBalance(value)),
+    ])
+
+  )
+}
+EthBalanceComponent.prototype.renderBalance = function (value) {
+  var props = this.props
+  if (value === 'None') return value
+  if (value === '...') return value
+  var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3)
+  var balance
+  var splitBalance = value.split(' ')
+  var ethNumber = splitBalance[0]
+  var ethSuffix = splitBalance[1]
+  const showFiat = 'showFiat' in props ? props.showFiat : true
+
+  if (props.shorten) {
+    balance = balanceObj.shortBalance
+  } else {
+    balance = balanceObj.balance
+  }
+
+  var label = balanceObj.label
+
+  return (
+    h(Tooltip, {
+      position: 'bottom',
+      title: `${ethNumber} ${ethSuffix}`,
+    }, h('div.flex-column', [
+      h('.flex-row', {
+        style: {
+          alignItems: 'flex-end',
+          lineHeight: '13px',
+          fontFamily: 'Montserrat Light',
+          textRendering: 'geometricPrecision',
+        },
+      }, [
+        h('div', {
+          style: {
+            width: '100%',
+            textAlign: 'right',
+          },
+        }, this.props.incoming ? `+${balance}` : balance),
+        h('div', {
+          style: {
+            color: ' #AEAEAE',
+            fontSize: '12px',
+            marginLeft: '5px',
+          },
+        }, label),
+      ]),
+
+      showFiat ? h(FiatValue, { value: props.value }) : null,
+    ]))
+  )
+}
diff --git a/ui/app/components/bn-as-decimal-input.js b/ui/app/components/bn-as-decimal-input.js
new file mode 100644
index 000000000..22e37602e
--- /dev/null
+++ b/ui/app/components/bn-as-decimal-input.js
@@ -0,0 +1,181 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const extend = require('xtend')
+
+module.exports = BnAsDecimalInput
+
+inherits(BnAsDecimalInput, Component)
+function BnAsDecimalInput () {
+  this.state = { invalid: null }
+  Component.call(this)
+}
+
+/* Bn as Decimal Input
+ *
+ * A component for allowing easy, decimal editing
+ * of a passed in bn string value.
+ *
+ * On change, calls back its `onChange` function parameter
+ * and passes it an updated bn string.
+ */
+
+BnAsDecimalInput.prototype.render = function () {
+  const props = this.props
+  const state = this.state
+
+  const { value, scale, precision, onChange, min, max } = props
+
+  const suffix = props.suffix
+  const style = props.style
+  const valueString = value.toString(10)
+  const newMin = min && this.downsize(min.toString(10), scale)
+  const newMax = max && this.downsize(max.toString(10), scale)
+  const newValue = this.downsize(valueString, scale)
+
+  return (
+    h('.flex-column', [
+      h('.flex-row', {
+        style: {
+          alignItems: 'flex-end',
+          lineHeight: '13px',
+          fontFamily: 'Montserrat Light',
+          textRendering: 'geometricPrecision',
+        },
+      }, [
+        h('input.hex-input', {
+          type: 'number',
+          step: 'any',
+          required: true,
+          min: newMin,
+          max: newMax,
+          style: extend({
+            display: 'block',
+            textAlign: 'right',
+            backgroundColor: 'transparent',
+            border: '1px solid #bdbdbd',
+
+          }, style),
+          value: newValue,
+          onBlur: (event) => {
+            this.updateValidity(event)
+          },
+          onChange: (event) => {
+            this.updateValidity(event)
+            const value = (event.target.value === '') ? '' : event.target.value
+
+
+            const scaledNumber = this.upsize(value, scale, precision)
+            const precisionBN = new BN(scaledNumber, 10)
+            onChange(precisionBN, event.target.checkValidity())
+          },
+          onInvalid: (event) => {
+            const msg = this.constructWarning()
+            if (msg === state.invalid) {
+              return
+            }
+            this.setState({ invalid: msg })
+            event.preventDefault()
+            return false
+          },
+        }),
+        h('div', {
+          style: {
+            color: ' #AEAEAE',
+            fontSize: '12px',
+            marginLeft: '5px',
+            marginRight: '6px',
+            width: '20px',
+          },
+        }, suffix),
+      ]),
+
+      state.invalid ? h('span.error', {
+        style: {
+          position: 'absolute',
+          right: '0px',
+          textAlign: 'right',
+          transform: 'translateY(26px)',
+          padding: '3px',
+          background: 'rgba(255,255,255,0.85)',
+          zIndex: '1',
+          textTransform: 'capitalize',
+          border: '2px solid #E20202',
+        },
+      }, state.invalid) : null,
+    ])
+  )
+}
+
+BnAsDecimalInput.prototype.setValid = function (message) {
+  this.setState({ invalid: null })
+}
+
+BnAsDecimalInput.prototype.updateValidity = function (event) {
+  const target = event.target
+  const value = this.props.value
+  const newValue = target.value
+
+  if (value === newValue) {
+    return
+  }
+
+  const valid = target.checkValidity()
+
+  if (valid) {
+    this.setState({ invalid: null })
+  }
+}
+
+BnAsDecimalInput.prototype.constructWarning = function () {
+  const { name, min, max, scale, suffix } = this.props
+  const newMin = min && this.downsize(min.toString(10), scale)
+  const newMax = max && this.downsize(max.toString(10), scale)
+  let message = name ? name + ' ' : ''
+
+  if (min && max) {
+    message += `must be greater than or equal to  ${newMin} ${suffix} and less than or equal to ${newMax} ${suffix}.`
+  } else if (min) {
+    message += `must be greater than or equal to ${newMin} ${suffix}.`
+  } else if (max) {
+    message += `must be less than or equal to ${newMax} ${suffix}.`
+  } else {
+    message += 'Invalid input.'
+  }
+
+  return message
+}
+
+
+BnAsDecimalInput.prototype.downsize = function (number, scale) {
+  // if there is no scaling, simply return the number
+  if (scale === 0) {
+    return Number(number)
+  } else {
+    // if the scale is the same as the precision, account for this edge case.
+    var adjustedNumber = number
+    while (adjustedNumber.length < scale) {
+      adjustedNumber = '0' + adjustedNumber
+    }
+    return Number(adjustedNumber.slice(0, -scale) + '.' + adjustedNumber.slice(-scale))
+  }
+}
+
+BnAsDecimalInput.prototype.upsize = function (number, scale, precision) {
+  var stringArray = number.toString().split('.')
+  var decimalLength = stringArray[1] ? stringArray[1].length : 0
+  var newString = stringArray[0]
+
+  // If there is scaling and decimal parts exist, integrate them in.
+  if ((scale !== 0) && (decimalLength !== 0)) {
+    newString += stringArray[1].slice(0, precision)
+  }
+
+  // Add 0s to account for the upscaling.
+  for (var i = decimalLength; i < scale; i++) {
+    newString += '0'
+  }
+  return newString
+}
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 6810303e1..d5958787b 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -6,12 +6,16 @@ const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
 const Loading = require('./loading')
-const TabBar = require('./tab-bar')
+const AccountPanel = require('./account-panel')
+const RadioList = require('./custom-radio-list')
+const networkNames = require('../../../app/scripts/config.js').networkNames
 
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
 function mapStateToProps (state) {
   return {
+    identity: state.appState.identity,
+    account: state.metamask.accounts[state.appState.buyView.buyAddress],
     warning: state.appState.warning,
     buyView: state.appState.buyView,
     network: state.metamask.network,
@@ -27,12 +31,30 @@ function BuyButtonSubview () {
 }
 
 BuyButtonSubview.prototype.render = function () {
+  return (
+    h('div', {
+      style: {
+        width: '100%',
+      },
+    }, [
+      this.headerSubview(),
+      this.primarySubview(),
+    ])
+  )
+}
+
+BuyButtonSubview.prototype.headerSubview = function () {
   const props = this.props
   const isLoading = props.isSubLoading
-
   return (
-    h('.buy-eth-section', [
-             // back button
+
+    h('.flex-column', {
+      style: {
+        alignItems: 'center',
+      },
+    }, [
+
+      // header bar (back button, label)
       h('.flex-row', {
         style: {
           alignItems: 'center',
@@ -46,60 +68,163 @@ BuyButtonSubview.prototype.render = function () {
             left: '10px',
           },
         }),
-        h('h2.page-subtitle', 'Buy Eth'),
+        h('h2.text-transform-uppercase.flex-center', {
+          style: {
+            width: '100vw',
+            background: 'rgb(235, 235, 235)',
+            color: 'rgb(174, 174, 174)',
+            paddingTop: '4px',
+            paddingBottom: '4px',
+          },
+        }, 'Deposit Eth'),
+      ]),
+
+      // loading indication
+      h('div', {
+        style: {
+          position: 'absolute',
+          top: '57vh',
+          left: '49vw',
+        },
+      }, [
+        isLoading && h(Loading),
+      ]),
+
+      // account panel
+      h('div', {
+        style: {
+          width: '80%',
+        },
+      }, [
+        h(AccountPanel, {
+          showFullAddress: true,
+          identity: props.identity,
+          account: props.account,
+        }),
+      ]),
+
+      h('.flex-row', {
+        style: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }, [
+        h('h3.text-transform-uppercase.flex-center', {
+          style: {
+            paddingLeft: '15px',
+            width: '100vw',
+            background: 'rgb(235, 235, 235)',
+            color: 'rgb(174, 174, 174)',
+            paddingTop: '4px',
+            paddingBottom: '4px',
+          },
+        }, 'Select Service'),
       ]),
 
-      h(Loading, { isLoading }),
-
-      h(TabBar, {
-        tabs: [
-          {
-            content: [
-              'Coinbase',
-              h('a', {
-                onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'),
-              }, [
-                h('i.fa.fa-question-circle', {
-                  style: {
-                    margin: '0px 5px',
-                  },
-                }),
-              ]),
-            ],
-            key: 'coinbase',
+    ])
+
+  )
+}
+
+
+BuyButtonSubview.prototype.primarySubview = function () {
+  const props = this.props
+  const network = props.network
+
+  switch (network) {
+    case 'loading':
+      return
+
+    case '1':
+      return this.mainnetSubview()
+
+    // Ropsten, Rinkeby, Kovan
+    case '3':
+    case '4':
+    case '42':
+      const networkName = networkNames[network]
+      const label = `${networkName} Test Faucet`
+      return (
+        h('div.flex-column', {
+          style: {
+            alignItems: 'center',
+            margin: '20px 50px',
           },
-          {
-            content: [
-              'Shapeshift',
-              h('a', {
-                href: 'https://github.com/MetaMask/faq/blob/master/COINBASE.md',
-                onClick: (event) => this.navigateTo('https://info.shapeshift.io/about'),
-              }, [
-                h('i.fa.fa-question-circle', {
-                  style: {
-                    margin: '0px 5px',
-                  },
-                }),
-              ]),
-            ],
-            key: 'shapeshift',
+        }, [
+          h('button.text-transform-uppercase', {
+            onClick: () => this.props.dispatch(actions.buyEth({ network })),
+            style: {
+              marginTop: '15px',
+            },
+          }, label),
+          // Kovan only: Dharma loans beta
+          network === '42' ? (
+            h('button.text-transform-uppercase', {
+              onClick: () => this.navigateTo('https://borrow.dharma.io/'),
+              style: {
+                marginTop: '15px',
+              },
+            }, 'Borrow With Dharma (Beta)')
+          ) : null,
+      ])
+    )
+
+    default:
+      return (
+        h('h2.error', 'Unknown network ID')
+      )
+
+  }
+}
+
+BuyButtonSubview.prototype.mainnetSubview = function () {
+  const props = this.props
+
+  return (
+
+    h('.flex-column', {
+      style: {
+        alignItems: 'center',
+      },
+    }, [
+
+      h('.flex-row.selected-exchange', {
+        style: {
+          position: 'relative',
+          right: '35px',
+          marginTop: '20px',
+          marginBottom: '20px',
+        },
+      }, [
+        h(RadioList, {
+          defaultFocus: props.buyView.subview,
+          labels: [
+            'Coinbase',
+            'ShapeShift',
+          ],
+          subtext: {
+            'Coinbase': 'Crypto/FIAT (USA only)',
+            'ShapeShift': 'Crypto',
           },
-        ],
-        defaultTab: 'coinbase',
-        tabSelected: (key) => {
-          switch (key) {
-            case 'coinbase':
-              props.dispatch(actions.coinBaseSubview())
-              break
-            case 'shapeshift':
-              props.dispatch(actions.shapeShiftSubview(props.provider.type))
-              break
-          }
+          onClick: this.radioHandler.bind(this),
+        }),
+      ]),
+
+      h('h3.text-transform-uppercase', {
+        style: {
+          paddingLeft: '15px',
+          fontFamily: 'Montserrat Light',
+          width: '100vw',
+          background: 'rgb(235, 235, 235)',
+          color: 'rgb(174, 174, 174)',
+          paddingTop: '4px',
+          paddingBottom: '4px',
         },
-      }),
+      }, props.buyView.subview),
 
       this.formVersionSubview(),
     ])
+
   )
 }
 
@@ -111,33 +236,6 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
     } else if (this.props.buyView.formView.shapeshift) {
       return h(ShapeshiftForm, this.props)
     }
-  } else {
-    return h('div.flex-column', {
-      style: {
-        alignItems: 'center',
-        margin: '50px',
-      },
-    }, [
-      h('h3.text-transform-uppercase', {
-        style: {
-          width: '225px',
-          marginBottom: '15px',
-        },
-      }, 'In order to access this feature, please switch to the Main Network'),
-      ((network === '3') || (network === '42')) ? h('h3.text-transform-uppercase', 'or go to the') : null,
-      (network === '3') ? h('button.text-transform-uppercase', {
-        onClick: () => this.props.dispatch(actions.buyEth({ network })),
-        style: {
-          marginTop: '15px',
-        },
-      }, 'Ropsten Test Faucet') : null,
-      (network === '42') ? h('button.text-transform-uppercase', {
-        onClick: () => this.props.dispatch(actions.buyEth({ network })),
-        style: {
-          marginTop: '15px',
-        },
-      }, 'Kovan Test Faucet') : null,
-    ])
   }
 }
 
@@ -147,8 +245,17 @@ BuyButtonSubview.prototype.navigateTo = function (url) {
 
 BuyButtonSubview.prototype.backButtonContext = function () {
   if (this.props.context === 'confTx') {
-    this.props.dispatch(actions.showConfTxPage(false))
+    this.props.dispatch(actions.showConfTxPage({transForward: false}))
   } else {
     this.props.dispatch(actions.goHome())
   }
 }
+
+BuyButtonSubview.prototype.radioHandler = function (event) {
+  switch (event.target.title) {
+    case 'Coinbase':
+      return this.props.dispatch(actions.coinBaseSubview())
+    case 'ShapeShift':
+      return this.props.dispatch(actions.shapeShiftSubview(this.props.provider.type))
+  }
+}
diff --git a/ui/app/components/coinbase-form.js b/ui/app/components/coinbase-form.js
index fd5816a21..f70208625 100644
--- a/ui/app/components/coinbase-form.js
+++ b/ui/app/components/coinbase-form.js
@@ -4,7 +4,6 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../actions')
 
-const isValidAddress = require('../util').isValidAddress
 module.exports = connect(mapStateToProps)(CoinbaseForm)
 
 function mapStateToProps (state) {
@@ -21,105 +20,36 @@ function CoinbaseForm () {
 
 CoinbaseForm.prototype.render = function () {
   var props = this.props
-  var amount = props.buyView.amount
-  var address = props.buyView.buyAddress
 
   return h('.flex-column', {
     style: {
-      // margin: '10px',
+      marginTop: '35px',
       padding: '25px',
+      width: '100%',
     },
   }, [
-    h('.flex-column', {
-      style: {
-        alignItems: 'flex-start',
-      },
-    }, [
-      h('.flex-row', [
-        h('div', 'Address:'),
-        h('.ellip-address', address),
-      ]),
-      h('.flex-row', [
-        h('div', 'Amount: $'),
-        h('.input-container', [
-          h('input.buy-inputs', {
-            style: {
-              width: '3em',
-              boxSizing: 'border-box',
-            },
-            defaultValue: amount,
-            onChange: this.handleAmount.bind(this),
-          }),
-          h('i.fa.fa-pencil-square-o.edit-text', {
-            style: {
-              fontSize: '12px',
-              color: '#F7861C',
-              position: 'relative',
-              bottom: '5px',
-              right: '11px',
-            },
-          }),
-        ]),
-      ]),
-    ]),
-
-    h('.info-gray', {
-      style: {
-        fontSize: '10px',
-        fontFamily: 'Montserrat Light',
-        margin: '15px',
-        lineHeight: '13px',
-      },
-    },
-      `there is a USD$ 15 a day max and a USD$ 50
-          dollar limit per the life time of an account without a
-          coinbase account. A fee of 3.75% will be aplied to debit/credit cards.`),
-
-    !props.warning ? h('div', {
-      style: {
-        width: '340px',
-        height: '22px',
-      },
-    }) : props.warning && h('span.error.flex-center', props.warning),
-
-
     h('.flex-row', {
       style: {
         justifyContent: 'space-around',
         margin: '33px',
+        marginTop: '0px',
       },
     }, [
-      h('button', {
+      h('button.btn-green', {
         onClick: this.toCoinbase.bind(this),
       }, 'Continue to Coinbase'),
 
-      h('button', {
-        onClick: () => props.dispatch(actions.backTobuyView(props.accounts.address)),
+      h('button.btn-red', {
+        onClick: () => props.dispatch(actions.goHome()),
       }, 'Cancel'),
     ]),
   ])
 }
-CoinbaseForm.prototype.handleAmount = function (event) {
-  this.props.dispatch(actions.updateCoinBaseAmount(event.target.value))
-}
-CoinbaseForm.prototype.handleAddress = function (event) {
-  this.props.dispatch(actions.updateBuyAddress(event.target.value))
-}
-CoinbaseForm.prototype.toCoinbase = function () {
-  var props = this.props
-  var amount = props.buyView.amount
-  var address = props.buyView.buyAddress
-  var message
 
-  if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) {
-    props.dispatch(actions.buyEth({ network: '1', address, amount: props.buyView.amount }))
-  } else if (!isValidAmountforCoinBase(amount).valid) {
-    message = isValidAmountforCoinBase(amount).message
-    return props.dispatch(actions.displayWarning(message))
-  } else {
-    message = 'Receiving address is invalid.'
-    return props.dispatch(actions.displayWarning(message))
-  }
+CoinbaseForm.prototype.toCoinbase = function () {
+  const props = this.props
+  const address = props.buyView.buyAddress
+  props.dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
 }
 
 CoinbaseForm.prototype.renderLoading = function () {
@@ -131,29 +61,3 @@ CoinbaseForm.prototype.renderLoading = function () {
     src: 'images/loading.svg',
   })
 }
-
-function isValidAmountforCoinBase (amount) {
-  amount = parseFloat(amount)
-  if (amount) {
-    if (amount <= 15 && amount > 0) {
-      return {
-        valid: true,
-      }
-    } else if (amount > 15) {
-      return {
-        valid: false,
-        message: 'The amount can not be greater then $15',
-      }
-    } else {
-      return {
-        valid: false,
-        message: 'Can not buy amounts less then $0',
-      }
-    }
-  } else {
-    return {
-      valid: false,
-      message: 'The amount entered is not a number',
-    }
-  }
-}
diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js
new file mode 100644
index 000000000..a4f6f4bc6
--- /dev/null
+++ b/ui/app/components/copyable.js
@@ -0,0 +1,46 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const Tooltip = require('./tooltip')
+const copyToClipboard = require('copy-to-clipboard')
+
+module.exports = Copyable
+
+inherits(Copyable, Component)
+function Copyable () {
+  Component.call(this)
+  this.state = {
+    copied: false,
+  }
+}
+
+Copyable.prototype.render = function () {
+  const props = this.props
+  const state = this.state
+  const { value, children } = props
+  const { copied } = state
+
+  return h(Tooltip, {
+    title: copied ? 'Copied!' : 'Copy',
+    position: 'bottom',
+  }, h('span', {
+    style: {
+      cursor: 'pointer',
+    },
+    onClick: (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      copyToClipboard(value)
+      this.debounceRestore()
+    },
+  }, children))
+}
+
+Copyable.prototype.debounceRestore = function () {
+  this.setState({ copied: true })
+  clearTimeout(this.timeout)
+  this.timeout = setTimeout(() => {
+    this.setState({ copied: false })
+  }, 850)
+}
diff --git a/ui/app/components/currency-input.js b/ui/app/components/currency-input.js
new file mode 100644
index 000000000..6f7862e51
--- /dev/null
+++ b/ui/app/components/currency-input.js
@@ -0,0 +1,103 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = CurrencyInput
+
+inherits(CurrencyInput, Component)
+function CurrencyInput (props) {
+  Component.call(this)
+
+  this.state = {
+    value: sanitizeValue(props.value),
+  }
+}
+
+function removeNonDigits (str) {
+  return str.match(/\d|$/g).join('')
+}
+
+// Removes characters that are not digits, then removes leading zeros
+function sanitizeInteger (val) {
+  return String(parseInt(removeNonDigits(val) || '0', 10))
+}
+
+function sanitizeDecimal (val) {
+  return removeNonDigits(val)
+}
+
+// Take a single string param and returns a non-negative integer or float as a string.
+// Breaks the input into three parts: the integer, the decimal point, and the decimal/fractional part.
+// Removes leading zeros from the integer, and non-digits from the integer and decimal
+// The integer is returned as '0' in cases where it would be empty. A decimal point is
+// included in the returned string if one is included in the param
+// Examples:
+//  sanitizeValue('0') -> '0'
+//  sanitizeValue('a') -> '0'
+//  sanitizeValue('010.') -> '10.'
+//  sanitizeValue('0.005') -> '0.005'
+//  sanitizeValue('22.200') -> '22.200'
+//  sanitizeValue('.200') -> '0.200'
+//  sanitizeValue('a.b.1.c,89.123') -> '0.189123'
+function sanitizeValue (value) {
+  let [ , integer, point, decimal] = (/([^.]*)([.]?)([^.]*)/).exec(value)
+
+  integer = sanitizeInteger(integer) || '0'
+  decimal = sanitizeDecimal(decimal)
+
+  return `${integer}${point}${decimal}`
+}
+
+CurrencyInput.prototype.handleChange = function (newValue) {
+  const { onInputChange } = this.props
+  const { value } = this.state
+
+  let parsedValue = newValue
+  const newValueLastIndex = newValue.length - 1
+
+  if (value === '0' && newValue[newValueLastIndex] === '0') {
+    parsedValue = parsedValue.slice(0, newValueLastIndex)
+  }
+
+  const sanitizedValue = sanitizeValue(parsedValue)
+  this.setState({ value: sanitizedValue })
+  onInputChange(sanitizedValue)
+}
+
+// If state.value === props.value plus a decimal point, or at least one
+// zero or a decimal point and at least one zero, then this returns state.value
+// after it is sanitized with getValueParts
+CurrencyInput.prototype.getValueToRender = function () {
+  const { value } = this.props
+  const { value: stateValue } = this.state
+
+  const trailingStateString = (new RegExp(`^${value}(.+)`)).exec(stateValue)
+  const trailingDecimalAndZeroes = trailingStateString && (/^[.0]0*/).test(trailingStateString[1])
+
+  return sanitizeValue(trailingDecimalAndZeroes
+    ? stateValue
+    : value)
+}
+
+CurrencyInput.prototype.render = function () {
+  const {
+    className,
+    placeholder,
+    readOnly,
+    inputRef,
+  } = this.props
+
+  const inputSizeMultiplier = readOnly ? 1 : 1.2
+
+  const valueToRender = this.getValueToRender()
+
+  return h('input', {
+    className,
+    value: valueToRender,
+    placeholder,
+    size: valueToRender.length * inputSizeMultiplier,
+    readOnly,
+    onChange: e => this.handleChange(e.target.value),
+    ref: inputRef,
+  })
+}
diff --git a/ui/app/components/custom-radio-list.js b/ui/app/components/custom-radio-list.js
new file mode 100644
index 000000000..a4c525396
--- /dev/null
+++ b/ui/app/components/custom-radio-list.js
@@ -0,0 +1,60 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = RadioList
+
+inherits(RadioList, Component)
+function RadioList () {
+  Component.call(this)
+}
+
+RadioList.prototype.render = function () {
+  const props = this.props
+  const activeClass = '.custom-radio-selected'
+  const inactiveClass = '.custom-radio-inactive'
+  const {
+    labels,
+    defaultFocus,
+  } = props
+
+
+  return (
+    h('.flex-row', {
+      style: {
+        fontSize: '12px',
+      },
+    }, [
+      h('.flex-column.custom-radios', {
+        style: {
+          marginRight: '5px',
+        },
+      },
+        labels.map((lable, i) => {
+          let isSelcted = (this.state !== null)
+          isSelcted = isSelcted ? (this.state.selected === lable) : (defaultFocus === lable)
+          return h(isSelcted ? activeClass : inactiveClass, {
+            title: lable,
+            onClick: (event) => {
+              this.setState({selected: event.target.title})
+              props.onClick(event)
+            },
+          })
+        })
+      ),
+      h('.text', {},
+        labels.map((lable) => {
+          if (props.subtext) {
+            return h('.flex-row', {}, [
+              h('.radio-titles', lable),
+              h('.radio-titles-subtext', `- ${props.subtext[lable]}`),
+            ])
+          } else {
+            return h('.radio-titles', lable)
+          }
+        })
+      ),
+    ])
+  )
+}
+
diff --git a/ui/app/components/customize-gas-modal/gas-modal-card.js b/ui/app/components/customize-gas-modal/gas-modal-card.js
new file mode 100644
index 000000000..23754d819
--- /dev/null
+++ b/ui/app/components/customize-gas-modal/gas-modal-card.js
@@ -0,0 +1,54 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const InputNumber = require('../input-number.js')
+// const GasSlider = require('./gas-slider.js')
+
+module.exports = GasModalCard
+
+inherits(GasModalCard, Component)
+function GasModalCard () {
+  Component.call(this)
+}
+
+GasModalCard.prototype.render = function () {
+  const {
+    // memo,
+    onChange,
+    unitLabel,
+    value,
+    min,
+    // max,
+    step,
+    title,
+    copy,
+  } = this.props
+
+  return h('div.send-v2__gas-modal-card', [
+
+    h('div.send-v2__gas-modal-card__title', {}, title),
+
+    h('div.send-v2__gas-modal-card__copy', {}, copy),
+
+    h(InputNumber, {
+      unitLabel,
+      step,
+      // max,
+      min,
+      placeholder: '0',
+      value,
+      onChange,
+    }),
+
+    // h(GasSlider, {
+    //   value,
+    //   step,
+    //   max,
+    //   min,
+    //   onChange,
+    // }),
+
+  ])
+
+}
+
diff --git a/ui/app/components/customize-gas-modal/gas-slider.js b/ui/app/components/customize-gas-modal/gas-slider.js
new file mode 100644
index 000000000..69fd6f985
--- /dev/null
+++ b/ui/app/components/customize-gas-modal/gas-slider.js
@@ -0,0 +1,50 @@
+// const Component = require('react').Component
+// const h = require('react-hyperscript')
+// const inherits = require('util').inherits
+
+// module.exports = GasSlider
+
+// inherits(GasSlider, Component)
+// function GasSlider () {
+//   Component.call(this)
+// }
+
+// GasSlider.prototype.render = function () {
+//   const {
+//     memo,
+//     identities,
+//     onChange,
+//     unitLabel,
+//     value,
+//     id,
+//     step,
+//     max,
+//     min,
+//   } = this.props
+
+//   return h('div.gas-slider', [
+
+//     h('input.gas-slider__input', {
+//       type: 'range',
+//       step,
+//       max,
+//       min,
+//       value,
+//       id: 'gasSlider',
+//       onChange: event => onChange(event.target.value),
+//     }, []),
+
+//     h('div.gas-slider__bar', [
+
+//       h('div.gas-slider__low'),
+
+//       h('div.gas-slider__mid'),
+
+//       h('div.gas-slider__high'),
+
+//     ]),
+
+//   ])
+
+// }
+
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
new file mode 100644
index 000000000..826d2cd4b
--- /dev/null
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -0,0 +1,298 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const GasModalCard = require('./gas-modal-card')
+
+const ethUtil = require('ethereumjs-util')
+
+const {
+  MIN_GAS_PRICE_DEC,
+  MIN_GAS_LIMIT_DEC,
+  MIN_GAS_PRICE_GWEI,
+} = require('../send/send-constants')
+
+const {
+  isBalanceSufficient,
+} = require('../send/send-utils')
+
+const {
+  conversionUtil,
+  multiplyCurrencies,
+  conversionGreaterThan,
+  subtractCurrencies,
+} = require('../../conversion-util')
+
+const {
+  getGasPrice,
+  getGasLimit,
+  conversionRateSelector,
+  getSendAmount,
+  getSelectedToken,
+  getSendFrom,
+  getCurrentAccountWithSendEtherInfo,
+  getSelectedTokenToFiatRate,
+  getSendMaxModeState,
+} = require('../../selectors')
+
+function mapStateToProps (state) {
+  const selectedToken = getSelectedToken(state)
+  const currentAccount = getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state)
+  const conversionRate = conversionRateSelector(state)
+
+  return {
+    gasPrice: getGasPrice(state),
+    gasLimit: getGasLimit(state),
+    conversionRate,
+    amount: getSendAmount(state),
+    maxModeOn: getSendMaxModeState(state),
+    balance: currentAccount.balance,
+    primaryCurrency: selectedToken && selectedToken.symbol,
+    selectedToken,
+    amountConversionRate: selectedToken ? getSelectedTokenToFiatRate(state) : conversionRate,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => dispatch(actions.hideModal()),
+    updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
+    updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
+    updateGasTotal: newGasTotal => dispatch(actions.updateGasTotal(newGasTotal)),
+    updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
+  }
+}
+
+function getOriginalState (props) {
+  const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC
+  const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC
+
+  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  return {
+    gasPrice,
+    gasLimit,
+    gasTotal,
+    error: null,
+    priceSigZeros: '',
+    priceSigDec: '',
+  }
+}
+
+inherits(CustomizeGasModal, Component)
+function CustomizeGasModal (props) {
+  Component.call(this)
+
+  this.state = getOriginalState(props)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
+
+CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
+  const {
+    updateGasPrice,
+    updateGasLimit,
+    hideModal,
+    updateGasTotal,
+    maxModeOn,
+    selectedToken,
+    balance,
+    updateSendAmount,
+  } = this.props
+
+  if (maxModeOn && !selectedToken) {
+    const maxAmount = subtractCurrencies(
+      ethUtil.addHexPrefix(balance),
+      ethUtil.addHexPrefix(gasTotal),
+      { toNumericBase: 'hex' }
+    )
+    updateSendAmount(maxAmount)
+  }
+
+  updateGasPrice(gasPrice)
+  updateGasLimit(gasLimit)
+  updateGasTotal(gasTotal)
+  hideModal()
+}
+
+CustomizeGasModal.prototype.revert = function () {
+  this.setState(getOriginalState(this.props))
+}
+
+CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
+  const {
+    amount,
+    balance,
+    selectedToken,
+    amountConversionRate,
+    conversionRate,
+    maxModeOn,
+  } = this.props
+
+  let error = null
+
+  const balanceIsSufficient = isBalanceSufficient({
+    amount: selectedToken || maxModeOn ? '0' : amount,
+    gasTotal,
+    balance,
+    selectedToken,
+    amountConversionRate,
+    conversionRate,
+  })
+
+  if (!balanceIsSufficient) {
+    error = 'Insufficient balance for current gas total'
+  }
+
+  const gasLimitTooLow = gasLimit && conversionGreaterThan(
+    {
+      value: MIN_GAS_LIMIT_DEC,
+      fromNumericBase: 'dec',
+      conversionRate,
+    },
+    {
+      value: gasLimit,
+      fromNumericBase: 'hex',
+    },
+  )
+
+  if (gasLimitTooLow) {
+    error = 'Gas limit must be at least 21000'
+  }
+
+  this.setState({ error })
+  return error
+}
+
+CustomizeGasModal.prototype.convertAndSetGasLimit = function (newGasLimit) {
+  const { gasPrice } = this.state
+
+  const gasLimit = conversionUtil(newGasLimit, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+  })
+
+  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  this.validate({ gasTotal, gasLimit })
+
+  this.setState({ gasTotal, gasLimit })
+}
+
+CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
+  const { gasLimit } = this.state
+  const sigZeros = String(newGasPrice).match(/^\d+[.]\d*?(0+)$/)
+  const sigDec = String(newGasPrice).match(/^\d+([.])0*$/)
+
+  this.setState({
+    priceSigZeros: sigZeros && sigZeros[1] || '',
+    priceSigDec: sigDec && sigDec[1] || '',
+  })
+
+  const gasPrice = conversionUtil(newGasPrice, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    fromDenomination: 'GWEI',
+    toDenomination: 'WEI',
+  })
+
+  const gasTotal = multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  this.validate({ gasTotal })
+
+  this.setState({ gasTotal, gasPrice })
+}
+
+CustomizeGasModal.prototype.render = function () {
+  const { hideModal } = this.props
+  const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state
+
+  let convertedGasPrice = conversionUtil(gasPrice, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    toDenomination: 'GWEI',
+  })
+
+  convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}`
+
+  const convertedGasLimit = conversionUtil(gasLimit, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+  })
+
+  return h('div.send-v2__customize-gas', {}, [
+    h('div.send-v2__customize-gas__content', {
+    }, [
+      h('div.send-v2__customize-gas__header', {}, [
+
+        h('div.send-v2__customize-gas__title', 'Customize Gas'),
+
+        h('div.send-v2__customize-gas__close', {
+          onClick: hideModal,
+        }),
+
+      ]),
+
+      h('div.send-v2__customize-gas__body', {}, [
+
+        h(GasModalCard, {
+          value: convertedGasPrice,
+          min: MIN_GAS_PRICE_GWEI,
+          // max: 1000,
+          step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10),
+          onChange: value => this.convertAndSetGasPrice(value),
+          title: 'Gas Price (GWEI)',
+          copy: 'We calculate the suggested gas prices based on network success rates.',
+        }),
+
+        h(GasModalCard, {
+          value: convertedGasLimit,
+          min: 1,
+          // max: 100000,
+          step: 1,
+          onChange: value => this.convertAndSetGasLimit(value),
+          title: 'Gas Limit',
+          copy: 'We calculate the suggested gas limit based on network success rates.',
+        }),
+
+      ]),
+
+      h('div.send-v2__customize-gas__footer', {}, [
+
+        error && h('div.send-v2__customize-gas__error-message', [
+          error,
+        ]),
+
+        h('div.send-v2__customize-gas__revert', {
+          onClick: () => this.revert(),
+        }, ['Revert']),
+
+        h('div.send-v2__customize-gas__buttons', [
+          h('div.send-v2__customize-gas__cancel', {
+            onClick: this.props.hideModal,
+          }, ['CANCEL']),
+
+          h(`div.send-v2__customize-gas__save${error ? '__error' : ''}`, {
+            onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal),
+          }, ['SAVE']),
+        ]),
+
+      ]),
+
+    ]),
+  ])
+}
diff --git a/ui/app/components/drop-menu-item.js b/ui/app/components/drop-menu-item.js
deleted file mode 100644
index 3eb6ec876..000000000
--- a/ui/app/components/drop-menu-item.js
+++ /dev/null
@@ -1,56 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-
-module.exports = DropMenuItem
-
-inherits(DropMenuItem, Component)
-function DropMenuItem () {
-  Component.call(this)
-}
-
-DropMenuItem.prototype.render = function () {
-  return h('li.drop-menu-item', {
-    onClick: () => {
-      this.props.closeMenu()
-      this.props.action()
-    },
-    style: {
-      listStyle: 'none',
-      padding: '6px 16px 6px 5px',
-      fontFamily: 'Montserrat Regular',
-      color: 'rgb(125, 128, 130)',
-      cursor: 'pointer',
-      display: 'flex',
-      justifyContent: 'flex-start',
-    },
-  }, [
-    this.props.icon,
-    this.props.label,
-    this.activeNetworkRender(),
-  ])
-}
-
-DropMenuItem.prototype.activeNetworkRender = function () {
-  const activeNetwork = this.props.activeNetworkRender
-  const { provider } = this.props
-  const providerType = provider ? provider.type : null
-  if (activeNetwork === undefined) return
-
-  switch (this.props.label) {
-    case 'Main Ethereum Network':
-      if (providerType === 'mainnet') return h('.check', '✓')
-      break
-    case 'Ropsten Test Network':
-      if (providerType === 'testnet') return h('.check', '✓')
-      break
-    case 'Kovan Test Network':
-      if (providerType === 'kovan') return h('.check', '✓')
-      break
-    case 'Localhost 8545':
-      if (activeNetwork === 'http://localhost:8545') return h('.check', '✓')
-      break
-    default:
-      if (activeNetwork === 'custom') return h('.check', '✓')
-  }
-}
diff --git a/ui/app/components/dropdowns/account-dropdown-mini.js b/ui/app/components/dropdowns/account-dropdown-mini.js
new file mode 100644
index 000000000..a3d41af90
--- /dev/null
+++ b/ui/app/components/dropdowns/account-dropdown-mini.js
@@ -0,0 +1,75 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountListItem = require('../send/account-list-item')
+
+module.exports = AccountDropdownMini
+
+inherits(AccountDropdownMini, Component)
+function AccountDropdownMini () {
+  Component.call(this)
+}
+
+AccountDropdownMini.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
+
+  return currentAccount.address === selectedAccount.address
+    ? listItemIcon
+    : null
+}
+
+AccountDropdownMini.prototype.renderDropdown = function () {
+  const {
+    accounts,
+    selectedAccount,
+    closeDropdown,
+    onSelect,
+  } = this.props
+
+  return h('div', {}, [
+
+    h('div.account-dropdown-mini__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.account-dropdown-mini__list', {}, [
+
+      ...accounts.map(account => h(AccountListItem, {
+        account,
+        displayBalance: false,
+        displayAddress: false,
+        handleClick: () => {
+          onSelect(account)
+          closeDropdown()
+        },
+        icon: this.getListItemIcon(account, selectedAccount),
+      })),
+
+    ]),
+
+  ])
+}
+
+AccountDropdownMini.prototype.render = function () {
+  const {
+    selectedAccount,
+    openDropdown,
+    dropdownOpen,
+  } = this.props
+
+  return h('div.account-dropdown-mini', {}, [
+
+    h(AccountListItem, {
+      account: selectedAccount,
+      handleClick: openDropdown,
+      displayBalance: false,
+      displayAddress: false,
+      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }),
+    }),
+
+    dropdownOpen && this.renderDropdown(),
+
+  ])
+
+}
+
diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js
new file mode 100644
index 000000000..f74c0a2d4
--- /dev/null
+++ b/ui/app/components/dropdowns/account-options-dropdown.js
@@ -0,0 +1,29 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountDropdowns = require('./components/account-dropdowns')
+
+inherits(AccountOptionsDropdown, Component)
+function AccountOptionsDropdown () {
+  Component.call(this)
+}
+
+module.exports = AccountOptionsDropdown
+
+// TODO: specify default props and proptypes
+// TODO: hook up to state, connect to redux to clean up API
+// TODO: selectedAddress is not defined... should we use selected?
+AccountOptionsDropdown.prototype.render = function () {
+  const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
+
+  return h(AccountDropdowns, {
+    enableAccountOptions: true,
+    enableAccountsSelector: false,
+    selected,
+    network,
+    identities,
+    style: style || {},
+    dropdownWrapperStyle: dropdownWrapperStyle || {},
+    menuItemStyles: menuItemStyles || {},
+  }, [])
+}
diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js
new file mode 100644
index 000000000..2f6452b15
--- /dev/null
+++ b/ui/app/components/dropdowns/account-selection-dropdown.js
@@ -0,0 +1,29 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountDropdowns = require('./components/account-dropdowns')
+
+inherits(AccountSelectionDropdown, Component)
+function AccountSelectionDropdown () {
+  Component.call(this)
+}
+
+module.exports = AccountSelectionDropdown
+
+// TODO: specify default props and proptypes
+// TODO: hook up to state, connect to redux to clean up API
+// TODO: selectedAddress is not defined... should we use selected?
+AccountSelectionDropdown.prototype.render = function () {
+  const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
+
+  return h(AccountDropdowns, {
+    enableAccountOptions: false,
+    enableAccountsSelector: true,
+    selected,
+    network,
+    identities,
+    style: style || {},
+    dropdownWrapperStyle: dropdownWrapperStyle || {},
+    menuItemStyles: menuItemStyles || {},
+  }, [])
+}
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
new file mode 100644
index 000000000..d3a549884
--- /dev/null
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -0,0 +1,482 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const actions = require('../../../actions')
+const genAccountLink = require('../../../../lib/account-link.js')
+const connect = require('react-redux').connect
+const Dropdown = require('./dropdown').Dropdown
+const DropdownMenuItem = require('./dropdown').DropdownMenuItem
+const Identicon = require('../../identicon')
+const ethUtil = require('ethereumjs-util')
+const copyToClipboard = require('copy-to-clipboard')
+const { formatBalance } = require('../../../util')
+
+class AccountDropdowns extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      accountSelectorActive: false,
+      optionsMenuActive: false,
+    }
+    // Used for orangeaccount selector icon
+    // this.accountSelectorToggleClassName = 'accounts-selector'
+    this.accountSelectorToggleClassName = 'fa-angle-down'
+    this.optionsMenuToggleClassName = 'fa-ellipsis-h'
+  }
+
+  renderAccounts () {
+    const { identities, accounts, selected, menuItemStyles, actions, keyrings } = this.props
+
+    return Object.keys(identities).map((key, index) => {
+      const identity = identities[key]
+      const isSelected = identity.address === selected
+
+      const balanceValue = accounts[key].balance
+      const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+      const simpleAddress = identity.address.substring(2).toLowerCase()
+
+      const keyring = keyrings.find((kr) => {
+        return kr.accounts.includes(simpleAddress) ||
+          kr.accounts.includes(identity.address)
+      })
+
+      return h(
+        DropdownMenuItem,
+        {
+          closeMenu: () => {},
+          onClick: () => {
+            this.props.actions.showAccountDetail(identity.address)
+          },
+          style: Object.assign(
+            {
+              marginTop: index === 0 ? '5px' : '',
+              fontSize: '24px',
+              width: '260px',
+            },
+            menuItemStyles,
+          ),
+        },
+        [
+          h('div.flex-row.flex-center', {}, [
+
+            h('span', {
+              style: {
+                flex: '1 1 0',
+                minWidth: '20px',
+                minHeight: '30px',
+              },
+            }, [
+              h('span', {
+                style: {
+                  flex: '1 1 auto',
+                  fontSize: '14px',
+                },
+              }, isSelected ? h('i.fa.fa-check') : null),
+            ]),
+
+            h(
+              Identicon,
+              {
+                address: identity.address,
+                diameter: 24,
+                style: {
+                  flex: '1 1 auto',
+                  marginLeft: '10px',
+                },
+              },
+            ),
+
+            h('span.flex-column', {
+              style: {
+                flex: '10 10 auto',
+                width: '175px',
+                alignItems: 'flex-start',
+                justifyContent: 'center',
+                marginLeft: '10px',
+                position: 'relative',
+              },
+            }, [
+              this.indicateIfLoose(keyring),
+              h('span.account-dropdown-name', {
+                style: {
+                  fontSize: '18px',
+                  maxWidth: '145px',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                },
+              }, identity.name || ''),
+
+              h('span.account-dropdown-balance', {
+                style: {
+                  fontSize: '14px',
+                  fontFamily: 'Avenir',
+                  fontWeight: 500,
+                },
+              }, formattedBalance),
+            ]),
+
+            h('span', {
+              style: {
+                flex: '3 3 auto',
+              },
+            }, [
+              h('span.account-dropdown-edit-button', {
+                style: {
+                  fontSize: '16px',
+                },
+                onClick: () => {
+                  actions.showEditAccountModal(identity)
+                },
+              }, [
+                'Edit',
+              ]),
+            ]),
+
+          ]),
+// =======
+//             },
+//           ),
+//           this.indicateIfLoose(keyring),
+//           h('span', {
+//             style: {
+//               marginLeft: '20px',
+//               fontSize: '24px',
+//               maxWidth: '145px',
+//               whiteSpace: 'nowrap',
+//               overflow: 'hidden',
+//               textOverflow: 'ellipsis',
+//             },
+//           }, identity.name || ''),
+//           h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
+// >>>>>>> master:ui/app/components/account-dropdowns.js
+        ]
+      )
+    })
+  }
+
+  indicateIfLoose (keyring) {
+    try { // Sometimes keyrings aren't loaded yet:
+      const type = keyring.type
+      const isLoose = type !== 'HD Key Tree'
+      return isLoose ? h('.keyring-label', 'LOOSE') : null
+    } catch (e) { return }
+  }
+
+  renderAccountSelector () {
+    const { actions, useCssTransition, innerStyle, sidebarOpen } = this.props
+    const { accountSelectorActive, menuItemStyles } = this.state
+
+    return h(
+      Dropdown,
+      {
+        useCssTransition,
+        style: {
+          marginLeft: '-185px',
+          marginTop: '50px',
+          minWidth: '180px',
+          overflowY: 'auto',
+          maxHeight: '300px',
+          width: '300px',
+        },
+        innerStyle,
+        isOpen: accountSelectorActive,
+        onClickOutside: (event) => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.accountSelectorToggleClassName)
+          if (accountSelectorActive && isNotToggleElement) {
+            this.setState({ accountSelectorActive: false })
+          }
+        },
+      },
+      [
+        ...this.renderAccounts(),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+            onClick: () => actions.showNewAccountPageCreateForm(),
+          },
+          [
+            h(
+              'i.fa.fa-plus.fa-lg',
+              {
+                style: {
+                  marginLeft: '8px',
+                },
+              }
+            ),
+            h('span', {
+              style: {
+                marginLeft: '14px',
+                fontFamily: 'DIN OT',
+                fontSize: '16px',
+                lineHeight: '23px',
+              },
+            }, 'Create Account'),
+          ],
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {
+              if (sidebarOpen) {
+                actions.hideSidebar()
+              }
+            },
+            onClick: () => actions.showNewAccountPageImportForm(),
+            style: Object.assign(
+              {},
+              menuItemStyles,
+            ),
+          },
+          [
+            h(
+              'i.fa.fa-download.fa-lg',
+              {
+                style: {
+                  marginLeft: '8px',
+                },
+              }
+            ),
+            h('span', {
+              style: {
+                marginLeft: '20px',
+                marginBottom: '5px',
+                fontFamily: 'DIN OT',
+                fontSize: '16px',
+                lineHeight: '23px',
+              },
+            }, 'Import Account'),
+          ]
+        ),
+      ]
+    )
+  }
+
+  renderAccountOptions () {
+    const { actions, dropdownWrapperStyle, useCssTransition } = this.props
+    const { optionsMenuActive, menuItemStyles } = this.state
+    const dropdownMenuItemStyle = {
+      fontFamily: 'DIN OT',
+      fontSize: 16,
+      lineHeight: '24px',
+      padding: '8px',
+    }
+
+    return h(
+      Dropdown,
+      {
+        useCssTransition,
+        style: Object.assign(
+          {
+            marginLeft: '-10px',
+            position: 'absolute',
+            width: '29vh', // affects both mobile and laptop views
+          },
+          dropdownWrapperStyle,
+        ),
+        isOpen: optionsMenuActive,
+        onClickOutside: () => {
+          const { classList } = event.target
+          const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
+          if (optionsMenuActive && isNotToggleElement) {
+            this.setState({ optionsMenuActive: false })
+          }
+        },
+      },
+      [
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              this.props.actions.showAccountDetailModal()
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          'Account Details',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected, network } = this.props
+              const url = genAccountLink(selected, network)
+              global.platform.openWindow({ url })
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          'View account on Etherscan',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              const { selected } = this.props
+              const checkSumAddress = selected && ethUtil.toChecksumAddress(selected)
+              copyToClipboard(checkSumAddress)
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          'Copy Address to clipboard',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => this.props.actions.showExportPrivateKeyModal(),
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          'Export Private Key',
+        ),
+        h(
+          DropdownMenuItem,
+          {
+            closeMenu: () => {},
+            onClick: () => {
+              actions.hideSidebar()
+              actions.showAddTokenPage()
+            },
+            style: Object.assign(
+              dropdownMenuItemStyle,
+              menuItemStyles,
+            ),
+          },
+          'Add Token',
+        ),
+
+      ]
+    )
+  }
+
+  render () {
+    const { style, enableAccountsSelector, enableAccountOptions } = this.props
+    const { optionsMenuActive, accountSelectorActive } = this.state
+
+    return h(
+      'span',
+      {
+        style: style,
+      },
+      [
+        enableAccountsSelector && h(
+          'i.fa.fa-angle-down',
+          {
+            style: {
+              cursor: 'pointer',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: !accountSelectorActive,
+                optionsMenuActive: false,
+              })
+            },
+          },
+          this.renderAccountSelector(),
+        ),
+        enableAccountOptions && h(
+          'i.fa.fa-ellipsis-h',
+          {
+            style: {
+              fontSize: '135%',
+              cursor: 'pointer',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.setState({
+                accountSelectorActive: false,
+                optionsMenuActive: !optionsMenuActive,
+              })
+            },
+          },
+          this.renderAccountOptions()
+        ),
+      ]
+    )
+  }
+}
+
+AccountDropdowns.defaultProps = {
+  enableAccountsSelector: false,
+  enableAccountOptions: false,
+}
+
+AccountDropdowns.propTypes = {
+  identities: PropTypes.objectOf(PropTypes.object),
+  selected: PropTypes.string,
+  keyrings: PropTypes.array,
+  accounts: PropTypes.object,
+  menuItemStyles: PropTypes.object,
+  actions: PropTypes.object,
+  // actions.showAccountDetail: ,
+  useCssTransition: PropTypes.bool,
+  innerStyle: PropTypes.object,
+  sidebarOpen: PropTypes.bool,
+  dropdownWrapperStyle: PropTypes.string,
+  // actions.showAccountDetailModal: ,
+  network: PropTypes.number,
+  // actions.showExportPrivateKeyModal: ,
+  style: PropTypes.object,
+  enableAccountsSelector: PropTypes.bool,
+  enableAccountOption: PropTypes.bool,
+  enableAccountOptions: PropTypes.bool,
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    actions: {
+      hideSidebar: () => dispatch(actions.hideSidebar()),
+      showConfigPage: () => dispatch(actions.showConfigPage()),
+      showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)),
+      showAccountDetailModal: () => {
+        dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+      },
+      showEditAccountModal: (identity) => {
+        dispatch(actions.showModal({
+          name: 'EDIT_ACCOUNT_NAME',
+          identity,
+        }))
+      },
+      showNewAccountPageCreateForm: () => dispatch(actions.showNewAccountPage({ form: 'CREATE' })),
+      showExportPrivateKeyModal: () => {
+        dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+      },
+      showAddTokenPage: () => {
+        dispatch(actions.showAddTokenPage())
+      },
+      addNewAccount: () => dispatch(actions.addNewAccount()),
+      showNewAccountPageImportForm: () => dispatch(actions.showNewAccountPage({ form: 'IMPORT' })),
+      showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    },
+  }
+}
+
+function mapStateToProps (state) {
+  return {
+    keyrings: state.metamask.keyrings,
+    sidebarOpen: state.appState.sidebarOpen,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDropdowns)
+
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
new file mode 100644
index 000000000..0336dbb8b
--- /dev/null
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -0,0 +1,113 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const MenuDroppo = require('../../menu-droppo')
+const extend = require('xtend')
+
+const noop = () => {}
+
+class Dropdown extends Component {
+  render () {
+    const {
+      containerClassName,
+      isOpen,
+      onClickOutside,
+      style,
+      innerStyle,
+      children,
+      useCssTransition,
+    } = this.props
+
+    const innerStyleDefaults = extend({
+      borderRadius: '4px',
+      padding: '8px 16px',
+      background: 'rgba(0, 0, 0, 0.8)',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    }, innerStyle)
+
+    return h(
+      MenuDroppo,
+      {
+        containerClassName,
+        useCssTransition,
+        isOpen,
+        zIndex: 55,
+        onClickOutside,
+        style,
+        innerStyle: innerStyleDefaults,
+      },
+      [
+        h(
+          'style',
+          `
+          li.dropdown-menu-item:hover {
+            color:rgb(225, 225, 225);
+            background-color: rgba(255, 255, 255, 0.05);
+            border-radius: 4px;
+          }
+          li.dropdown-menu-item { color: rgb(185, 185, 185); }
+          `
+        ),
+        ...children,
+      ]
+    )
+  }
+}
+
+Dropdown.defaultProps = {
+  isOpen: false,
+  onClick: noop,
+  useCssTransition: false,
+}
+
+Dropdown.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  style: PropTypes.object.isRequired,
+  onClickOutside: PropTypes.func,
+  innerStyle: PropTypes.object,
+  useCssTransition: PropTypes.bool,
+  containerClassName: PropTypes.string,
+}
+
+class DropdownMenuItem extends Component {
+  render () {
+    const { onClick, closeMenu, children, style } = this.props
+
+    return h(
+      'li.dropdown-menu-item',
+      {
+        onClick: () => {
+          onClick()
+          closeMenu()
+        },
+        style: Object.assign({
+          listStyle: 'none',
+          padding: '8px 0px',
+          fontSize: '18px',
+          fontStyle: 'normal',
+          fontFamily: 'Montserrat Regular',
+          cursor: 'pointer',
+          display: 'flex',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+          color: 'white',
+        }, style),
+      },
+      children
+    )
+  }
+}
+
+DropdownMenuItem.propTypes = {
+  closeMenu: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  style: PropTypes.object,
+}
+
+module.exports = {
+  Dropdown,
+  DropdownMenuItem,
+}
diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js
new file mode 100644
index 000000000..f6d8a139e
--- /dev/null
+++ b/ui/app/components/dropdowns/components/menu.js
@@ -0,0 +1,51 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+
+inherits(Menu, Component)
+function Menu () { Component.call(this) }
+
+Menu.prototype.render = function () {
+  const { className = '', children, isShowing } = this.props
+  return isShowing
+    ? h('div', { className: `menu ${className}` }, children)
+    : h('noscript')
+}
+
+inherits(Item, Component)
+function Item () { Component.call(this) }
+
+Item.prototype.render = function () {
+  const {
+    icon,
+    children,
+    text,
+    className = '',
+    onClick,
+  } = this.props
+  const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}`
+  const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null
+  const textComponent = text ? h('div.menu__item__text', text) : null
+
+  return children
+    ? h('div', { className: itemClassName, onClick }, children)
+    : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ]
+      .filter(d => Boolean(d))
+    )
+}
+
+inherits(Divider, Component)
+function Divider () { Component.call(this) }
+
+Divider.prototype.render = function () {
+  return h('div.menu__divider')
+}
+
+inherits(CloseArea, Component)
+function CloseArea () { Component.call(this) }
+
+CloseArea.prototype.render = function () {
+  return h('div.menu__close-area', { onClick: this.props.onClick })
+}
+
+module.exports = { Menu, Item, Divider, CloseArea }
diff --git a/ui/app/components/dropdowns/components/network-dropdown-icon.js b/ui/app/components/dropdowns/components/network-dropdown-icon.js
new file mode 100644
index 000000000..7e94e0af5
--- /dev/null
+++ b/ui/app/components/dropdowns/components/network-dropdown-icon.js
@@ -0,0 +1,28 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+
+
+inherits(NetworkDropdownIcon, Component)
+module.exports = NetworkDropdownIcon
+
+function NetworkDropdownIcon () {
+  Component.call(this)
+}
+
+NetworkDropdownIcon.prototype.render = function () {
+  const {
+    backgroundColor,
+    isSelected,
+    innerBorder = 'none',
+  } = this.props
+
+  return h(`.menu-icon-circle${isSelected ? '--active' : ''}`, {},
+    h('div', {
+      style: {
+        background: backgroundColor,
+        border: innerBorder,
+      },
+    })
+  )
+}
diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js
new file mode 100644
index 000000000..fa66f5000
--- /dev/null
+++ b/ui/app/components/dropdowns/index.js
@@ -0,0 +1,17 @@
+// Reusable Dropdown Components
+// TODO: Refactor into separate components
+const Dropdown = require('./components/dropdown').Dropdown
+const AccountDropdowns = require('./components/account-dropdowns')
+
+// App-Specific Instances
+const AccountSelectionDropdown = require('./account-selection-dropdown')
+const AccountOptionsDropdown = require('./account-options-dropdown')
+const NetworkDropdown = require('./network-dropdown').default
+
+module.exports = {
+  AccountSelectionDropdown,
+  AccountOptionsDropdown,
+  NetworkDropdown,
+  Dropdown,
+  AccountDropdowns,
+}
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
new file mode 100644
index 000000000..dfaa6b22c
--- /dev/null
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -0,0 +1,322 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const Dropdown = require('./components/dropdown').Dropdown
+const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
+const NetworkDropdownIcon = require('./components/network-dropdown-icon')
+const R = require('ramda')
+
+// classes from nodes of the toggle element.
+const notToggleElementClassnames = [
+  'menu-icon',
+  'network-name',
+  'network-indicator',
+  'network-caret',
+  'network-component',
+]
+
+function mapStateToProps (state) {
+  return {
+    provider: state.metamask.provider,
+    frequentRpcList: state.metamask.frequentRpcList || [],
+    networkDropdownOpen: state.appState.networkDropdownOpen,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    setProviderType: (type) => {
+      dispatch(actions.setProviderType(type))
+    },
+    setDefaultRpcTarget: type => {
+      dispatch(actions.setDefaultRpcTarget(type))
+    },
+    setRpcTarget: (target) => {
+      dispatch(actions.setRpcTarget(target))
+    },
+    showConfigPage: () => {
+      dispatch(actions.showConfigPage())
+    },
+    showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+    hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
+  }
+}
+
+
+inherits(NetworkDropdown, Component)
+function NetworkDropdown () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NetworkDropdown)
+
+// TODO: specify default props and proptypes
+NetworkDropdown.prototype.render = function () {
+  const props = this.props
+  const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
+  const rpcList = props.frequentRpcList
+  const isOpen = this.props.networkDropdownOpen
+  const dropdownMenuItemStyle = {
+    fontFamily: 'DIN OT',
+    fontSize: '16px',
+    lineHeight: '20px',
+    padding: '12px 0',
+  }
+
+  return h(Dropdown, {
+    isOpen,
+    onClickOutside: (event) => {
+      const { classList } = event.target
+      const isInClassList = className => classList.contains(className)
+      const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
+
+      if (notToggleElementIndex === -1) {
+        this.props.hideNetworkDropdown()
+      }
+    },
+    containerClassName: 'network-droppo',
+    zIndex: 55,
+    style: {
+      position: 'absolute',
+      top: '58px',
+      minWidth: '309px',
+      zIndex: '55px',
+    },
+    innerStyle: {
+      padding: '18px 8px',
+    },
+  }, [
+
+    h('div.network-dropdown-header', {}, [
+      h('div.network-dropdown-title', {}, 'Networks'),
+
+      h('div.network-dropdown-divider'),
+
+      h('div.network-dropdown-content',
+        {},
+        'The default network for Ether transactions is Main Net.'
+      ),
+    ]),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'main',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('mainnet'),
+        style: { ...dropdownMenuItemStyle, borderColor: '#038789' },
+      },
+      [
+        providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#038789', // $blue-lagoon
+          isSelected: providerType === 'mainnet',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Main Ethereum Network'),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'ropsten',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('ropsten'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#e91550', // $crimson
+          isSelected: providerType === 'ropsten',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Ropsten Test Network'),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'kovan',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('kovan'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#690496', // $purple
+          isSelected: providerType === 'kovan',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Kovan Test Network'),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'rinkeby',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setProviderType('rinkeby'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          backgroundColor: '#ebb33f', // $tulip-tree
+          isSelected: providerType === 'rinkeby',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Rinkeby Test Network'),
+      ]
+    ),
+
+    h(
+      DropdownMenuItem,
+      {
+        key: 'default',
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => props.setRpcTarget('http://localhost:8545'),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        activeNetwork === 'http://localhost:8545' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          isSelected: activeNetwork === 'http://localhost:8545',
+          innerBorder: '1px solid #9b9b9b',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Localhost 8545'),
+      ]
+    ),
+
+    this.renderCustomOption(props.provider),
+    this.renderCommonRpc(rpcList, props.provider),
+
+    h(
+      DropdownMenuItem,
+      {
+        closeMenu: () => this.props.hideNetworkDropdown(),
+        onClick: () => this.props.showConfigPage(),
+        style: dropdownMenuItemStyle,
+      },
+      [
+        activeNetwork === 'custom' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+        h(NetworkDropdownIcon, {
+          isSelected: activeNetwork === 'custom',
+          innerBorder: '1px solid #9b9b9b',
+        }),
+        h('span.network-name-item', {
+          style: {
+            color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
+          },
+        }, 'Custom RPC'),
+      ]
+    ),
+
+  ])
+}
+
+
+NetworkDropdown.prototype.getNetworkName = function () {
+  const { provider } = this.props
+  const providerName = provider.type
+
+  let name
+
+  if (providerName === 'mainnet') {
+    name = 'Main Ethereum Network'
+  } else if (providerName === 'ropsten') {
+    name = 'Ropsten Test Network'
+  } else if (providerName === 'kovan') {
+    name = 'Kovan Test Network'
+  } else if (providerName === 'rinkeby') {
+    name = 'Rinkeby Test Network'
+  } else {
+    name = 'Unknown Private Network'
+  }
+
+  return name
+}
+
+NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
+  const props = this.props
+  const rpcTarget = provider.rpcTarget
+
+  return rpcList.map((rpc) => {
+    if ((rpc === 'http://localhost:8545') || (rpc === rpcTarget)) {
+      return null
+    } else {
+      return h(
+        DropdownMenuItem,
+        {
+          key: `common${rpc}`,
+          closeMenu: () => this.props.hideNetworkDropdown(),
+          onClick: () => props.setRpcTarget(rpc),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          rpc,
+          rpcTarget === rpc ? h('.check', '✓') : null,
+        ]
+      )
+    }
+  })
+}
+
+NetworkDropdown.prototype.renderCustomOption = function (provider) {
+  const { rpcTarget, type } = provider
+  const props = this.props
+
+  if (type !== 'rpc') return null
+
+  // Concatenate long URLs
+  let label = rpcTarget
+  if (rpcTarget.length > 31) {
+    label = label.substr(0, 34) + '...'
+  }
+
+  switch (rpcTarget) {
+
+    case 'http://localhost:8545':
+      return null
+
+    default:
+      return h(
+        DropdownMenuItem,
+        {
+          key: rpcTarget,
+          onClick: () => props.setRpcTarget(rpcTarget),
+          closeMenu: () => this.props.hideNetworkDropdown(),
+        },
+        [
+          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
+          label,
+          h('.check', '✓'),
+        ]
+      )
+  }
+}
diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js
new file mode 100644
index 000000000..bba088ed1
--- /dev/null
+++ b/ui/app/components/dropdowns/simple-dropdown.js
@@ -0,0 +1,92 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const classnames = require('classnames')
+const R = require('ramda')
+
+class SimpleDropdown extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      isOpen: false,
+    }
+  }
+
+  getDisplayValue () {
+    const { selectedOption, options } = this.props
+    const matchesOption = option => option.value === selectedOption
+    const matchingOption = R.find(matchesOption)(options)
+    return matchingOption
+      ? matchingOption.displayValue || matchingOption.value
+      : selectedOption
+  }
+
+  handleClose () {
+    this.setState({ isOpen: false })
+  }
+
+  toggleOpen () {
+    const { isOpen } = this.state
+    this.setState({ isOpen: !isOpen })
+  }
+
+  renderOptions () {
+    const { options, onSelect, selectedOption } = this.props
+
+    return h('div', [
+      h('div.simple-dropdown__close-area', {
+        onClick: event => {
+          event.stopPropagation()
+          this.handleClose()
+        },
+      }),
+      h('div.simple-dropdown__options', [
+        ...options.map(option => {
+          return h(
+            'div.simple-dropdown__option',
+            {
+              className: classnames({
+                'simple-dropdown__option--selected': option.value === selectedOption,
+              }),
+              key: option.value,
+              onClick: () => {
+                if (option.value !== selectedOption) {
+                  onSelect(option.value)
+                }
+
+                this.handleClose()
+              },
+            },
+            option.displayValue || option.value,
+          )
+        }),
+      ]),
+    ])
+  }
+
+  render () {
+    const { placeholder } = this.props
+    const { isOpen } = this.state
+
+    return h(
+      'div.simple-dropdown',
+      {
+        onClick: () => this.toggleOpen(),
+      },
+      [
+        h('div.simple-dropdown__selected', this.getDisplayValue() || placeholder || 'Select'),
+        h('i.fa.fa-caret-down.fa-lg.simple-dropdown__caret'),
+        isOpen && this.renderOptions(),
+      ]
+    )
+  }
+}
+
+SimpleDropdown.propTypes = {
+  options: PropTypes.array.isRequired,
+  placeholder: PropTypes.string,
+  onSelect: PropTypes.func,
+  selectedOption: PropTypes.string,
+}
+
+module.exports = SimpleDropdown
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
new file mode 100644
index 000000000..dc7a985e3
--- /dev/null
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -0,0 +1,51 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+
+module.exports = connect(null, mapDispatchToProps)(TokenMenuDropdown)
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showHideTokenConfirmationModal: (token) => {
+      dispatch(actions.showModal({ name: 'HIDE_TOKEN_CONFIRMATION', token }))
+    },
+  }
+}
+
+
+inherits(TokenMenuDropdown, Component)
+function TokenMenuDropdown () {
+  Component.call(this)
+
+  this.onClose = this.onClose.bind(this)
+}
+
+TokenMenuDropdown.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+TokenMenuDropdown.prototype.render = function () {
+  const { showHideTokenConfirmationModal } = this.props
+
+  return h('div.token-menu-dropdown', {}, [
+    h('div.token-menu-dropdown__close-area', {
+      onClick: this.onClose,
+    }),
+    h('div.token-menu-dropdown__container', {}, [
+      h('div.token-menu-dropdown__options', {}, [
+
+        h('div.token-menu-dropdown__option', {
+          onClick: (e) => {
+            e.stopPropagation()
+            showHideTokenConfirmationModal(this.props.token)
+            this.props.onClose()
+          },
+        }, 'Hide Token'),
+
+      ]),
+    ]),
+  ])
+}
diff --git a/ui/app/components/editable-label.js b/ui/app/components/editable-label.js
index 41936f5e0..eb41ec50c 100644
--- a/ui/app/components/editable-label.js
+++ b/ui/app/components/editable-label.js
@@ -1,51 +1,88 @@
-const Component = require('react').Component
+const { Component } = require('react')
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const findDOMNode = require('react-dom').findDOMNode
+const classnames = require('classnames')
 
-module.exports = EditableLabel
+class EditableLabel extends Component {
+  constructor (props) {
+    super(props)
 
-inherits(EditableLabel, Component)
-function EditableLabel () {
-  Component.call(this)
-}
+    this.state = {
+      isEditing: false,
+      value: props.defaultValue || '',
+    }
+  }
+
+  handleSubmit () {
+    const { value } = this.state
+
+    if (value === '') {
+      return
+    }
+
+    Promise.resolve(this.props.onSubmit(value))
+      .then(() => this.setState({ isEditing: false }))
+  }
+
+  saveIfEnter (event) {
+    if (event.key === 'Enter') {
+      this.handleSubmit()
+    }
+  }
 
-EditableLabel.prototype.render = function () {
-  const props = this.props
-  const state = this.state
+  renderEditing () {
+    const { value } = this.state
 
-  if (state && state.isEditingLabel) {
-    return h('div.editable-label', [
-      h('input.sizing-input', {
-        defaultValue: props.textValue,
-        maxLength: '20',
+    return ([
+      h('input.large-input.editable-label__input', {
+        type: 'text',
+        required: true,
+        value: this.state.value,
         onKeyPress: (event) => {
-          this.saveIfEnter(event)
+          if (event.key === 'Enter') {
+            this.handleSubmit()
+          }
         },
+        onChange: event => this.setState({ value: event.target.value }),
+        className: classnames({ 'editable-label__input--error': value === '' }),
       }),
-      h('button.editable-button', {
-        onClick: () => this.saveText(),
-      }, 'Save'),
+      h('div.editable-label__icon-wrapper', [
+        h('i.fa.fa-check.editable-label__icon', {
+          onClick: () => this.handleSubmit(),
+        }),
+      ]),
     ])
-  } else {
-    return h('div.name-label', {
-      onClick: (event) => {
-        this.setState({ isEditingLabel: true })
-      },
-    }, this.props.children)
   }
-}
 
-EditableLabel.prototype.saveIfEnter = function (event) {
-  if (event.key === 'Enter') {
-    this.saveText()
+  renderReadonly () {
+    return ([
+      h('div.editable-label__value', this.state.value),
+      h('div.editable-label__icon-wrapper', [
+        h('i.fa.fa-pencil.editable-label__icon', {
+          onClick: () => this.setState({ isEditing: true }),
+        }),
+      ]),
+    ])
+  }
+
+  render () {
+    const { isEditing } = this.state
+    const { className } = this.props
+
+    return (
+      h('div.editable-label', { className: classnames(className) },
+        isEditing
+          ? this.renderEditing()
+          : this.renderReadonly()
+      )
+    )
   }
 }
 
-EditableLabel.prototype.saveText = function () {
-  var container = findDOMNode(this)
-  var text = container.querySelector('.editable-label input').value
-  var truncatedText = text.substring(0, 20)
-  this.props.saveText(truncatedText)
-  this.setState({ isEditingLabel: false, textLabel: truncatedText })
+EditableLabel.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  defaultValue: PropTypes.string,
+  className: PropTypes.string,
 }
+
+module.exports = EditableLabel
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index facf29d97..6553053f7 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -5,11 +5,10 @@ const extend = require('xtend')
 const debounce = require('debounce')
 const copyToClipboard = require('copy-to-clipboard')
 const ENS = require('ethjs-ens')
-const ensRE = /.+\.eth$/
+const networkMap = require('ethjs-ens/lib/network-map.json')
+const ensRE = /.+\..+$/
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 
-const networkResolvers = {
-  '3': '112234455c3a32fd11230c42e7bccd4a84e02010',
-}
 
 module.exports = EnsInput
 
@@ -24,8 +23,8 @@ EnsInput.prototype.render = function () {
     list: 'addresses',
     onChange: () => {
       const network = this.props.network
-      let resolverAddress = networkResolvers[network]
-      if (!resolverAddress) return
+      const networkHasEnsSupport = getNetworkEnsSupport(network)
+      if (!networkHasEnsSupport) return
 
       const recipient = document.querySelector('input[name="address"]').value
       if (recipient.match(ensRE) === null) {
@@ -42,20 +41,20 @@ EnsInput.prototype.render = function () {
       this.checkName()
     },
   })
-
   return h('div', {
     style: { width: '100%' },
   }, [
-    h('input.large-input', opts),
+    h('input.large-input.send-screen-input', opts),
     // The address book functionality.
     h('datalist#addresses',
       [
         // Corresponds to the addresses owned.
         Object.keys(props.identities).map((key) => {
-          let identity = props.identities[key]
+          const identity = props.identities[key]
           return h('option', {
             value: identity.address,
             label: identity.name,
+            key: identity.address,
           })
         }),
         // Corresponds to previously sent-to addresses.
@@ -63,6 +62,7 @@ EnsInput.prototype.render = function () {
           return h('option', {
             value: identity.address,
             label: identity.name,
+            key: identity.address,
           })
         }),
       ]),
@@ -72,10 +72,11 @@ EnsInput.prototype.render = function () {
 
 EnsInput.prototype.componentDidMount = function () {
   const network = this.props.network
-  let resolverAddress = networkResolvers[network]
+  const networkHasEnsSupport = getNetworkEnsSupport(network)
+  this.setState({ ensResolution: ZERO_ADDRESS })
 
-  if (resolverAddress) {
-    const provider = web3.currentProvider
+  if (networkHasEnsSupport) {
+    const provider = global.ethereumProvider
     this.ens = new ENS({ provider, network })
     this.checkName = debounce(this.lookupEnsName.bind(this), 200)
   }
@@ -85,23 +86,17 @@ EnsInput.prototype.lookupEnsName = function () {
   const recipient = document.querySelector('input[name="address"]').value
   const { ensResolution } = this.state
 
-  if (!this.ens) {
-    return this.setState({
-      loadingEns: false,
-      ensFailure: true,
-      hoverText: 'ENS is not supported on your current network.',
-    })
-  }
-
   log.info(`ENS attempting to resolve name: ${recipient}`)
   this.ens.lookup(recipient.trim())
   .then((address) => {
+    if (address === ZERO_ADDRESS) throw new Error('No address has been set for this name.')
     if (address !== ensResolution) {
       this.setState({
         loadingEns: false,
         ensResolution: address,
         nickname: recipient.trim(),
         hoverText: address + '\nClick to Copy',
+        ensFailure: false,
       })
     }
   })
@@ -109,6 +104,7 @@ EnsInput.prototype.lookupEnsName = function () {
     log.error(reason)
     return this.setState({
       loadingEns: false,
+      ensResolution: ZERO_ADDRESS,
       ensFailure: true,
       hoverText: reason.message,
     })
@@ -121,7 +117,7 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
   // 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 (ensResolution && this.props.onChange &&
+  if (prevState && ensResolution && this.props.onChange &&
       ensResolution !== prevState.ensResolution) {
     this.props.onChange(ensResolution, nickname)
   }
@@ -129,7 +125,7 @@ EnsInput.prototype.componentDidUpdate = function (prevProps, prevState) {
 
 EnsInput.prototype.ensIcon = function (recipient) {
   const { hoverText } = this.state || {}
-  return h('span', {
+  return h('span.#ensIcon', {
     title: hoverText,
     style: {
       position: 'absolute',
@@ -140,7 +136,7 @@ EnsInput.prototype.ensIcon = function (recipient) {
 }
 
 EnsInput.prototype.ensIconContents = function (recipient) {
-  const { loadingEns, ensFailure, ensResolution } = this.state || {}
+  const { loadingEns, ensFailure, ensResolution } = this.state || { ensResolution: ZERO_ADDRESS}
 
   if (loadingEns) {
     return h('img', {
@@ -157,7 +153,7 @@ EnsInput.prototype.ensIconContents = function (recipient) {
     return h('i.fa.fa-warning.fa-lg.warning')
   }
 
-  if (ensResolution) {
+  if (ensResolution && (ensResolution !== ZERO_ADDRESS)) {
     return h('i.fa.fa-check-circle.fa-lg.cursor-pointer', {
       style: { color: 'green' },
       onClick: (event) => {
@@ -168,3 +164,7 @@ EnsInput.prototype.ensIconContents = function (recipient) {
     })
   }
 }
+
+function getNetworkEnsSupport (network) {
+  return Boolean(networkMap[network])
+}
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 57ca84564..1be8c9731 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -1,8 +1,10 @@
-const Component = require('react').Component
+const { Component } = require('react')
 const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const formatBalance = require('../util').formatBalance
-const generateBalanceObject = require('../util').generateBalanceObject
+const { inherits } = require('util')
+const {
+  formatBalance,
+  generateBalanceObject,
+} = require('../util')
 const Tooltip = require('./tooltip.js')
 const FiatValue = require('./fiat-value.js')
 
@@ -14,76 +16,81 @@ function EthBalanceComponent () {
 }
 
 EthBalanceComponent.prototype.render = function () {
-  var props = this.props
-  let { value } = props
-  var style = props.style
-  var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
-  value = value ? formatBalance(value, 6, needsParse) : '...'
-  var width = props.width
+  const props = this.props
+  const { value, style, width, needsParse = true } = props
+
+  const formattedValue = value ? formatBalance(value, 6, needsParse) : '...'
 
   return (
 
     h('.ether-balance.ether-balance-amount', {
-      style: style,
+      style,
     }, [
       h('div', {
         style: {
           display: 'inline',
-          width: width,
+          width,
         },
-      }, this.renderBalance(value)),
+      }, this.renderBalance(formattedValue)),
     ])
 
   )
 }
 EthBalanceComponent.prototype.renderBalance = function (value) {
-  var props = this.props
   if (value === 'None') return value
   if (value === '...') return value
-  var balanceObj = generateBalanceObject(value, props.shorten ? 1 : 3)
-  var balance
-  var splitBalance = value.split(' ')
-  var ethNumber = splitBalance[0]
-  var ethSuffix = splitBalance[1]
-  const showFiat = 'showFiat' in props ? props.showFiat : true
 
-  if (props.shorten) {
-    balance = balanceObj.shortBalance
-  } else {
-    balance = balanceObj.balance
-  }
+  const {
+    conversionRate,
+    shorten,
+    incoming,
+    currentCurrency,
+    hideTooltip,
+    styleOveride,
+    showFiat = true,
+  } = this.props
+  const { fontSize, color, fontFamily, lineHeight } = styleOveride
 
-  var label = balanceObj.label
+  const { shortBalance, balance, label } = generateBalanceObject(value, shorten ? 1 : 3)
+  const balanceToRender = shorten ? shortBalance : balance
+
+  const [ethNumber, ethSuffix] = value.split(' ')
+  const containerProps = hideTooltip ? {} : {
+    position: 'bottom',
+    title: `${ethNumber} ${ethSuffix}`,
+  }
 
   return (
-    h(Tooltip, {
-      position: 'bottom',
-      title: `${ethNumber} ${ethSuffix}`,
-    }, h('div.flex-column', [
-      h('.flex-row', {
-        style: {
-          alignItems: 'flex-end',
-          lineHeight: '13px',
-          fontFamily: 'Montserrat Light',
-          textRendering: 'geometricPrecision',
-        },
-      }, [
-        h('div', {
-          style: {
-            width: '100%',
-            textAlign: 'right',
-          },
-        }, this.props.incoming ? `+${balance}` : balance),
-        h('div', {
+    h(hideTooltip ? 'div' : Tooltip,
+      containerProps,
+      h('div.flex-column', [
+        h('.flex-row', {
           style: {
-            color: ' #AEAEAE',
-            fontSize: '12px',
-            marginLeft: '5px',
+            alignItems: 'flex-end',
+            lineHeight: lineHeight || '13px',
+            fontFamily: fontFamily || 'Montserrat Light',
+            textRendering: 'geometricPrecision',
           },
-        }, label),
-      ]),
+        }, [
+          h('div', {
+            style: {
+              width: '100%',
+              textAlign: 'right',
+              fontSize: fontSize || 'inherit',
+              color: color || 'inherit',
+            },
+          }, incoming ? `+${balanceToRender}` : balanceToRender),
+          h('div', {
+            style: {
+              color: color || '#AEAEAE',
+              fontSize: fontSize || '12px',
+              marginLeft: '5px',
+            },
+          }, label),
+        ]),
 
-      showFiat ? h(FiatValue, { value: props.value }) : null,
-    ]))
+        showFiat ? h(FiatValue, { value: this.props.value, conversionRate, currentCurrency }) : null,
+      ])
+    )
   )
 }
diff --git a/ui/app/components/fiat-value.js b/ui/app/components/fiat-value.js
index 298809b30..56465fc9d 100644
--- a/ui/app/components/fiat-value.js
+++ b/ui/app/components/fiat-value.js
@@ -1,17 +1,9 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const connect = require('react-redux').connect
 const formatBalance = require('../util').formatBalance
 
-module.exports = connect(mapStateToProps)(FiatValue)
-
-function mapStateToProps (state) {
-  return {
-    conversionRate: state.metamask.conversionRate,
-    currentCurrency: state.metamask.currentCurrency,
-  }
-}
+module.exports = FiatValue
 
 inherits(FiatValue, Component)
 function FiatValue () {
@@ -20,32 +12,35 @@ function FiatValue () {
 
 FiatValue.prototype.render = function () {
   const props = this.props
+  const { conversionRate, currentCurrency, style } = props
+  const renderedCurrency = currentCurrency || ''
+
   const value = formatBalance(props.value, 6)
 
   if (value === 'None') return value
   var fiatDisplayNumber, fiatTooltipNumber
   var splitBalance = value.split(' ')
 
-  if (props.conversionRate !== 0) {
-    fiatTooltipNumber = Number(splitBalance[0]) * props.conversionRate
+  if (conversionRate !== 0) {
+    fiatTooltipNumber = Number(splitBalance[0]) * conversionRate
     fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
   } else {
     fiatDisplayNumber = 'N/A'
     fiatTooltipNumber = 'Unknown'
   }
 
-  var fiatSuffix = props.currentCurrency
-
-  return fiatDisplay(fiatDisplayNumber, fiatSuffix)
+  return fiatDisplay(fiatDisplayNumber, renderedCurrency.toUpperCase(), style)
 }
 
-function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+function fiatDisplay (fiatDisplayNumber, fiatSuffix, styleOveride = {}) {
+  const { fontSize, color, fontFamily, lineHeight } = styleOveride
+
   if (fiatDisplayNumber !== 'N/A') {
     return h('.flex-row', {
       style: {
         alignItems: 'flex-end',
-        lineHeight: '13px',
-        fontFamily: 'Montserrat Light',
+        lineHeight: lineHeight || '13px',
+        fontFamily: fontFamily || 'Montserrat Light',
         textRendering: 'geometricPrecision',
       },
     }, [
@@ -53,15 +48,15 @@ function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
         style: {
           width: '100%',
           textAlign: 'right',
-          fontSize: '12px',
-          color: '#333333',
+          fontSize: fontSize || '12px',
+          color: color || '#333333',
         },
       }, fiatDisplayNumber),
       h('div', {
         style: {
-          color: '#AEAEAE',
+          color: color || '#AEAEAE',
           marginLeft: '5px',
-          fontSize: '12px',
+          fontSize: fontSize || '12px',
         },
       }, fiatSuffix),
     ])
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index e37aaa8c3..4a71e9585 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -139,7 +139,7 @@ HexAsDecimalInput.prototype.constructWarning = function () {
 }
 
 function hexify (decimalString) {
-  const hexBN = new BN(decimalString, 10)
+  const hexBN = new BN(parseInt(decimalString), 10)
   return '0x' + hexBN.toString('hex')
 }
 
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 6d4871d02..b803b7ceb 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -1,12 +1,15 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const isNode = require('detect-node')
 const findDOMNode = require('react-dom').findDOMNode
 const jazzicon = require('jazzicon')
 const iconFactoryGen = require('../../lib/icon-factory')
 const iconFactory = iconFactoryGen(jazzicon)
+const { toDataUrl } = require('../../lib/blockies')
 
-module.exports = IdenticonComponent
+module.exports = connect(mapStateToProps)(IdenticonComponent)
 
 inherits(IdenticonComponent, Component)
 function IdenticonComponent () {
@@ -15,49 +18,100 @@ function IdenticonComponent () {
   this.defaultDiameter = 46
 }
 
+function mapStateToProps (state) {
+  return {
+    useBlockie: state.metamask.useBlockie,
+  }
+}
+
 IdenticonComponent.prototype.render = function () {
   var props = this.props
+  const { className = '', address } = props
   var diameter = props.diameter || this.defaultDiameter
-  return (
-    h('div', {
-      key: 'identicon-' + this.props.address,
-      style: {
-        display: 'inline-block',
-        height: diameter,
-        width: diameter,
-        borderRadius: diameter / 2,
-        overflow: 'hidden',
-      },
-    })
-  )
+
+  return address
+    ? (
+      h('div', {
+        className: `${className} identicon`,
+        key: 'identicon-' + address,
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: diameter,
+          width: diameter,
+          borderRadius: diameter / 2,
+          overflow: 'hidden',
+        },
+      })
+    )
+    : (
+      h('img.balance-icon', {
+        src: '../images/eth_logo.svg',
+        style: {
+          height: diameter,
+          width: diameter,
+          borderRadius: diameter / 2,
+        },
+      })
+    )
 }
 
 IdenticonComponent.prototype.componentDidMount = function () {
   var props = this.props
-  var address = props.address
+  const { address, useBlockie } = props
 
   if (!address) return
 
-  var container = findDOMNode(this)
-  var diameter = props.diameter || this.defaultDiameter
-  var img = iconFactory.iconForAddress(address, diameter, false)
-  container.appendChild(img)
+  if (!isNode) {
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
+
+    const diameter = props.diameter || this.defaultDiameter
+
+    if (useBlockie) {
+      _generateBlockie(container, address, diameter)
+    } else {
+      _generateJazzicon(container, address, diameter)
+    }
+  }
 }
 
 IdenticonComponent.prototype.componentDidUpdate = function () {
   var props = this.props
-  var address = props.address
+  const { address, useBlockie } = props
 
   if (!address) return
 
-  var container = findDOMNode(this)
+  if (!isNode) {
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
+
+    var children = container.children
+    for (var i = 0; i < children.length; i++) {
+      container.removeChild(children[i])
+    }
 
-  var children = container.children
-  for (var i = 0; i < children.length; i++) {
-    container.removeChild(children[i])
+    const diameter = props.diameter || this.defaultDiameter
+
+    if (useBlockie) {
+      _generateBlockie(container, address, diameter)
+    } else {
+      _generateJazzicon(container, address, diameter)
+    }
   }
+}
 
-  var diameter = props.diameter || this.defaultDiameter
-  var img = iconFactory.iconForAddress(address, diameter, false)
+function _generateBlockie (container, address, diameter) {
+  const img = new Image()
+  img.src = toDataUrl(address)
+  const dia = !diameter || diameter < 50 ? 50 : diameter
+  img.height = dia * 1.25
+  img.width = dia * 1.25
+  container.appendChild(img)
+}
+
+function _generateJazzicon (container, address, diameter) {
+  const img = iconFactory.iconForAddress(address, diameter)
   container.appendChild(img)
 }
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
new file mode 100644
index 000000000..fd8c5c309
--- /dev/null
+++ b/ui/app/components/input-number.js
@@ -0,0 +1,73 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const CurrencyInput = require('./currency-input')
+const {
+  addCurrencies,
+  conversionGTE,
+  conversionLTE,
+  subtractCurrencies,
+} = require('../conversion-util')
+
+module.exports = InputNumber
+
+inherits(InputNumber, Component)
+function InputNumber () {
+  Component.call(this)
+
+  this.setValue = this.setValue.bind(this)
+}
+
+function isValidInput (text) {
+  const re = /^([1-9]\d*|0)(\.|\.\d*)?$/
+  return re.test(text)
+}
+
+InputNumber.prototype.setValue = function (newValue) {
+  if (newValue && !isValidInput(newValue)) return
+  const { fixed, min = -1, max = Infinity, onChange } = this.props
+
+  newValue = fixed ? newValue.toFixed(4) : newValue
+
+  const newValueGreaterThanMin = conversionGTE(
+    { value: newValue || '0', fromNumericBase: 'dec' },
+    { value: min, fromNumericBase: 'hex' },
+  )
+
+  const newValueLessThanMax = conversionLTE(
+    { value: newValue || '0', fromNumericBase: 'dec' },
+    { value: max, fromNumericBase: 'hex' },
+  )
+  if (newValueGreaterThanMin && newValueLessThanMax) {
+    onChange(newValue)
+  } else if (!newValueGreaterThanMin) {
+    onChange(min)
+  } else if (!newValueLessThanMax) {
+    onChange(max)
+  }
+}
+
+InputNumber.prototype.render = function () {
+  const { unitLabel, step = 1, placeholder, value = 0 } = this.props
+
+  return h('div.customize-gas-input-wrapper', {}, [
+    h(CurrencyInput, {
+      className: 'customize-gas-input',
+      value,
+      placeholder,
+      onInputChange: newValue => {
+        this.setValue(newValue)
+      },
+    }),
+    h('span.gas-tooltip-input-detail', {}, [unitLabel]),
+    h('div.gas-tooltip-input-arrows', {}, [
+      h('i.fa.fa-angle-up', {
+        onClick: () => this.setValue(addCurrencies(value, step)),
+      }),
+      h('i.fa.fa-angle-down', {
+        style: { cursor: 'pointer' },
+        onClick: () => this.setValue(subtractCurrencies(value, step)),
+      }),
+    ]),
+  ])
+}
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 88dc535df..cb6fa51fb 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -1,50 +1,30 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
+const { Component } = require('react')
 const h = require('react-hyperscript')
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
+const PropTypes = require('prop-types')
 
+class LoadingIndicator extends Component {
+  renderMessage () {
+    const { loadingMessage } = this.props
+    return loadingMessage && h('span', loadingMessage)
+  }
 
-inherits(LoadingIndicator, Component)
-module.exports = LoadingIndicator
-
-function LoadingIndicator () {
-  Component.call(this)
-}
-
-LoadingIndicator.prototype.render = function () {
-  const { isLoading, loadingMessage } = this.props
-
-  return (
-    h(ReactCSSTransitionGroup, {
-      className: 'css-transition-group',
-      transitionName: 'loader',
-      transitionEnterTimeout: 150,
-      transitionLeaveTimeout: 150,
-    }, [
-
-      isLoading ? h('div', {
-        style: {
-          zIndex: 10,
-          position: 'absolute',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100%',
-          width: '100%',
-          background: 'rgba(255, 255, 255, 0.5)',
-        },
-      }, [
+  render () {
+    return (
+      h('.full-flex-height.loading-overlay', {}, [
         h('img', {
           src: 'images/loading.svg',
         }),
 
-        showMessageIfAny(loadingMessage),
-      ]) : null,
-    ])
-  )
+        h('br'),
+
+        this.renderMessage(),
+      ])
+    )
+  }
 }
 
-function showMessageIfAny (loadingMessage) {
-  if (!loadingMessage) return null
-  return h('span', loadingMessage)
+LoadingIndicator.propTypes = {
+  loadingMessage: PropTypes.string,
 }
+
+module.exports = LoadingIndicator
diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js
index 973ec2cad..3b0d3e31b 100644
--- a/ui/app/components/mascot.js
+++ b/ui/app/components/mascot.js
@@ -7,13 +7,13 @@ const debounce = require('debounce')
 module.exports = Mascot
 
 inherits(Mascot, Component)
-function Mascot () {
+function Mascot ({width = '200', height = '200'}) {
   Component.call(this)
   this.logo = metamaskLogo({
     followMouse: true,
     pxNotRatio: true,
-    width: 200,
-    height: 200,
+    width,
+    height,
   })
 
   this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
diff --git a/ui/app/components/menu-droppo.js b/ui/app/components/menu-droppo.js
new file mode 100644
index 000000000..c80bee2be
--- /dev/null
+++ b/ui/app/components/menu-droppo.js
@@ -0,0 +1,134 @@
+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')
+
+module.exports = MenuDroppoComponent
+
+
+inherits(MenuDroppoComponent, Component)
+function MenuDroppoComponent () {
+  Component.call(this)
+}
+
+MenuDroppoComponent.prototype.render = function () {
+  const { containerClassName = '' } = this.props
+  const speed = this.props.speed || '300ms'
+  const useCssTransition = this.props.useCssTransition
+  const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
+
+  this.manageListeners()
+
+  const style = this.props.style || {}
+  if (!('position' in style)) {
+    style.position = 'fixed'
+  }
+  style.zIndex = zIndex
+
+  return (
+    h('div', {
+      style,
+      className: `.menu-droppo-container ${containerClassName}`,
+    }, [
+      h('style', `
+        .menu-droppo-enter {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(-200%);
+        }
+
+        .menu-droppo-enter.menu-droppo-enter-active {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(0%);
+        }
+
+        .menu-droppo-leave {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(0%);
+        }
+
+        .menu-droppo-leave.menu-droppo-leave-active {
+          transition: transform ${speed} ease-in-out;
+          transform: translateY(-200%);
+        }
+      `),
+
+      useCssTransition
+        ? h(ReactCSSTransitionGroup, {
+          className: 'css-transition-group',
+          transitionName: 'menu-droppo',
+          transitionEnterTimeout: parseInt(speed),
+          transitionLeaveTimeout: parseInt(speed),
+        }, this.renderPrimary())
+        : this.renderPrimary(),
+    ])
+  )
+}
+
+MenuDroppoComponent.prototype.renderPrimary = function () {
+  const isOpen = this.props.isOpen
+  if (!isOpen) {
+    return null
+  }
+
+  const innerStyle = this.props.innerStyle || {}
+
+  return (
+    h('.menu-droppo', {
+      key: 'menu-droppo-drawer',
+      style: innerStyle,
+    },
+    [ this.props.children ])
+  )
+}
+
+MenuDroppoComponent.prototype.manageListeners = function () {
+  const isOpen = this.props.isOpen
+  const onClickOutside = this.props.onClickOutside
+
+  if (isOpen) {
+    this.outsideClickHandler = onClickOutside
+  } else if (isOpen) {
+    this.outsideClickHandler = null
+  }
+}
+
+MenuDroppoComponent.prototype.componentDidMount = function () {
+  if (this && document.body) {
+    this.globalClickHandler = this.globalClickOccurred.bind(this)
+    document.body.addEventListener('click', this.globalClickHandler)
+    // eslint-disable-next-line react/no-find-dom-node
+    var container = findDOMNode(this)
+    this.container = container
+  }
+}
+
+MenuDroppoComponent.prototype.componentWillUnmount = function () {
+  if (this && document.body) {
+    document.body.removeEventListener('click', this.globalClickHandler)
+  }
+}
+
+MenuDroppoComponent.prototype.globalClickOccurred = function (event) {
+  const target = event.target
+  // eslint-disable-next-line react/no-find-dom-node
+  const container = findDOMNode(this)
+
+  if (target !== container &&
+    !isDescendant(this.container, event.target) &&
+    this.outsideClickHandler) {
+    this.outsideClickHandler(event)
+  }
+}
+
+function isDescendant (parent, child) {
+  var node = child.parentNode
+  while (node !== null) {
+    if (node === parent) {
+      return true
+    }
+    node = node.parentNode
+  }
+
+  return false
+}
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
new file mode 100644
index 000000000..c1f7a3236
--- /dev/null
+++ b/ui/app/components/modals/account-details-modal.js
@@ -0,0 +1,75 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const AccountModalContainer = require('./account-modal-container')
+const { getSelectedIdentity } = require('../../selectors')
+const genAccountLink = require('../../../lib/account-link.js')
+const QrView = require('../qr-code')
+const EditableLabel = require('../editable-label')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    // Is this supposed to be used somewhere?
+    showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+    showExportPrivateKeyModal: () => {
+      dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+    },
+    hideModal: () => dispatch(actions.hideModal()),
+    saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)),
+  }
+}
+
+inherits(AccountDetailsModal, Component)
+function AccountDetailsModal () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
+
+// Not yet pixel perfect todos:
+  // fonts of qr-header
+
+AccountDetailsModal.prototype.render = function () {
+  const {
+    selectedIdentity,
+    network,
+    showExportPrivateKeyModal,
+    saveAccountLabel,
+  } = this.props
+  const { name, address } = selectedIdentity
+
+  return h(AccountModalContainer, {}, [
+      h(EditableLabel, {
+        className: 'account-modal__name',
+        defaultValue: name,
+        onSubmit: label => saveAccountLabel(address, label),
+      }),
+
+      h(QrView, {
+        Qr: {
+          data: address,
+        },
+      }),
+
+      h('div.account-modal-divider'),
+
+      h('button.btn-clear.account-modal__button', {
+        onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
+      }, 'View account on Etherscan'),
+
+      // Holding on redesign for Export Private Key functionality
+      h('button.btn-clear.account-modal__button', {
+        onClick: () => showExportPrivateKeyModal(),
+      }, 'Export private key'),
+
+  ])
+}
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
new file mode 100644
index 000000000..c548fb7b3
--- /dev/null
+++ b/ui/app/components/modals/account-modal-container.js
@@ -0,0 +1,74 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const { getSelectedIdentity } = require('../../selectors')
+const Identicon = require('../identicon')
+
+function mapStateToProps (state) {
+  return {
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+inherits(AccountModalContainer, Component)
+function AccountModalContainer () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContainer)
+
+AccountModalContainer.prototype.render = function () {
+  const {
+    selectedIdentity,
+    showBackButton = false,
+    backButtonAction,
+  } = this.props
+  let { children } = this.props
+
+  if (children.constructor !== Array) {
+    children = [children]
+  }
+
+  return h('div', { style: { borderRadius: '4px' }}, [
+    h('div.account-modal-container', [
+
+      h('div', [
+
+        // Needs a border; requires changes to svg
+        h(Identicon, {
+          address: selectedIdentity.address,
+          diameter: 64,
+          style: {},
+        }),
+
+      ]),
+
+      showBackButton && h('div.account-modal-back', {
+        onClick: backButtonAction,
+      }, [
+
+        h('i.fa.fa-angle-left.fa-lg'),
+
+        h('span.account-modal-back__text', ' Back'),
+
+      ]),
+
+      h('div.account-modal-close', {
+        onClick: this.props.hideModal,
+      }),
+
+      ...children,
+
+    ]),
+  ])
+}
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
new file mode 100644
index 000000000..74a7a847e
--- /dev/null
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -0,0 +1,95 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const networkNames = require('../../../../app/scripts/config.js').networkNames
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+    toFaucet: network => dispatch(actions.buyEth({ network })),
+  }
+}
+
+inherits(BuyOptions, Component)
+function BuyOptions () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
+
+BuyOptions.prototype.renderModalContentOption = function (title, header, onClick) {
+  return h('div.buy-modal-content-option', {
+    onClick,
+  }, [
+    h('div.buy-modal-content-option-title', {}, title),
+    h('div.buy-modal-content-option-subtitle', {}, header),
+  ])
+}
+
+BuyOptions.prototype.render = function () {
+  const { network, toCoinbase, address, toFaucet } = this.props
+  const isTestNetwork = ['3', '4', '42'].find(n => n === network)
+  const networkName = networkNames[network]
+
+  return h('div', {}, [
+    h('div.buy-modal-content.transfers-subview', {
+    }, [
+      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
+        style: {},
+      }, [
+        h('div.buy-modal-content-title', {
+          style: {},
+        }, 'Transfers'),
+        h('div', {}, 'How would you like to deposit Ether?'),
+      ]),
+
+      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
+
+        isTestNetwork
+          ? this.renderModalContentOption(networkName, 'Test Faucet', () => toFaucet(network))
+          : this.renderModalContentOption('Coinbase', 'Deposit with Fiat', () => toCoinbase(address)),
+
+        // h('div.buy-modal-content-option', {}, [
+        //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+        //   h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        // ]),,
+
+        this.renderModalContentOption(
+          'Direct Deposit',
+          'Deposit from another account',
+          () => this.goToAccountDetailsModal()
+        ),
+
+      ]),
+
+      h('button', {
+        style: {
+          background: 'white',
+        },
+        onClick: () => { this.props.hideModal() },
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, 'Cancel')),
+    ]),
+  ])
+}
+
+BuyOptions.prototype.goToAccountDetailsModal = function () {
+  this.props.hideModal()
+  this.props.showAccountDetailModal()
+}
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
new file mode 100644
index 000000000..532d66653
--- /dev/null
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -0,0 +1,184 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const networkNames = require('../../../../app/scripts/config.js').networkNames
+const ShapeshiftForm = require('../shapeshift-form')
+
+const DIRECT_DEPOSIT_ROW_TITLE = 'Directly Deposit Ether'
+const DIRECT_DEPOSIT_ROW_TEXT = `If you already have some Ether, the quickest way to get Ether in
+your new wallet by direct deposit.`
+const COINBASE_ROW_TITLE = 'Buy on Coinbase'
+const COINBASE_ROW_TEXT = `Coinbase is the world’s most popular way to buy and sell bitcoin,
+ethereum, and litecoin.`
+const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift'
+const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether
+directly into your MetaMask wallet. No Account Needed.`
+const FAUCET_ROW_TITLE = 'Test Faucet'
+const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    address: state.metamask.selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+    toFaucet: network => dispatch(actions.buyEth({ network })),
+  }
+}
+
+inherits(DepositEtherModal, Component)
+function DepositEtherModal () {
+  Component.call(this)
+
+  this.state = {
+    buyingWithShapeshift: false,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal)
+
+DepositEtherModal.prototype.renderRow = function ({
+  logo,
+  title,
+  text,
+  buttonLabel,
+  onButtonClick,
+  hide,
+  className,
+  hideButton,
+  hideTitle,
+  onBackClick,
+  showBackButton,
+}) {
+  if (hide) {
+    return null
+  }
+
+  return h('div', {
+      className: className || 'deposit-ether-modal__buy-row',
+    }, [
+
+    onBackClick && showBackButton && h('div.deposit-ether-modal__buy-row__back', {
+      onClick: onBackClick,
+    }, [
+
+      h('i.fa.fa-arrow-left.cursor-pointer'),
+
+    ]),
+
+    h('div.deposit-ether-modal__buy-row__logo', [logo]),
+
+      h('div.deposit-ether-modal__buy-row__description', [
+
+        !hideTitle && h('div.deposit-ether-modal__buy-row__description__title', [title]),
+
+        h('div.deposit-ether-modal__buy-row__description__text', [text]),
+
+      ]),
+
+      !hideButton && h('div.deposit-ether-modal__buy-row__button', [
+        h('button.deposit-ether-modal__deposit-button', {
+          onClick: onButtonClick,
+        }, [buttonLabel]),
+      ]),
+
+  ])
+}
+
+DepositEtherModal.prototype.render = function () {
+  const { network, toCoinbase, address, toFaucet } = this.props
+  const { buyingWithShapeshift } = this.state
+
+  const isTestNetwork = ['3', '4', '42'].find(n => n === network)
+  const networkName = networkNames[network]
+
+  return h('div.deposit-ether-modal', {}, [
+
+    h('div.deposit-ether-modal__header', [
+
+      h('div.deposit-ether-modal__header__title', ['Deposit Ether']),
+
+      h('div.deposit-ether-modal__header__description', [
+        'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.',
+      ]),
+
+      h('div.deposit-ether-modal__header__close', {
+        onClick: () => {
+          this.setState({ buyingWithShapeshift: false })
+          this.props.hideModal()
+        },
+      }),
+
+    ]),
+
+    h('div.deposit-ether-modal__buy-rows', [
+
+      this.renderRow({
+        logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
+        title: DIRECT_DEPOSIT_ROW_TITLE,
+        text: DIRECT_DEPOSIT_ROW_TEXT,
+        buttonLabel: 'View Account',
+        onButtonClick: () => this.goToAccountDetailsModal(),
+        hide: buyingWithShapeshift,
+      }),
+
+      this.renderRow({
+        logo: h('i.fa.fa-tint.fa-2x'),
+        title: FAUCET_ROW_TITLE,
+        text: facuetRowText(networkName),
+        buttonLabel: 'Get Ether',
+        onButtonClick: () => toFaucet(network),
+        hide: !isTestNetwork || buyingWithShapeshift,
+      }),
+
+      this.renderRow({
+        logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', {
+          src: '../../../images/coinbase logo.png',
+        }),
+        title: COINBASE_ROW_TITLE,
+        text: COINBASE_ROW_TEXT,
+        buttonLabel: 'Continue to Coinbase',
+        onButtonClick: () => toCoinbase(address),
+        hide: isTestNetwork || buyingWithShapeshift,
+      }),
+
+      this.renderRow({
+        logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', {
+          src: '../../../images/shapeshift logo.png',
+        }),
+        title: SHAPESHIFT_ROW_TITLE,
+        text: SHAPESHIFT_ROW_TEXT,
+        buttonLabel: 'Buy with Shapeshift',
+        onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
+        hide: isTestNetwork,
+        hideButton: buyingWithShapeshift,
+        hideTitle: buyingWithShapeshift,
+        onBackClick: () => this.setState({ buyingWithShapeshift: false }),
+        showBackButton: this.state.buyingWithShapeshift,
+        className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
+      }),
+
+      buyingWithShapeshift && h(ShapeshiftForm),
+
+    ]),
+  ])
+}
+
+DepositEtherModal.prototype.goToAccountDetailsModal = function () {
+  this.props.hideModal()
+  this.props.showAccountDetailModal()
+}
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
new file mode 100644
index 000000000..e2361140d
--- /dev/null
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -0,0 +1,77 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const { getSelectedAccount } = require('../../selectors')
+
+function mapStateToProps (state) {
+  return {
+    selectedAccount: getSelectedAccount(state),
+    identity: state.appState.modal.modalState.identity,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    saveAccountLabel: (account, label) => {
+      dispatch(actions.saveAccountLabel(account, label))
+    },
+  }
+}
+
+inherits(EditAccountNameModal, Component)
+function EditAccountNameModal (props) {
+  Component.call(this)
+
+  this.state = {
+    inputText: props.identity.name,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
+
+EditAccountNameModal.prototype.render = function () {
+  const { hideModal, saveAccountLabel, identity } = this.props
+
+  return h('div', {}, [
+    h('div.flex-column.edit-account-name-modal-content', {
+    }, [
+
+      h('div.edit-account-name-modal-cancel', {
+        onClick: () => {
+          hideModal()
+        },
+      }, [
+        h('i.fa.fa-times'),
+      ]),
+
+      h('div.edit-account-name-modal-title', {
+      }, ['Edit Account Name']),
+
+      h('input.edit-account-name-modal-input', {
+        placeholder: identity.name,
+        onChange: (event) => {
+          this.setState({ inputText: event.target.value })
+        },
+        value: this.state.inputText,
+      }, []),
+
+      h('button.btn-clear.edit-account-name-modal-save-button', {
+        onClick: () => {
+          if (this.state.inputText.length !== 0) {
+            saveAccountLabel(identity.address, this.state.inputText)
+            hideModal()
+          }
+        },
+        disabled: this.state.inputText.length === 0,
+      }, [
+        'SAVE',
+      ]),
+
+    ]),
+  ])
+}
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
new file mode 100644
index 000000000..422f23f44
--- /dev/null
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -0,0 +1,141 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const ethUtil = require('ethereumjs-util')
+const actions = require('../../actions')
+const AccountModalContainer = require('./account-modal-container')
+const { getSelectedIdentity } = require('../../selectors')
+const ReadOnlyInput = require('../readonly-input')
+const copyToClipboard = require('copy-to-clipboard')
+
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+    privateKey: state.appState.accountDetail.privateKey,
+    network: state.metamask.network,
+    selectedIdentity: getSelectedIdentity(state),
+    previousModalState: state.appState.modal.previousModalState.name,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    exportAccount: (password, address) => dispatch(actions.exportAccount(password, address)),
+    showAccountDetailModal: () => dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })),
+    hideModal: () => dispatch(actions.hideModal()),
+  }
+}
+
+inherits(ExportPrivateKeyModal, Component)
+function ExportPrivateKeyModal () {
+  Component.call(this)
+
+  this.state = {
+    password: '',
+    privateKey: null,
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ExportPrivateKeyModal)
+
+ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (password, address) {
+  const { exportAccount } = this.props
+
+  exportAccount(password, address)
+    .then(privateKey => this.setState({ privateKey }))
+}
+
+ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
+  return h('span.private-key-password-label', privateKey
+    ? 'This is your private key (click to copy)'
+    : 'Type Your Password'
+  )
+}
+
+ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
+  const plainKey = privateKey && ethUtil.stripHexPrefix(privateKey)
+
+  return privateKey
+    ? h(ReadOnlyInput, {
+        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 }),
+    })
+}
+
+ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, label) {
+  return h('button', {
+    className,
+    onClick,
+  }, label)
+}
+
+ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
+  return h('div.export-private-key-buttons', {}, [
+    !privateKey && this.renderButton(
+      'btn-cancel export-private-key__button export-private-key__button--cancel',
+      () => hideModal(),
+      'Cancel'
+    ),
+
+    (privateKey
+      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done')
+      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm')
+    ),
+
+  ])
+}
+
+ExportPrivateKeyModal.prototype.render = function () {
+  const {
+    selectedIdentity,
+    warning,
+    showAccountDetailModal,
+    hideModal,
+    previousModalState,
+  } = this.props
+  const { name, address } = selectedIdentity
+
+  const { privateKey } = this.state
+
+  return h(AccountModalContainer, {
+    showBackButton: previousModalState === 'ACCOUNT_DETAILS',
+    backButtonAction: () => showAccountDetailModal(),
+  }, [
+
+      h('span.account-name', name),
+
+      h(ReadOnlyInput, {
+        wrapperClass: 'ellip-address-wrapper',
+        inputClass: 'qr-ellip-address ellip-address',
+        value: address,
+      }),
+
+      h('div.account-modal-divider'),
+
+      h('span.modal-body-title', 'Show Private Keys'),
+
+      h('div.private-key-password', {}, [
+        this.renderPasswordLabel(privateKey),
+
+        this.renderPasswordInput(privateKey),
+
+        !warning ? null : h('span.private-key-password-error', warning),
+      ]),
+
+      h('div.private-key-password-warning', `Warning: Never disclose this key.
+        Anyone with your private keys can take steal any assets held in your
+        account.`
+      ),
+
+      this.renderButtons(privateKey, this.state.password, address, hideModal),
+
+  ])
+}
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
new file mode 100644
index 000000000..56c7ba299
--- /dev/null
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -0,0 +1,74 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const Identicon = require('../identicon')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    token: state.appState.modal.modalState.token,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => dispatch(actions.hideModal()),
+    hideToken: address => {
+      dispatch(actions.removeToken(address))
+        .then(() => {
+          dispatch(actions.hideModal())
+        })
+    },
+  }
+}
+
+inherits(HideTokenConfirmationModal, Component)
+function HideTokenConfirmationModal () {
+  Component.call(this)
+
+  this.state = {}
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(HideTokenConfirmationModal)
+
+HideTokenConfirmationModal.prototype.render = function () {
+  const { token, network, hideToken, hideModal } = this.props
+  const { symbol, address } = token
+
+  return h('div.hide-token-confirmation', {}, [
+    h('div.hide-token-confirmation__container', {
+    }, [
+      h('div.hide-token-confirmation__title', {}, [
+        'Hide Token?',
+      ]),
+
+      h(Identicon, {
+        className: 'hide-token-confirmation__identicon',
+        diameter: 45,
+        address,
+        network,
+      }),
+
+      h('div.hide-token-confirmation__symbol', {}, symbol),
+
+      h('div.hide-token-confirmation__copy', {}, [
+        'You can add this token back in the future by going go to “Add token” in your accounts options menu.',
+      ]),
+
+      h('div.hide-token-confirmation__buttons', {}, [
+        h('button.btn-cancel.hide-token-confirmation__button', {
+          onClick: () => hideModal(),
+        }, [
+          'CANCEL',
+        ]),
+        h('button.btn-clear.hide-token-confirmation__button', {
+          onClick: () => hideToken(address),
+        }, [
+          'HIDE',
+        ]),
+      ]),
+    ]),
+  ])
+}
diff --git a/ui/app/components/modals/index.js b/ui/app/components/modals/index.js
new file mode 100644
index 000000000..1db1d33d4
--- /dev/null
+++ b/ui/app/components/modals/index.js
@@ -0,0 +1,5 @@
+const Modal = require('./modal')
+
+module.exports = {
+  Modal,
+}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
new file mode 100644
index 000000000..97fe38292
--- /dev/null
+++ b/ui/app/components/modals/modal.js
@@ -0,0 +1,344 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const FadeModal = require('boron').FadeModal
+const actions = require('../../actions')
+const isMobileView = require('../../../lib/is-mobile-view')
+const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
+
+// Modal Components
+const BuyOptions = require('./buy-options-modal')
+const DepositEtherModal = require('./deposit-ether-modal')
+const AccountDetailsModal = require('./account-details-modal')
+const EditAccountNameModal = require('./edit-account-name-modal')
+const ExportPrivateKeyModal = require('./export-private-key-modal')
+const NewAccountModal = require('./new-account-modal')
+const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
+const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
+const CustomizeGasModal = require('../customize-gas-modal')
+const NotifcationModal = require('./notification-modal')
+const ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
+
+const accountModalStyle = {
+  mobileModalStyle: {
+    width: '95%',
+    // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+    top: '10%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
+  },
+  laptopModalStyle: {
+    width: '360px',
+    // top: 'calc(33% + 45px)',
+    boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    borderRadius: '4px',
+    top: '10%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
+  },
+  contentStyle: {
+    borderRadius: '4px',
+  },
+}
+
+const MODALS = {
+  BUY: {
+    contents: [
+      h(BuyOptions, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      top: '10%',
+    },
+    laptopModalStyle: {
+      width: '66%',
+      maxWidth: '550px',
+      top: 'calc(10% + 10px)',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      transform: 'none',
+    },
+  },
+
+  DEPOSIT_ETHER: {
+    contents: [
+      h(DepositEtherModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '100%',
+      height: '100%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      top: '0',
+      display: 'flex',
+    },
+    laptopModalStyle: {
+      width: '900px',
+      maxWidth: '900px',
+      top: 'calc(10% + 10px)',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+      boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
+      borderRadius: '8px',
+      transform: 'none',
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  EDIT_ACCOUNT_NAME: {
+    contents: [
+      h(EditAccountNameModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      top: '10%',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+    laptopModalStyle: {
+      width: '375px',
+      // top: 'calc(30% + 10px)',
+      top: '10%',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+  },
+
+  ACCOUNT_DETAILS: {
+    contents: [
+      h(AccountDetailsModal, {}, []),
+    ],
+    ...accountModalStyle,
+  },
+
+  EXPORT_PRIVATE_KEY: {
+    contents: [
+      h(ExportPrivateKeyModal, {}, []),
+    ],
+    ...accountModalStyle,
+  },
+
+  SHAPESHIFT_DEPOSIT_TX: {
+    contents: [
+      h(ShapeshiftDepositTxModal),
+    ],
+    ...accountModalStyle,
+  },
+
+  HIDE_TOKEN_CONFIRMATION: {
+    contents: [
+      h(HideTokenConfirmationModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  BETA_UI_NOTIFICATION_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'Welcome to the New UI (Beta)',
+        message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens,
+        and let us know if you have any issues.`,
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  OLD_UI_NOTIFICATION_MODAL: {
+    contents: [
+      h(NotifcationModal, {
+        header: 'Old UI',
+        message: `You have returned to the old UI. You can switch back to the New UI through the option in the top
+        right dropdown menu.`,
+      }),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  CONFIRM_RESET_ACCOUNT: {
+    contents: h(ConfirmResetAccount),
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '473px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
+  NEW_ACCOUNT: {
+    contents: [
+      h(NewAccountModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '95%',
+      // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: '10%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+    laptopModalStyle: {
+      width: '449px',
+      // top: 'calc(33% + 45px)',
+      top: '10%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+  },
+
+  CUSTOMIZE_GAS: {
+    contents: [
+      h(CustomizeGasModal, {}, []),
+    ],
+    mobileModalStyle: {
+      width: '100vw',
+      height: '100vh',
+      top: '0',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+    laptopModalStyle: {
+      width: '720px',
+      height: '377px',
+      top: '80px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
+    },
+  },
+
+  DEFAULT: {
+    contents: [],
+    mobileModalStyle: {},
+    laptopModalStyle: {},
+  },
+}
+
+const BACKDROPSTYLE = {
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+}
+
+function mapStateToProps (state) {
+  return {
+    active: state.appState.modal.open,
+    modalState: state.appState.modal.modalState,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+// Global Modal Component
+inherits(Modal, Component)
+function Modal () {
+  Component.call(this)
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
+
+Modal.prototype.render = function () {
+  const modal = MODALS[this.props.modalState.name || 'DEFAULT']
+
+  const children = modal.contents
+  const modalStyle = modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle']
+  const contentStyle = modal.contentStyle || {}
+
+  return h(FadeModal,
+    {
+      className: 'modal',
+      keyboard: false,
+      onHide: () => { this.onHide() },
+      ref: (ref) => {
+        this.modalRef = ref
+      },
+      modalStyle,
+      contentStyle,
+      backdropStyle: BACKDROPSTYLE,
+    },
+    children,
+  )
+}
+
+Modal.prototype.componentWillReceiveProps = function (nextProps) {
+  if (nextProps.active) {
+    this.show()
+  } else if (this.props.active) {
+    this.hide()
+  }
+}
+
+Modal.prototype.onHide = function () {
+  if (this.props.onHideCallback) {
+    this.props.onHideCallback()
+  }
+  this.props.hideModal()
+}
+
+Modal.prototype.hide = function () {
+  this.modalRef.hide()
+}
+
+Modal.prototype.show = function () {
+  this.modalRef.show()
+}
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
new file mode 100644
index 000000000..fc1fd413d
--- /dev/null
+++ b/ui/app/components/modals/new-account-modal.js
@@ -0,0 +1,106 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../actions')
+
+class NewAccountModal extends Component {
+  constructor (props) {
+    super(props)
+    const { numberOfExistingAccounts = 0 } = props
+    const newAccountNumber = numberOfExistingAccounts + 1
+
+    this.state = {
+      newAccountName: `Account ${newAccountNumber}`,
+    }
+  }
+
+  render () {
+    const { newAccountName } = this.state
+
+    return h('div', [
+      h('div.new-account-modal-wrapper', {
+      }, [
+        h('div.new-account-modal-header', {}, [
+          'New Account',
+        ]),
+
+        h('div.modal-close-x', {
+          onClick: this.props.hideModal,
+        }),
+
+        h('div.new-account-modal-content', {}, [
+          'Account Name',
+        ]),
+
+        h('div.new-account-input-wrapper', {}, [
+          h('input.new-account-input', {
+            value: this.state.newAccountName,
+            placeholder: 'E.g. My new account',
+            onChange: event => this.setState({ newAccountName: event.target.value }),
+          }, []),
+        ]),
+
+        h('div.new-account-modal-content.after-input', {}, [
+          'or',
+        ]),
+
+        h('div.new-account-modal-content.after-input.pointer', {
+          onClick: () => {
+            this.props.hideModal()
+            this.props.showImportPage()
+          },
+        }, 'Import an account'),
+
+        h('div.new-account-modal-content.button', {}, [
+          h('button.btn-clear', {
+            onClick: () => this.props.createAccount(newAccountName),
+          }, [
+            'SAVE',
+          ]),
+        ]),
+      ]),
+    ])
+  }
+}
+
+NewAccountModal.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  createAccount: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+}
+
+const mapStateToProps = state => {
+  const { metamask: { network, selectedAddress, identities = {} } } = state
+  const numberOfExistingAccounts = Object.keys(identities).length
+
+  return {
+    network,
+    address: selectedAddress,
+    numberOfExistingAccounts,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    toCoinbase: (address) => {
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
+    },
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+    createAccount: (newAccountName) => {
+      dispatch(actions.addNewAccount())
+        .then((newAccountAddress) => {
+          if (newAccountName) {
+            dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
+          }
+          dispatch(actions.hideModal())
+        })
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal)
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
new file mode 100644
index 000000000..621a974d0
--- /dev/null
+++ b/ui/app/components/modals/notification-modal.js
@@ -0,0 +1,75 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../actions')
+
+class NotificationModal extends Component {
+  render () {
+    const {
+      header,
+      message,
+      showCancelButton = false,
+      showConfirmButton = false,
+      hideModal,
+      onConfirm,
+    } = this.props
+
+    const showButtons = showCancelButton || showConfirmButton
+
+    return h('div', [
+      h('div.notification-modal__wrapper', {
+      }, [
+
+        h('div.notification-modal__header', {}, [
+          header,
+        ]),
+
+        h('div.notification-modal__message-wrapper', {}, [
+          h('div.notification-modal__message', {}, [
+            message,
+          ]),
+        ]),
+
+        h('div.modal-close-x', {
+          onClick: hideModal,
+        }),
+
+        showButtons && h('div.notification-modal__buttons', [
+
+          showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
+            onClick: hideModal,
+          }, 'Cancel'),
+
+          showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
+            onClick: () => {
+              onConfirm()
+              hideModal()
+            },
+          }, 'Confirm'),
+
+        ]),
+
+      ]),
+    ])
+  }
+}
+
+NotificationModal.propTypes = {
+  hideModal: PropTypes.func,
+  header: PropTypes.string,
+  message: PropTypes.node,
+  showCancelButton: PropTypes.bool,
+  showConfirmButton: PropTypes.bool,
+  onConfirm: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(NotificationModal)
diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js
new file mode 100644
index 000000000..e1bc91b24
--- /dev/null
+++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js
@@ -0,0 +1,46 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../../actions')
+const NotifcationModal = require('../notification-modal')
+
+class ConfirmResetAccount extends Component {
+  render () {
+    const { resetAccount } = this.props
+
+    return h(NotifcationModal, {
+      header: 'Are you sure you want to reset account?',
+      message: h('div', [
+
+        h('span', `Resetting is for developer use only. This button wipes the current account's transaction history,
+          which is used to calculate the current account nonce. `),
+
+        h('a.notification-modal__link', {
+          href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account',
+          target: '_blank',
+          onClick (event) { global.platform.openWindow({ url: event.target.href }) },
+        }, 'Read more.'),
+
+      ]),
+      showCancelButton: true,
+      showConfirmButton: true,
+      onConfirm: resetAccount,
+      
+    })
+  }
+}
+
+ConfirmResetAccount.propTypes = {
+  resetAccount: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    resetAccount: () => {
+      dispatch(actions.resetAccount())
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount)
diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
new file mode 100644
index 000000000..24af5a0de
--- /dev/null
+++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js
@@ -0,0 +1,40 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const QrView = require('../qr-code')
+const AccountModalContainer = require('./account-modal-container')
+
+function mapStateToProps (state) {
+  return {
+    Qr: state.appState.modal.modalState.Qr,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    hideModal: () => {
+      dispatch(actions.hideModal())
+    },
+  }
+}
+
+inherits(ShapeshiftDepositTxModal, Component)
+function ShapeshiftDepositTxModal () {
+  Component.call(this)
+
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftDepositTxModal)
+
+ShapeshiftDepositTxModal.prototype.render = function () {
+  const { Qr } = this.props
+
+  return h(AccountModalContainer, {
+  }, [
+    h('div', {}, [
+      h(QrView, {key: 'qr', Qr}),
+    ]),
+  ])
+}
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index d9045167f..3e91fa807 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -1,6 +1,8 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const classnames = require('classnames')
 const inherits = require('util').inherits
+const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
 
 module.exports = Network
 
@@ -22,19 +24,26 @@ Network.prototype.render = function () {
   let iconName, hoverText
 
   if (networkNumber === 'loading') {
-    return h('img.network-indicator', {
-      title: 'Attempting to connect to blockchain.',
-      onClick: (event) => this.props.onClick(event),
+    return h('span.pointer.network-indicator', {
       style: {
-        width: '27px',
-        marginRight: '-27px',
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
       },
-      src: 'images/loading.svg',
-    })
+      onClick: (event) => this.props.onClick(event),
+    }, [
+      h('img', {
+        title: 'Attempting to connect to blockchain.',
+        style: {
+          width: '27px',
+        },
+        src: 'images/loading.svg',
+      }),
+    ])
   } else if (providerName === 'mainnet') {
     hoverText = 'Main Ethereum Network'
     iconName = 'ethereum-network'
-  } else if (providerName === 'testnet') {
+  } else if (providerName === 'ropsten') {
     hoverText = 'Ropsten Test Network'
     iconName = 'ropsten-test-network'
   } else if (parseInt(networkNumber) === 3) {
@@ -43,44 +52,67 @@ Network.prototype.render = function () {
   } else if (providerName === 'kovan') {
     hoverText = 'Kovan Test Network'
     iconName = 'kovan-test-network'
+  } else if (providerName === 'rinkeby') {
+    hoverText = 'Rinkeby Test Network'
+    iconName = 'rinkeby-test-network'
   } else {
     hoverText = 'Unknown Private Network'
     iconName = 'unknown-private-network'
   }
 
   return (
-    h('#network_component.pointer', {
+    h('div.network-component.pointer', {
+      className: classnames({
+        'network-component--disabled': this.props.disabled,
+        'ethereum-network': providerName === 'mainnet',
+        'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
+        'kovan-test-network': providerName === 'kovan',
+        'rinkeby-test-network': providerName === 'rinkeby',
+      }),
       title: hoverText,
-      onClick: (event) => this.props.onClick(event),
+      onClick: (event) => {
+        if (!this.props.disabled) {
+          this.props.onClick(event)
+        }
+      },
     }, [
       (function () {
         switch (iconName) {
           case 'ethereum-network':
             return h('.network-indicator', [
-              h('.menu-icon.diamond'),
-              h('.network-name', {
-                style: {
-                  color: '#039396',
-                }},
-              'Ethereum Main Net'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#038789', // $blue-lagoon
+                nonSelectBackgroundColor: '#15afb2',
+              }),
+              h('.network-name', 'Main Network'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'ropsten-test-network':
             return h('.network-indicator', [
-              h('.menu-icon.red-dot'),
-              h('.network-name', {
-                style: {
-                  color: '#ff6666',
-                }},
-              'Ropsten Test Net'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#e91550', // $crimson
+                nonSelectBackgroundColor: '#ec2c50',
+              }),
+              h('.network-name', 'Ropsten Test Net'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           case 'kovan-test-network':
             return h('.network-indicator', [
-              h('.menu-icon.hollow-diamond'),
-              h('.network-name', {
-                style: {
-                  color: '#690496',
-                }},
-              'Kovan Test Net'),
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#690496', // $purple
+                nonSelectBackgroundColor: '#b039f3',
+              }),
+              h('.network-name', 'Kovan Test Net'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
+            ])
+          case 'rinkeby-test-network':
+            return h('.network-indicator', [
+              h(NetworkDropdownIcon, {
+                backgroundColor: '#ebb33f', // $tulip-tree
+                nonSelectBackgroundColor: '#ecb23e',
+              }),
+              h('.network-name', 'Rinkeby Test Net'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
           default:
             return h('.network-indicator', [
@@ -91,11 +123,8 @@ Network.prototype.render = function () {
                 },
               }),
 
-              h('.network-name', {
-                style: {
-                  color: '#AEAEAE',
-                }},
-              'Private Network'),
+              h('.network-name', 'Private Network'),
+              h('i.fa.fa-chevron-down.fa-lg.network-caret'),
             ])
         }
       })(),
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index b85787033..9d2e89cb0 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -19,7 +19,11 @@ Notice.prototype.render = function () {
   const disabled = state.disclaimerDisabled
 
   return (
-    h('.flex-column.flex-center.flex-grow', [
+    h('.flex-column.flex-center.flex-grow', {
+      style: {
+        width: '100%',
+      },
+    }, [
       h('h3.flex-center.text-transform-uppercase.terms-header', {
         style: {
           background: '#EBEBEB',
@@ -98,28 +102,30 @@ Notice.prototype.render = function () {
         }),
       ]),
 
-      h('button', {
+      h('button.primary', {
         disabled,
         onClick: () => {
-          this.setState({disclaimerDisabled: true})
-          onConfirm()
+          this.setState({disclaimerDisabled: true}, () => onConfirm())
         },
         style: {
           marginTop: '18px',
         },
-      }, 'Continue'),
+      }, 'Accept'),
     ])
   )
 }
 
 Notice.prototype.componentDidMount = function () {
+  // eslint-disable-next-line react/no-find-dom-node
   var node = findDOMNode(this)
   linker.setupListener(node)
-  if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) { this.setState({disclaimerDisabled: false}) }
-
+  if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) {
+    this.setState({disclaimerDisabled: false})
+  }
 }
 
 Notice.prototype.componentWillUnmount = function () {
+  // eslint-disable-next-line react/no-find-dom-node
   var node = findDOMNode(this)
   linker.teardownListener(node)
 }
diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js
index 16308d121..718a22de0 100644
--- a/ui/app/components/pending-msg-details.js
+++ b/ui/app/components/pending-msg-details.js
@@ -38,7 +38,7 @@ PendingMsgDetails.prototype.render = function () {
 
       // message data
       h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [
-        h('.flex-row.flex-space-between', [
+        h('.flex-column.flex-space-between', [
           h('label.font-small', 'MESSAGE'),
           h('span.font-small', msgParams.data),
         ]),
diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js
index b2cac164a..834719c53 100644
--- a/ui/app/components/pending-msg.js
+++ b/ui/app/components/pending-msg.js
@@ -18,6 +18,9 @@ PendingMsg.prototype.render = function () {
 
     h('div', {
       key: msgData.id,
+      style: {
+        maxWidth: '350px',
+      },
     }, [
 
       // header
@@ -32,10 +35,21 @@ PendingMsg.prototype.render = function () {
         style: {
           margin: '10px',
         },
-      }, `Signing this message can have
+      }, [
+        `Signing this message can have
         dangerous side effects. Only sign messages from
         sites you fully trust with your entire account.
-        This will be fixed in a future version.`),
+        This dangerous method will be removed in a future version. `,
+        h('a', {
+          href: 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527',
+          style: { color: 'rgb(247, 134, 28)' },
+          onClick: (event) => {
+            event.preventDefault()
+            const url = 'https://medium.com/metamask/the-new-secure-way-to-sign-data-in-your-browser-6af9dd2a1527'
+            global.platform.openWindow({ url })
+          },
+        }, 'Read more here.'),
+      ]),
 
       // message details
       h(PendingTxDetails, state),
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
deleted file mode 100644
index 1b83f5043..000000000
--- a/ui/app/components/pending-tx.js
+++ /dev/null
@@ -1,414 +0,0 @@
-const Component = require('react').Component
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const actions = require('../actions')
-
-const ethUtil = require('ethereumjs-util')
-const BN = ethUtil.BN
-const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
-
-const MiniAccountPanel = require('./mini-account-panel')
-const EthBalance = require('./eth-balance')
-const util = require('../util')
-const addressSummary = util.addressSummary
-const nameForAddress = require('../../lib/contract-namer')
-const HexInput = require('./hex-as-decimal-input')
-
-const MIN_GAS_PRICE_BN = new BN(20000000)
-const MIN_GAS_LIMIT_BN = new BN(21000)
-
-module.exports = connect(mapStateToProps)(PendingTx)
-
-function mapStateToProps (state) {
-  return {}
-}
-
-inherits(PendingTx, Component)
-function PendingTx () {
-  Component.call(this)
-  this.state = {
-    valid: true,
-    txData: null,
-  }
-}
-
-PendingTx.prototype.render = function () {
-  const props = this.props
-
-  const txMeta = this.gatherTxMeta()
-  const txParams = txMeta.txParams || {}
-
-  const address = txParams.from || props.selectedAddress
-  const identity = props.identities[address] || { address: address }
-  const account = props.accounts[address]
-  const balance = account ? account.balance : '0x0'
-
-  const gas = txParams.gas
-  const gasPrice = txParams.gasPrice
-
-  const gasBn = hexToBn(gas)
-  const gasPriceBn = hexToBn(gasPrice)
-
-  const txFeeBn = gasBn.mul(gasPriceBn)
-  const valueBn = hexToBn(txParams.value)
-  const maxCost = txFeeBn.add(valueBn)
-
-  const dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
-  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
-
-  const balanceBn = hexToBn(balance)
-  const insufficientBalance = balanceBn.lt(maxCost)
-
-  this.inputs = []
-
-  return (
-
-    h('div', {
-      key: txMeta.id,
-    }, [
-
-      h('form#pending-tx-form', {
-        onSubmit: (event) => {
-          event.preventDefault()
-          const form = document.querySelector('form#pending-tx-form')
-          const valid = form.checkValidity()
-          this.setState({ valid })
-          if (valid && this.verifyGasParams()) {
-            props.sendTransaction(txMeta, event)
-          } else {
-            this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
-          }
-        },
-      }, [
-
-        // tx info
-        h('div', [
-
-          h('.flex-row.flex-center', {
-            style: {
-              maxWidth: '100%',
-            },
-          }, [
-
-            h(MiniAccountPanel, {
-              imageSeed: address,
-              imageifyIdenticons: imageify,
-              picOrder: 'right',
-            }, [
-              h('span.font-small', {
-                style: {
-                  fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
-                },
-              }, identity.name),
-              h('span.font-small', {
-                style: {
-                  fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-                },
-              }, addressSummary(address, 6, 4, false)),
-
-              h('span.font-small', {
-                style: {
-                  fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-                },
-              }, [
-                h(EthBalance, {
-                  value: balance,
-                  inline: true,
-                  labelColor: '#F7861C',
-                }),
-              ]),
-            ]),
-
-            forwardCarrat(),
-
-            this.miniAccountPanelForRecipient(),
-          ]),
-
-          h('style', `
-            .table-box {
-              margin: 7px 0px 0px 0px;
-              width: 100%;
-            }
-            .table-box .row {
-              margin: 0px;
-              background: rgb(236,236,236);
-              display: flex;
-              justify-content: space-between;
-              font-family: Montserrat Light, sans-serif;
-              font-size: 13px;
-              padding: 5px 25px;
-            }
-            .table-box .row .value {
-              font-family: Montserrat Regular;
-            }
-          `),
-
-          h('.table-box', [
-
-            // Ether Value
-            // Currently not customizable, but easily modified
-            // in the way that gas and gasLimit currently are.
-            h('.row', [
-              h('.cell.label', 'Amount'),
-              h(EthBalance, { value: txParams.value }),
-            ]),
-
-            // Gas Limit (customizable)
-            h('.cell.row', [
-              h('.cell.label', 'Gas Limit'),
-              h('.cell.value', {
-              }, [
-                h(HexInput, {
-                  name: 'Gas Limit',
-                  value: gas,
-                  // The hard lower limit for gas.
-                  min: MIN_GAS_LIMIT_BN.toString(10),
-                  suffix: 'UNITS',
-                  style: {
-                    position: 'relative',
-                    top: '5px',
-                  },
-                  onChange: (newHex) => {
-                    log.info(`Gas limit changed to ${newHex}`)
-                    const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gas = newHex
-                    this.setState({ txData: txMeta })
-                  },
-                  ref: (hexInput) => { this.inputs.push(hexInput) },
-                }),
-              ]),
-            ]),
-
-            // Gas Price (customizable)
-            h('.cell.row', [
-              h('.cell.label', 'Gas Price'),
-              h('.cell.value', {
-              }, [
-                h(HexInput, {
-                  name: 'Gas Price',
-                  value: gasPrice,
-                  suffix: 'WEI',
-                  min: MIN_GAS_PRICE_BN.toString(10),
-                  style: {
-                    position: 'relative',
-                    top: '5px',
-                  },
-                  onChange: (newHex) => {
-                    log.info(`Gas price changed to: ${newHex}`)
-                    const txMeta = this.gatherTxMeta()
-                    txMeta.txParams.gasPrice = newHex
-                    this.setState({ txData: txMeta })
-                  },
-                  ref: (hexInput) => { this.inputs.push(hexInput) },
-                }),
-              ]),
-            ]),
-
-            // Max Transaction Fee (calculated)
-            h('.cell.row', [
-              h('.cell.label', 'Max Transaction Fee'),
-              h(EthBalance, { value: txFeeBn.toString(16) }),
-            ]),
-
-            h('.cell.row', {
-              style: {
-                fontFamily: 'Montserrat Regular',
-                background: 'white',
-                padding: '10px 25px',
-              },
-            }, [
-              h('.cell.label', 'Max Total'),
-              h('.cell.value', {
-                style: {
-                  display: 'flex',
-                  alignItems: 'center',
-                },
-              }, [
-                h(EthBalance, {
-                  value: maxCost.toString(16),
-                  inline: true,
-                  labelColor: 'black',
-                  fontSize: '16px',
-                }),
-              ]),
-            ]),
-
-            // Data size row:
-            h('.cell.row', {
-              style: {
-                background: '#f7f7f7',
-                paddingBottom: '0px',
-              },
-            }, [
-              h('.cell.label'),
-              h('.cell.value', {
-                style: {
-                  fontFamily: 'Montserrat Light',
-                  fontSize: '11px',
-                },
-              }, `Data included: ${dataLength} bytes`),
-            ]),
-          ]), // End of Table
-
-        ]),
-
-        h('style', `
-          .conf-buttons button {
-            margin-left: 10px;
-            text-transform: uppercase;
-          }
-        `),
-
-        txMeta.simulationFails ?
-          h('.error', {
-            style: {
-              marginLeft: 50,
-              fontSize: '0.9em',
-            },
-          }, 'Transaction Error. Exception thrown in contract code.')
-        : null,
-
-        insufficientBalance ?
-          h('span.error', {
-            style: {
-              marginLeft: 50,
-              fontSize: '0.9em',
-            },
-          }, 'Insufficient balance for transaction')
-        : null,
-
-        // send + cancel
-        h('.flex-row.flex-space-around.conf-buttons', {
-          style: {
-            display: 'flex',
-            justifyContent: 'flex-end',
-            margin: '14px 25px',
-          },
-        }, [
-
-
-          insufficientBalance ?
-            h('button', {
-              onClick: props.buyEth,
-            }, 'Buy Ether')
-          : null,
-
-          h('button', {
-            onClick: (event) => {
-              this.resetGasFields()
-              event.preventDefault()
-            },
-          }, 'Reset'),
-
-          // Accept Button
-          h('input.confirm.btn-green', {
-            type: 'submit',
-            value: 'ACCEPT',
-            style: { marginLeft: '10px' },
-            disabled: insufficientBalance || !this.state.valid,
-          }),
-
-          h('button.cancel.btn-red', {
-            onClick: props.cancelTransaction,
-          }, 'Reject'),
-        ]),
-      ]),
-    ])
-  )
-}
-
-PendingTx.prototype.miniAccountPanelForRecipient = function () {
-  const props = this.props
-  const txData = props.txData
-  const txParams = txData.txParams || {}
-  const isContractDeploy = !('to' in txParams)
-  const imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
-
-  // If it's not a contract deploy, send to the account
-  if (!isContractDeploy) {
-    return h(MiniAccountPanel, {
-      imageSeed: txParams.to,
-      imageifyIdenticons: imageify,
-      picOrder: 'left',
-    }, [
-      h('span.font-small', {
-        style: {
-          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
-        },
-      }, nameForAddress(txParams.to, props.identities)),
-      h('span.font-small', {
-        style: {
-          fontFamily: 'Montserrat Light, Montserrat, sans-serif',
-        },
-      }, addressSummary(txParams.to, 6, 4, false)),
-    ])
-  } else {
-    return h(MiniAccountPanel, {
-      imageifyIdenticons: imageify,
-      picOrder: 'left',
-    }, [
-
-      h('span.font-small', {
-        style: {
-          fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
-        },
-      }, 'New Contract'),
-
-    ])
-  }
-}
-
-PendingTx.prototype.resetGasFields = function () {
-  log.debug(`pending-tx resetGasFields`)
-
-  this.inputs.forEach((hexInput) => {
-    if (hexInput) {
-      hexInput.setValid()
-    }
-  })
-
-  this.setState({
-    txData: null,
-    valid: true,
-  })
-}
-
-// After a customizable state value has been updated,
-PendingTx.prototype.gatherTxMeta = function () {
-  log.debug(`pending-tx gatherTxMeta`)
-  const props = this.props
-  const state = this.state
-  const txData = state.txData || props.txData
-
-  log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
-  return txData
-}
-
-PendingTx.prototype.verifyGasParams = function () {
-  // We call this in case the gas has not been modified at all
-  if (!this.state) { return true }
-  return (
-    this._notZeroOrEmptyString(this.state.gas) &&
-    this._notZeroOrEmptyString(this.state.gasPrice)
-  )
-}
-
-PendingTx.prototype._notZeroOrEmptyString = function (obj) {
-  return obj !== '' && obj !== '0x0'
-}
-
-function forwardCarrat () {
-  return (
-
-    h('img', {
-      src: 'images/forward-carrat.svg',
-      style: {
-        padding: '5px 6px 0px 10px',
-        height: '37px',
-      },
-    })
-
-  )
-}
-
diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js
new file mode 100644
index 000000000..ae6c6ef7b
--- /dev/null
+++ b/ui/app/components/pending-tx/confirm-deploy-contract.js
@@ -0,0 +1,348 @@
+const Component = require('react').Component
+const { connect } = require('react-redux')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const actions = require('../../actions')
+const clone = require('clone')
+const Identicon = require('../identicon')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
+const { conversionUtil } = require('../../conversion-util')
+
+const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
+
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract)
+
+function mapStateToProps (state) {
+  const {
+    conversionRate,
+    identities,
+    currentCurrency,
+  } = state.metamask
+  const accounts = state.metamask.accounts
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  return {
+    currentCurrency,
+    conversionRate,
+    identities,
+    selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+  }
+}
+
+
+inherits(ConfirmDeployContract, Component)
+function ConfirmDeployContract () {
+  Component.call(this)
+  this.state = {}
+  this.onSubmit = this.onSubmit.bind(this)
+}
+
+ConfirmDeployContract.prototype.onSubmit = function (event) {
+  event.preventDefault()
+  const txMeta = this.gatherTxMeta()
+  const valid = this.checkValidity()
+  this.setState({ valid, submitting: true })
+
+  if (valid && this.verifyGasParams()) {
+    this.props.sendTransaction(txMeta, event)
+  } else {
+    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+    this.setState({ submitting: false })
+  }
+}
+
+ConfirmDeployContract.prototype.cancel = function (event, txMeta) {
+  event.preventDefault()
+  this.props.cancelTransaction(txMeta)
+}
+
+ConfirmDeployContract.prototype.checkValidity = function () {
+  const form = this.getFormEl()
+  const valid = form.checkValidity()
+  return valid
+}
+
+ConfirmDeployContract.prototype.getFormEl = function () {
+  const form = document.querySelector('form#pending-tx-form')
+  // Stub out form for unit tests:
+  if (!form) {
+    return { checkValidity () { return true } }
+  }
+  return form
+}
+
+// After a customizable state value has been updated,
+ConfirmDeployContract.prototype.gatherTxMeta = function () {
+  const props = this.props
+  const state = this.state
+  const txData = clone(state.txData) || clone(props.txData)
+
+  // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
+  return txData
+}
+
+ConfirmDeployContract.prototype.verifyGasParams = function () {
+  // We call this in case the gas has not been modified at all
+  if (!this.state) { return true }
+  return (
+    this._notZeroOrEmptyString(this.state.gas) &&
+    this._notZeroOrEmptyString(this.state.gasPrice)
+  )
+}
+
+ConfirmDeployContract.prototype._notZeroOrEmptyString = function (obj) {
+  return obj !== '' && obj !== '0x0'
+}
+
+ConfirmDeployContract.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
+  const numBN = new BN(numerator)
+  const denomBN = new BN(denominator)
+  return targetBN.mul(numBN).div(denomBN)
+}
+
+ConfirmDeployContract.prototype.getData = function () {
+  const { identities } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  return {
+    from: {
+      address: txParams.from,
+      name: identities[txParams.from].name,
+    },
+    memo: txParams.memo || '',
+  }
+}
+
+ConfirmDeployContract.prototype.getAmount = function () {
+  const { conversionRate, currentCurrency } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  const FIAT = conversionUtil(txParams.value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: currentCurrency,
+    numberOfDecimals: 2,
+    fromDenomination: 'WEI',
+    conversionRate,
+  })
+  const ETH = conversionUtil(txParams.value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    fromDenomination: 'WEI',
+    conversionRate,
+    numberOfDecimals: 6,
+  })
+
+  return {
+    fiat: Number(FIAT),
+    token: Number(ETH),
+  }
+
+}
+
+ConfirmDeployContract.prototype.getGasFee = function () {
+  const { conversionRate, currentCurrency } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  // Gas
+  const gas = txParams.gas
+  const gasBn = hexToBn(gas)
+
+  // Gas Price
+  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX
+  const gasPriceBn = hexToBn(gasPrice)
+
+  const txFeeBn = gasBn.mul(gasPriceBn)
+
+  const FIAT = conversionUtil(txFeeBn, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: currentCurrency,
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  const ETH = conversionUtil(txFeeBn, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
+
+  return {
+    fiat: Number(FIAT),
+    eth: Number(ETH),
+  }
+}
+
+ConfirmDeployContract.prototype.renderGasFee = function () {
+  const { currentCurrency } = this.props
+  const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
+
+  return (
+    h('section.flex-row.flex-center.confirm-screen-row', [
+      h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
+      h('div.confirm-screen-section-column', [
+        h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`),
+
+        h(
+          'div.confirm-screen-row-detail',
+          `${ethGas} ETH`
+        ),
+      ]),
+    ])
+  )
+}
+
+ConfirmDeployContract.prototype.renderHeroAmount = function () {
+  const { currentCurrency } = this.props
+  const { fiat: fiatAmount } = this.getAmount()
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+  const { memo = '' } = txParams
+
+  return (
+    h('div.confirm-send-token__hero-amount-wrapper', [
+      h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`),
+      h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency.toUpperCase()),
+      h('div.flex-center.confirm-memo-wrapper', [
+        h('h3.confirm-screen-send-memo', memo),
+      ]),
+    ])
+  )
+}
+
+ConfirmDeployContract.prototype.renderTotalPlusGas = function () {
+  const { currentCurrency } = this.props
+  const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
+  const { fiat: fiatGas, eth: ethGas } = this.getGasFee()
+
+  return (
+    h('section.flex-row.flex-center.confirm-screen-total-box ', [
+      h('div.confirm-screen-section-column', [
+        h('span.confirm-screen-label', [ 'Total ' ]),
+        h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+      ]),
+
+      h('div.confirm-screen-section-column', [
+        h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency.toUpperCase()}`),
+        h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`),
+      ]),
+    ])
+  )
+}
+
+ConfirmDeployContract.prototype.render = function () {
+  const { backToAccountDetail, selectedAddress } = this.props
+  const txMeta = this.gatherTxMeta()
+
+  const {
+    from: {
+      address: fromAddress,
+      name: fromName,
+    },
+  } = this.getData()
+
+  this.inputs = []
+
+  return (
+    h('div.flex-column.flex-grow.confirm-screen-container', {
+      style: { minWidth: '355px' },
+    }, [
+      // Main Send token Card
+      h('div.confirm-screen-wrapper.flex-column.flex-grow', [
+        h('h3.flex-center.confirm-screen-header', [
+          h('button.confirm-screen-back-button', {
+            onClick: () => backToAccountDetail(selectedAddress),
+          }, 'BACK'),
+          h('div.confirm-screen-title', 'Confirm Contract'),
+          h('div.confirm-screen-header-tip'),
+        ]),
+        h('div.flex-row.flex-center.confirm-screen-identicons', [
+          h('div.confirm-screen-account-wrapper', [
+            h(
+              Identicon,
+              {
+                address: fromAddress,
+                diameter: 60,
+              },
+            ),
+            h('span.confirm-screen-account-name', fromName),
+            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+          ]),
+          h('i.fa.fa-arrow-right.fa-lg'),
+          h('div.confirm-screen-account-wrapper', [
+            h('i.fa.fa-file-text-o'),
+            h('span.confirm-screen-account-name', 'New Contract'),
+            h('span.confirm-screen-account-number', ' '),
+          ]),
+        ]),
+
+        // h('h3.flex-center.confirm-screen-sending-to-message', {
+        //   style: {
+        //     textAlign: 'center',
+        //     fontSize: '16px',
+        //   },
+        // }, [
+        //   `You're deploying a new contract.`,
+        // ]),
+
+        this.renderHeroAmount(),
+
+        h('div.confirm-screen-rows', [
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', fromName),
+              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+            ]),
+          ]),
+
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', 'New Contract'),
+            ]),
+          ]),
+
+          this.renderGasFee(),
+
+          this.renderTotalPlusGas(),
+
+        ]),
+      ]),
+
+      h('form#pending-tx-form', {
+        onSubmit: this.onSubmit,
+      }, [
+        // Cancel Button
+        h('div.cancel.btn-light.confirm-screen-cancel-button', {
+          onClick: (event) => this.cancel(event, txMeta),
+        }, 'CANCEL'),
+
+        // Accept Button
+        h('button.confirm-screen-confirm-button', ['CONFIRM']),
+
+      ]),
+    ])
+  )
+}
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
new file mode 100644
index 000000000..3f8d9c28f
--- /dev/null
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -0,0 +1,469 @@
+const Component = require('react').Component
+const { connect } = require('react-redux')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const actions = require('../../actions')
+const clone = require('clone')
+const Identicon = require('../identicon')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
+const { conversionUtil, addCurrencies } = require('../../conversion-util')
+
+const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther)
+
+function mapStateToProps (state) {
+  const {
+    conversionRate,
+    identities,
+    currentCurrency,
+    send,
+  } = state.metamask
+  const accounts = state.metamask.accounts
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  return {
+    conversionRate,
+    identities,
+    selectedAddress,
+    currentCurrency,
+    send,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    clearSend: () => dispatch(actions.clearSend()),
+    editTransaction: txMeta => {
+      const { id, txParams } = txMeta
+      const {
+        gas: gasLimit,
+        gasPrice,
+        to,
+        value: amount,
+      } = txParams
+      dispatch(actions.updateSend({
+        gasLimit,
+        gasPrice,
+        gasTotal: null,
+        to,
+        amount,
+        errors: { to: null, amount: null },
+        editingTransactionId: id,
+      }))
+      dispatch(actions.showSendPage())
+    },
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+  }
+}
+
+inherits(ConfirmSendEther, Component)
+function ConfirmSendEther () {
+  Component.call(this)
+  this.state = {}
+  this.onSubmit = this.onSubmit.bind(this)
+}
+
+ConfirmSendEther.prototype.getAmount = function () {
+  const { conversionRate, currentCurrency } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  const FIAT = conversionUtil(txParams.value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: currentCurrency,
+    numberOfDecimals: 2,
+    fromDenomination: 'WEI',
+    conversionRate,
+  })
+  const ETH = conversionUtil(txParams.value, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    fromDenomination: 'WEI',
+    conversionRate,
+    numberOfDecimals: 6,
+  })
+
+  return {
+    FIAT,
+    ETH,
+  }
+
+}
+
+ConfirmSendEther.prototype.getGasFee = function () {
+  const { conversionRate, currentCurrency } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  // Gas
+  const gas = txParams.gas
+  const gasBn = hexToBn(gas)
+
+  // From latest master
+//   const gasLimit = new BN(parseInt(blockGasLimit))
+//   const safeGasLimitBN = this.bnMultiplyByFraction(gasLimit, 19, 20)
+//   const saferGasLimitBN = this.bnMultiplyByFraction(gasLimit, 18, 20)
+//   const safeGasLimit = safeGasLimitBN.toString(10)
+
+  // Gas Price
+  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX
+  const gasPriceBn = hexToBn(gasPrice)
+
+  const txFeeBn = gasBn.mul(gasPriceBn)
+
+  const FIAT = conversionUtil(txFeeBn, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: currentCurrency,
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  const ETH = conversionUtil(txFeeBn, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
+
+  return {
+    FIAT,
+    ETH,
+  }
+}
+
+ConfirmSendEther.prototype.getData = function () {
+  const { identities } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+  const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH } = this.getGasFee()
+  const { FIAT: amountInFIAT, ETH: amountInETH } = this.getAmount()
+
+  const totalInFIAT = addCurrencies(gasFeeInFIAT, amountInFIAT, {
+    toNumericBase: 'dec',
+    numberOfDecimals: 2,
+  })
+  const totalInETH = addCurrencies(gasFeeInETH, amountInETH, {
+    toNumericBase: 'dec',
+    numberOfDecimals: 6,
+  })
+
+  return {
+    from: {
+      address: txParams.from,
+      name: identities[txParams.from].name,
+    },
+    to: {
+      address: txParams.to,
+      name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient',
+    },
+    memo: txParams.memo || '',
+    gasFeeInFIAT,
+    gasFeeInETH,
+    amountInFIAT,
+    amountInETH,
+    totalInFIAT,
+    totalInETH,
+  }
+}
+
+ConfirmSendEther.prototype.render = function () {
+  const { editTransaction, currentCurrency, clearSend } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  const {
+    from: {
+      address: fromAddress,
+      name: fromName,
+    },
+    to: {
+      address: toAddress,
+      name: toName,
+    },
+    memo,
+    gasFeeInFIAT,
+    gasFeeInETH,
+    amountInFIAT,
+    totalInFIAT,
+    totalInETH,
+  } = this.getData()
+
+  // This is from the latest master
+  // It handles some of the errors that we are not currently handling
+  // Leaving as comments fo reference
+
+  // const balanceBn = hexToBn(balance)
+  // const insufficientBalance = balanceBn.lt(maxCost)
+  // const buyDisabled = insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting
+  // const showRejectAll = props.unconfTxListLength > 1
+//   const dangerousGasLimit = gasBn.gte(saferGasLimitBN)
+//   const gasLimitSpecified = txMeta.gasLimitSpecified
+
+  this.inputs = []
+
+  return (
+    h('div.confirm-screen-container.confirm-send-ether', [
+      // Main Send token Card
+      h('div.page-container', [
+        h('div.page-container__header', [
+          h('button.confirm-screen-back-button', {
+            onClick: () => editTransaction(txMeta),
+          }, 'Edit'),
+          h('div.page-container__title', 'Confirm'),
+          h('div.page-container__subtitle', `Please review your transaction.`),
+        ]),
+        h('div.flex-row.flex-center.confirm-screen-identicons', [
+          h('div.confirm-screen-account-wrapper', [
+            h(
+              Identicon,
+              {
+                address: fromAddress,
+                diameter: 60,
+              },
+            ),
+            h('span.confirm-screen-account-name', fromName),
+            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+          ]),
+          h('i.fa.fa-arrow-right.fa-lg'),
+          h('div.confirm-screen-account-wrapper', [
+            h(
+              Identicon,
+              {
+                address: txParams.to,
+                diameter: 60,
+              },
+            ),
+            h('span.confirm-screen-account-name', toName),
+            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+          ]),
+        ]),
+
+        // h('h3.flex-center.confirm-screen-sending-to-message', {
+        //   style: {
+        //     textAlign: 'center',
+        //     fontSize: '16px',
+        //   },
+        // }, [
+        //   `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+        // ]),
+
+        h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]),
+        h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]),
+        h('div.flex-center.confirm-memo-wrapper', [
+          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
+        ]),
+
+        h('div.confirm-screen-rows', [
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', fromName),
+              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+            ]),
+          ]),
+
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', toName),
+              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+            ]),
+          ]),
+
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`),
+
+              h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`),
+            ]),
+          ]),
+
+
+          h('section.flex-row.flex-center.confirm-screen-total-box ', [
+            h('div.confirm-screen-section-column', [
+              h('span.confirm-screen-label', [ 'Total ' ]),
+              h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+            ]),
+
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`),
+              h('div.confirm-screen-row-detail', `${totalInETH} ETH`),
+            ]),
+          ]),
+        ]),
+
+// These are latest errors handling from master
+// Leaving as comments as reference when we start implementing error handling
+//         h('style', `
+//           .conf-buttons button {
+//             margin-left: 10px;
+//             text-transform: uppercase;
+//           }
+//         `),
+
+//         txMeta.simulationFails ?
+//           h('.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Transaction Error. Exception thrown in contract code.')
+//         : null,
+
+//         !isValidAddress ?
+//           h('.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.')
+//         : null,
+
+//         insufficientBalance ?
+//           h('span.error', {
+//             style: {
+//               marginLeft: 50,
+//               fontSize: '0.9em',
+//             },
+//           }, 'Insufficient balance for transaction')
+//         : null,
+
+//         // send + cancel
+//         h('.flex-row.flex-space-around.conf-buttons', {
+//           style: {
+//             display: 'flex',
+//             justifyContent: 'flex-end',
+//             margin: '14px 25px',
+//           },
+//         }, [
+//           h('button', {
+//             onClick: (event) => {
+//               this.resetGasFields()
+//               event.preventDefault()
+//             },
+//           }, 'Reset'),
+
+//           // Accept Button or Buy Button
+//           insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') :
+//             h('input.confirm.btn-green', {
+//               type: 'submit',
+//               value: 'SUBMIT',
+//               style: { marginLeft: '10px' },
+//               disabled: buyDisabled,
+//             }),
+
+//           h('button.cancel.btn-red', {
+//             onClick: props.cancelTransaction,
+//           }, 'Reject'),
+//         ]),
+//         showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', {
+//           style: {
+//             display: 'flex',
+//             justifyContent: 'flex-end',
+//             margin: '14px 25px',
+//           },
+//         }, [
+//           h('button.cancel.btn-red', {
+//             onClick: props.cancelAllTransactions,
+//           }, 'Reject All'),
+//         ]) : null,
+//       ]),
+//     ])
+//   )
+// }
+      ]),
+
+      h('form#pending-tx-form', {
+        onSubmit: this.onSubmit,
+      }, [
+        // Cancel Button
+        h('div.cancel.btn-light.confirm-screen-cancel-button', {
+          onClick: (event) => {
+            clearSend()
+            this.cancel(event, txMeta)
+          },
+        }, 'CANCEL'),
+
+        // Accept Button
+        h('button.confirm-screen-confirm-button', ['CONFIRM']),
+      ]),
+    ])
+  )
+}
+
+ConfirmSendEther.prototype.onSubmit = function (event) {
+  event.preventDefault()
+  const txMeta = this.gatherTxMeta()
+  const valid = this.checkValidity()
+  this.setState({ valid, submitting: true })
+
+  if (valid && this.verifyGasParams()) {
+    this.props.sendTransaction(txMeta, event)
+  } else {
+    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+    this.setState({ submitting: false })
+  }
+}
+
+ConfirmSendEther.prototype.cancel = function (event, txMeta) {
+  event.preventDefault()
+  const { cancelTransaction } = this.props
+
+  cancelTransaction(txMeta)
+}
+
+ConfirmSendEther.prototype.checkValidity = function () {
+  const form = this.getFormEl()
+  const valid = form.checkValidity()
+  return valid
+}
+
+ConfirmSendEther.prototype.getFormEl = function () {
+  const form = document.querySelector('form#pending-tx-form')
+  // Stub out form for unit tests:
+  if (!form) {
+    return { checkValidity () { return true } }
+  }
+  return form
+}
+
+// After a customizable state value has been updated,
+ConfirmSendEther.prototype.gatherTxMeta = function () {
+  const props = this.props
+  const state = this.state
+  const txData = clone(state.txData) || clone(props.txData)
+
+  // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
+  return txData
+}
+
+ConfirmSendEther.prototype.verifyGasParams = function () {
+  // We call this in case the gas has not been modified at all
+  if (!this.state) { return true }
+  return (
+    this._notZeroOrEmptyString(this.state.gas) &&
+    this._notZeroOrEmptyString(this.state.gasPrice)
+  )
+}
+
+ConfirmSendEther.prototype._notZeroOrEmptyString = function (obj) {
+  return obj !== '' && obj !== '0x0'
+}
+
+ConfirmSendEther.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
+  const numBN = new BN(numerator)
+  const denomBN = new BN(denominator)
+  return targetBN.mul(numBN).div(denomBN)
+}
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
new file mode 100644
index 000000000..e4b0c186a
--- /dev/null
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -0,0 +1,462 @@
+const Component = require('react').Component
+const { connect } = require('react-redux')
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const tokenAbi = require('human-standard-token-abi')
+const abiDecoder = require('abi-decoder')
+abiDecoder.addABI(tokenAbi)
+const actions = require('../../actions')
+const clone = require('clone')
+const Identicon = require('../identicon')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const {
+  conversionUtil,
+  multiplyCurrencies,
+  addCurrencies,
+} = require('../../conversion-util')
+const {
+  calcTokenAmount,
+} = require('../../token-util')
+
+const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
+
+const {
+  getTokenExchangeRate,
+  getSelectedAddress,
+  getSelectedTokenContract,
+} = require('../../selectors')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken)
+
+function mapStateToProps (state, ownProps) {
+  const { token: { symbol }, txData } = ownProps
+  const { txParams } = txData || {}
+  const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+
+  const {
+    conversionRate,
+    identities,
+    currentCurrency,
+  } = state.metamask
+  const selectedAddress = getSelectedAddress(state)
+  const tokenExchangeRate = getTokenExchangeRate(state, symbol)
+
+  return {
+    conversionRate,
+    identities,
+    selectedAddress,
+    tokenExchangeRate,
+    tokenData: tokenData || {},
+    currentCurrency: currentCurrency.toUpperCase(),
+    send: state.metamask.send,
+    tokenContract: getSelectedTokenContract(state),
+  }
+}
+
+function mapDispatchToProps (dispatch, ownProps) {
+  const { token: { symbol } } = ownProps
+
+  return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+    updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)),
+    editTransaction: txMeta => {
+      const { token: { address } } = ownProps
+      const { txParams, id } = txMeta
+      const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+      const { params = [] } = tokenData
+      const { value: to } = params[0] || {}
+      const { value: tokenAmountInDec } = params[1] || {}
+      const tokenAmountInHex = conversionUtil(tokenAmountInDec, {
+        fromNumericBase: 'dec',
+        toNumericBase: 'hex',
+      })
+      const {
+        gas: gasLimit,
+        gasPrice,
+      } = txParams
+      dispatch(actions.setSelectedToken(address))
+      dispatch(actions.updateSend({
+        gasLimit,
+        gasPrice,
+        gasTotal: null,
+        to,
+        amount: tokenAmountInHex,
+        errors: { to: null, amount: null },
+        editingTransactionId: id,
+      }))
+      dispatch(actions.showSendTokenPage())
+    },
+  }
+}
+
+inherits(ConfirmSendToken, Component)
+function ConfirmSendToken () {
+  Component.call(this)
+  this.state = {}
+  this.onSubmit = this.onSubmit.bind(this)
+}
+
+ConfirmSendToken.prototype.componentWillMount = function () {
+  const { tokenContract, selectedAddress } = this.props
+  tokenContract && tokenContract
+    .balanceOf(selectedAddress)
+    .then(usersToken => {
+    })
+  this.props.updateTokenExchangeRate()
+}
+
+ConfirmSendToken.prototype.getAmount = function () {
+  const {
+    conversionRate,
+    tokenExchangeRate,
+    token,
+    tokenData,
+    send: { amount, editingTransactionId },
+  } = this.props
+  const { params = [] } = tokenData
+  let { value } = params[1] || {}
+  const { decimals } = token
+
+  if (editingTransactionId) {
+    value = conversionUtil(amount, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+    })
+  }
+
+  const sendTokenAmount = calcTokenAmount(value, decimals)
+
+  return {
+    fiat: tokenExchangeRate
+      ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2)
+      : null,
+    token: typeof value === 'undefined'
+      ? 'Unknown'
+      : +sendTokenAmount.toFixed(decimals),
+  }
+
+}
+
+ConfirmSendToken.prototype.getGasFee = function () {
+  const { conversionRate, tokenExchangeRate, token, currentCurrency } = this.props
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+  const { decimals } = token
+
+  const gas = txParams.gas
+  const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX
+  const gasTotal = multiplyCurrencies(gas, gasPrice, {
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+
+  const FIAT = conversionUtil(gasTotal, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: currentCurrency,
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  const ETH = conversionUtil(gasTotal, {
+    fromNumericBase: 'BN',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
+  const tokenGas = multiplyCurrencies(gas, gasPrice, {
+    toNumericBase: 'dec',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+    toCurrency: 'BAT',
+    conversionRate: tokenExchangeRate,
+    invertConversionRate: true,
+    fromDenomination: 'WEI',
+    numberOfDecimals: decimals || 4,
+  })
+
+  return {
+    fiat: +Number(FIAT).toFixed(2),
+    eth: ETH,
+    token: tokenExchangeRate
+      ? tokenGas
+      : null,
+  }
+}
+
+ConfirmSendToken.prototype.getData = function () {
+  const { identities, tokenData } = this.props
+  const { params = [] } = tokenData
+  const { value } = params[0] || {}
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  return {
+    from: {
+      address: txParams.from,
+      name: identities[txParams.from].name,
+    },
+    to: {
+      address: value,
+      name: identities[value] ? identities[value].name : 'New Recipient',
+    },
+    memo: txParams.memo || '',
+  }
+}
+
+ConfirmSendToken.prototype.renderHeroAmount = function () {
+  const { token: { symbol }, currentCurrency } = this.props
+  const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+  const { memo = '' } = txParams
+
+  return fiatAmount
+    ? (
+      h('div.confirm-send-token__hero-amount-wrapper', [
+        h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`),
+        h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency),
+        h('div.flex-center.confirm-memo-wrapper', [
+          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
+        ]),
+      ])
+    )
+    : (
+      h('div.confirm-send-token__hero-amount-wrapper', [
+        h('h3.flex-center.confirm-screen-send-amount', tokenAmount),
+        h('h3.flex-center.confirm-screen-send-amount-currency', symbol),
+        h('div.flex-center.confirm-memo-wrapper', [
+          h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]),
+        ]),
+      ])
+    )
+}
+
+ConfirmSendToken.prototype.renderGasFee = function () {
+  const { token: { symbol }, currentCurrency } = this.props
+  const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee()
+
+  return (
+    h('section.flex-row.flex-center.confirm-screen-row', [
+      h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]),
+      h('div.confirm-screen-section-column', [
+        h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`),
+
+        h(
+          'div.confirm-screen-row-detail',
+          tokenGas ? `${tokenGas} ${symbol}` : `${ethGas} ETH`
+        ),
+      ]),
+    ])
+  )
+}
+
+ConfirmSendToken.prototype.renderTotalPlusGas = function () {
+  const { token: { symbol }, currentCurrency } = this.props
+  const { fiat: fiatAmount, token: tokenAmount } = this.getAmount()
+  const { fiat: fiatGas, token: tokenGas } = this.getGasFee()
+
+  return fiatAmount && fiatGas
+    ? (
+      h('section.flex-row.flex-center.confirm-screen-total-box ', [
+        h('div.confirm-screen-section-column', [
+          h('span.confirm-screen-label', [ 'Total ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+        ]),
+
+        h('div.confirm-screen-section-column', [
+          h('div.confirm-screen-row-info', `${addCurrencies(fiatAmount, fiatGas)} ${currentCurrency}`),
+          h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`),
+        ]),
+      ])
+    )
+    : (
+      h('section.flex-row.flex-center.confirm-screen-total-box ', [
+        h('div.confirm-screen-section-column', [
+          h('span.confirm-screen-label', [ 'Total ' ]),
+          h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]),
+        ]),
+
+        h('div.confirm-screen-section-column', [
+          h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`),
+          h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} Gas`),
+        ]),
+      ])
+    )
+}
+
+ConfirmSendToken.prototype.render = function () {
+  const { editTransaction } = this.props
+  const txMeta = this.gatherTxMeta()
+  const {
+    from: {
+      address: fromAddress,
+      name: fromName,
+    },
+    to: {
+      address: toAddress,
+      name: toName,
+    },
+  } = this.getData()
+
+  this.inputs = []
+
+  return (
+    h('div.confirm-screen-container.confirm-send-token', [
+      // Main Send token Card
+      h('div.page-container', [
+        h('div.page-container__header', [
+          h('button.confirm-screen-back-button', {
+            onClick: () => editTransaction(txMeta),
+          }, 'Edit'),
+          h('div.page-container__title', 'Confirm'),
+          h('div.page-container__subtitle', `Please review your transaction.`),
+        ]),
+        h('div.flex-row.flex-center.confirm-screen-identicons', [
+          h('div.confirm-screen-account-wrapper', [
+            h(
+              Identicon,
+              {
+                address: fromAddress,
+                diameter: 60,
+              },
+            ),
+            h('span.confirm-screen-account-name', fromName),
+            // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)),
+          ]),
+          h('i.fa.fa-arrow-right.fa-lg'),
+          h('div.confirm-screen-account-wrapper', [
+            h(
+              Identicon,
+              {
+                address: toAddress,
+                diameter: 60,
+              },
+            ),
+            h('span.confirm-screen-account-name', toName),
+            // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)),
+          ]),
+        ]),
+
+        // h('h3.flex-center.confirm-screen-sending-to-message', {
+        //   style: {
+        //     textAlign: 'center',
+        //     fontSize: '16px',
+        //   },
+        // }, [
+          // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`,
+        // ]),
+
+        this.renderHeroAmount(),
+
+        h('div.confirm-screen-rows', [
+          h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', fromName),
+              h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`),
+            ]),
+          ]),
+
+          toAddress && h('section.flex-row.flex-center.confirm-screen-row', [
+            h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]),
+            h('div.confirm-screen-section-column', [
+              h('div.confirm-screen-row-info', toName),
+              h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`),
+            ]),
+          ]),
+
+          this.renderGasFee(),
+
+          this.renderTotalPlusGas(),
+
+        ]),
+      ]),
+
+      h('form#pending-tx-form', {
+        onSubmit: this.onSubmit,
+      }, [
+        // Cancel Button
+        h('div.cancel.btn-light.confirm-screen-cancel-button', {
+          onClick: (event) => this.cancel(event, txMeta),
+        }, 'CANCEL'),
+
+        // Accept Button
+        h('button.confirm-screen-confirm-button', ['CONFIRM']),
+      ]),
+
+
+    ])
+  )
+}
+
+ConfirmSendToken.prototype.onSubmit = function (event) {
+  event.preventDefault()
+  const txMeta = this.gatherTxMeta()
+  const valid = this.checkValidity()
+  this.setState({ valid, submitting: true })
+
+  if (valid && this.verifyGasParams()) {
+    this.props.sendTransaction(txMeta, event)
+  } else {
+    this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+    this.setState({ submitting: false })
+  }
+}
+
+ConfirmSendToken.prototype.cancel = function (event, txMeta) {
+  event.preventDefault()
+  const { cancelTransaction } = this.props
+
+  cancelTransaction(txMeta)
+}
+
+ConfirmSendToken.prototype.checkValidity = function () {
+  const form = this.getFormEl()
+  const valid = form.checkValidity()
+  return valid
+}
+
+ConfirmSendToken.prototype.getFormEl = function () {
+  const form = document.querySelector('form#pending-tx-form')
+  // Stub out form for unit tests:
+  if (!form) {
+    return { checkValidity () { return true } }
+  }
+  return form
+}
+
+// After a customizable state value has been updated,
+ConfirmSendToken.prototype.gatherTxMeta = function () {
+  const props = this.props
+  const state = this.state
+  const txData = clone(state.txData) || clone(props.txData)
+
+  // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`)
+  return txData
+}
+
+ConfirmSendToken.prototype.verifyGasParams = function () {
+  // We call this in case the gas has not been modified at all
+  if (!this.state) { return true }
+  return (
+    this._notZeroOrEmptyString(this.state.gas) &&
+    this._notZeroOrEmptyString(this.state.gasPrice)
+  )
+}
+
+ConfirmSendToken.prototype._notZeroOrEmptyString = function (obj) {
+  return obj !== '' && obj !== '0x0'
+}
+
+ConfirmSendToken.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) {
+  const numBN = new BN(numerator)
+  const denomBN = new BN(denominator)
+  return targetBN.mul(numBN).div(denomBN)
+}
diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
new file mode 100644
index 000000000..f4f6afb8f
--- /dev/null
+++ b/ui/app/components/pending-tx/index.js
@@ -0,0 +1,145 @@
+const Component = require('react').Component
+const { connect } = require('react-redux')
+const h = require('react-hyperscript')
+const clone = require('clone')
+const abi = require('human-standard-token-abi')
+const abiDecoder = require('abi-decoder')
+abiDecoder.addABI(abi)
+const inherits = require('util').inherits
+const actions = require('../../actions')
+const util = require('../../util')
+const ConfirmSendEther = require('./confirm-send-ether')
+const ConfirmSendToken = require('./confirm-send-token')
+const ConfirmDeployContract = require('./confirm-deploy-contract')
+
+const TX_TYPES = {
+  DEPLOY_CONTRACT: 'deploy_contract',
+  SEND_ETHER: 'send_ether',
+  SEND_TOKEN: 'send_token',
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(PendingTx)
+
+function mapStateToProps (state) {
+  const {
+    conversionRate,
+    identities,
+  } = state.metamask
+  const accounts = state.metamask.accounts
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  return {
+    conversionRate,
+    identities,
+    selectedAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })),
+  }
+}
+
+inherits(PendingTx, Component)
+function PendingTx () {
+  Component.call(this)
+  this.state = {
+    isFetching: true,
+    transactionType: '',
+    tokenAddress: '',
+    tokenSymbol: '',
+    tokenDecimals: '',
+  }
+}
+
+PendingTx.prototype.componentWillMount = async function () {
+  const txMeta = this.gatherTxMeta()
+  const txParams = txMeta.txParams || {}
+
+  if (!txParams.to) {
+    return this.setState({
+      transactionType: TX_TYPES.DEPLOY_CONTRACT,
+      isFetching: false,
+    })
+  }
+
+  try {
+    const token = util.getContractAtAddress(txParams.to)
+    const results = await Promise.all([
+      token.symbol(),
+      token.decimals(),
+    ])
+
+    const [ symbol, decimals ] = results
+
+    if (symbol[0] && decimals[0]) {
+      this.setState({
+        transactionType: TX_TYPES.SEND_TOKEN,
+        tokenAddress: txParams.to,
+        tokenSymbol: symbol[0],
+        tokenDecimals: decimals[0],
+        isFetching: false,
+      })
+    } else {
+      this.setState({
+        transactionType: TX_TYPES.SEND_ETHER,
+        isFetching: false,
+      })
+    }
+  } catch (e) {
+    this.setState({
+      transactionType: TX_TYPES.SEND_ETHER,
+      isFetching: false,
+    })
+  }
+}
+
+PendingTx.prototype.gatherTxMeta = function () {
+  const props = this.props
+  const state = this.state
+  const txData = clone(state.txData) || clone(props.txData)
+
+  return txData
+}
+
+PendingTx.prototype.render = function () {
+  const {
+    isFetching,
+    transactionType,
+    tokenAddress,
+    tokenSymbol,
+    tokenDecimals,
+  } = this.state
+
+  const { sendTransaction } = this.props
+
+  if (isFetching) {
+    return h('noscript')
+  }
+
+  switch (transactionType) {
+    case TX_TYPES.SEND_ETHER:
+      return h(ConfirmSendEther, {
+        txData: this.gatherTxMeta(),
+        sendTransaction,
+      })
+    case TX_TYPES.SEND_TOKEN:
+      return h(ConfirmSendToken, {
+        txData: this.gatherTxMeta(),
+        sendTransaction,
+        token: {
+          address: tokenAddress,
+          symbol: tokenSymbol,
+          decimals: tokenDecimals,
+        },
+      })
+    case TX_TYPES.DEPLOY_CONTRACT:
+      return h(ConfirmDeployContract, {
+        txData: this.gatherTxMeta(),
+        sendTransaction,
+      })
+    default:
+      return h('noscript')
+  }
+}
diff --git a/ui/app/components/pending-typed-msg-details.js b/ui/app/components/pending-typed-msg-details.js
new file mode 100644
index 000000000..b5fd29f71
--- /dev/null
+++ b/ui/app/components/pending-typed-msg-details.js
@@ -0,0 +1,59 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+const AccountPanel = require('./account-panel')
+const TypedMessageRenderer = require('./typed-message-renderer')
+
+module.exports = PendingMsgDetails
+
+inherits(PendingMsgDetails, Component)
+function PendingMsgDetails () {
+  Component.call(this)
+}
+
+PendingMsgDetails.prototype.render = function () {
+  var state = this.props
+  var msgData = state.txData
+
+  var msgParams = msgData.msgParams || {}
+  var address = msgParams.from || state.selectedAddress
+  var identity = state.identities[address] || { address: address }
+  var account = state.accounts[address] || { address: address }
+
+  var { data } = msgParams
+
+  return (
+    h('div', {
+      key: msgData.id,
+      style: {
+        margin: '10px 20px',
+      },
+    }, [
+
+      // account that will sign
+      h(AccountPanel, {
+        showFullAddress: true,
+        identity: identity,
+        account: account,
+        imageifyIdenticons: state.imageifyIdenticons,
+      }),
+
+      // message data
+      h('div', {
+        style: {
+          height: '260px',
+        },
+      }, [
+        h('label.font-small', { style: { display: 'block' } }, 'YOU ARE SIGNING'),
+        h(TypedMessageRenderer, {
+          value: data,
+          style: {
+            height: '215px',
+          },
+        }),
+      ]),
+
+    ])
+  )
+}
diff --git a/ui/app/components/pending-personal-msg.js b/ui/app/components/pending-typed-msg.js
index 4542adb28..f8926d0a3 100644
--- a/ui/app/components/pending-personal-msg.js
+++ b/ui/app/components/pending-typed-msg.js
@@ -1,7 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
-const PendingTxDetails = require('./pending-personal-msg-details')
+const PendingTxDetails = require('./pending-typed-msg-details')
 
 module.exports = PendingMsg
 
@@ -34,14 +34,13 @@ PendingMsg.prototype.render = function () {
       // sign + cancel
       h('.flex-row.flex-space-around', [
         h('button', {
-          onClick: state.cancelPersonalMessage,
+          onClick: state.cancelTypedMessage,
         }, 'Cancel'),
         h('button', {
-          onClick: state.signPersonalMessage,
+          onClick: state.signTypedMessage,
         }, 'Sign'),
       ]),
     ])
 
   )
 }
-
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 5488599eb..83885539c 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -3,13 +3,14 @@ const h = require('react-hyperscript')
 const qrCode = require('qrcode-npm').qrcode
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
-const CopyButton = require('./copyButton')
+const isHexPrefixed = require('ethereumjs-util').isHexPrefixed
+const ReadOnlyInput = require('./readonly-input')
 
 module.exports = connect(mapStateToProps)(QrCodeView)
 
 function mapStateToProps (state) {
   return {
-    Qr: state.appState.Qr,
+    // Qr code is not fetched from state. 'message' and 'data' props are passed instead.
     buyView: state.appState.buyView,
     warning: state.appState.warning,
   }
@@ -22,53 +23,35 @@ function QrCodeView () {
 }
 
 QrCodeView.prototype.render = function () {
-  var props = this.props
-  var Qr = props.Qr
-  var qrImage = qrCode(4, 'M')
-
-  qrImage.addData(Qr.data)
+  const props = this.props
+  const Qr = props.Qr
+  const address = `${isHexPrefixed(Qr.data) ? 'ethereum:' : ''}${Qr.data}`
+  const qrImage = qrCode(4, 'M')
+  qrImage.addData(address)
   qrImage.make()
 
-  return h('.main-container.flex-column', {
-    key: 'qr',
-    style: {
-      justifyContent: 'center',
-      paddingBottom: '45px',
-      paddingLeft: '45px',
-      paddingRight: '45px',
-      alignItems: 'center',
-    },
-  }, [
-    Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message),
+  return h('.div.flex-column.flex-center', [
+    Array.isArray(Qr.message)
+      ? h('.message-container', this.renderMultiMessage())
+      : Qr.message && h('.qr-header', Qr.message),
 
     this.props.warning ? this.props.warning && h('span.error.flex-center', {
       style: {
-        textAlign: 'center',
-        width: '229px',
-        height: '82px',
       },
     },
     this.props.warning) : null,
 
-    h('#qr-container.flex-column', {
-      style: {
-        marginTop: '25px',
-        marginBottom: '15px',
-      },
+    h('.div.qr-wrapper', {
+      style: {},
       dangerouslySetInnerHTML: {
         __html: qrImage.createTableTag(4),
       },
     }),
-    h('.flex-row', [
-      h('h3.ellip-address', {
-        style: {
-          width: '247px',
-        },
-      }, Qr.data),
-      h(CopyButton, {
-        value: Qr.data,
-      }),
-    ]),
+    h(ReadOnlyInput, {
+      wrapperClass: 'ellip-address-wrapper',
+      inputClass: 'qr-ellip-address',
+      value: Qr.data,
+    }),
   ])
 }
 
diff --git a/ui/app/components/readonly-input.js b/ui/app/components/readonly-input.js
new file mode 100644
index 000000000..fcf05fb9e
--- /dev/null
+++ b/ui/app/components/readonly-input.js
@@ -0,0 +1,33 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = ReadOnlyInput
+
+inherits(ReadOnlyInput, Component)
+function ReadOnlyInput () {
+  Component.call(this)
+}
+
+ReadOnlyInput.prototype.render = function () {
+  const {
+    wrapperClass = '',
+    inputClass = '',
+    value,
+    textarea,
+    onClick,
+  } = this.props
+
+  const inputType = textarea ? 'textarea' : 'input'
+
+  return h('div', {className: wrapperClass}, [
+    h(inputType, {
+      className: inputClass,
+      value,
+      readOnly: true,
+      onFocus: event => event.target.select(),
+      onClick,
+    }),
+  ])
+}
+
diff --git a/ui/app/components/send-token/index.js b/ui/app/components/send-token/index.js
new file mode 100644
index 000000000..99d078251
--- /dev/null
+++ b/ui/app/components/send-token/index.js
@@ -0,0 +1,439 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const classnames = require('classnames')
+const abi = require('ethereumjs-abi')
+const inherits = require('util').inherits
+const actions = require('../../actions')
+const selectors = require('../../selectors')
+const { isValidAddress, allNull } = require('../../util')
+
+// const BalanceComponent = require('./balance-component')
+const Identicon = require('../identicon')
+const TokenBalance = require('../token-balance')
+const CurrencyToggle = require('../send/currency-toggle')
+const GasTooltip = require('../send/gas-tooltip')
+const GasFeeDisplay = require('../send/gas-fee-display')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(SendTokenScreen)
+
+function mapStateToProps (state) {
+  // const sidebarOpen = state.appState.sidebarOpen
+
+  const { warning } = state.appState
+  const identities = state.metamask.identities
+  const addressBook = state.metamask.addressBook
+  const conversionRate = state.metamask.conversionRate
+  const currentBlockGasLimit = state.metamask.currentBlockGasLimit
+  const accounts = state.metamask.accounts
+  const selectedTokenAddress = state.metamask.selectedTokenAddress
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const selectedToken = selectors.getSelectedToken(state)
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const pair = `${selectedToken.symbol.toLowerCase()}_eth`
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
+
+  return {
+    selectedAddress,
+    selectedTokenAddress,
+    identities,
+    addressBook,
+    conversionRate,
+    tokenExchangeRate,
+    currentBlockGasLimit,
+    selectedToken,
+    warning,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    hideWarning: () => dispatch(actions.hideWarning()),
+    addToAddressBook: (recipient, nickname) => dispatch(
+      actions.addToAddressBook(recipient, nickname)
+    ),
+    signTx: txParams => dispatch(actions.signTx(txParams)),
+    signTokenTx: (tokenAddress, toAddress, amount, txData) => (
+      dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
+    ),
+    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
+    estimateGas: params => dispatch(actions.estimateGas(params)),
+    getGasPrice: () => dispatch(actions.getGasPrice()),
+  }
+}
+
+inherits(SendTokenScreen, Component)
+function SendTokenScreen () {
+  Component.call(this)
+  this.state = {
+    to: '',
+    amount: '0x0',
+    amountToSend: '0x0',
+    selectedCurrency: 'USD',
+    isGasTooltipOpen: false,
+    gasPrice: null,
+    gasLimit: null,
+    errors: {},
+  }
+}
+
+SendTokenScreen.prototype.componentWillMount = function () {
+  const {
+    updateTokenExchangeRate,
+    selectedToken: { symbol },
+    getGasPrice,
+    estimateGas,
+    selectedAddress,
+  } = this.props
+
+  updateTokenExchangeRate(symbol)
+
+  const data = Array.prototype.map.call(
+    abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
+    x => ('00' + x.toString(16)).slice(-2)
+  ).join('')
+
+  console.log(data)
+  Promise.all([
+    getGasPrice(),
+    estimateGas({
+      from: selectedAddress,
+      value: '0x0',
+      gas: '746a528800',
+      data,
+    }),
+  ])
+  .then(([blockGasPrice, estimatedGas]) => {
+    console.log({ blockGasPrice, estimatedGas})
+    this.setState({
+      gasPrice: blockGasPrice,
+      gasLimit: estimatedGas,
+    })
+  })
+}
+
+SendTokenScreen.prototype.validate = function () {
+  const {
+    to,
+    amount: stringAmount,
+    gasPrice: hexGasPrice,
+    gasLimit: hexGasLimit,
+  } = this.state
+
+  const gasPrice = parseInt(hexGasPrice, 16)
+  const gasLimit = parseInt(hexGasLimit, 16) / 1000000000
+  const amount = Number(stringAmount)
+
+  const errors = {
+    to: !to ? 'Required' : null,
+    amount: !amount ? 'Required' : null,
+    gasPrice: !gasPrice ? 'Gas Price Required' : null,
+    gasLimit: !gasLimit ? 'Gas Limit Required' : null,
+  }
+
+  if (to && !isValidAddress(to)) {
+    errors.to = 'Invalid address'
+  }
+
+  const isValid = Object.entries(errors).every(([key, value]) => value === null)
+  return {
+    isValid,
+    errors: isValid ? {} : errors,
+  }
+}
+
+SendTokenScreen.prototype.setErrorsFor = function (field) {
+  const { errors: previousErrors } = this.state
+
+  const {
+    isValid,
+    errors: newErrors,
+  } = this.validate()
+
+  const nextErrors = Object.assign({}, previousErrors, {
+    [field]: newErrors[field] || null,
+  })
+
+  if (!isValid) {
+    this.setState({
+      errors: nextErrors,
+      isValid,
+    })
+  }
+}
+
+SendTokenScreen.prototype.clearErrorsFor = function (field) {
+  const { errors: previousErrors } = this.state
+  const nextErrors = Object.assign({}, previousErrors, {
+    [field]: null,
+  })
+
+  this.setState({
+    errors: nextErrors,
+    isValid: allNull(nextErrors),
+  })
+}
+
+SendTokenScreen.prototype.getAmountToSend = function (amount, selectedToken) {
+  const { decimals } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
+  const sendAmount = '0x' + Number(amount * multiplier).toString(16)
+  return sendAmount
+}
+
+SendTokenScreen.prototype.submit = function () {
+  const {
+    to,
+    amount,
+    gasPrice,
+    gasLimit,
+  } = this.state
+
+  const {
+    identities,
+    selectedAddress,
+    selectedTokenAddress,
+    hideWarning,
+    addToAddressBook,
+    signTokenTx,
+    selectedToken,
+  } = this.props
+
+  const { nickname = ' ' } = identities[to] || {}
+
+  hideWarning()
+  addToAddressBook(to, nickname)
+
+  const txParams = {
+    from: selectedAddress,
+    value: '0',
+    gas: gasLimit,
+    gasPrice: gasPrice,
+  }
+
+  const sendAmount = this.getAmountToSend(amount, selectedToken)
+
+  signTokenTx(selectedTokenAddress, to, sendAmount, txParams)
+}
+
+SendTokenScreen.prototype.renderToAddressInput = function () {
+  const {
+    identities,
+    addressBook,
+  } = this.props
+
+  const {
+    to,
+    errors: { to: errorMessage },
+  } = this.state
+
+  return h('div', {
+    className: classnames('send-screen-input-wrapper', {
+      'send-screen-input-wrapper--error': errorMessage,
+    }),
+  }, [
+    h('div', ['To:']),
+    h('input.large-input.send-screen-input', {
+      name: 'address',
+      list: 'addresses',
+      placeholder: 'Address',
+      value: to,
+      onChange: e => this.setState({
+        to: e.target.value,
+        errors: {},
+      }),
+      onBlur: () => {
+        this.setErrorsFor('to')
+      },
+      onFocus: event => {
+        if (to) event.target.select()
+        this.clearErrorsFor('to')
+      },
+    }),
+    h('datalist#addresses', [
+      // Corresponds to the addresses owned.
+      Object.entries(identities).map(([key, { address, name }]) => {
+        return h('option', {
+          value: address,
+          label: name,
+          key: address,
+        })
+      }),
+      addressBook.map(({ address, name }) => {
+        return h('option', {
+          value: address,
+          label: name,
+          key: address,
+        })
+      }),
+    ]),
+    h('div.send-screen-input-wrapper__error-message', [ errorMessage ]),
+  ])
+}
+
+SendTokenScreen.prototype.renderAmountInput = function () {
+  const {
+    selectedCurrency,
+    amount,
+    errors: { amount: errorMessage },
+  } = this.state
+
+  const {
+    tokenExchangeRate,
+    selectedToken: {symbol},
+  } = this.props
+
+  return h('div.send-screen-input-wrapper', {
+    className: classnames('send-screen-input-wrapper', {
+      'send-screen-input-wrapper--error': errorMessage,
+    }),
+  }, [
+    h('div.send-screen-amount-labels', [
+      h('span', ['Amount']),
+      h(CurrencyToggle, {
+        currentCurrency: tokenExchangeRate ? selectedCurrency : 'USD',
+        currencies: tokenExchangeRate ? [ symbol, 'USD' ] : [],
+        onClick: currency => this.setState({ selectedCurrency: currency }),
+      }),
+    ]),
+    h('input.large-input.send-screen-input', {
+      placeholder: `0 ${symbol}`,
+      type: 'number',
+      value: amount,
+      onChange: e => this.setState({
+        amount: e.target.value,
+      }),
+      onBlur: () => {
+        this.setErrorsFor('amount')
+      },
+      onFocus: () => this.clearErrorsFor('amount'),
+    }),
+    h('div.send-screen-input-wrapper__error-message', [ errorMessage ]),
+  ])
+}
+
+SendTokenScreen.prototype.renderGasInput = function () {
+  const {
+    isGasTooltipOpen,
+    gasPrice,
+    gasLimit,
+    selectedCurrency,
+    errors: {
+      gasPrice: gasPriceErrorMessage,
+      gasLimit: gasLimitErrorMessage,
+    },
+  } = this.state
+
+  const {
+    conversionRate,
+    tokenExchangeRate,
+    currentBlockGasLimit,
+  } = this.props
+
+  return h('div.send-screen-input-wrapper', {
+    className: classnames('send-screen-input-wrapper', {
+      'send-screen-input-wrapper--error': gasPriceErrorMessage || gasLimitErrorMessage,
+    }),
+  }, [
+    isGasTooltipOpen && h(GasTooltip, {
+      className: 'send-tooltip',
+      gasPrice: gasPrice || '0x0',
+      gasLimit: gasLimit || '0x0',
+      onClose: () => this.setState({ isGasTooltipOpen: false }),
+      onFeeChange: ({ gasLimit, gasPrice }) => {
+        this.setState({ gasLimit, gasPrice, errors: {} })
+      },
+      onBlur: () => {
+        this.setErrorsFor('gasLimit')
+        this.setErrorsFor('gasPrice')
+      },
+      onFocus: () => {
+        this.clearErrorsFor('gasLimit')
+        this.clearErrorsFor('gasPrice')
+      },
+    }),
+
+    h('div.send-screen-gas-labels', {}, [
+      h('span', [ h('i.fa.fa-bolt'), 'Gas fee:']),
+      h('span', ['What\'s this?']),
+    ]),
+    h('div.large-input.send-screen-gas-input', [
+      h(GasFeeDisplay, {
+        conversionRate,
+        tokenExchangeRate,
+        gasPrice: gasPrice || '0x0',
+        activeCurrency: selectedCurrency,
+        gas: gasLimit || '0x0',
+        blockGasLimit: currentBlockGasLimit,
+      }),
+      h(
+        'div.send-screen-gas-input-customize',
+        { onClick: () => this.setState({ isGasTooltipOpen: !isGasTooltipOpen }) },
+        ['Customize']
+      ),
+    ]),
+    h('div.send-screen-input-wrapper__error-message', [
+      gasPriceErrorMessage || gasLimitErrorMessage,
+    ]),
+  ])
+}
+
+SendTokenScreen.prototype.renderMemoInput = function () {
+  return h('div.send-screen-input-wrapper', [
+    h('div', {}, ['Transaction memo (optional)']),
+    h(
+      'input.large-input.send-screen-input',
+      { onChange: e => this.setState({ memo: e.target.value }) }
+    ),
+  ])
+}
+
+SendTokenScreen.prototype.renderButtons = function () {
+  const { selectedAddress, backToAccountDetail } = this.props
+  const { isValid } = this.validate()
+
+  return h('div.send-token__button-group', [
+    h('button.send-token__button-next.btn-secondary', {
+      className: !isValid && 'send-screen__send-button__disabled',
+      onClick: () => isValid && this.submit(),
+    }, ['Next']),
+    h('button.send-token__button-cancel.btn-tertiary', {
+      onClick: () => backToAccountDetail(selectedAddress),
+    }, ['Cancel']),
+  ])
+}
+
+SendTokenScreen.prototype.render = function () {
+  const {
+    selectedTokenAddress,
+    selectedToken,
+    warning,
+  } = this.props
+
+  return h('div.send-token', [
+    h('div.send-token__content', [
+      h(Identicon, {
+        diameter: 75,
+        address: selectedTokenAddress,
+      }),
+      h('div.send-token__title', ['Send Tokens']),
+      h('div.send-token__description', ['Send Tokens to anyone with an Ethereum account']),
+      h('div.send-token__balance-text', ['Your Token Balance is:']),
+      h('div.send-token__token-balance', [
+        h(TokenBalance, { token: selectedToken, balanceOnly: true }),
+      ]),
+      h('div.send-token__token-symbol', [selectedToken.symbol]),
+      this.renderToAddressInput(),
+      this.renderAmountInput(),
+      this.renderGasInput(),
+      this.renderMemoInput(),
+      warning && h('div.send-screen-input-wrapper--error', {},
+        h('div.send-screen-input-wrapper__error-message', [
+          warning,
+        ])
+      ),
+    ]),
+    this.renderButtons(),
+  ])
+}
diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js
new file mode 100644
index 000000000..1ad3f69c1
--- /dev/null
+++ b/ui/app/components/send/account-list-item.js
@@ -0,0 +1,73 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const Identicon = require('../identicon')
+const CurrencyDisplay = require('./currency-display')
+const { conversionRateSelector, getCurrentCurrency } = require('../../selectors')
+
+inherits(AccountListItem, Component)
+function AccountListItem () {
+  Component.call(this)
+}
+
+function mapStateToProps (state) {
+  return {
+    conversionRate: conversionRateSelector(state),
+    currentCurrency: getCurrentCurrency(state),
+  }
+}
+
+module.exports = connect(mapStateToProps)(AccountListItem)
+
+AccountListItem.prototype.render = function () {
+  const {
+    className,
+    account,
+    handleClick,
+    icon = null,
+    conversionRate,
+    currentCurrency,
+    displayBalance = true,
+    displayAddress = false,
+  } = this.props
+
+  const { name, address, balance } = account || {}
+
+  return h('div.account-list-item', {
+    className,
+    onClick: () => handleClick({ name, address, balance }),
+  }, [
+
+    h('div.account-list-item__top-row', {}, [
+
+      h(
+        Identicon,
+        {
+          address,
+          diameter: 18,
+          className: 'account-list-item__identicon',
+        },
+      ),
+
+      h('div.account-list-item__account-name', {}, name || address),
+
+      icon && h('div.account-list-item__icon', [icon]),
+
+    ]),
+
+    displayAddress && name && h('div.account-list-item__account-address', address),
+
+    displayBalance && h(CurrencyDisplay, {
+      primaryCurrency: 'ETH',
+      convertedCurrency: currentCurrency,
+      value: balance,
+      conversionRate,
+      readOnly: true,
+      className: 'account-list-item__account-balances',
+      primaryBalanceClassName: 'account-list-item__account-primary-balance',
+      convertedBalanceClassName: 'account-list-item__account-secondary-balance',
+    }, name),
+
+  ])
+}
diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
new file mode 100644
index 000000000..819fee0a0
--- /dev/null
+++ b/ui/app/components/send/currency-display.js
@@ -0,0 +1,116 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const CurrencyInput = require('../currency-input')
+const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
+
+module.exports = CurrencyDisplay
+
+inherits(CurrencyDisplay, Component)
+function CurrencyDisplay () {
+  Component.call(this)
+}
+
+function toHexWei (value) {
+  return conversionUtil(value, {
+    fromNumericBase: 'dec',
+    toNumericBase: 'hex',
+    toDenomination: 'WEI',
+  })
+}
+
+CurrencyDisplay.prototype.getAmount = function (value) {
+  const { selectedToken } = this.props
+  const { decimals } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
+
+  const sendAmount = multiplyCurrencies(value, multiplier, {toNumericBase: 'hex'})
+
+  return selectedToken
+    ? sendAmount
+    : toHexWei(value)
+}
+
+CurrencyDisplay.prototype.getValueToRender = function () {
+  const { selectedToken, conversionRate, value } = this.props
+
+  const { decimals, symbol } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
+
+  return selectedToken
+    ? conversionUtil(value, {
+      fromNumericBase: 'hex',
+      toCurrency: symbol,
+      conversionRate: multiplier,
+      invertConversionRate: true,
+    })
+    : conversionUtil(value, {
+      fromNumericBase: 'hex',
+      toNumericBase: 'dec',
+      fromDenomination: 'WEI',
+      numberOfDecimals: 6,
+      conversionRate,
+    })
+}
+
+CurrencyDisplay.prototype.render = function () {
+  const {
+    className = 'currency-display',
+    primaryBalanceClassName = 'currency-display__input',
+    convertedBalanceClassName = 'currency-display__converted-value',
+    conversionRate,
+    primaryCurrency,
+    convertedCurrency,
+    readOnly = false,
+    inError = false,
+    handleChange,
+  } = this.props
+
+  const valueToRender = this.getValueToRender()
+
+  let convertedValue = conversionUtil(valueToRender, {
+    fromNumericBase: 'dec',
+    fromCurrency: primaryCurrency,
+    toCurrency: convertedCurrency,
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  convertedValue = Number(convertedValue).toFixed(2)
+
+  return h('div', {
+    className,
+    style: {
+      borderColor: inError ? 'red' : null,
+    },
+    onClick: () => this.currencyInput.focus(),
+  }, [
+
+    h('div.currency-display__primary-row', [
+
+      h('div.currency-display__input-wrapper', [
+
+        h(CurrencyInput, {
+          className: primaryBalanceClassName,
+          value: `${valueToRender}`,
+          placeholder: '0',
+          readOnly,
+          onInputChange: newValue => {
+            handleChange(this.getAmount(newValue))
+          },
+          inputRef: input => { this.currencyInput = input },
+        }),
+
+        h('span.currency-display__currency-symbol', primaryCurrency),
+
+      ]),
+
+    ]),
+
+    h('div', {
+      className: convertedBalanceClassName,
+    }, `${convertedValue} ${convertedCurrency.toUpperCase()}`),
+
+  ])
+
+}
+
diff --git a/ui/app/components/send/currency-toggle.js b/ui/app/components/send/currency-toggle.js
new file mode 100644
index 000000000..7aaccd490
--- /dev/null
+++ b/ui/app/components/send/currency-toggle.js
@@ -0,0 +1,44 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const classnames = require('classnames')
+
+module.exports = CurrencyToggle
+
+inherits(CurrencyToggle, Component)
+function CurrencyToggle () {
+  Component.call(this)
+}
+
+const defaultCurrencies = [ 'ETH', 'USD' ]
+
+CurrencyToggle.prototype.renderToggles = function () {
+  const { onClick, activeCurrency } = this.props
+  const [currencyA, currencyB] = this.props.currencies || defaultCurrencies
+
+  return [
+    h('span', {
+      className: classnames('currency-toggle__item', {
+        'currency-toggle__item--selected': currencyA === activeCurrency,
+      }),
+      onClick: () => onClick(currencyA),
+    }, [ currencyA ]),
+    '<>',
+    h('span', {
+      className: classnames('currency-toggle__item', {
+        'currency-toggle__item--selected': currencyB === activeCurrency,
+      }),
+      onClick: () => onClick(currencyB),
+    }, [ currencyB ]),
+  ]
+}
+
+CurrencyToggle.prototype.render = function () {
+  const currencies = this.props.currencies || defaultCurrencies
+
+  return h('span.currency-toggle', currencies.length
+    ? this.renderToggles()
+    : []
+  )
+}
+
diff --git a/ui/app/components/send/eth-fee-display.js b/ui/app/components/send/eth-fee-display.js
new file mode 100644
index 000000000..9eda5ec62
--- /dev/null
+++ b/ui/app/components/send/eth-fee-display.js
@@ -0,0 +1,37 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const EthBalance = require('../eth-balance')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = EthFeeDisplay
+
+inherits(EthFeeDisplay, Component)
+function EthFeeDisplay () {
+  Component.call(this)
+}
+
+EthFeeDisplay.prototype.render = function () {
+  const {
+    activeCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  return h(EthBalance, {
+    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+    currentCurrency: activeCurrency,
+    conversionRate,
+    showFiat: false,
+    hideTooltip: true,
+    styleOveride: {
+      color: '#5d5d5d',
+      fontSize: '16px',
+      fontFamily: 'DIN OT',
+      lineHeight: '22.4px',
+    },
+  })
+}
+
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js
new file mode 100644
index 000000000..0686fbe73
--- /dev/null
+++ b/ui/app/components/send/from-dropdown.js
@@ -0,0 +1,72 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountListItem = require('./account-list-item')
+
+module.exports = FromDropdown
+
+inherits(FromDropdown, Component)
+function FromDropdown () {
+  Component.call(this)
+}
+
+FromDropdown.prototype.getListItemIcon = function (currentAccount, selectedAccount) {
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
+
+  return currentAccount.address === selectedAccount.address
+    ? listItemIcon
+    : null
+}
+
+FromDropdown.prototype.renderDropdown = function () {
+  const {
+    accounts,
+    selectedAccount,
+    closeDropdown,
+    onSelect,
+  } = this.props
+
+  return h('div', {}, [
+
+    h('div.send-v2__from-dropdown__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.send-v2__from-dropdown__list', {}, [
+
+      ...accounts.map(account => h(AccountListItem, {
+        className: 'account-list-item__dropdown',
+        account,
+        handleClick: () => {
+          onSelect(account)
+          closeDropdown()
+        },
+        icon: this.getListItemIcon(account, selectedAccount),
+      })),
+
+    ]),
+
+  ])
+}
+
+FromDropdown.prototype.render = function () {
+  const {
+    selectedAccount,
+    openDropdown,
+    dropdownOpen,
+  } = this.props
+
+  return h('div.send-v2__from-dropdown', {}, [
+
+    h(AccountListItem, {
+      account: selectedAccount,
+      handleClick: openDropdown,
+      icon: h(`i.fa.fa-caret-down.fa-lg`, { style: { color: '#dedede' } }),
+    }),
+
+    dropdownOpen && this.renderDropdown(),
+
+  ])
+
+}
+
diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
new file mode 100644
index 000000000..0c4c3f7a9
--- /dev/null
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -0,0 +1,44 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const CurrencyDisplay = require('./currency-display')
+
+module.exports = GasFeeDisplay
+
+inherits(GasFeeDisplay, Component)
+function GasFeeDisplay () {
+  Component.call(this)
+}
+
+GasFeeDisplay.prototype.render = function () {
+  const {
+    conversionRate,
+    gasTotal,
+    onClick,
+    primaryCurrency = 'ETH',
+    convertedCurrency,
+  } = this.props
+
+  return h('div.send-v2__gas-fee-display', [
+
+    gasTotal
+      ? h(CurrencyDisplay, {
+        primaryCurrency,
+        convertedCurrency,
+        value: gasTotal,
+        conversionRate,
+        convertedPrefix: '$',
+        readOnly: true,
+      })
+      : h('div.currency-display', 'Loading...'),
+
+    h('button.send-v2__sliders-icon-container', {
+      onClick,
+      disabled: !gasTotal,
+    }, [
+      h('i.fa.fa-sliders.send-v2__sliders-icon'),
+    ]),
+
+  ])
+}
+
diff --git a/ui/app/components/send/gas-fee-display.js b/ui/app/components/send/gas-fee-display.js
new file mode 100644
index 000000000..a9a3f3f49
--- /dev/null
+++ b/ui/app/components/send/gas-fee-display.js
@@ -0,0 +1,62 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const USDFeeDisplay = require('./usd-fee-display')
+const EthFeeDisplay = require('./eth-fee-display')
+const { getTxFeeBn, formatBalance, shortenBalance } = require('../../util')
+
+module.exports = GasFeeDisplay
+
+inherits(GasFeeDisplay, Component)
+function GasFeeDisplay () {
+  Component.call(this)
+}
+
+GasFeeDisplay.prototype.getTokenValue = function () {
+  const {
+    tokenExchangeRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  const value = formatBalance(getTxFeeBn(gas, gasPrice, blockGasLimit), 6, true)
+  const [ethNumber] = value.split(' ')
+
+  return shortenBalance(Number(ethNumber) / tokenExchangeRate, 6)
+}
+
+GasFeeDisplay.prototype.render = function () {
+  const {
+    activeCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  switch (activeCurrency) {
+    case 'USD':
+      return h(USDFeeDisplay, {
+        activeCurrency,
+        conversionRate,
+        gas,
+        gasPrice,
+        blockGasLimit,
+      })
+    case 'ETH':
+      return h(EthFeeDisplay, {
+        activeCurrency,
+        conversionRate,
+        gas,
+        gasPrice,
+        blockGasLimit,
+      })
+    default:
+      return h('div.token-gas', [
+        h('div.token-gas__amount', this.getTokenValue()),
+        h('div.token-gas__symbol', activeCurrency),
+      ])
+  }
+}
+
diff --git a/ui/app/components/send/gas-tooltip.js b/ui/app/components/send/gas-tooltip.js
new file mode 100644
index 000000000..46aff3499
--- /dev/null
+++ b/ui/app/components/send/gas-tooltip.js
@@ -0,0 +1,100 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const InputNumber = require('../input-number.js')
+
+module.exports = GasTooltip
+
+inherits(GasTooltip, Component)
+function GasTooltip () {
+  Component.call(this)
+  this.state = {
+    gasLimit: 0,
+    gasPrice: 0,
+  }
+
+  this.updateGasPrice = this.updateGasPrice.bind(this)
+  this.updateGasLimit = this.updateGasLimit.bind(this)
+  this.onClose = this.onClose.bind(this)
+}
+
+GasTooltip.prototype.componentWillMount = function () {
+  const { gasPrice = 0, gasLimit = 0} = this.props
+
+  this.setState({
+    gasPrice: parseInt(gasPrice, 16) / 1000000000,
+    gasLimit: parseInt(gasLimit, 16),
+  })
+}
+
+GasTooltip.prototype.updateGasPrice = function (newPrice) {
+  const { onFeeChange } = this.props
+  const { gasLimit } = this.state
+
+  this.setState({ gasPrice: newPrice })
+  onFeeChange({
+    gasLimit: gasLimit.toString(16),
+    gasPrice: (newPrice * 1000000000).toString(16),
+  })
+}
+
+GasTooltip.prototype.updateGasLimit = function (newLimit) {
+  const { onFeeChange } = this.props
+  const { gasPrice } = this.state
+
+  this.setState({ gasLimit: newLimit })
+  onFeeChange({
+    gasLimit: newLimit.toString(16),
+    gasPrice: (gasPrice * 1000000000).toString(16),
+  })
+}
+
+GasTooltip.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+GasTooltip.prototype.render = function () {
+  const { gasPrice, gasLimit } = this.state
+
+  return h('div.gas-tooltip', {}, [
+    h('div.gas-tooltip-close-area', {
+      onClick: this.onClose,
+    }),
+    h('div.customize-gas-tooltip-container', {}, [
+      h('div.customize-gas-tooltip', {}, [
+        h('div.gas-tooltip-header.gas-tooltip-label', {}, ['Customize Gas']),
+        h('div.gas-tooltip-input-label', {}, [
+          h('span.gas-tooltip-label', {}, ['Gas Price']),
+          h('i.fa.fa-info-circle'),
+        ]),
+        h(InputNumber, {
+          unitLabel: 'GWEI',
+          step: 1,
+          min: 0,
+          placeholder: '0',
+          value: gasPrice,
+          onChange: (newPrice) => this.updateGasPrice(newPrice),
+        }),
+        h('div.gas-tooltip-input-label', {
+          style: {
+            'marginTop': '81px',
+          },
+        }, [
+          h('span.gas-tooltip-label', {}, ['Gas Limit']),
+          h('i.fa.fa-info-circle'),
+        ]),
+        h(InputNumber, {
+          unitLabel: 'UNITS',
+          step: 1,
+          min: 0,
+          placeholder: '0',
+          value: gasLimit,
+          onChange: (newLimit) => this.updateGasLimit(newLimit),
+        }),
+      ]),
+      h('div.gas-tooltip-arrow', {}),
+    ]),
+  ])
+}
+
diff --git a/ui/app/components/send/memo-textarea.js b/ui/app/components/send/memo-textarea.js
new file mode 100644
index 000000000..f4bb24bf8
--- /dev/null
+++ b/ui/app/components/send/memo-textarea.js
@@ -0,0 +1,33 @@
+// const Component = require('react').Component
+// const h = require('react-hyperscript')
+// const inherits = require('util').inherits
+// const Identicon = require('../identicon')
+
+// module.exports = MemoTextArea
+
+// inherits(MemoTextArea, Component)
+// function MemoTextArea () {
+//   Component.call(this)
+// }
+
+// MemoTextArea.prototype.render = function () {
+//   const { memo, identities, onChange } = this.props
+
+//   return h('div.send-v2__memo-text-area', [
+
+//     h('textarea.send-v2__memo-text-area__input', {
+//       placeholder: 'Optional',
+//       value: memo,
+//       onChange,
+//       // onBlur: () => {
+//       //   this.setErrorsFor('memo')
+//       // },
+//       onFocus: event => {
+//         // this.clearErrorsFor('memo')
+//       },
+//     }),
+
+//   ])
+
+// }
+
diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js
new file mode 100644
index 000000000..b3ee0899a
--- /dev/null
+++ b/ui/app/components/send/send-constants.js
@@ -0,0 +1,33 @@
+const ethUtil = require('ethereumjs-util')
+const { conversionUtil, multiplyCurrencies } = require('../../conversion-util')
+
+const MIN_GAS_PRICE_HEX = (100000000).toString(16)
+const MIN_GAS_PRICE_DEC = '100000000'
+const MIN_GAS_LIMIT_DEC = '21000'
+const MIN_GAS_LIMIT_HEX = (parseInt(MIN_GAS_LIMIT_DEC)).toString(16)
+
+const MIN_GAS_PRICE_GWEI = ethUtil.addHexPrefix(conversionUtil(MIN_GAS_PRICE_HEX, {
+  fromDenomination: 'WEI',
+  toDenomination: 'GWEI',
+  fromNumericBase: 'hex',
+  toNumericBase: 'hex',
+  numberOfDecimals: 1,
+}))
+
+const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT_HEX, MIN_GAS_PRICE_HEX, {
+  toNumericBase: 'hex',
+  multiplicandBase: 16,
+  multiplierBase: 16,
+})
+
+const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb'
+
+module.exports = {
+  MIN_GAS_PRICE_GWEI,
+  MIN_GAS_PRICE_HEX,
+  MIN_GAS_PRICE_DEC,
+  MIN_GAS_LIMIT_HEX,
+  MIN_GAS_LIMIT_DEC,
+  MIN_GAS_TOTAL,
+  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
+}
diff --git a/ui/app/components/send/send-utils.js b/ui/app/components/send/send-utils.js
new file mode 100644
index 000000000..d8211930d
--- /dev/null
+++ b/ui/app/components/send/send-utils.js
@@ -0,0 +1,68 @@
+const {
+  addCurrencies,
+  conversionUtil,
+  conversionGTE,
+} = require('../../conversion-util')
+const {
+  calcTokenAmount,
+} = require('../../token-util')
+
+function isBalanceSufficient ({
+  amount = '0x0',
+  gasTotal = '0x0',
+  balance,
+  primaryCurrency,
+  amountConversionRate,
+  conversionRate,
+}) {
+  const totalAmount = addCurrencies(amount, gasTotal, {
+    aBase: 16,
+    bBase: 16,
+    toNumericBase: 'hex',
+  })
+
+  const balanceIsSufficient = conversionGTE(
+    {
+      value: balance,
+      fromNumericBase: 'hex',
+      fromCurrency: primaryCurrency,
+      conversionRate,
+    },
+    {
+      value: totalAmount,
+      fromNumericBase: 'hex',
+      conversionRate: amountConversionRate,
+      fromCurrency: primaryCurrency,
+    },
+  )
+
+  return balanceIsSufficient
+}
+
+function isTokenBalanceSufficient ({
+  amount = '0x0',
+  tokenBalance,
+  decimals,
+}) {
+  const amountInDec = conversionUtil(amount, {
+    fromNumericBase: 'hex',
+  })
+
+  const tokenBalanceIsSufficient = conversionGTE(
+    {
+      value: tokenBalance,
+      fromNumericBase: 'dec',
+    },
+    {
+      value: calcTokenAmount(amountInDec, decimals),
+      fromNumericBase: 'dec',
+    },
+  )
+
+  return tokenBalanceIsSufficient
+}
+
+module.exports = {
+  isBalanceSufficient,
+  isTokenBalanceSufficient,
+}
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
new file mode 100644
index 000000000..1106902b7
--- /dev/null
+++ b/ui/app/components/send/send-v2-container.js
@@ -0,0 +1,85 @@
+const connect = require('react-redux').connect
+const actions = require('../../actions')
+const abi = require('ethereumjs-abi')
+const SendEther = require('../../send-v2')
+
+const {
+  accountsWithSendEtherInfoSelector,
+  getCurrentAccountWithSendEtherInfo,
+  conversionRateSelector,
+  getSelectedToken,
+  getSelectedAddress,
+  getAddressBook,
+  getSendFrom,
+  getCurrentCurrency,
+  getSelectedTokenToFiatRate,
+  getSelectedTokenContract,
+} = require('../../selectors')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther)
+
+function mapStateToProps (state) {
+  const fromAccounts = accountsWithSendEtherInfoSelector(state)
+  const selectedAddress = getSelectedAddress(state)
+  const selectedToken = getSelectedToken(state)
+  const conversionRate = conversionRateSelector(state)
+
+  let data
+  let primaryCurrency
+  let tokenToFiatRate
+  if (selectedToken) {
+    data = Array.prototype.map.call(
+      abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']),
+      x => ('00' + x.toString(16)).slice(-2)
+    ).join('')
+
+    primaryCurrency = selectedToken.symbol
+
+    tokenToFiatRate = getSelectedTokenToFiatRate(state)
+  }
+
+  return {
+    ...state.metamask.send,
+    from: getSendFrom(state) || getCurrentAccountWithSendEtherInfo(state),
+    fromAccounts,
+    toAccounts: [...fromAccounts, ...getAddressBook(state)],
+    conversionRate,
+    selectedToken,
+    primaryCurrency,
+    convertedCurrency: getCurrentCurrency(state),
+    data,
+    amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate,
+    tokenContract: getSelectedTokenContract(state),
+    unapprovedTxs: state.metamask.unapprovedTxs,
+    network: state.metamask.network,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showCustomizeGasModal: () => dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })),
+    estimateGas: params => dispatch(actions.estimateGas(params)),
+    getGasPrice: () => dispatch(actions.getGasPrice()),
+    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
+    signTokenTx: (tokenAddress, toAddress, amount, txData) => (
+      dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData))
+    ),
+    signTx: txParams => dispatch(actions.signTx(txParams)),
+    updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)),
+    updateTx: txData => dispatch(actions.updateTransaction(txData)),
+    setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
+    addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
+    updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
+    updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
+    updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
+    updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)),
+    updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)),
+    updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
+    updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
+    updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
+    updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
+    goHome: () => dispatch(actions.goHome()),
+    clearSend: () => dispatch(actions.clearSend()),
+    setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)),
+  }
+}
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
new file mode 100644
index 000000000..e0cdd0a58
--- /dev/null
+++ b/ui/app/components/send/to-autocomplete.js
@@ -0,0 +1,114 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountListItem = require('./account-list-item')
+
+module.exports = ToAutoComplete
+
+inherits(ToAutoComplete, Component)
+function ToAutoComplete () {
+  Component.call(this)
+
+  this.state = { accountsToRender: [] }
+}
+
+ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress) {
+  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
+
+  return toAddress && listItemAddress === toAddress
+    ? listItemIcon
+    : null
+}
+
+ToAutoComplete.prototype.renderDropdown = function () {
+  const {
+    closeDropdown,
+    onChange,
+    to,
+  } = this.props
+  const { accountsToRender } = this.state
+
+  return accountsToRender.length && h('div', {}, [
+
+    h('div.send-v2__from-dropdown__close-area', {
+      onClick: closeDropdown,
+    }),
+
+    h('div.send-v2__from-dropdown__list', {}, [
+
+      ...accountsToRender.map(account => h(AccountListItem, {
+        account,
+        className: 'account-list-item__dropdown',
+        handleClick: () => {
+          onChange(account.address)
+          closeDropdown()
+        },
+        icon: this.getListItemIcon(account.address, to),
+        displayBalance: false,
+        displayAddress: true,
+      })),
+
+    ]),
+
+  ])
+}
+
+ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) {
+  const {
+    to,
+    accounts,
+    closeDropdown,
+    openDropdown,
+  } = this.props
+
+  const matchingAccounts = accounts.filter(({ address }) => address.match(to || ''))
+  const matches = matchingAccounts.length
+
+  if (!matches || matchingAccounts[0].address === to) {
+    this.setState({ accountsToRender: [] })
+    event.target && event.target.select()
+    closeDropdown()
+  } else {
+    this.setState({ accountsToRender: matchingAccounts })
+    openDropdown()
+  }
+  cb && cb(event.target.value)
+}
+
+ToAutoComplete.prototype.componentDidUpdate = function (nextProps, nextState) {
+  if (this.props.to !== nextProps.to) {
+    this.handleInputEvent()
+  }
+}
+
+ToAutoComplete.prototype.render = function () {
+  const {
+    to,
+    dropdownOpen,
+    onChange,
+    inError,
+  } = this.props
+
+  return h('div.send-v2__to-autocomplete', {}, [
+
+    h('input.send-v2__to-autocomplete__input', {
+      placeholder: 'Recipient Address',
+      className: inError ? `send-v2__error-border` : '',
+      value: to,
+      onChange: event => onChange(event.target.value),
+      onFocus: event => this.handleInputEvent(event),
+      style: {
+        borderColor: inError ? 'red' : null,
+      },
+    }),
+
+    !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
+      style: { color: '#dedede' },
+      onClick: () => this.handleInputEvent(),
+    }),
+
+    dropdownOpen && this.renderDropdown(),
+
+  ])
+}
+
diff --git a/ui/app/components/send/usd-fee-display.js b/ui/app/components/send/usd-fee-display.js
new file mode 100644
index 000000000..4cf31a493
--- /dev/null
+++ b/ui/app/components/send/usd-fee-display.js
@@ -0,0 +1,35 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const FiatValue = require('../fiat-value')
+const { getTxFeeBn } = require('../../util')
+
+module.exports = USDFeeDisplay
+
+inherits(USDFeeDisplay, Component)
+function USDFeeDisplay () {
+  Component.call(this)
+}
+
+USDFeeDisplay.prototype.render = function () {
+  const {
+    activeCurrency,
+    conversionRate,
+    gas,
+    gasPrice,
+    blockGasLimit,
+  } = this.props
+
+  return h(FiatValue, {
+    value: getTxFeeBn(gas, gasPrice, blockGasLimit),
+    conversionRate,
+    currentCurrency: activeCurrency,
+    style: {
+      color: '#5d5d5d',
+      fontSize: '16px',
+      fontFamily: 'DIN OT',
+      lineHeight: '22.4px',
+    },
+  })
+}
+
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 8c9686035..2270b8236 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -1,318 +1,242 @@
-const PersistentForm = require('../../lib/persistent-form')
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const Component = require('react').Component
 const connect = require('react-redux').connect
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
-const actions = require('../actions')
-const Qr = require('./qr-code')
-const isValidAddress = require('../util').isValidAddress
-module.exports = connect(mapStateToProps)(ShapeshiftForm)
+const classnames = require('classnames')
+const { qrcode } = require('qrcode-npm')
+const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions')
+const { isValidAddress } = require('../util')
+const SimpleDropdown = require('./dropdowns/simple-dropdown')
 
 function mapStateToProps (state) {
+  const {
+    coinOptions,
+    tokenExchangeRates,
+    selectedAddress,
+  } = state.metamask
+  
   return {
-    warning: state.appState.warning,
-    isSubLoading: state.appState.isSubLoading,
-    qrRequested: state.appState.qrRequested,
+    coinOptions,
+    tokenExchangeRates,
+    selectedAddress,
   }
 }
 
-inherits(ShapeshiftForm, PersistentForm)
+function mapDispatchToProps (dispatch) {
+  return {
+    shapeShiftSubview: () => dispatch(shapeShiftSubview()),
+    pairUpdate: coin => dispatch(pairUpdate(coin)),
+    buyWithShapeShift: data => dispatch(buyWithShapeShift(data)),
+  }
+}
 
+module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm)
+
+inherits(ShapeshiftForm, Component)
 function ShapeshiftForm () {
-  PersistentForm.call(this)
-  this.persistentFormParentId = 'shapeshift-buy-form'
+  Component.call(this)
+
+  this.state = {
+    depositCoin: 'btc',
+    refundAddress: '',
+    showQrCode: false,
+    depositAddress: '',
+    errorMessage: '',
+    isLoading: false,
+    bought: false,
+  }
 }
 
-ShapeshiftForm.prototype.render = function () {
-  return h(ReactCSSTransitionGroup, {
-    className: 'css-transition-group',
-    transitionName: 'main',
-    transitionEnterTimeout: 300,
-    transitionLeaveTimeout: 300,
-  }, [
-    this.props.qrRequested ? h(Qr, {key: 'qr'}) : this.renderMain(),
-  ])
+ShapeshiftForm.prototype.componentWillMount = function () {
+  this.props.shapeShiftSubview()
 }
 
-ShapeshiftForm.prototype.renderMain = function () {
-  const marketinfo = this.props.buyView.formView.marketinfo
-  const coinOptions = this.props.buyView.formView.coinOptions
-  var coin = marketinfo.pair.split('_')[0].toUpperCase()
-
-  return h('.flex-column', {
-    style: {
-      // marginTop: '10px',
-      padding: '25px',
-      width: '100%',
-      alignItems: 'center',
-    },
-  }, [
-    h('.flex-row', {
-      style: {
-        justifyContent: 'center',
-        alignItems: 'baseline',
-      },
-    }, [
-      h('img', {
-        src: coinOptions[coin].image,
-        width: '25px',
-        height: '25px',
-        style: {
-          marginRight: '5px',
-        },
-      }),
-
-      h('.input-container', [
-        h('input#fromCoin.buy-inputs.ex-coins', {
-          type: 'text',
-          list: 'coinList',
-          dataset: {
-            persistentFormId: 'input-coin',
-          },
-          style: {
-            boxSizing: 'border-box',
-          },
-          onChange: this.handleLiveInput.bind(this),
-          defaultValue: 'BTC',
-        }),
-
-        this.renderCoinList(),
+ShapeshiftForm.prototype.onCoinChange = function (e) {
+  const coin = e.target.value
+  this.setState({
+    depositCoin: coin,
+    errorMessage: '',
+  })
+  this.props.pairUpdate(coin)
+}
 
-        h('i.fa.fa-pencil-square-o.edit-text', {
-          style: {
-            fontSize: '12px',
-            color: '#F7861C',
-            position: 'relative',
-            bottom: '48px',
-            left: '106px',
-          },
-        }),
-      ]),
+ShapeshiftForm.prototype.onBuyWithShapeShift = function () {
+  this.setState({
+    isLoading: true,
+    showQrCode: true,
+  })
 
-      h('.icon-control', [
-        h('i.fa.fa-refresh.fa-4.orange', {
-          style: {
-            position: 'relative',
-            bottom: '5px',
-            left: '5px',
-            color: '#F7861C',
-          },
-          onClick: this.updateCoin.bind(this),
-        }),
-        h('i.fa.fa-chevron-right.fa-4.orange', {
-          style: {
-            position: 'relative',
-            bottom: '26px',
-            left: '10px',
-            color: '#F7861C',
-          },
-          onClick: this.updateCoin.bind(this),
-        }),
-      ]),
+  const {
+    buyWithShapeShift,
+    selectedAddress: withdrawal,
+  } = this.props
+  const {
+    refundAddress: returnAddress,
+    depositCoin,
+  } = this.state
+  const pair = `${depositCoin}_eth`
+  const data = {
+    withdrawal,
+    pair,
+    returnAddress,
+    //  Public api key
+    'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
+  }
 
-      h('#toCoin.ex-coins', marketinfo.pair.split('_')[1].toUpperCase()),
+  if (isValidAddress(withdrawal)) {
+    buyWithShapeShift(data)
+      .then(d => this.setState({
+        showQrCode: true,
+        depositAddress: d.deposit,
+        isLoading: false,
+      }))
+      .catch(() => this.setState({
+        showQrCode: false,
+        errorMessage: 'Invalid Request',
+        isLoading: false,
+      }))
+  }
+}
 
-      h('img', {
-        src: coinOptions[marketinfo.pair.split('_')[1].toUpperCase()].image,
-        width: '25px',
-        height: '25px',
-        style: {
-          marginLeft: '5px',
-        },
-      }),
-    ]),
+ShapeshiftForm.prototype.renderMetadata = function (label, value) {
+  return h('div', {className: 'shapeshift-form__metadata-wrapper'}, [
 
-    this.props.isSubLoading ? this.renderLoading() : null,
-    h('.flex-column', {
-      style: {
-        alignItems: 'flex-start',
-      },
-    }, [
-      this.props.warning ? this.props.warning && h('span.error.flex-center', {
-        style: {
-          textAlign: 'center',
-          width: '229px',
-          height: '82px',
-        },
-      },
-        this.props.warning) : this.renderInfo(),
+    h('div.shapeshift-form__metadata-label', {}, [
+      h('span', `${label}:`),
     ]),
 
-    h('.flex-row', {
-      style: {
-        padding: '10px',
-        paddingBottom: '2px',
-        width: '100%',
-      },
-    }, [
-      h('div', 'Receiving address:'),
-      h('.ellip-address', this.props.buyView.buyAddress),
+    h('div.shapeshift-form__metadata-value', {}, [
+      h('span', value),
     ]),
 
-    h(this.activeToggle('.input-container'), {
-      style: {
-        padding: '10px',
-        paddingTop: '0px',
-        width: '100%',
-      },
-    }, [
-      h('div', `${coin} Address:`),
-
-      h('input#fromCoinAddress.buy-inputs', {
-        type: 'text',
-        placeholder: `Your ${coin} Refund Address`,
-        dataset: {
-          persistentFormId: 'refund-address',
-        },
-        style: {
-          boxSizing: 'border-box',
-          width: '278px',
-          height: '20px',
-          padding: ' 5px ',
-        },
-      }),
-
-      h('i.fa.fa-pencil-square-o.edit-text', {
-        style: {
-          fontSize: '12px',
-          color: '#F7861C',
-          position: 'relative',
-          bottom: '5px',
-          right: '11px',
-        },
-      }),
-      h('.flex-row', {
-        style: {
-          justifyContent: 'flex-end',
-        },
-      }, [
-        h('button', {
-          onClick: this.shift.bind(this),
-          style: {
-            marginTop: '10px',
-          },
-        },
-        'Submit'),
-      ]),
-    ]),
   ])
 }
 
-ShapeshiftForm.prototype.shift = function () {
-  var props = this.props
-  var withdrawal = this.props.buyView.buyAddress
-  var returnAddress = document.getElementById('fromCoinAddress').value
-  var pair = this.props.buyView.formView.marketinfo.pair
-  var data = {
-    'withdrawal': withdrawal,
-    'pair': pair,
-    'returnAddress': returnAddress,
-    //  Public api key
-    'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
-  }
-  var message = [
-    `Deposit Limit: ${props.buyView.formView.marketinfo.limit}`,
-    `Deposit Minimum:${props.buyView.formView.marketinfo.minimum}`,
-  ]
-  if (isValidAddress(withdrawal)) {
-    this.props.dispatch(actions.coinShiftRquest(data, message))
-  }
-}
+ShapeshiftForm.prototype.renderMarketInfo = function () {
+  const { depositCoin } = this.state
+  const coinPair = `${depositCoin}_eth`
+  const { tokenExchangeRates } = this.props
+  const {
+    limit,
+    rate,
+    minimum,
+  } = tokenExchangeRates[coinPair] || {}
 
-ShapeshiftForm.prototype.renderCoinList = function () {
-  var list = Object.keys(this.props.buyView.formView.coinOptions).map((item) => {
-    return h('option', {
-      value: item,
-    }, item)
-  })
+  return h('div.shapeshift-form__metadata', {}, [
 
-  return h('datalist#coinList', {
-    onClick: (event) => {
-      event.preventDefault()
-    },
-  }, list)
-}
+    this.renderMetadata('Status', limit ? 'Available' : 'Unavailable'),
+    this.renderMetadata('Limit', limit),
+    this.renderMetadata('Exchange Rate', rate),
+    this.renderMetadata('Minimum', minimum),
 
-ShapeshiftForm.prototype.updateCoin = function (event) {
-  event.preventDefault()
-  const props = this.props
-  var coinOptions = this.props.buyView.formView.coinOptions
-  var coin = document.getElementById('fromCoin').value
-
-  if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
-    var message = 'Not a valid coin'
-    return props.dispatch(actions.displayWarning(message))
-  } else {
-    return props.dispatch(actions.pairUpdate(coin))
-  }
+  ])
 }
 
-ShapeshiftForm.prototype.handleLiveInput = function () {
-  const props = this.props
-  var coinOptions = this.props.buyView.formView.coinOptions
-  var coin = document.getElementById('fromCoin').value
+ShapeshiftForm.prototype.renderQrCode = function () {
+  const { depositAddress, isLoading } = this.state
+  const qrImage = qrcode(4, 'M')
+  qrImage.addData(depositAddress)
+  qrImage.make()
 
-  if (!coinOptions[coin.toUpperCase()] || coin.toUpperCase() === 'ETH') {
-    return null
-  } else {
-    return props.dispatch(actions.pairUpdate(coin))
-  }
-}
+  return h('div.shapeshift-form', {}, [
+
+    h('div.shapeshift-form__deposit-instruction', [
+      'Deposit your BTC to the address below:',
+    ]),
+
+    h('div', depositAddress),
+
+    h('div.shapeshift-form__qr-code', [
+      isLoading
+        ? h('img', {
+          src: 'images/loading.svg',
+          style: { width: '60px'},
+        })
+        : h('div', {
+          dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4) },
+        }),
+    ]),
+
+    this.renderMarketInfo(),
 
-ShapeshiftForm.prototype.renderInfo = function () {
-  const marketinfo = this.props.buyView.formView.marketinfo
-  const coinOptions = this.props.buyView.formView.coinOptions
-  var coin = marketinfo.pair.split('_')[0].toUpperCase()
-
-  return h('span', {
-    style: {
-      marginTop: '10px',
-      marginBottom: '15px',
-    },
-  }, [
-    h('h3.flex-row.text-transform-uppercase', {
-      style: {
-        color: '#868686',
-        paddingTop: '4px',
-        justifyContent: 'space-around',
-        textAlign: 'center',
-        fontSize: '17px',
-      },
-    }, `Market Info for ${marketinfo.pair.replace('_', ' to ').toUpperCase()}:`),
-    h('.marketinfo', ['Status : ', `${coinOptions[coin].status}`]),
-    h('.marketinfo', ['Exchange Rate: ', `${marketinfo.rate}`]),
-    h('.marketinfo', ['Limit: ', `${marketinfo.limit}`]),
-    h('.marketinfo', ['Minimum : ', `${marketinfo.minimum}`]),
   ])
 }
 
-ShapeshiftForm.prototype.handleAddress = function (event) {
-  this.props.dispatch(actions.updateBuyAddress(event.target.value))
-}
 
-ShapeshiftForm.prototype.activeToggle = function (elementType) {
-  if (!this.props.buyView.formView.response || this.props.warning) return elementType
-  return `${elementType}.inactive`
-}
+ShapeshiftForm.prototype.render = function () {
+  const { coinOptions, btnClass } = this.props
+  const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state
+  const coinPair = `${depositCoin}_eth`
+  const { tokenExchangeRates } = this.props
+  const token = tokenExchangeRates[coinPair]
 
-ShapeshiftForm.prototype.renderLoading = function () {
-  return h('span', {
-    style: {
-      position: 'absolute',
-      left: '70px',
-      bottom: '194px',
-      background: 'transparent',
-      width: '229px',
-      height: '82px',
-      display: 'flex',
-      justifyContent: 'center',
-    },
-  }, [
-    h('img', {
-      style: {
-        width: '60px',
-      },
-      src: 'images/loading.svg',
-    }),
-  ])
+  return h('div.shapeshift-form-wrapper', [
+    showQrCode
+      ? this.renderQrCode()
+      : h('div.shapeshift-form', [
+          h('div.shapeshift-form__selectors', [
+
+            h('div.shapeshift-form__selector', [
+
+              h('div.shapeshift-form__selector-label', 'Deposit'),
+
+              h(SimpleDropdown, {
+                selectedOption: this.state.depositCoin,
+                onSelect: this.onCoinChange,
+                options: Object.entries(coinOptions).map(([coin]) => ({
+                  value: coin.toLowerCase(),
+                  displayValue: coin,
+                })),
+              }),
+
+            ]),
+
+            h('div.icon.shapeshift-form__caret', {
+              style: { backgroundImage: 'url(images/caret-right.svg)'},
+            }),
+
+            h('div.shapeshift-form__selector', [
+
+              h('div.shapeshift-form__selector-label', [
+                'Receive',
+              ]),
+
+              h('div.shapeshift-form__selector-input', ['ETH']),
+
+            ]),
+
+          ]),
+
+          h('div', {
+            className: classnames('shapeshift-form__address-input-wrapper', {
+              'shapeshift-form__address-input-wrapper--error': errorMessage,
+            }),
+          }, [
+
+            h('div.shapeshift-form__address-input-label', [
+              'Your Refund Address',
+            ]),
+
+            h('input.shapeshift-form__address-input', {
+              type: 'text',
+              onChange: e => this.setState({
+                refundAddress: e.target.value,
+                errorMessage: '',
+              }),
+            }),
+
+            h('divshapeshift-form__address-input-error-message', [errorMessage]),
+          ]),
+
+          this.renderMarketInfo(),
+
+      ]),
+
+      !depositAddress && h('button.shapeshift-form__shapeshift-buy-btn', {
+        className: btnClass,
+        disabled: !token,
+        onClick: () => this.onBuyWithShapeShift(),
+      }, ['Buy']),
+
+    ])
 }
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 96a7cba6e..017bf9f0c 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -2,20 +2,24 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const vreme = new (require('vreme'))
-const explorerLink = require('../../lib/explorer-link')
+const vreme = new (require('vreme'))()
+const explorerLink = require('etherscan-link').createExplorerLink
 const actions = require('../actions')
 const addressSummary = require('../util').addressSummary
 
 const CopyButton = require('./copyButton')
-const EtherBalance = require('./eth-balance')
+const EthBalance = require('./eth-balance')
 const Tooltip = require('./tooltip')
 
 
 module.exports = connect(mapStateToProps)(ShiftListItem)
 
 function mapStateToProps (state) {
-  return {}
+  return {
+    selectedAddress: state.metamask.selectedAddress,
+    conversionRate: state.metamask.conversionRate,
+    currentCurrency: state.metamask.currentCurrency,
+  }
 }
 
 inherits(ShiftListItem, Component)
@@ -25,37 +29,35 @@ function ShiftListItem () {
 }
 
 ShiftListItem.prototype.render = function () {
-  return (
-    h('.transaction-list-item.flex-row', {
+  return h('div.tx-list-item.tx-list-clickable', {
+    style: {
+      paddingTop: '20px',
+      paddingBottom: '20px',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+    },
+  }, [
+    h('div', {
       style: {
-        paddingTop: '20px',
-        paddingBottom: '20px',
-        justifyContent: 'space-around',
-        alignItems: 'center',
+        width: '0px',
+        position: 'relative',
+        bottom: '19px',
       },
     }, [
-      h('div', {
+      h('img', {
+        src: 'https://info.shapeshift.io/sites/default/files/logo.png',
         style: {
-          width: '0px',
-          position: 'relative',
-          bottom: '19px',
+          height: '35px',
+          width: '132px',
+          position: 'absolute',
+          clip: 'rect(0px,23px,34px,0px)',
         },
-      }, [
-        h('img', {
-          src: 'https://info.shapeshift.io/sites/default/files/logo.png',
-          style: {
-            height: '35px',
-            width: '132px',
-            position: 'absolute',
-            clip: 'rect(0px,23px,34px,0px)',
-          },
-        }),
-      ]),
+      }),
+    ]),
 
-      this.renderInfo(),
-      this.renderUtilComponents(),
-    ])
-  )
+    this.renderInfo(),
+    this.renderUtilComponents(),
+  ])
 }
 
 function formatDate (date) {
@@ -64,6 +66,7 @@ function formatDate (date) {
 
 ShiftListItem.prototype.renderUtilComponents = function () {
   var props = this.props
+  const { conversionRate, currentCurrency } = props
 
   switch (props.response.status) {
     case 'no_deposits':
@@ -94,8 +97,10 @@ ShiftListItem.prototype.renderUtilComponents = function () {
         h(CopyButton, {
           value: this.props.response.transaction,
         }),
-        h(EtherBalance, {
+        h(EthBalance, {
           value: `${props.response.outgoingCoin}`,
+          conversionRate,
+          currentCurrency,
           width: '55px',
           shorten: true,
           needsParse: false,
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
new file mode 100644
index 000000000..c5cc23aa8
--- /dev/null
+++ b/ui/app/components/signature-request.js
@@ -0,0 +1,253 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const Identicon = require('./identicon')
+const connect = require('react-redux').connect
+const ethUtil = require('ethereumjs-util')
+const classnames = require('classnames')
+
+const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
+
+const actions = require('../actions')
+const { conversionUtil } = require('../conversion-util')
+
+const {
+  getSelectedAccount,
+  getCurrentAccountWithSendEtherInfo,
+  getSelectedAddress,
+  accountsWithSendEtherInfoSelector,
+  conversionRateSelector,
+} = require('../selectors.js')
+
+function mapStateToProps (state) {
+  return {
+    balance: getSelectedAccount(state).balance,
+    selectedAccount: getCurrentAccountWithSendEtherInfo(state),
+    selectedAddress: getSelectedAddress(state),
+    requester: null,
+    requesterAddress: null,
+    accounts: accountsWithSendEtherInfoSelector(state),
+    conversionRate: conversionRateSelector(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest)
+
+inherits(SignatureRequest, Component)
+function SignatureRequest (props) {
+  Component.call(this)
+
+  this.state = {
+    selectedAccount: props.selectedAccount,
+    accountDropdownOpen: false,
+  }
+}
+
+SignatureRequest.prototype.renderHeader = function () {
+  return h('div.request-signature__header', [
+
+    h('div.request-signature__header-background'),
+
+    h('div.request-signature__header__text', 'Signature Request'),
+
+    h('div.request-signature__header__tip-container', [
+      h('div.request-signature__header__tip'),
+    ]),
+
+  ])
+}
+
+SignatureRequest.prototype.renderAccountDropdown = function () {
+  const {
+    selectedAccount,
+    accountDropdownOpen,
+  } = this.state
+
+  const {
+    accounts,
+  } = this.props
+
+  return h('div.request-signature__account', [
+
+    h('div.request-signature__account-text', ['Account:']),
+
+    h(AccountDropdownMini, {
+      selectedAccount,
+      accounts,
+      onSelect: selectedAccount => this.setState({ selectedAccount }),
+      dropdownOpen: accountDropdownOpen,
+      openDropdown: () => this.setState({ accountDropdownOpen: true }),
+      closeDropdown: () => this.setState({ accountDropdownOpen: false }),
+    }),
+
+  ])
+}
+
+SignatureRequest.prototype.renderBalance = function () {
+  const { balance, conversionRate } = this.props
+
+  const balanceInEther = conversionUtil(balance, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromDenomination: 'WEI',
+    numberOfDecimals: 6,
+    conversionRate,
+  })
+
+  return h('div.request-signature__balance', [
+
+    h('div.request-signature__balance-text', ['Balance:']),
+
+    h('div.request-signature__balance-value', `${balanceInEther} ETH`),
+
+  ])
+}
+
+SignatureRequest.prototype.renderAccountInfo = function () {
+  return h('div.request-signature__account-info', [
+
+    this.renderAccountDropdown(),
+
+    this.renderRequestIcon(),
+
+    this.renderBalance(),
+
+  ])
+}
+
+SignatureRequest.prototype.renderRequestIcon = function () {
+  const { requesterAddress } = this.props
+
+  return h('div.request-signature__request-icon', [
+    h(Identicon, {
+      diameter: 40,
+      address: requesterAddress,
+    }),
+  ])
+}
+
+SignatureRequest.prototype.renderRequestInfo = function () {
+  return h('div.request-signature__request-info', [
+
+    h('div.request-signature__headline', [
+      `Your signature is being requested`,
+    ]),
+
+  ])
+}
+
+SignatureRequest.prototype.msgHexToText = function (hex) {
+  try {
+    const stripped = ethUtil.stripHexPrefix(hex)
+    const buff = Buffer.from(stripped, 'hex')
+    return buff.toString('utf8')
+  } catch (e) {
+    return hex
+  }
+}
+
+SignatureRequest.prototype.renderBody = function () {
+  let rows
+  let notice = 'You are signing:'
+
+  const { txData } = this.props
+  const { type, msgParams: { data } } = txData
+
+  if (type === 'personal_sign') {
+    rows = [{ name: 'Message', value: this.msgHexToText(data) }]
+  } else if (type === 'eth_signTypedData') {
+    rows = data
+  } else if (type === 'eth_sign') {
+    rows = [{ name: 'Message', value: data }]
+    notice = `Signing this message can have
+    dangerous side effects. Only sign messages from
+    sites you fully trust with your entire account.
+    This dangerous method will be removed in a future version. `
+  }
+
+  return h('div.request-signature__body', {}, [
+
+    this.renderAccountInfo(),
+
+    this.renderRequestInfo(),
+
+    h('div.request-signature__notice', {
+      className: classnames({
+        'request-signature__notice': type === 'personal_sign' || type === 'eth_signTypedData',
+        'request-signature__warning': type === 'eth_sign',
+      }),
+    }, [notice]),
+
+    h('div.request-signature__rows', [
+
+      ...rows.map(({ name, value }) => {
+        return h('div.request-signature__row', [
+          h('div.request-signature__row-title', [`${name}:`]),
+          h('div.request-signature__row-value', value),
+        ])
+      }),
+
+    ]),
+
+  ])
+}
+
+SignatureRequest.prototype.renderFooter = function () {
+  const {
+    signPersonalMessage,
+    signTypedMessage,
+    cancelPersonalMessage,
+    cancelTypedMessage,
+    signMessage,
+    cancelMessage,
+  } = this.props
+
+  const { txData } = this.props
+  const { type } = txData
+
+  let cancel
+  let sign
+  if (type === 'personal_sign') {
+    cancel = cancelPersonalMessage
+    sign = signPersonalMessage
+  } else if (type === 'eth_signTypedData') {
+    cancel = cancelTypedMessage
+    sign = signTypedMessage
+  } else if (type === 'eth_sign') {
+    cancel = cancelMessage
+    sign = signMessage
+  }
+
+  return h('div.request-signature__footer', [
+    h('button.request-signature__footer__cancel-button', {
+      onClick: cancel,
+    }, 'CANCEL'),
+    h('button.request-signature__footer__sign-button', {
+      onClick: sign,
+    }, 'SIGN'),
+  ])
+}
+
+SignatureRequest.prototype.render = function () {
+  return (
+
+    h('div.request-signature__container', [
+
+      this.renderHeader(),
+
+      this.renderBody(),
+
+      this.renderFooter(),
+
+    ])
+
+  )
+
+}
+
diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js
index 65078e0a4..a80640116 100644
--- a/ui/app/components/tab-bar.js
+++ b/ui/app/components/tab-bar.js
@@ -1,35 +1,47 @@
-const Component = require('react').Component
+const { Component } = require('react')
 const h = require('react-hyperscript')
-const inherits = require('util').inherits
+const PropTypes = require('prop-types')
+const classnames = require('classnames')
 
-module.exports = TabBar
+class TabBar extends Component {
+  constructor (props) {
+    super(props)
+    const { defaultTab, tabs } = props
 
-inherits(TabBar, Component)
-function TabBar () {
-  Component.call(this)
-}
+    this.state = {
+      subview: defaultTab || tabs[0].key,
+    }
+  }
+
+  render () {
+    const { tabs = [], tabSelected } = this.props
+    const { subview } = this.state
 
-TabBar.prototype.render = function () {
-  const props = this.props
-  const state = this.state || {}
-  const { tabs = [], defaultTab, tabSelected } = props
-  const { subview = defaultTab } = state
+    return (
+      h('.tab-bar', {}, [
+        tabs.map((tab) => {
+          const { key, content } = tab
+          return h('div', {
+            className: classnames('tab-bar__tab pointer', {
+              'tab-bar__tab--active': subview === key,
+            }),
+            onClick: () => {
+              this.setState({ subview: key })
+              tabSelected(key)
+            },
+            key,
+          }, content)
+        }),
+        h('div.tab-bar__tab.tab-bar__grow-tab'),
+      ])
+    )
+  }
+}
 
-  return (
-    h('.flex-row.space-around.text-transform-uppercase', {
-      style: {
-        background: '#EBEBEB',
-        color: '#AEAEAE',
-        paddingTop: '4px',
-      },
-    }, tabs.map((tab) => {
-      const { key, content } = tab
-      return h(subview === key ? '.activeForm' : '.inactiveForm.pointer', {
-        onClick: () => {
-          this.setState({ subview: key })
-          tabSelected(key)
-        },
-      }, content)
-    }))
-  )
+TabBar.propTypes = {
+  defaultTab: PropTypes.string,
+  tabs: PropTypes.array,
+  tabSelected: PropTypes.func,
 }
+
+module.exports = TabBar
diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js
new file mode 100644
index 000000000..2f71c0687
--- /dev/null
+++ b/ui/app/components/token-balance.js
@@ -0,0 +1,113 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const TokenTracker = require('eth-token-tracker')
+const connect = require('react-redux').connect
+const selectors = require('../selectors')
+
+function mapStateToProps (state) {
+  return {
+    userAddress: selectors.getSelectedAddress(state),
+  }
+}
+
+module.exports = connect(mapStateToProps)(TokenBalance)
+
+
+inherits(TokenBalance, Component)
+function TokenBalance () {
+  this.state = {
+    string: '',
+    symbol: '',
+    isLoading: true,
+    error: null,
+  }
+  Component.call(this)
+}
+
+TokenBalance.prototype.render = function () {
+  const state = this.state
+  const { symbol, string, isLoading } = state
+  const { balanceOnly } = this.props
+
+  return isLoading
+    ? h('span', '')
+    : h('span.token-balance', [
+      h('span.token-balance__amount', string),
+      !balanceOnly && h('span.token-balance__symbol', symbol),
+    ])
+}
+
+TokenBalance.prototype.componentDidMount = function () {
+  this.createFreshTokenTracker()
+}
+
+TokenBalance.prototype.createFreshTokenTracker = function () {
+  if (this.tracker) {
+    // Clean up old trackers when refreshing:
+    this.tracker.stop()
+    this.tracker.removeListener('update', this.balanceUpdater)
+    this.tracker.removeListener('error', this.showError)
+  }
+
+  if (!global.ethereumProvider) return
+  const { userAddress, token } = this.props
+
+  this.tracker = new TokenTracker({
+    userAddress,
+    provider: global.ethereumProvider,
+    tokens: [token],
+    pollingInterval: 8000,
+  })
+
+
+  // Set up listener instances for cleaning up
+  this.balanceUpdater = this.updateBalance.bind(this)
+  this.showError = error => {
+    this.setState({ error, isLoading: false })
+  }
+  this.tracker.on('update', this.balanceUpdater)
+  this.tracker.on('error', this.showError)
+
+  this.tracker.updateBalances()
+    .then(() => {
+      this.updateBalance(this.tracker.serialize())
+    })
+    .catch((reason) => {
+      log.error(`Problem updating balances`, reason)
+      this.setState({ isLoading: false })
+    })
+}
+
+TokenBalance.prototype.componentDidUpdate = function (nextProps) {
+  const {
+    userAddress: oldAddress,
+    token: { address: oldTokenAddress },
+  } = this.props
+  const {
+    userAddress: newAddress,
+    token: { address: newTokenAddress },
+  } = nextProps
+
+  if ((!oldAddress || !newAddress) && (!oldTokenAddress || !newTokenAddress)) return
+  if ((oldAddress === newAddress) && (oldTokenAddress === newTokenAddress)) return
+
+  this.setState({ isLoading: true })
+  this.createFreshTokenTracker()
+}
+
+TokenBalance.prototype.updateBalance = function (tokens = []) {
+  const [{ string, symbol }] = tokens
+
+  this.setState({
+    string,
+    symbol,
+    isLoading: false,
+  })
+}
+
+TokenBalance.prototype.componentWillUnmount = function () {
+  if (!this.tracker) return
+  this.tracker.stop()
+}
+
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
new file mode 100644
index 000000000..0332fde88
--- /dev/null
+++ b/ui/app/components/token-cell.js
@@ -0,0 +1,176 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const connect = require('react-redux').connect
+const Identicon = require('./identicon')
+const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
+const selectors = require('../selectors')
+const actions = require('../actions')
+const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
+
+const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    currentCurrency: state.metamask.currentCurrency,
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+    userAddress: selectors.getSelectedAddress(state),
+    tokenExchangeRates: state.metamask.tokenExchangeRates,
+    conversionRate: state.metamask.conversionRate,
+    sidebarOpen: state.appState.sidebarOpen,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setSelectedToken: address => dispatch(actions.setSelectedToken(address)),
+    updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)),
+    hideSidebar: () => dispatch(actions.hideSidebar()),
+  }
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell)
+
+inherits(TokenCell, Component)
+function TokenCell () {
+  Component.call(this)
+
+  this.state = {
+    tokenMenuOpen: false,
+  }
+}
+
+TokenCell.prototype.componentWillMount = function () {
+  const {
+    updateTokenExchangeRate,
+    symbol,
+  } = this.props
+
+  updateTokenExchangeRate(symbol)
+}
+
+TokenCell.prototype.render = function () {
+  const { tokenMenuOpen } = this.state
+  const props = this.props
+  const {
+    address,
+    symbol,
+    string,
+    network,
+    setSelectedToken,
+    selectedTokenAddress,
+    tokenExchangeRates,
+    conversionRate,
+    hideSidebar,
+    sidebarOpen,
+    currentCurrency,
+    // userAddress,
+  } = props
+
+  const pair = `${symbol.toLowerCase()}_eth`
+
+  let currentTokenToFiatRate
+  let currentTokenInFiat
+  let formattedFiat = ''
+
+  if (tokenExchangeRates[pair]) {
+    currentTokenToFiatRate = multiplyCurrencies(
+      tokenExchangeRates[pair].rate,
+      conversionRate
+    )
+    currentTokenInFiat = conversionUtil(string, {
+      fromNumericBase: 'dec',
+      fromCurrency: symbol,
+      toCurrency: currentCurrency.toUpperCase(),
+      numberOfDecimals: 2,
+      conversionRate: currentTokenToFiatRate,
+    })
+    formattedFiat = currentTokenInFiat.toString() === '0'
+      ? ''
+      : `${currentTokenInFiat} ${currentCurrency.toUpperCase()}`
+  }
+
+  const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol
+
+  return (
+    h('div.token-list-item', {
+      className: `token-list-item ${selectedTokenAddress === address ? 'token-list-item--active' : ''}`,
+      // style: { cursor: network === '1' ? 'pointer' : 'default' },
+      // onClick: this.view.bind(this, address, userAddress, network),
+      onClick: () => {
+        setSelectedToken(address)
+        selectedTokenAddress !== address && sidebarOpen && hideSidebar()
+      },
+    }, [
+
+      h(Identicon, {
+        className: 'token-list-item__identicon',
+        diameter: 50,
+        address,
+        network,
+      }),
+
+      h('div.token-list-item__balance-ellipsis', null, [
+        h('div.token-list-item__balance-wrapper', null, [
+          h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
+
+          showFiat && h('div.token-list-item__fiat-amount', {
+            style: {},
+          }, formattedFiat),
+        ]),
+
+        h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
+          onClick: (e) => {
+            e.stopPropagation()
+            this.setState({ tokenMenuOpen: true })
+          },
+        }),
+
+      ]),
+
+
+      tokenMenuOpen && h(TokenMenuDropdown, {
+        onClose: () => this.setState({ tokenMenuOpen: false }),
+        token: { symbol, address },
+      }),
+
+      /*
+      h('button', {
+        onClick: this.send.bind(this, address),
+      }, 'SEND'),
+      */
+
+    ])
+  )
+}
+
+TokenCell.prototype.send = function (address, event) {
+  event.preventDefault()
+  event.stopPropagation()
+  const url = tokenFactoryFor(address)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
+TokenCell.prototype.view = function (address, userAddress, network, event) {
+  const url = etherscanLinkFor(address, userAddress, network)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
+function navigateTo (url) {
+  global.platform.openWindow({ url })
+}
+
+function etherscanLinkFor (tokenAddress, address, network) {
+  const prefix = prefixForNetwork(network)
+  return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}`
+}
+
+function tokenFactoryFor (tokenAddress) {
+  return `https://tokenfactory.surge.sh/#/token/${tokenAddress}`
+}
+
diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js
new file mode 100644
index 000000000..8e06e0f27
--- /dev/null
+++ b/ui/app/components/token-list.js
@@ -0,0 +1,173 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const TokenTracker = require('eth-token-tracker')
+const TokenCell = require('./token-cell.js')
+const connect = require('react-redux').connect
+const selectors = require('../selectors')
+
+function mapStateToProps (state) {
+  return {
+    network: state.metamask.network,
+    tokens: state.metamask.tokens,
+    userAddress: selectors.getSelectedAddress(state),
+  }
+}
+
+const defaultTokens = []
+const contracts = require('eth-contract-metadata')
+for (const address in contracts) {
+  const contract = contracts[address]
+  if (contract.erc20) {
+    contract.address = address
+    defaultTokens.push(contract)
+  }
+}
+
+module.exports = connect(mapStateToProps)(TokenList)
+
+inherits(TokenList, Component)
+function TokenList () {
+  this.state = {
+    tokens: [],
+    isLoading: true,
+    network: null,
+  }
+  Component.call(this)
+}
+
+TokenList.prototype.render = function () {
+  const { userAddress } = this.props
+  const state = this.state
+  const { tokens, isLoading, error } = state
+
+  if (isLoading) {
+    return this.message('Loading Tokens...')
+  }
+
+  if (error) {
+    log.error(error)
+    return h('.hotFix', {
+      style: {
+        padding: '80px',
+      },
+    }, [
+      'We had trouble loading your token balances. You can view them ',
+      h('span.hotFix', {
+        style: {
+          color: 'rgba(247, 134, 28, 1)',
+          cursor: 'pointer',
+        },
+        onClick: () => {
+          global.platform.openWindow({
+          url: `https://ethplorer.io/address/${userAddress}`,
+        })
+        },
+      }, 'here'),
+    ])
+  }
+
+  return h('div', tokens.map((tokenData) => h(TokenCell, tokenData)))
+
+}
+
+TokenList.prototype.message = function (body) {
+  return h('div', {
+    style: {
+      display: 'flex',
+      height: '250px',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '30px',
+    },
+  }, body)
+}
+
+TokenList.prototype.componentDidMount = function () {
+  this.createFreshTokenTracker()
+}
+
+TokenList.prototype.createFreshTokenTracker = function () {
+  if (this.tracker) {
+    // Clean up old trackers when refreshing:
+    this.tracker.stop()
+    this.tracker.removeListener('update', this.balanceUpdater)
+    this.tracker.removeListener('error', this.showError)
+  }
+
+  if (!global.ethereumProvider) return
+  const { userAddress } = this.props
+
+  this.tracker = new TokenTracker({
+    userAddress,
+    provider: global.ethereumProvider,
+    tokens: this.props.tokens,
+    pollingInterval: 8000,
+  })
+
+
+  // Set up listener instances for cleaning up
+  this.balanceUpdater = this.updateBalances.bind(this)
+  this.showError = (error) => {
+    this.setState({ error, isLoading: false })
+  }
+  this.tracker.on('update', this.balanceUpdater)
+  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 })
+  })
+}
+
+TokenList.prototype.componentDidUpdate = function (nextProps) {
+  const {
+    network: oldNet,
+    userAddress: oldAddress,
+    tokens,
+  } = this.props
+  const {
+    network: newNet,
+    userAddress: newAddress,
+    tokens: newTokens,
+  } = nextProps
+
+  const isLoading = newNet === 'loading'
+  const missingInfo = !oldNet || !newNet || !oldAddress || !newAddress
+  const sameUserAndNetwork = oldAddress === newAddress && oldNet === newNet
+  const shouldUpdateTokens = isLoading || missingInfo || sameUserAndNetwork
+
+  const oldTokensLength = tokens ? tokens.length : 0
+  const tokensLengthUnchanged = oldTokensLength === newTokens.length
+
+  if (tokensLengthUnchanged && shouldUpdateTokens) return
+
+  this.setState({ isLoading: true })
+  this.createFreshTokenTracker()
+}
+
+TokenList.prototype.updateBalances = function (tokens) {
+  this.setState({ tokens, isLoading: false })
+}
+
+TokenList.prototype.componentWillUnmount = function () {
+  if (!this.tracker) return
+  this.tracker.stop()
+}
+
+// function uniqueMergeTokens (tokensA, tokensB = []) {
+//   const uniqueAddresses = []
+//   const result = []
+//   tokensA.concat(tokensB).forEach((token) => {
+//     const normal = normalizeAddress(token.address)
+//     if (!uniqueAddresses.includes(normal)) {
+//       uniqueAddresses.push(normal)
+//       result.push(token)
+//     }
+//   })
+//   return result
+// }
diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/tooltip-v2.js
new file mode 100644
index 000000000..133a0f16a
--- /dev/null
+++ b/ui/app/components/tooltip-v2.js
@@ -0,0 +1,31 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ReactTippy = require('react-tippy').Tooltip
+
+module.exports = Tooltip
+
+inherits(Tooltip, Component)
+function Tooltip () {
+  Component.call(this)
+}
+
+Tooltip.prototype.render = function () {
+  const props = this.props
+  const { position, title, children, wrapperClassName } = props
+
+  return h('div', {
+      className: wrapperClassName,
+    }, [
+
+    h(ReactTippy, {
+      title,
+      position: position || 'left',
+      trigger: 'mouseenter',
+      hideOnClick: false,
+      size: 'small',
+      arrow: true,
+    }, children),
+
+  ])
+}
diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js
index edbc074bb..efab2c497 100644
--- a/ui/app/components/tooltip.js
+++ b/ui/app/components/tooltip.js
@@ -17,6 +17,6 @@ Tooltip.prototype.render = function () {
   return h(ReactTooltip, {
     position: position || 'left',
     title,
-    fixed: false,
+    fixed: true,
   }, children)
 }
diff --git a/ui/app/components/transaction-list-item-icon.js b/ui/app/components/transaction-list-item-icon.js
index ca2781451..f442b05af 100644
--- a/ui/app/components/transaction-list-item-icon.js
+++ b/ui/app/components/transaction-list-item-icon.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const Tooltip = require('./tooltip')
 
 const Identicon = require('./identicon')
 
@@ -15,7 +16,7 @@ TransactionIcon.prototype.render = function () {
   const { transaction, txParams, isMsg } = this.props
   switch (transaction.status) {
     case 'unapproved':
-      return h( !isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg')
+      return h(!isMsg ? '.unapproved-tx-icon' : 'i.fa.fa-certificate.fa-lg')
 
     case 'rejected':
       return h('i.fa.fa-exclamation-triangle.fa-lg.warning', {
@@ -32,11 +33,16 @@ TransactionIcon.prototype.render = function () {
       })
 
     case 'submitted':
-      return h('i.fa.fa-ellipsis-h', {
-        style: {
-          fontSize: '27px',
-        },
-      })
+      return h(Tooltip, {
+        title: 'Pending',
+        position: 'right',
+      }, [
+        h('i.fa.fa-ellipsis-h', {
+          style: {
+            fontSize: '27px',
+          },
+        }),
+      ])
   }
 
   if (isMsg) {
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 9fef52355..4e3d2cb93 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -1,25 +1,42 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const connect = require('react-redux').connect
 
-const EtherBalance = require('./eth-balance')
+const EthBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
-const explorerLink = require('../../lib/explorer-link')
+const explorerLink = require('etherscan-link').createExplorerLink
 const CopyButton = require('./copyButton')
-const vreme = new (require('vreme'))
+const vreme = new (require('vreme'))()
 const Tooltip = require('./tooltip')
+const numberToBN = require('number-to-bn')
+const actions = require('../actions')
 
 const TransactionIcon = require('./transaction-list-item-icon')
 const ShiftListItem = require('./shift-list-item')
-module.exports = TransactionListItem
+
+const mapDispatchToProps = dispatch => {
+  return {
+    retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)),
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(TransactionListItem)
 
 inherits(TransactionListItem, Component)
 function TransactionListItem () {
   Component.call(this)
 }
 
+TransactionListItem.prototype.showRetryButton = function () {
+  const { transaction = {} } = this.props
+  const { status, time } = transaction
+  return status === 'submitted' && Date.now() - time > 30000
+}
+
 TransactionListItem.prototype.render = function () {
-  const { transaction, network } = this.props
+  const { transaction, network, conversionRate, currentCurrency } = this.props
+  const { status } = transaction
   if (transaction.key === 'shapeshift') {
     if (network === '1') return h(ShiftListItem, transaction)
   }
@@ -27,11 +44,11 @@ TransactionListItem.prototype.render = function () {
 
   let isLinkable = false
   const numericNet = parseInt(network)
-  isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 42
+  isLinkable = numericNet === 1 || numericNet === 3 || numericNet === 4 || numericNet === 42
 
   var isMsg = ('msgParams' in transaction)
   var isTx = ('txParams' in transaction)
-  var isPending = transaction.status === 'unapproved'
+  var isPending = status === 'unapproved'
   let txParams
   if (isTx) {
     txParams = transaction.txParams
@@ -39,9 +56,11 @@ TransactionListItem.prototype.render = function () {
     txParams = transaction.msgParams
   }
 
+  const nonce = txParams.nonce ? numberToBN(txParams.nonce).toString(10) : ''
+
   const isClickable = ('hash' in transaction && isLinkable) || isPending
   return (
-    h(`.transaction-list-item.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
+    h('.transaction-list-item.flex-column', {
       onClick: (event) => {
         if (isPending) {
           this.props.showTx(transaction.id)
@@ -53,42 +72,92 @@ TransactionListItem.prototype.render = function () {
       },
       style: {
         padding: '20px 0',
+        alignItems: 'center',
       },
     }, [
+      h(`.flex-row.flex-space-between${isClickable ? '.pointer' : ''}`, {
+        style: {
+          width: '100%',
+        },
+      }, [
+        h('.identicon-wrapper.flex-column.flex-center.select-none', [
+          h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
+        ]),
 
-      h('.identicon-wrapper.flex-column.flex-center.select-none', [
-        h('.pop-hover', {
-          onClick: (event) => {
-            event.stopPropagation()
-            if (!isTx || isPending) return
-            var url = `https://metamask.github.io/eth-tx-viz/?tx=${transaction.hash}`
-            global.platform.openWindow({ url })
-          },
+        h(Tooltip, {
+          title: 'Transaction Number',
+          position: 'right',
         }, [
-          h(TransactionIcon, { txParams, transaction, isTx, isMsg }),
+          h('span', {
+            style: {
+              display: 'flex',
+              cursor: 'normal',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '10px',
+            },
+          }, nonce),
         ]),
-      ]),
 
-      h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
-        domainField(txParams),
-        h('div', date),
-        recipientField(txParams, transaction, isTx, isMsg),
-      ]),
+        h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
+          domainField(txParams),
+          h('div', date),
+          recipientField(txParams, transaction, isTx, isMsg),
+        ]),
 
-      // Places a copy button if tx is successful, else places a placeholder empty div.
-      transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
+        // Places a copy button if tx is successful, else places a placeholder empty div.
+        transaction.hash ? h(CopyButton, { value: transaction.hash }) : h('div', {style: { display: 'flex', alignItems: 'center', width: '26px' }}),
+
+        isTx ? h(EthBalance, {
+          value: txParams.value,
+          conversionRate,
+          currentCurrency,
+          width: '55px',
+          shorten: true,
+          showFiat: false,
+          style: {fontSize: '15px'},
+        }) : h('.flex-column'),
+      ]),
 
-      isTx ? h(EtherBalance, {
-        value: txParams.value,
-        width: '55px',
-        shorten: true,
-        showFiat: false,
-        style: {fontSize: '15px'},
-      }) : h('.flex-column'),
+      this.showRetryButton() && h('.transition-list-item__retry.grow-on-hover', {
+        onClick: event => {
+          event.stopPropagation()
+          this.resubmit()
+        },
+        style: {
+          height: '22px',
+          borderRadius: '22px',
+          color: '#F9881B',
+          padding: '0 20px',
+          backgroundColor: '#FFE3C9',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          fontSize: '8px',
+          cursor: 'pointer',
+        },
+      }, [
+        h('div', {
+          style: {
+            paddingRight: '2px',
+          },
+        }, 'Taking too long?'),
+        h('div', {
+          style: {
+            textDecoration: 'underline',
+          },
+        }, 'Retry with a higher gas price here'),
+      ]),
     ])
   )
 }
 
+TransactionListItem.prototype.resubmit = function () {
+  const { transaction } = this.props
+  this.props.retryTransaction(transaction.id)
+}
+
 function domainField (txParams) {
   return h('div', {
     style: {
@@ -121,7 +190,7 @@ function recipientField (txParams, transaction, isTx, isMsg) {
     },
   }, [
     message,
-    failIfFailed(transaction),
+    renderErrorOrWarning(transaction),
   ])
 }
 
@@ -129,18 +198,41 @@ function formatDate (date) {
   return vreme.format(new Date(date), 'March 16 2014 14:30')
 }
 
-function failIfFailed (transaction) {
-  if (transaction.status === 'rejected') {
+function renderErrorOrWarning (transaction) {
+  const { status } = transaction
+
+  // show rejected
+  if (status === 'rejected') {
     return h('span.error', ' (Rejected)')
   }
-  if (transaction.err) {
-
-    return h(Tooltip, {
-      title: transaction.err.message,
-      position: 'bottom',
-    }, [
-      h('span.error', ' (Failed)'),
-    ])
+  if (transaction.err || transaction.warning) {
+    const { err, warning = {} } = transaction
+    const errFirst = !!((err && warning) || err)
+
+    errFirst ? err.message : warning.message
+
+    // show error
+    if (err) {
+      const message = err.message || ''
+      return (
+          h(Tooltip, {
+            title: message,
+            position: 'bottom',
+          }, [
+            h(`span.error`, ` (Failed)`),
+          ])
+      )
+    }
+
+    // show warning
+    if (warning) {
+      const message = warning.message
+      return h(Tooltip, {
+        title: message,
+        position: 'bottom',
+      }, [
+        h(`span.warning`, ` (Warning)`),
+      ])
+    }
   }
-
 }
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 3ae953637..69b72614c 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -13,7 +13,7 @@ function TransactionList () {
 }
 
 TransactionList.prototype.render = function () {
-  const { transactions, network, unapprovedMsgs } = this.props
+  const { transactions, network, unapprovedMsgs, conversionRate } = this.props
 
   var shapeShiftTxList
   if (network === '1') {
@@ -24,7 +24,11 @@ TransactionList.prototype.render = function () {
 
   return (
 
-    h('section.transaction-list', [
+    h('section.transaction-list.full-flex-height', {
+      style: {
+        justifyContent: 'center',
+      },
+    }, [
 
       h('style', `
         .transaction-list .transaction-list-item:not(:last-of-type) {
@@ -36,21 +40,10 @@ TransactionList.prototype.render = function () {
         }
       `),
 
-      h('h3.flex-center.text-transform-uppercase', {
-        style: {
-          background: '#EBEBEB',
-          color: '#AEAEAE',
-          paddingTop: '4px',
-          paddingBottom: '4px',
-        },
-      }, [
-        'History',
-      ]),
-
       h('.tx-list', {
         style: {
           overflowY: 'auto',
-          height: '300px',
+          height: '100%',
           padding: '0 20px',
           textAlign: 'center',
         },
@@ -69,18 +62,23 @@ TransactionList.prototype.render = function () {
             }
             return h(TransactionListItem, {
               transaction, i, network, key,
+              conversionRate,
               showTx: (txId) => {
                 this.props.viewPendingTx(txId)
               },
             })
           })
-        : h('.flex-center', {
+        : h('.flex-center.full-flex-height', {
           style: {
             flexDirection: 'column',
-            height: '100%',
+            justifyContent: 'center',
           },
         }, [
-          'No transaction history.',
+          h('p', {
+            style: {
+              marginTop: '50px',
+            },
+          }, 'No transaction history.'),
         ]),
       ]),
     ])
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
new file mode 100644
index 000000000..7ccc5c315
--- /dev/null
+++ b/ui/app/components/tx-list-item.js
@@ -0,0 +1,245 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const inherits = require('util').inherits
+const classnames = require('classnames')
+const abi = require('human-standard-token-abi')
+const abiDecoder = require('abi-decoder')
+abiDecoder.addABI(abi)
+const Identicon = require('./identicon')
+const contractMap = require('eth-contract-metadata')
+
+const { conversionUtil, multiplyCurrencies } = require('../conversion-util')
+const { calcTokenAmount } = require('../token-util')
+
+const { getCurrentCurrency } = require('../selectors')
+
+module.exports = connect(mapStateToProps)(TxListItem)
+
+function mapStateToProps (state) {
+  return {
+    tokens: state.metamask.tokens,
+    currentCurrency: getCurrentCurrency(state),
+    tokenExchangeRates: state.metamask.tokenExchangeRates,
+  }
+}
+
+inherits(TxListItem, Component)
+function TxListItem () {
+  Component.call(this)
+
+  this.state = {
+    total: null,
+    fiatTotal: null,
+  }
+}
+
+TxListItem.prototype.componentDidMount = async function () {
+  const { txParams = {} } = this.props
+
+  const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+  const { name: txDataName } = decodedData || {}
+
+  const { total, fiatTotal } = txDataName === 'transfer'
+    ? await this.getSendTokenTotal()
+    : this.getSendEtherTotal()
+
+  this.setState({ total, fiatTotal })
+}
+
+TxListItem.prototype.getAddressText = function () {
+  const {
+    address,
+    txParams = {},
+  } = this.props
+
+  const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+  const { name: txDataName, params = [] } = decodedData || {}
+  const { value } = params[0] || {}
+
+  switch (txDataName) {
+    case 'transfer':
+      return `${value.slice(0, 10)}...${value.slice(-4)}`
+    default:
+      return address
+        ? `${address.slice(0, 10)}...${address.slice(-4)}`
+        : 'Contract Published'
+  }
+}
+
+TxListItem.prototype.getSendEtherTotal = function () {
+  const {
+    transactionAmount,
+    conversionRate,
+    address,
+    currentCurrency,
+  } = this.props
+
+  if (!address) {
+    return {}
+  }
+
+  const totalInFiat = conversionUtil(transactionAmount, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: currentCurrency,
+    fromDenomination: 'WEI',
+    numberOfDecimals: 2,
+    conversionRate,
+  })
+  const totalInETH = conversionUtil(transactionAmount, {
+    fromNumericBase: 'hex',
+    toNumericBase: 'dec',
+    fromCurrency: 'ETH',
+    toCurrency: 'ETH',
+    fromDenomination: 'WEI',
+    conversionRate,
+    numberOfDecimals: 6,
+  })
+
+  return {
+    total: `${totalInETH} ETH`,
+    fiatTotal: `${totalInFiat} ${currentCurrency.toUpperCase()}`,
+  }
+}
+
+TxListItem.prototype.getTokenInfo = async function () {
+  const { txParams = {}, tokenInfoGetter, tokens } = this.props
+  const toAddress = txParams.to
+
+  let decimals
+  let symbol
+
+  ({ decimals, symbol } = tokens.filter(({ address }) => address === toAddress)[0] || {})
+
+  if (!decimals && !symbol) {
+    ({ decimals, symbol } = contractMap[toAddress] || {})
+  }
+
+  if (!decimals && !symbol) {
+    ({ decimals, symbol } = await tokenInfoGetter(toAddress))
+  }
+
+  return { decimals, symbol }
+}
+
+TxListItem.prototype.getSendTokenTotal = async function () {
+  const {
+    txParams = {},
+    conversionRate,
+    tokenExchangeRates,
+    currentCurrency,
+  } = this.props
+
+  const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+  const { params = [] } = decodedData || {}
+  const { value } = params[1] || {}
+  const { decimals, symbol } = await this.getTokenInfo()
+  const total = calcTokenAmount(value, decimals)
+
+  const pair = symbol && `${symbol.toLowerCase()}_eth`
+
+  let tokenToFiatRate
+  let totalInFiat
+
+  if (tokenExchangeRates[pair]) {
+    tokenToFiatRate = multiplyCurrencies(
+      tokenExchangeRates[pair].rate,
+      conversionRate
+    )
+
+    totalInFiat = conversionUtil(total, {
+      fromNumericBase: 'dec',
+      toNumericBase: 'dec',
+      fromCurrency: symbol,
+      toCurrency: currentCurrency,
+      numberOfDecimals: 2,
+      conversionRate: tokenToFiatRate,
+    })
+  }
+
+  const showFiat = Boolean(totalInFiat) && currentCurrency.toUpperCase() !== symbol
+
+  return {
+    total: `${total} ${symbol}`,
+    fiatTotal: showFiat && `${totalInFiat} ${currentCurrency.toUpperCase()}`,
+  }
+}
+
+TxListItem.prototype.render = function () {
+  const {
+    transactionStatus,
+    transactionAmount,
+    onClick,
+    transActionId,
+    dateString,
+    address,
+    className,
+  } = this.props
+  const { total, fiatTotal } = this.state
+  const showFiatTotal = transactionAmount !== '0x0' && fiatTotal
+
+  return h(`div${className || ''}`, {
+    key: transActionId,
+    onClick: () => onClick && onClick(transActionId),
+  }, [
+    h(`div.flex-column.tx-list-item-wrapper`, {}, [
+
+      h('div.tx-list-date-wrapper', {
+        style: {},
+      }, [
+        h('span.tx-list-date', {}, [
+          dateString,
+        ]),
+      ]),
+
+      h('div.flex-row.tx-list-content-wrapper', {
+        style: {},
+      }, [
+
+        h('div.tx-list-identicon-wrapper', {
+          style: {},
+        }, [
+          h(Identicon, {
+            address,
+            diameter: 28,
+          }),
+        ]),
+
+        h('div.tx-list-account-and-status-wrapper', {}, [
+          h('div.tx-list-account-wrapper', {
+            style: {},
+          }, [
+            h('span.tx-list-account', {}, [
+              this.getAddressText(address),
+            ]),
+          ]),
+
+          h('div.tx-list-status-wrapper', {
+            style: {},
+          }, [
+            h('span', {
+              className: classnames('tx-list-status', {
+                'tx-list-status--rejected': transactionStatus === 'rejected',
+                'tx-list-status--failed': transactionStatus === 'failed',
+              }),
+            },
+              transactionStatus,
+            ),
+          ]),
+        ]),
+
+        h('div.flex-column.tx-list-details-wrapper', {
+          style: {},
+        }, [
+
+          h('span.tx-list-value', total),
+
+          showFiatTotal && h('span.tx-list-fiat-value', fiatTotal),
+
+        ]),
+      ]),
+    ]), // holding on icon from design
+  ])
+}
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
new file mode 100644
index 000000000..1729e6a6f
--- /dev/null
+++ b/ui/app/components/tx-list.js
@@ -0,0 +1,137 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const prefixForNetwork = require('../../lib/etherscan-prefix-for-network')
+const selectors = require('../selectors')
+const TxListItem = require('./tx-list-item')
+const ShiftListItem = require('./shift-list-item')
+const { formatDate } = require('../util')
+const { showConfTxPage } = require('../actions')
+const classnames = require('classnames')
+const { tokenInfoGetter } = require('../token-util')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList)
+
+function mapStateToProps (state) {
+  return {
+    txsToRender: selectors.transactionsSelector(state),
+    conversionRate: selectors.conversionRateSelector(state),
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showConfTxPage: ({ id }) => dispatch(showConfTxPage({ id })),
+  }
+}
+
+inherits(TxList, Component)
+function TxList () {
+  Component.call(this)
+}
+
+TxList.prototype.componentWillMount = function () {
+  this.tokenInfoGetter = tokenInfoGetter()
+}
+
+TxList.prototype.render = function () {
+  return h('div.flex-column', [
+    h('div.flex-row.tx-list-header-wrapper', [
+      h('div.flex-row.tx-list-header', [
+        h('div', 'transactions'),
+      ]),
+    ]),
+    h('div.flex-column.tx-list-container', {}, [
+      this.renderTransaction(),
+    ]),
+  ])
+}
+
+TxList.prototype.renderTransaction = function () {
+  const { txsToRender, conversionRate } = this.props
+
+  return txsToRender.length
+    ? txsToRender.map((transaction, i) => this.renderTransactionListItem(transaction, conversionRate, i))
+    : [h(
+        'div.tx-list-item.tx-list-item--empty',
+        { key: 'tx-list-none' },
+        [ 'No Transactions' ],
+      )]
+}
+
+// TODO: Consider moving TxListItem into a separate component
+TxList.prototype.renderTransactionListItem = function (transaction, conversionRate, index) {
+  // console.log({transaction})
+  // refer to transaction-list.js:line 58
+
+  if (transaction.key === 'shapeshift') {
+    return h(ShiftListItem, { ...transaction, key: `shapeshift${index}` })
+  }
+
+  const props = {
+    dateString: formatDate(transaction.time),
+    address: transaction.txParams.to,
+    transactionStatus: transaction.status,
+    transactionAmount: transaction.txParams.value,
+    transActionId: transaction.id,
+    transactionHash: transaction.hash,
+    transactionNetworkId: transaction.metamaskNetworkId,
+  }
+
+  const {
+    address,
+    transactionStatus,
+    transactionAmount,
+    dateString,
+    transActionId,
+    transactionHash,
+    transactionNetworkId,
+  } = props
+  const { showConfTxPage } = this.props
+
+  const opts = {
+    key: transActionId || transactionHash,
+    txParams: transaction.txParams,
+    transactionStatus,
+    transActionId,
+    dateString,
+    address,
+    transactionAmount,
+    transactionHash,
+    conversionRate,
+    tokenInfoGetter: this.tokenInfoGetter,
+  }
+
+  const isUnapproved = transactionStatus === 'unapproved'
+
+  if (isUnapproved) {
+    opts.onClick = () => showConfTxPage({id: transActionId})
+    opts.transactionStatus = 'Not Started'
+  } else if (transactionHash) {
+    opts.onClick = () => this.view(transactionHash, transactionNetworkId)
+  }
+
+  opts.className = classnames('.tx-list-item', {
+    '.tx-list-pending-item-container': isUnapproved,
+    '.tx-list-clickable': Boolean(transactionHash) || isUnapproved,
+  })
+
+  return h(TxListItem, opts)
+}
+
+TxList.prototype.view = function (txHash, network) {
+  const url = etherscanLinkFor(txHash, network)
+  if (url) {
+    navigateTo(url)
+  }
+}
+
+function navigateTo (url) {
+  global.platform.openWindow({ url })
+}
+
+function etherscanLinkFor (txHash, network) {
+  const prefix = prefixForNetwork(network)
+  return `https://${prefix}etherscan.io/tx/${txHash}`
+}
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
new file mode 100644
index 000000000..b25d8e0f9
--- /dev/null
+++ b/ui/app/components/tx-view.js
@@ -0,0 +1,148 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const ethUtil = require('ethereumjs-util')
+const inherits = require('util').inherits
+const actions = require('../actions')
+const selectors = require('../selectors')
+
+const BalanceComponent = require('./balance-component')
+const TxList = require('./tx-list')
+const Identicon = require('./identicon')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView)
+
+function mapStateToProps (state) {
+  const sidebarOpen = state.appState.sidebarOpen
+  const isMascara = state.appState.isMascara
+
+  const identities = state.metamask.identities
+  const accounts = state.metamask.accounts
+  const network = state.metamask.network
+  const selectedTokenAddress = state.metamask.selectedTokenAddress
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const checksumAddress = selectedAddress && ethUtil.toChecksumAddress(selectedAddress)
+  const identity = identities[selectedAddress]
+
+  return {
+    sidebarOpen,
+    selectedAddress,
+    checksumAddress,
+    selectedTokenAddress,
+    selectedToken: selectors.getSelectedToken(state),
+    identity,
+    network,
+    isMascara,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showSidebar: () => { dispatch(actions.showSidebar()) },
+    hideSidebar: () => { dispatch(actions.hideSidebar()) },
+    showModal: (payload) => { dispatch(actions.showModal(payload)) },
+    showSendPage: () => { dispatch(actions.showSendPage()) },
+    showSendTokenPage: () => { dispatch(actions.showSendTokenPage()) },
+  }
+}
+
+inherits(TxView, Component)
+function TxView () {
+  Component.call(this)
+}
+
+TxView.prototype.renderHeroBalance = function () {
+  const { selectedToken } = this.props
+
+  return h('div.hero-balance', {}, [
+
+    h(BalanceComponent, { token: selectedToken }),
+
+    this.renderButtons(),
+  ])
+}
+
+TxView.prototype.renderButtons = function () {
+  const {selectedToken, showModal, showSendPage, showSendTokenPage } = this.props
+
+  return !selectedToken
+    ? (
+      h('div.flex-row.flex-center.hero-balance-buttons', [
+        h('button.btn-clear.hero-balance-button', {
+          onClick: () => showModal({
+            name: 'DEPOSIT_ETHER',
+          }),
+        }, 'DEPOSIT'),
+
+        h('button.btn-clear.hero-balance-button', {
+          style: {
+            marginLeft: '0.8em',
+          },
+          onClick: showSendPage,
+        }, 'SEND'),
+      ])
+    )
+    : (
+      h('div.flex-row.flex-center.hero-balance-buttons', [
+        h('button.btn-clear.hero-balance-button', {
+          onClick: showSendTokenPage,
+        }, 'SEND'),
+      ])
+    )
+}
+
+TxView.prototype.render = function () {
+  const { selectedAddress, identity, network, isMascara } = this.props
+
+  return h('div.tx-view.flex-column', {
+    style: {},
+  }, [
+
+    h('div.flex-row.phone-visible', {
+      style: {
+        margin: '1.5em 1.2em 0',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+      },
+    }, [
+
+      h('div.fa.fa-bars', {
+        style: {
+          fontSize: '1.3em',
+          cursor: 'pointer',
+        },
+        onClick: () => {
+          this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
+        },
+      }, []),
+
+      h('.identicon-wrapper.select-none', {
+        style: {
+          marginLeft: '0.9em',
+        },
+      }, [
+        h(Identicon, {
+          diameter: 24,
+          address: selectedAddress,
+          network,
+        }),
+      ]),
+
+      h('span.account-name', {
+        style: {},
+      }, [
+        identity.name,
+      ]),
+
+      !isMascara && h('div.open-in-browser', {
+        onClick: () => global.platform.openExtensionInBrowser(),
+      }, [h('img', { src: 'images/popout.svg' })]),
+
+    ]),
+
+    this.renderHeroBalance(),
+
+    h(TxList),
+
+  ])
+}
diff --git a/ui/app/components/typed-message-renderer.js b/ui/app/components/typed-message-renderer.js
new file mode 100644
index 000000000..d170d63b7
--- /dev/null
+++ b/ui/app/components/typed-message-renderer.js
@@ -0,0 +1,42 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const extend = require('xtend')
+
+module.exports = TypedMessageRenderer
+
+inherits(TypedMessageRenderer, Component)
+function TypedMessageRenderer () {
+  Component.call(this)
+}
+
+TypedMessageRenderer.prototype.render = function () {
+  const props = this.props
+  const { value, style } = props
+  const text = renderTypedData(value)
+
+  const defaultStyle = extend({
+    width: '315px',
+    maxHeight: '210px',
+    resize: 'none',
+    border: 'none',
+    background: 'white',
+    padding: '3px',
+    overflow: 'scroll',
+  }, style)
+
+  return (
+    h('div.font-small', {
+      style: defaultStyle,
+    }, text)
+  )
+}
+
+function renderTypedData (values) {
+  return values.map(function (value) {
+    return h('div', {}, [
+      h('strong', {style: {display: 'block', fontWeight: 'bold'}}, String(value.name) + ':'),
+      h('div', {}, value.value),
+    ])
+  })
+}
diff --git a/ui/app/components/wallet-content-display.js b/ui/app/components/wallet-content-display.js
new file mode 100644
index 000000000..bfa061be4
--- /dev/null
+++ b/ui/app/components/wallet-content-display.js
@@ -0,0 +1,56 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+
+module.exports = WalletContentDisplay
+
+inherits(WalletContentDisplay, Component)
+function WalletContentDisplay () {
+  Component.call(this)
+}
+
+WalletContentDisplay.prototype.render = function () {
+  const { title, amount, fiatValue, active, style } = this.props
+
+  // TODO: Separate component: wallet-content-account
+  return h('div.flex-column', {
+    style: {
+      marginLeft: '1.3em',
+      alignItems: 'flex-start',
+      ...style,
+    },
+  }, [
+
+    h('span', {
+      style: {
+        fontSize: '1.1em',
+      },
+    }, title),
+
+    h('span', {
+      style: {
+        fontSize: '1.8em',
+        margin: '0.4em 0em',
+      },
+    }, amount),
+
+    h('span', {
+      style: {
+        fontSize: '1.3em',
+      },
+    }, fiatValue),
+
+    active && h('div', {
+      style: {
+        position: 'absolute',
+        marginLeft: '-1.3em',
+        height: '6em',
+        width: '0.3em',
+        background: '#D8D8D8', // $alto
+      },
+    }, [
+    ]),
+  ])
+
+}
+
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
new file mode 100644
index 000000000..34f27ca2a
--- /dev/null
+++ b/ui/app/components/wallet-view.js
@@ -0,0 +1,187 @@
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const classnames = require('classnames')
+const Identicon = require('./identicon')
+// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
+const Tooltip = require('./tooltip-v2.js')
+const copyToClipboard = require('copy-to-clipboard')
+const actions = require('../actions')
+const BalanceComponent = require('./balance-component')
+const TokenList = require('./token-list')
+const selectors = require('../selectors')
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView)
+
+function mapStateToProps (state) {
+
+  return {
+    network: state.metamask.network,
+    sidebarOpen: state.appState.sidebarOpen,
+    identities: state.metamask.identities,
+    accounts: state.metamask.accounts,
+    tokens: state.metamask.tokens,
+    keyrings: state.metamask.keyrings,
+    selectedAddress: selectors.getSelectedAddress(state),
+    selectedIdentity: selectors.getSelectedIdentity(state),
+    selectedAccount: selectors.getSelectedAccount(state),
+    selectedTokenAddress: state.metamask.selectedTokenAddress,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showSendPage: () => dispatch(actions.showSendPage()),
+    hideSidebar: () => dispatch(actions.hideSidebar()),
+    unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+    showAddTokenPage: () => dispatch(actions.showAddTokenPage()),
+  }
+}
+
+inherits(WalletView, Component)
+function WalletView () {
+  Component.call(this)
+  this.state = {
+    hasCopied: false,
+    copyToClipboardPressed: false,
+  }
+}
+
+WalletView.prototype.renderWalletBalance = function () {
+  const {
+    selectedTokenAddress,
+    selectedAccount,
+    unsetSelectedToken,
+    hideSidebar,
+    sidebarOpen,
+  } = this.props
+
+  const selectedClass = selectedTokenAddress
+    ? ''
+    : 'wallet-balance-wrapper--active'
+  const className = `flex-column wallet-balance-wrapper ${selectedClass}`
+
+  return h('div', { className }, [
+    h('div.wallet-balance',
+      {
+        onClick: () => {
+          unsetSelectedToken()
+          selectedTokenAddress && sidebarOpen && hideSidebar()
+        },
+      },
+      [
+        h(BalanceComponent, {
+          balanceValue: selectedAccount ? selectedAccount.balance : '',
+          style: {},
+        }),
+      ]
+    ),
+  ])
+}
+
+WalletView.prototype.render = function () {
+  const {
+    responsiveDisplayClassname,
+    selectedAddress,
+    selectedIdentity,
+    keyrings,
+    showAccountDetailModal,
+    hideSidebar,
+    showAddTokenPage,
+  } = this.props
+  // temporary logs + fake extra wallets
+  // console.log('walletview, selectedAccount:', selectedAccount)
+
+  const keyring = keyrings.find((kr) => {
+    return kr.accounts.includes(selectedAddress) ||
+      kr.accounts.includes(selectedIdentity.address)
+  })
+
+  const type = keyring.type
+  const isLoose = type !== 'HD Key Tree'
+
+  return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
+    style: {},
+  }, [
+
+    // 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', isLoose ? 'IMPORTED' : ''),
+
+      h('div.flex-column.flex-center.wallet-view__name-container', {
+        style: { margin: '0 auto' },
+        onClick: showAccountDetailModal,
+      }, [
+        h(Identicon, {
+          diameter: 54,
+          address: selectedAddress,
+        }),
+
+        h('span.account-name', {
+          style: {},
+        }, [
+          selectedIdentity.name,
+        ]),
+
+        h('button.btn-clear.wallet-view__details-button', 'DETAILS'),
+      ]),
+    ]),
+
+    h(Tooltip, {
+      position: 'bottom',
+      title: this.state.hasCopied ? 'Copied!' : 'Copy to clipboard',
+      wrapperClassName: 'wallet-view__tooltip',
+    }, [
+      h('button.wallet-view__address', {
+        className: classnames({
+          'wallet-view__address__pressed': this.state.copyToClipboardPressed,
+        }),
+        onClick: () => {
+          copyToClipboard(selectedAddress)
+          this.setState({ hasCopied: true })
+          setTimeout(() => this.setState({ hasCopied: false }), 3000)
+        },
+        onMouseDown: () => {
+          this.setState({ copyToClipboardPressed: true })
+        },
+        onMouseUp: () => {
+          this.setState({ copyToClipboardPressed: false })
+        },
+      }, [
+        `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
+        h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+      ]),
+    ]),
+
+    this.renderWalletBalance(),
+
+    h(TokenList),
+
+    h('button.btn-clear.wallet-view__add-token-button', {
+      onClick: () => {
+        showAddTokenPage()
+        hideSidebar()
+      },
+    }, 'Add Token'),
+  ])
+}
+
+// TODO: Extra wallets, for dev testing. Remove when PRing to master.
+// const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [
+//     h('div.wallet-balance', {}, [
+//       h(BalanceComponent, {
+//         balanceValue: selectedAccount.balance,
+//         style: {},
+//       }),
+//     ]),
+// ])
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 3b8618992..b4ffc48b7 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -1,18 +1,26 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('./actions')
-const NetworkIndicator = require('./components/network')
 const txHelper = require('../lib/tx-helper')
-const isPopupOrNotification = require('../../app/scripts/lib/is-popup-or-notification')
 
 const PendingTx = require('./components/pending-tx')
-const PendingMsg = require('./components/pending-msg')
-const PendingPersonalMsg = require('./components/pending-personal-msg')
+const SignatureRequest = require('./components/signature-request')
+// const PendingMsg = require('./components/pending-msg')
+// const PendingPersonalMsg = require('./components/pending-personal-msg')
+// const PendingTypedMsg = require('./components/pending-typed-msg')
 const Loading = require('./components/loading')
 
+// const contentDivider = h('div', {
+//   style: {
+//     marginLeft: '16px',
+//     marginRight: '16px',
+//     height:'1px',
+//     background:'#E7E7E7',
+//   },
+// })
+
 module.exports = connect(mapStateToProps)(ConfirmTxScreen)
 
 function mapStateToProps (state) {
@@ -23,10 +31,15 @@ function mapStateToProps (state) {
     unapprovedTxs: state.metamask.unapprovedTxs,
     unapprovedMsgs: state.metamask.unapprovedMsgs,
     unapprovedPersonalMsgs: state.metamask.unapprovedPersonalMsgs,
+    unapprovedTypedMessages: state.metamask.unapprovedTypedMessages,
     index: state.appState.currentView.context,
     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,
   }
 }
 
@@ -37,111 +50,95 @@ function ConfirmTxScreen () {
 
 ConfirmTxScreen.prototype.render = function () {
   const props = this.props
-  const { network, provider, unapprovedTxs,
-    unapprovedMsgs, unapprovedPersonalMsgs } = props
-
-  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
+  const {
+    network,
+    unapprovedTxs,
+    currentCurrency,
+    unapprovedMsgs,
+    unapprovedPersonalMsgs,
+    unapprovedTypedMessages,
+    conversionRate,
+    blockGasLimit,
+    // provider,
+    // computedBalances,
+  } = props
+
+  var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, unapprovedTypedMessages, network)
 
   var txData = unconfTxList[props.index] || {}
   var txParams = txData.params || {}
-  var isNotification = isPopupOrNotification() === 'notification'
+
+  // var isNotification = isPopupOrNotification() === 'notification'
+  /*
+    Client is using the flag above to render the following in conf screen
+    // subtitle and nav
+    h('.section-title.flex-row.flex-center', [
+      !isNotification ? h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
+        onClick: this.goHome.bind(this),
+      }) : null,
+      h('h2.page-subtitle', 'Confirm Transaction'),
+      isNotification ? h(NetworkIndicator, {
+        network: network,
+        provider: provider,
+      }) : null,
+    ]),
+  */
 
   log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`)
-  if (unconfTxList.length === 0) return h(Loading, { isLoading: true })
-
-  return (
-
-    h('.flex-column.flex-grow', [
-
-      // subtitle and nav
-      h('.section-title.flex-row.flex-center', [
-        !isNotification ? h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          onClick: this.goHome.bind(this),
-        }) : null,
-        h('h2.page-subtitle', 'Confirm Transaction'),
-        isNotification ? h(NetworkIndicator, {
-          network: network,
-          provider: provider,
-        }) : null,
-      ]),
-
-      h('h3', {
-        style: {
-          alignSelf: 'center',
-          display: unconfTxList.length > 1 ? 'block' : 'none',
-        },
-      }, [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          style: {
-            display: props.index === 0 ? 'none' : 'inline-block',
-          },
-          onClick: () => props.dispatch(actions.previousTx()),
-        }),
-        ` ${props.index + 1} of ${unconfTxList.length} `,
-        h('i.fa.fa-arrow-right.fa-lg.cursor-pointer', {
-          style: {
-            display: props.index + 1 === unconfTxList.length ? 'none' : 'inline-block',
-          },
-          onClick: () => props.dispatch(actions.nextTx()),
-        }),
-      ]),
-
-      warningIfExists(props.warning),
-
-      h(ReactCSSTransitionGroup, {
-        className: 'css-transition-group',
-        transitionName: 'main',
-        transitionEnterTimeout: 300,
-        transitionLeaveTimeout: 300,
-      }, [
-
-        currentTxView({
-          // Properties
-          txData: txData,
-          key: txData.id,
-          selectedAddress: props.selectedAddress,
-          accounts: props.accounts,
-          identities: props.identities,
-          // Actions
-          buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
-          sendTransaction: this.sendTransaction.bind(this, txData),
-          cancelTransaction: this.cancelTransaction.bind(this, txData),
-          signMessage: this.signMessage.bind(this, txData),
-          signPersonalMessage: this.signPersonalMessage.bind(this, txData),
-          cancelMessage: this.cancelMessage.bind(this, txData),
-          cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
-        }),
-
-      ]),
-    ])
-  )
+  if (unconfTxList.length === 0) return h(Loading)
+
+  return currentTxView({
+    // Properties
+    txData: txData,
+    key: txData.id,
+    selectedAddress: props.selectedAddress,
+    accounts: props.accounts,
+    identities: props.identities,
+    conversionRate,
+    currentCurrency,
+    blockGasLimit,
+    // Actions
+    buyEth: this.buyEth.bind(this, txParams.from || props.selectedAddress),
+    sendTransaction: this.sendTransaction.bind(this),
+    cancelTransaction: this.cancelTransaction.bind(this, txData),
+    signMessage: this.signMessage.bind(this, txData),
+    signPersonalMessage: this.signPersonalMessage.bind(this, txData),
+    signTypedMessage: this.signTypedMessage.bind(this, txData),
+    cancelMessage: this.cancelMessage.bind(this, txData),
+    cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
+    cancelTypedMessage: this.cancelTypedMessage.bind(this, txData),
+  })
 }
 
 function currentTxView (opts) {
   log.info('rendering current tx view')
   const { txData } = opts
-  const { txParams, msgParams, type } = txData
+  const { txParams, msgParams } = txData
 
   if (txParams) {
     log.debug('txParams detected, rendering pending tx')
     return h(PendingTx, opts)
-
   } else if (msgParams) {
     log.debug('msgParams detected, rendering pending msg')
 
-    if (type === 'eth_sign') {
-      log.debug('rendering eth_sign message')
-      return h(PendingMsg, opts)
-
-    } else if (type === 'personal_sign') {
-      log.debug('rendering personal_sign message')
-      return h(PendingPersonalMsg, opts)
-    }
+    return h(SignatureRequest, opts)
+
+    // if (type === 'eth_sign') {
+    //   log.debug('rendering eth_sign message')
+    //   return h(PendingMsg, opts)
+    // } else if (type === 'personal_sign') {
+    //   log.debug('rendering personal_sign message')
+    // return h(PendingPersonalMsg, opts)
+    // } else if (type === 'eth_signTypedData') {
+    //   log.debug('rendering eth_signTypedData message')
+    //   return h(PendingTypedMsg, opts)
+    // }
   }
+  return h(Loading)
 }
 
 ConfirmTxScreen.prototype.buyEth = function (address, event) {
-  this.stopPropagation(event)
+  event.preventDefault()
   this.props.dispatch(actions.buyEthView(address))
 }
 
@@ -156,6 +153,12 @@ ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) {
   this.props.dispatch(actions.cancelTx(txData))
 }
 
+ConfirmTxScreen.prototype.cancelAllTransactions = function (unconfTxList, event) {
+  this.stopPropagation(event)
+  event.preventDefault()
+  this.props.dispatch(actions.cancelAllTx(unconfTxList))
+}
+
 ConfirmTxScreen.prototype.signMessage = function (msgData, event) {
   log.info('conf-tx.js: signing message')
   var params = msgData.msgParams
@@ -178,6 +181,14 @@ ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) {
   this.props.dispatch(actions.signPersonalMsg(params))
 }
 
+ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) {
+  log.info('conf-tx.js: signing typed message')
+  var params = msgData.msgParams
+  params.metamaskId = msgData.id
+  this.stopPropagation(event)
+  this.props.dispatch(actions.signTypedMsg(params))
+}
+
 ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) {
   log.info('canceling message')
   this.stopPropagation(event)
@@ -190,19 +201,25 @@ ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) {
   this.props.dispatch(actions.cancelPersonalMsg(msgData))
 }
 
+ConfirmTxScreen.prototype.cancelTypedMessage = function (msgData, event) {
+  log.info('canceling typed message')
+  this.stopPropagation(event)
+  this.props.dispatch(actions.cancelTypedMsg(msgData))
+}
+
 ConfirmTxScreen.prototype.goHome = function (event) {
   this.stopPropagation(event)
   this.props.dispatch(actions.goHome())
 }
 
-function warningIfExists (warning) {
-  if (warning &&
-     // Do not display user rejections on this screen:
-     warning.indexOf('User denied transaction signature') === -1) {
-    return h('.error', {
-      style: {
-        margin: 'auto',
-      },
-    }, warning)
-  }
-}
+// function warningIfExists (warning) {
+//   if (warning &&
+//      // Do not display user rejections on this screen:
+//      warning.indexOf('User denied transaction signature') === -1) {
+//     return h('.error', {
+//       style: {
+//         margin: 'auto',
+//       },
+//     }, warning)
+//   }
+// }
diff --git a/ui/app/config.js b/ui/app/config.js
deleted file mode 100644
index 444365de2..000000000
--- a/ui/app/config.js
+++ /dev/null
@@ -1,178 +0,0 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('./actions')
-const currencies = require('./conversion.json').rows
-const validUrl = require('valid-url')
-
-module.exports = connect(mapStateToProps)(ConfigScreen)
-
-function mapStateToProps (state) {
-  return {
-    metamask: state.metamask,
-    warning: state.appState.warning,
-  }
-}
-
-inherits(ConfigScreen, Component)
-function ConfigScreen () {
-  Component.call(this)
-}
-
-ConfigScreen.prototype.render = function () {
-  var state = this.props
-  var metamaskState = state.metamask
-  var warning = state.warning
-
-  return (
-    h('.flex-column.flex-grow', [
-
-      // subtitle and nav
-      h('.section-title.flex-row.flex-center', [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          onClick: (event) => {
-            state.dispatch(actions.goHome())
-          },
-        }),
-        h('h2.page-subtitle', 'Settings'),
-      ]),
-
-      h('.error', {
-        style: {
-          display: warning ? 'block' : 'none',
-          padding: '0 20px',
-          textAlign: 'center',
-        },
-      }, warning),
-
-      // conf view
-      h('.flex-column.flex-justify-center.flex-grow.select-none', [
-        h('.flex-space-around', {
-          style: {
-            padding: '20px',
-          },
-        }, [
-
-          currentProviderDisplay(metamaskState),
-
-          h('div', { style: {display: 'flex'} }, [
-            h('input#new_rpc', {
-              placeholder: 'New RPC URL',
-              style: {
-                width: 'inherit',
-                flex: '1 0 auto',
-                height: '30px',
-                margin: '8px',
-              },
-              onKeyPress (event) {
-                if (event.key === 'Enter') {
-                  var element = event.target
-                  var newRpc = element.value
-                  rpcValidation(newRpc, state)
-                }
-              },
-            }),
-            h('button', {
-              style: {
-                alignSelf: 'center',
-              },
-              onClick (event) {
-                event.preventDefault()
-                var element = document.querySelector('input#new_rpc')
-                var newRpc = element.value
-                rpcValidation(newRpc, state)
-              },
-            }, 'Save'),
-          ]),
-          h('hr.horizontal-line'),
-          currentConversionInformation(metamaskState, state),
-          h('hr.horizontal-line'),
-
-          h('div', {
-            style: {
-              marginTop: '20px',
-            },
-          }, [
-            h('button', {
-              style: {
-                alignSelf: 'center',
-              },
-              onClick (event) {
-                event.preventDefault()
-                state.dispatch(actions.revealSeedConfirmation())
-              },
-            }, 'Reveal Seed Words'),
-          ]),
-
-        ]),
-      ]),
-    ])
-  )
-}
-
-function rpcValidation (newRpc, state) {
-  if (validUrl.isWebUri(newRpc)) {
-    state.dispatch(actions.setRpcTarget(newRpc))
-  } else {
-    var appendedRpc = `http://${newRpc}`
-    if (validUrl.isWebUri(appendedRpc)) {
-      state.dispatch(actions.displayWarning('URIs require the appropriate HTTP/HTTPS prefix.'))
-    } else {
-      state.dispatch(actions.displayWarning('Invalid RPC URI'))
-    }
-  }
-}
-
-function currentConversionInformation (metamaskState, state) {
-  var currentCurrency = metamaskState.currentCurrency
-  var conversionDate = metamaskState.conversionDate
-  return h('div', [
-    h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, 'Current Conversion'),
-    h('span', {style: { fontWeight: 'bold', paddingRight: '10px', fontSize: '13px'}}, `Updated ${Date(conversionDate)}`),
-    h('select#currentCurrency', {
-      onChange (event) {
-        event.preventDefault()
-        var element = document.getElementById('currentCurrency')
-        var newCurrency = element.value
-        state.dispatch(actions.setCurrentCurrency(newCurrency))
-      },
-      defaultValue: currentCurrency,
-    }, currencies.map((currency) => {
-      return h('option', {key: currency.code, value: currency.code}, `${currency.code} - ${currency.name}`)
-    })
-  ),
-  ])
-}
-
-function currentProviderDisplay (metamaskState) {
-  var provider = metamaskState.provider
-  var title, value
-
-  switch (provider.type) {
-
-    case 'mainnet':
-      title = 'Current Network'
-      value = 'Main Ethereum Network'
-      break
-
-    case 'testnet':
-      title = 'Current Network'
-      value = 'Ropsten Test Network'
-      break
-
-    case 'kovan':
-      title = 'Current Network'
-      value = 'Kovan Test Network'
-      break
-
-    default:
-      title = 'Current RPC'
-      value = metamaskState.provider.rpcTarget
-  }
-
-  return h('div', [
-    h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, title),
-    h('span', value),
-  ])
-}
diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js
new file mode 100644
index 000000000..ee42ebea1
--- /dev/null
+++ b/ui/app/conversion-util.js
@@ -0,0 +1,221 @@
+/* Currency Conversion Utility
+* This utility function can be used for converting currency related values within metamask.
+* The caller should be able to pass it a value, along with information about the value's
+* numeric base, denomination and currency, and the desired numeric base, denomination and
+* currency. It should return a single value.
+*
+* @param {(number | string | BN)} value The value to convert.
+* @param {Object} [options] Options to specify details of the conversion
+* @param {string} [options.fromCurrency = 'ETH' | 'USD'] The currency of the passed value
+* @param {string} [options.toCurrency = 'ETH' | 'USD'] The desired currency of the result
+* @param {string} [options.fromNumericBase = 'hex' | 'dec' | 'BN'] The numeric basic of the passed value.
+* @param {string} [options.toNumericBase = 'hex' | 'dec' | 'BN'] The desired numeric basic of the result.
+* @param {string} [options.fromDenomination = 'WEI'] The denomination of the passed value
+* @param {number} [options.numberOfDecimals] The desired number of in the result
+* @param {number} [options.conversionRate] The rate to use to make the fromCurrency -> toCurrency conversion
+* @returns {(number | string | BN)}
+*
+* The utility passes value along with the options as a single object to the `converter` function.
+* `converter` uses Ramda.js to apply a composition of conditional setters to the `value` property, depending
+* on the accompanying options. Some of these conditional setters are selected via key-value maps, where
+* the keys are specified in the options parameters and the values are setter functions.
+*/
+
+const BigNumber = require('bignumber.js')
+const ethUtil = require('ethereumjs-util')
+const BN = ethUtil.BN
+const R = require('ramda')
+const { stripHexPrefix } = require('ethereumjs-util')
+
+BigNumber.config({
+  ROUNDING_MODE: BigNumber.ROUND_HALF_DOWN,
+})
+
+// Big Number Constants
+const BIG_NUMBER_WEI_MULTIPLIER = new BigNumber('1000000000000000000')
+const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000')
+
+// Individual Setters
+const convert = R.invoker(1, 'times')
+const round = R.invoker(2, 'round')(R.__, BigNumber.ROUND_HALF_DOWN)
+const invertConversionRate = conversionRate => () => new BigNumber(1.0).div(conversionRate)
+const decToBigNumberViaString = n => R.pipe(String, toBigNumber['dec'])
+
+// Setter Maps
+const toBigNumber = {
+  hex: n => new BigNumber(stripHexPrefix(n), 16),
+  dec: n => new BigNumber(n, 10),
+  BN: n => new BigNumber(n.toString(16), 16),
+}
+const toNormalizedDenomination = {
+  WEI: bigNumber => bigNumber.div(BIG_NUMBER_WEI_MULTIPLIER),
+  GWEI: bigNumber => bigNumber.div(BIG_NUMBER_GWEI_MULTIPLIER),
+}
+const toSpecifiedDenomination = {
+  WEI: bigNumber => bigNumber.times(BIG_NUMBER_WEI_MULTIPLIER).round(),
+  GWEI: bigNumber => bigNumber.times(BIG_NUMBER_GWEI_MULTIPLIER).round(9),
+}
+const baseChange = {
+  hex: n => n.toString(16),
+  dec: n => Number(n).toString(10),
+  BN: n => new BN(n.toString(16)),
+}
+
+// Predicates
+const fromAndToCurrencyPropsNotEqual = R.compose(
+  R.not,
+  R.eqBy(R.__, 'fromCurrency', 'toCurrency'),
+  R.flip(R.prop)
+)
+
+// Lens
+const valuePropertyLens = R.over(R.lensProp('value'))
+const conversionRateLens = R.over(R.lensProp('conversionRate'))
+
+// conditional conversionRate setting wrapper
+const whenPredSetCRWithPropAndSetter = (pred, prop, setter) => R.when(
+  pred,
+  R.converge(
+    conversionRateLens,
+    [R.pipe(R.prop(prop), setter), R.identity]
+  )
+)
+
+// conditional 'value' setting wrappers
+const whenPredSetWithPropAndSetter = (pred, prop, setter) => R.when(
+  pred,
+  R.converge(
+    valuePropertyLens,
+    [R.pipe(R.prop(prop), setter), R.identity]
+  )
+)
+const whenPropApplySetterMap = (prop, setterMap) => whenPredSetWithPropAndSetter(
+  R.prop(prop),
+  prop,
+  R.prop(R.__, setterMap)
+)
+
+// Conversion utility function
+const converter = R.pipe(
+  whenPredSetCRWithPropAndSetter(R.prop('conversionRate'), 'conversionRate', decToBigNumberViaString),
+  whenPredSetCRWithPropAndSetter(R.prop('invertConversionRate'), 'conversionRate', invertConversionRate),
+  whenPropApplySetterMap('fromNumericBase', toBigNumber),
+  whenPropApplySetterMap('fromDenomination', toNormalizedDenomination),
+  whenPredSetWithPropAndSetter(fromAndToCurrencyPropsNotEqual, 'conversionRate', convert),
+  whenPropApplySetterMap('toDenomination', toSpecifiedDenomination),
+  whenPredSetWithPropAndSetter(R.prop('numberOfDecimals'), 'numberOfDecimals', round),
+  whenPropApplySetterMap('toNumericBase', baseChange),
+  R.view(R.lensProp('value'))
+)
+
+const conversionUtil = (value, {
+  fromCurrency = null,
+  toCurrency = fromCurrency,
+  fromNumericBase,
+  toNumericBase,
+  fromDenomination,
+  toDenomination,
+  numberOfDecimals,
+  conversionRate,
+  invertConversionRate,
+}) => converter({
+  fromCurrency,
+  toCurrency,
+  fromNumericBase,
+  toNumericBase,
+  fromDenomination,
+  toDenomination,
+  numberOfDecimals,
+  conversionRate,
+  invertConversionRate,
+  value: value || '0',
+})
+
+const addCurrencies = (a, b, options = {}) => {
+  const {
+    aBase,
+    bBase,
+    ...conversionOptions
+  } = options
+  const value = (new BigNumber(a, aBase)).add(b, bBase)
+
+  return converter({
+    value,
+    ...conversionOptions,
+  })
+}
+
+const subtractCurrencies = (a, b, options = {}) => {
+  const {
+    aBase,
+    bBase,
+    ...conversionOptions
+  } = options
+  const value = (new BigNumber(a, aBase)).minus(b, bBase)
+
+  return converter({
+    value,
+    ...conversionOptions,
+  })
+}
+
+const multiplyCurrencies = (a, b, options = {}) => {
+  const {
+    multiplicandBase,
+    multiplierBase,
+    ...conversionOptions
+  } = options
+
+  const bigNumberA = new BigNumber(String(a), multiplicandBase)
+  const bigNumberB = new BigNumber(String(b), multiplierBase)
+
+  const value = bigNumberA.times(bigNumberB)
+
+  return converter({
+    value,
+    ...conversionOptions,
+  })
+}
+
+const conversionGreaterThan = (
+  { ...firstProps },
+  { ...secondProps },
+) => {
+  const firstValue = converter({ ...firstProps })
+  const secondValue = converter({ ...secondProps })
+
+  return firstValue.gt(secondValue)
+}
+
+const conversionGTE = (
+  { ...firstProps },
+  { ...secondProps },
+) => {
+  const firstValue = converter({ ...firstProps })
+  const secondValue = converter({ ...secondProps })
+  return firstValue.greaterThanOrEqualTo(secondValue)
+}
+
+const conversionLTE = (
+  { ...firstProps },
+  { ...secondProps },
+) => {
+  const firstValue = converter({ ...firstProps })
+  const secondValue = converter({ ...secondProps })
+  return firstValue.lessThanOrEqualTo(secondValue)
+}
+
+const toNegative = (n, options = {}) => {
+  return multiplyCurrencies(n, -1, options)
+}
+
+module.exports = {
+  conversionUtil,
+  addCurrencies,
+  multiplyCurrencies,
+  conversionGreaterThan,
+  conversionGTE,
+  conversionLTE,
+  toNegative,
+  subtractCurrencies,
+}
diff --git a/ui/app/conversion.json b/ui/app/conversion.json
deleted file mode 100644
index eeca164ce..000000000
--- a/ui/app/conversion.json
+++ /dev/null
@@ -1,5730 +0,0 @@
-{

-   "rows":[

-      {

-         "code":"007",

-         "name":"007",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"1337",

-         "name":"1337",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"1CR",

-         "name":"1CR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"256",

-         "name":"256",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"2FLAV",

-         "name":"2FLAV",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"2GIVE",

-         "name":"2GIVE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"32BIT",

-         "name":"32BIT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"404",

-         "name":"404",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"611",

-         "name":"611",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"888",

-         "name":"888",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"8BIT",

-         "name":"8Bit",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ACES",

-         "name":"ACES",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ACID",

-         "name":"ACID",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ACLR",

-         "name":"ACLR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ACP",

-         "name":"ACP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ADC",

-         "name":"ADC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ADZ",

-         "name":"Adzcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"AEON",

-         "name":"Aeon",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"AGRS",

-         "name":"Agoras Tokens",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"AIB",

-         "name":"AIB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ALC",

-         "name":"ALC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ALTC",

-         "name":"ALTC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"AM",

-         "name":"AM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"AMBER",

-         "name":"AMBER",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"AMS",

-         "name":"AMS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ANAL",

-         "name":"ANAL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ANI",

-         "name":"ANI",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ANC",

-         "name":"Anoncoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ANS",

-         "name":"ANS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ANTI",

-         "name":"AntiBitcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"APEX",

-         "name":"APEX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"APC",

-         "name":"Applecoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"APT",

-         "name":"APT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"AR2",

-         "name":"AR2",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ARB",

-         "name":"ARB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ARC",

-         "name":"ARC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ARCH",

-         "name":"ARCH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ARD",

-         "name":"ARD",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ARDR",

-         "name":"ARDR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ABY",

-         "name":"ArtByte",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ARTC",

-         "name":"ARTC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ASAFE",

-         "name":"ASAFE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ADCN",

-         "name":"Asiadigicoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ASN",

-         "name":"ASN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ATEN",

-         "name":"ATEN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ATOM",

-         "name":"ATOM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ATX",

-         "name":"ATX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"REP",

-         "name":"Augur",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"AUR",

-         "name":"Auroracoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"AUD",

-         "name":"Australian Dollar",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"AV",

-         "name":"AV",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"B2",

-         "name":"B2",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"B3",

-         "name":"B3",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BA",

-         "name":"BA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BAC",

-         "name":"BAC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BASH",

-         "name":"BASH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTA",

-         "name":"Bata",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BAY",

-         "name":"BAY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BBCC",

-         "name":"BBCC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BQC",

-         "name":"BBQCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BEC",

-         "name":"BEC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BEEP",

-         "name":"BEEP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BELA",

-         "name":"BellaCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BERN",

-         "name":"BERNcash",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BHC",

-         "name":"BHC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BILL",

-         "name":"BILL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BILS",

-         "name":"BILS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BIOS",

-         "name":"BiosCrypto",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BIT",

-         "name":"BIT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BIT16",

-         "name":"BIT16",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BITB",

-         "name":"BitBean",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTC",

-         "name":"Bitcoin",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"XBC",

-         "name":"Bitcoin Plus",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTCD",

-         "name":"BitcoinDark",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BCY",

-         "name":"Bitcrystals",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BFX",

-         "name":"Bitfinex Debt token",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTM",

-         "name":"Bitmark",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BITON",

-         "name":"BITON",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTQ",

-         "name":"BitQuark",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BITS",

-         "name":"BITS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BSD",

-         "name":"BitSend",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTS",

-         "name":"BitShares",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SWIFT",

-         "name":"BitSwift",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BITZ",

-         "name":"Bitz",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BLK",

-         "name":"Blackcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BLC",

-         "name":"Blakecoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BLEU",

-         "name":"BLEU",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BLITZ",

-         "name":"Blitzcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BLOCK",

-         "name":"Blocknet",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BLRY",

-         "name":"BLRY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BLU",

-         "name":"BLU",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BLUS",

-         "name":"BLUS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BNT",

-         "name":"BNT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BOLI",

-         "name":"Bolivarcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BBR",

-         "name":"Boolberry",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BOOM",

-         "name":"BOOM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BOST",

-         "name":"BoostCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BOSS",

-         "name":"BOSS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BPOK",

-         "name":"BPOK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BRAIN",

-         "name":"BRAIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BRC",

-         "name":"BRC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BRDD",

-         "name":"BRDD",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BRIT",

-         "name":"BRIT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GBP",

-         "name":"British Pound Sterling",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"BRK",

-         "name":"BRK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BRX",

-         "name":"BRX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BS",

-         "name":"BS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BSC",

-         "name":"BSC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BST",

-         "name":"BST",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTCHC",

-         "name":"BTCHC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTCR",

-         "name":"BTCR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTCS",

-         "name":"BTCS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTD",

-         "name":"BTD",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTLC",

-         "name":"BTLC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTTF",

-         "name":"BTTF",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BTZ",

-         "name":"BTZ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BUCKS",

-         "name":"BUCKS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BUN",

-         "name":"BUN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BURST",

-         "name":"Burst",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BUZZ",

-         "name":"BUZZ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BVC",

-         "name":"BVC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BXT",

-         "name":"BXT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BYC",

-         "name":"Bytecent",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BCN",

-         "name":"Bytecoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CAB",

-         "name":"Cabbage Unit",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CAGE",

-         "name":"CAGE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CAID",

-         "name":"CAID",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CAD",

-         "name":"Canadian Dollar",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"CANN",

-         "name":"CannabisCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CCN",

-         "name":"Cannacoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CPC",

-         "name":"Capricoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CAPT",

-         "name":"CAPT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DIEM",

-         "name":"CarpeDiemCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CASH",

-         "name":"CASH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CBD",

-         "name":"CBD",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CBIT",

-         "name":"CBIT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CCX",

-         "name":"CCX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CD",

-         "name":"CD",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CDN",

-         "name":"CDN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CF",

-         "name":"CF",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CGA",

-         "name":"CGA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CKC",

-         "name":"Checkcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CHEMX",

-         "name":"CHEMX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CHESS",

-         "name":"CHESS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CHF",

-         "name":"CHF",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"CNY",

-         "name":"Chinese Yuan",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"CHOOF",

-         "name":"CHOOF",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CJ",

-         "name":"CJ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CLAM",

-         "name":"Clams",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CLICK",

-         "name":"CLICK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CLINT",

-         "name":"CLINT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CLOAK",

-         "name":"Cloakcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CLR",

-         "name":"CLR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CLUB",

-         "name":"CLUB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CLUD",

-         "name":"CLUD",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CLV",

-         "name":"CLV",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CME",

-         "name":"CME",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CMT",

-         "name":"CMT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CNC",

-         "name":"CNC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"COC",

-         "name":"COC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"COXST",

-         "name":"CoExistCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"COIN",

-         "name":"COIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"C2",

-         "name":"Coin2.1",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CV2",

-         "name":"Colossuscoin2.0",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CON",

-         "name":"CON",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XCP",

-         "name":"Counterparty",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"COVAL",

-         "name":"COVAL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"COX",

-         "name":"COX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRAB",

-         "name":"CRAB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRC",

-         "name":"CRC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRE",

-         "name":"CRE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRBIT",

-         "name":"Creditbit",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CREVA",

-         "name":"CrevaCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRNK",

-         "name":"CRNK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRPC",

-         "name":"CRPC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRPS",

-         "name":"CRPS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRT",

-         "name":"CRT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRW",

-         "name":"CRW",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRX",

-         "name":"CRX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CRY",

-         "name":"CRY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CBX",

-         "name":"Crypto Bullion",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CESC",

-         "name":"CryptoEscudo",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XCN",

-         "name":"Cryptonite",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CSH",

-         "name":"CSH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CST",

-         "name":"CST",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CTK",

-         "name":"CTK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CTL",

-         "name":"CTL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CTO",

-         "name":"CTO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CURE",

-         "name":"Curecoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CYC",

-         "name":"CYC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CYP",

-         "name":"Cypher",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CZC",

-         "name":"CZC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CZR",

-         "name":"CZR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DGD",

-         "name":"DarkGoldCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DNET",

-         "name":"Darknet",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DAS",

-         "name":"DAS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DASH",

-         "name":"Dash",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DTC",

-         "name":"Datacoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DB",

-         "name":"DB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DBG",

-         "name":"DBG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DBLK",

-         "name":"DBLK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DBTC",

-         "name":"DBTC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DC",

-         "name":"DC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DCK",

-         "name":"DCK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DCRE",

-         "name":"DCRE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DCT",

-         "name":"DCT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DCYP",

-         "name":"DCYP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DCR",

-         "name":"Decred",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DES",

-         "name":"Destiny",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DEUR",

-         "name":"DEUR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DEM",

-         "name":"Deutsche eMark",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DVC",

-         "name":"Devcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DGMS",

-         "name":"DGMS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DGORE",

-         "name":"DGORE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DMD",

-         "name":"Diamond",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DGB",

-         "name":"Digibyte",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"CUBE",

-         "name":"DigiCube",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DGC",

-         "name":"Digitalcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XDN",

-         "name":"DigitalNote",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DP",

-         "name":"DigitalPrice",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DIME",

-         "name":"Dimecoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DISK",

-         "name":"DISK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DKC",

-         "name":"DKC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DLC",

-         "name":"DLC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DLISK",

-         "name":"DLISK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DMC",

-         "name":"DMC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NOTE",

-         "name":"DNotes",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DOGE",

-         "name":"Dogecoin",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"DOPE",

-         "name":"DopeCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DOV",

-         "name":"DOV",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DOX",

-         "name":"DOX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DPAY",

-         "name":"DPAY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DRACO",

-         "name":"DRACO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DRM8",

-         "name":"DRM8",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DROP",

-         "name":"DROP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DRZ",

-         "name":"DRZ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DSH",

-         "name":"DSH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DTT",

-         "name":"DTT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DBIC",

-         "name":"DubaiCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DUO",

-         "name":"DUO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DUST",

-         "name":"DUST",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EAGS",

-         "name":"EAGS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EAC",

-         "name":"Earthcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EBST",

-         "name":"EBST",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EC",

-         "name":"EC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ECC",

-         "name":"ECCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ECLI",

-         "name":"ECLI",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EDC",

-         "name":"EDC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EDRC",

-         "name":"EDRC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EDR",

-         "name":"EDRCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EGG",

-         "name":"EGG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EGO",

-         "name":"EGO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EMC2",

-         "name":"Einsteinium",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EL",

-         "name":"EL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ELE",

-         "name":"ELE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EFL",

-         "name":"Electronic Gulden",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EMB",

-         "name":"EMB",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"EME",

-         "name":"EME",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"EMC",

-         "name":"Emercoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EMIRG",

-         "name":"EMIRG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EMP",

-         "name":"EMP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EMPC",

-         "name":"EMPC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ENRG",

-         "name":"Energycoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ENT",

-         "name":"ENT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EPC",

-         "name":"EPC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EQM",

-         "name":"EQM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EQUAL",

-         "name":"EQUAL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ERC",

-         "name":"ERC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ERC3",

-         "name":"ERC3",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ESB",

-         "name":"ESB",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"ESC",

-         "name":"ESC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ESP",

-         "name":"ESP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ETCO",

-         "name":"ETCO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ETH",

-         "name":"Ethereum",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"ETC",

-         "name":"Ethereum Classic",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ETHS",

-         "name":"ETHS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EUC",

-         "name":"EUC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EUR",

-         "name":"Euro",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"EGC",

-         "name":"EvergreenCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EVIL",

-         "name":"EVIL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EXCL",

-         "name":"EXCL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"EXP",

-         "name":"Expanse",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FCT",

-         "name":"Factom",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FAIR",

-         "name":"Faircoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FC2",

-         "name":"FC2",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FCH",

-         "name":"FCH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FCN",

-         "name":"FCN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FCP",

-         "name":"FCP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FTC",

-         "name":"Feathercoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TIPS",

-         "name":"Fedoracoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FIND",

-         "name":"FIND",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FIT",

-         "name":"FIT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FJC",

-         "name":"FJC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FLO",

-         "name":"Florincoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FLOZ",

-         "name":"FLOZ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FLT",

-         "name":"FlutterCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FLY",

-         "name":"Flycoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FLDC",

-         "name":"FoldingCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FOREX",

-         "name":"FOREX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FRK",

-         "name":"Franko",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FRDC",

-         "name":"FRDC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FRC",

-         "name":"Freicoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FRN",

-         "name":"FRN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FRWC",

-         "name":"FRWC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FSN",

-         "name":"FSN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FST",

-         "name":"FST",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FTP",

-         "name":"FTP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FUEL",

-         "name":"FUEL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FUN",

-         "name":"FUN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FUTC",

-         "name":"FUTC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FUZZ",

-         "name":"FUZZ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"FX",

-         "name":"FX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GAIA",

-         "name":"GAIA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GAIN",

-         "name":"GAIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GAKH",

-         "name":"GAKH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GAM",

-         "name":"GAM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GBT",

-         "name":"GameBet Coin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GAME",

-         "name":"GameCredits",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GAP",

-         "name":"Gapcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GARY",

-         "name":"GARY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GB",

-         "name":"GB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GBC",

-         "name":"GBC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GBIT",

-         "name":"GBIT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GBRC",

-         "name":"GBRC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GCN",

-         "name":"GCN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GENE",

-         "name":"GENE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GEO",

-         "name":"GeoCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GEMZ",

-         "name":"GetGems",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GHOST",

-         "name":"GHOST",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GHS",

-         "name":"GHS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GLC",

-         "name":"GLC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"BSTY",

-         "name":"GlobalBoost-Y",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GMCX",

-         "name":"GMCX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GML",

-         "name":"GML",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GMX",

-         "name":"GMX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GOAT",

-         "name":"GOAT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GCR",

-         "name":"GoCoineR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GLD",

-         "name":"GoldCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GOON",

-         "name":"GOON",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GOTX",

-         "name":"GOTX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GP",

-         "name":"GP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GPU",

-         "name":"GPU",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GRF",

-         "name":"Graffiti",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GRAM",

-         "name":"GRAM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GRT",

-         "name":"Grantcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GREED",

-         "name":"GREED",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GRC",

-         "name":"Gridcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GRN",

-         "name":"GRN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GRS",

-         "name":"Groestlcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GROW",

-         "name":"GrowCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GRW",

-         "name":"GRW",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GSY",

-         "name":"GSY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GUA",

-         "name":"GUA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NLG",

-         "name":"Gulden",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GUM",

-         "name":"GUM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GUN",

-         "name":"GUN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"GYC",

-         "name":"GYC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HALLO",

-         "name":"HALLO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HAM",

-         "name":"HAM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HBT",

-         "name":"HBT",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"HCC",

-         "name":"HCC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HEAT",

-         "name":"HEAT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HMP",

-         "name":"HempCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XHI",

-         "name":"HiCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HILL",

-         "name":"HILL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HODL",

-         "name":"HOdlcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HKD",

-         "name":"Hong Kong Dollar",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"HZ",

-         "name":"Horizon",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HSP",

-         "name":"HSP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HTC",

-         "name":"HTC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HTML5",

-         "name":"HTMLCOIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HUC",

-         "name":"HUC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HVCO",

-         "name":"HVCO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HXX",

-         "name":"HXX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HYPER",

-         "name":"Hyper",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"HYP",

-         "name":"HyperStake",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"IBANK",

-         "name":"IBANK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ICASH",

-         "name":"iCash",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ICN",

-         "name":"iCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"IFLT",

-         "name":"IFLT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"IMPS",

-         "name":"IMPS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"INCP",

-         "name":"INCP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"IFC",

-         "name":"Infinitecoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"INFX",

-         "name":"Influxcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"IOC",

-         "name":"IO Coin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ION",

-         "name":"ION",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ISL",

-         "name":"IslaCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"IVZ",

-         "name":"IVZ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"IXC",

-         "name":"IXC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"JPY",

-         "name":"Japanese Yen",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"JOBS",

-         "name":"JOBS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"JPC",

-         "name":"JPC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"JBS",

-         "name":"Jumbucks",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"JW",

-         "name":"JW",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"JWL",

-         "name":"JWL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KAT",

-         "name":"KAT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KC",

-         "name":"KC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KNC",

-         "name":"KhanCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KLC",

-         "name":"KLC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KOBO",

-         "name":"KOBO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KORE",

-         "name":"KoreCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KRAK",

-         "name":"KRAK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KRB",

-         "name":"KRB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KRC",

-         "name":"KRC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KRYP",

-         "name":"KRYP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KR",

-         "name":"Krypton",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"KTK",

-         "name":"KTK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LANA",

-         "name":"LANA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LAZ",

-         "name":"LAZ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LBC",

-         "name":"LBC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LC",

-         "name":"LC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LEA",

-         "name":"LeaCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LEAF",

-         "name":"LEAF",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LEO",

-         "name":"LEO",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"LFC",

-         "name":"LFC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LFO",

-         "name":"LFO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LFTC",

-         "name":"LFTC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LGBTQ",

-         "name":"LGBTQ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LIR",

-         "name":"LIR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LSK",

-         "name":"Lisk",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LTC",

-         "name":"Litecoin",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"LTCR",

-         "name":"Litecred",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LIV",

-         "name":"LIV",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LKC",

-         "name":"LKC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LOC",

-         "name":"LOC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LOOT",

-         "name":"LOOT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LTBC",

-         "name":"LTBcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LTH",

-         "name":"LTH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LTS",

-         "name":"LTS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LUCKY",

-         "name":"LUCKY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LUN",

-         "name":"LUN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LXC",

-         "name":"LXC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MAD",

-         "name":"MAD",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XMG",

-         "name":"Magi",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MAID",

-         "name":"MaidSafeCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MXT",

-         "name":"MarteXcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"OMNI",

-         "name":"Mastercoin (Omni)",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MTR",

-         "name":"MasterTraderCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MAX",

-         "name":"Maxcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MZC",

-         "name":"Mazacoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MBL",

-         "name":"MBL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MCZ",

-         "name":"MCZ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MED",

-         "name":"MediterraneanCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MEGA",

-         "name":"MEGA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MEC",

-         "name":"Megacoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MEME",

-         "name":"Memetic",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"METAL",

-         "name":"METAL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MG",

-         "name":"MG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MND",

-         "name":"MindCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MINT",

-         "name":"Mintcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MIS",

-         "name":"MIS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MMNXT",

-         "name":"MMNXT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MMXVI",

-         "name":"MMXVI",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MNM",

-         "name":"MNM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MOIN",

-         "name":"MOIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MOJO",

-         "name":"MojoCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MONA",

-         "name":"MonaCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XMR",

-         "name":"Monero",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"MUE",

-         "name":"MonetaryUnit",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MOON",

-         "name":"Mooncoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MOOND",

-         "name":"MOOND",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MPRO",

-         "name":"MPRO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MRB",

-         "name":"MRB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MUDRA",

-         "name":"MUDRA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MYR",

-         "name":"Myriadcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"N2O",

-         "name":"N2O",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"N7",

-         "name":"N7",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NMC",

-         "name":"Namecoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NAT",

-         "name":"NAT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NAUT",

-         "name":"Nautiluscoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NAV",

-         "name":"NAV Coin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NBIT",

-         "name":"NBIT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NCS",

-         "name":"NCS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NDOGE",

-         "name":"NDOGE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XEM",

-         "name":"NEM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NEOS",

-         "name":"NeosCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NET",

-         "name":"NetCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NEU",

-         "name":"NeuCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NTRN",

-         "name":"Neutron",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NEVA",

-         "name":"NevaCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NEWB",

-         "name":"NEWB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NXS",

-         "name":"Nexus",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NIC",

-         "name":"NIC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NICE",

-         "name":"NICE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NKC",

-         "name":"NKC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NLC",

-         "name":"NLC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NOBL",

-         "name":"NobleCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NODES",

-         "name":"NODES",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NVC",

-         "name":"Novacoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NRS",

-         "name":"NRS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NTC",

-         "name":"NTC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NBT",

-         "name":"NuBits",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NUKE",

-         "name":"NUKE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NUM",

-         "name":"NUM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NSR",

-         "name":"NuShares",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NXE",

-         "name":"NXE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NXT",

-         "name":"NXT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NXTTY",

-         "name":"Nxttycoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NYC",

-         "name":"NYC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NZC",

-         "name":"NZC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"NZD",

-         "name":"NZD",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"OBS",

-         "name":"OBS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"OCOW",

-         "name":"OCOW",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"OK",

-         "name":"OKCash",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"OLYMP",

-         "name":"OLYMP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"OMC",

-         "name":"OMC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ONE",

-         "name":"ONE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"OP",

-         "name":"OP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"OPAL",

-         "name":"OPAL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ORB",

-         "name":"Orbitcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"OZC",

-         "name":"OZC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PAC",

-         "name":"PAC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PAL",

-         "name":"PAL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PND",

-         "name":"Pandacoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PARA",

-         "name":"PARA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PAY",

-         "name":"PAY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XPY",

-         "name":"Paycoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PBC",

-         "name":"PBC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PCM",

-         "name":"PCM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PCS",

-         "name":"PCS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PDC",

-         "name":"PDC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PEC",

-         "name":"PEC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PPC",

-         "name":"Peercoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PEN",

-         "name":"PEN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PHR",

-         "name":"PHR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PIN",

-         "name":"PIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PC",

-         "name":"Pinkcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PIO",

-         "name":"PIO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PIZZA",

-         "name":"PIZZA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PKB",

-         "name":"PKB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PLN",

-         "name":"PLN",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"PLNC",

-         "name":"PLNC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PNK",

-         "name":"PNK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"POKE",

-         "name":"POKE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PONZ2",

-         "name":"PONZ2",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PONZI",

-         "name":"PONZI",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PEX",

-         "name":"PosEx",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"POST",

-         "name":"POST",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"POT",

-         "name":"Potcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PRE",

-         "name":"PRE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PRES",

-         "name":"PRES",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PXI",

-         "name":"Prime-XI",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PRIME",

-         "name":"PrimeChain",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XPM",

-         "name":"Primecoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PRM",

-         "name":"PRM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PRT",

-         "name":"PRT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PSB",

-         "name":"PSB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PSP",

-         "name":"PSP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PSY",

-         "name":"PSY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PTC",

-         "name":"PTC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PURE",

-         "name":"PURE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PUTIN",

-         "name":"PUTIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PWR",

-         "name":"PWR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PX",

-         "name":"PX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"PXL",

-         "name":"PXL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"QBC",

-         "name":"QBC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"QBK",

-         "name":"QBK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"QCN",

-         "name":"QCN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"QORA",

-         "name":"Qora",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"QTZ",

-         "name":"QTZ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"QRK",

-         "name":"Quark",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"QTL",

-         "name":"Quatloo",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RADI",

-         "name":"RADI",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RADS",

-         "name":"Radium",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XRA",

-         "name":"RateCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RBIT",

-         "name":"RBIT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RCN",

-         "name":"RCN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RED",

-         "name":"RED",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RDD",

-         "name":"Reddcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"REE",

-         "name":"REE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"REV",

-         "name":"Revenu",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RICHX",

-         "name":"RICHX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RIC",

-         "name":"Riecoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RBT",

-         "name":"Rimbit",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"RIO",

-         "name":"RIO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XRP",

-         "name":"Ripple",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RISE",

-         "name":"RISE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RMS",

-         "name":"RMS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RONIN",

-         "name":"RONIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ROYAL",

-         "name":"ROYAL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RPC",

-         "name":"RPC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RRT",

-         "name":"RRT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RBIES",

-         "name":"Rubies",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RUBIT",

-         "name":"RUBIT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RUR",

-         "name":"Ruble",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"RBY",

-         "name":"Rubycoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RUST",

-         "name":"RUST",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"RYCN",

-         "name":"RYCN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SEC",

-         "name":"Safe Exchange Coin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SAK",

-         "name":"SAK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SAR",

-         "name":"SAR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SBD",

-         "name":"SBD",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SCAN",

-         "name":"SCAN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SCB",

-         "name":"SCB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SCN",

-         "name":"SCN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SCOT",

-         "name":"Scotcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SCRPT",

-         "name":"SCRPT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SCRT",

-         "name":"SCRT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SCT",

-         "name":"SCT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SRC",

-         "name":"SecureCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SED",

-         "name":"SED",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SXC",

-         "name":"Sexcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SGD",

-         "name":"SGD",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"SH",

-         "name":"SH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SDC",

-         "name":"ShadowCash",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SHELL",

-         "name":"SHELL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SHI",

-         "name":"SHI",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SHIFT",

-         "name":"Shift",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SC",

-         "name":"Siacoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SIB",

-         "name":"Siberian chervonets",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SIGU",

-         "name":"SIGU",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SLFI",

-         "name":"SLFI",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SLING",

-         "name":"Sling",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SLK",

-         "name":"SLK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SLS",

-         "name":"SLS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SMC",

-         "name":"SMC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SMLY",

-         "name":"SmileyCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SNGLS",

-         "name":"SNGLS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SNRG",

-         "name":"SNRG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SOIL",

-         "name":"SOILcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SLR",

-         "name":"Solarcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SONG",

-         "name":"SongCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SOON",

-         "name":"SOON",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SP",

-         "name":"SP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SPACE",

-         "name":"SPACE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SPEX",

-         "name":"SPEX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SPHR",

-         "name":"Sphere",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SPKTR",

-         "name":"SPKTR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SPN",

-         "name":"SPN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SPORT",

-         "name":"SPORT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SPR",

-         "name":"SpreadCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SPT",

-         "name":"SPT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SPX",

-         "name":"SPX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SSC",

-         "name":"SSC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STA",

-         "name":"STA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STAR",

-         "name":"STAR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"START",

-         "name":"Startcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STE",

-         "name":"STE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XST",

-         "name":"Stealthcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STEEM",

-         "name":"Steem",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XLM",

-         "name":"Stellar",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STR",

-         "name":"Stellar",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STEPS",

-         "name":"Steps",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SLG",

-         "name":"Sterlingcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STHR",

-         "name":"STHR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STL",

-         "name":"STL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STO",

-         "name":"STO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SJCX",

-         "name":"Storjcoin X",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STP",

-         "name":"STP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STRAT",

-         "name":"STRAT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STS",

-         "name":"Stress",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"STV",

-         "name":"STV",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SUB",

-         "name":"Subcriptio",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UNITY",

-         "name":"SuperNET",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SWEET",

-         "name":"SWEET",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SWING",

-         "name":"SWING",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SYNC",

-         "name":"SYNC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"AMP",

-         "name":"Synereo",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SYNX",

-         "name":"SYNX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"SYS",

-         "name":"Syscoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TAB",

-         "name":"TAB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TAG",

-         "name":"TagCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TAJ",

-         "name":"TAJ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TAK",

-         "name":"TAK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TAO",

-         "name":"TAO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TBC",

-         "name":"TBC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TC",

-         "name":"TC",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"TCOIN",

-         "name":"TCOIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TCR",

-         "name":"TCR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TDFB",

-         "name":"TDFB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TDY",

-         "name":"TDY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TEAM",

-         "name":"TEAM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TEC",

-         "name":"TEC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TECH",

-         "name":"TECH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TEK",

-         "name":"TEKcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TRC",

-         "name":"Terracoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TESLA",

-         "name":"TESLA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TES",

-         "name":"TeslaCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TET",

-         "name":"TET",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"THC",

-         "name":"THC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"DAO",

-         "name":"The DAO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TIA",

-         "name":"TIA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TIX",

-         "name":"Tickets",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XTC",

-         "name":"TileCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TIT",

-         "name":"Titcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TMC",

-         "name":"TMC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TNG",

-         "name":"TNG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TODAY",

-         "name":"TODAY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TOKEN",

-         "name":"TOKEN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TP1",

-         "name":"TP1",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TPC",

-         "name":"TPC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TPG",

-         "name":"TPG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TX",

-         "name":"Transfercoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TRAP",

-         "name":"TRAP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TRICK",

-         "name":"TRICK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TRIG",

-         "name":"TRIG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TROLL",

-         "name":"TROLL",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TRK",

-         "name":"Truckcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TRUMP",

-         "name":"TrumpCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TRUST",

-         "name":"TRUST",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TSC",

-         "name":"TSC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TWERK",

-         "name":"TWERK",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TWIST",

-         "name":"TWIST",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"TWO",

-         "name":"TWO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UAE",

-         "name":"UAE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UB",

-         "name":"UB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UFO",

-         "name":"UFO Coin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UIS",

-         "name":"UIS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UAH",

-         "name":"Ukrainian Hryvnia",

-         "statuses":[

-            "secondary"

-         ]

-      },

-      {

-         "code":"UTC",

-         "name":"UltraCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UNB",

-         "name":"UNB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UNC",

-         "name":"UNC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UNF",

-         "name":"Unfed",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UNIQ",

-         "name":"UNIQ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UNIT",

-         "name":"Universal Currency",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"UNO",

-         "name":"Unobtanium",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"URC",

-         "name":"URC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"URO",

-         "name":"Uro",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"USD",

-         "name":"US Dollar",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"USDE",

-         "name":"USDE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XVC",

-         "name":"Vcash",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VCN",

-         "name":"VCN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VCOIN",

-         "name":"VCOIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VEC",

-         "name":"VEC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VEG",

-         "name":"VEG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XVG",

-         "name":"Verge",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VRC",

-         "name":"VeriCoin",

-         "statuses":[

-            "primary",

-            "secondary"

-         ]

-      },

-      {

-         "code":"VTC",

-         "name":"Vertcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VIA",

-         "name":"Viacoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VIP",

-         "name":"VIP Tokens",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VIRAL",

-         "name":"Viral",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VLT",

-         "name":"VLT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VOOT",

-         "name":"VootCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VOX",

-         "name":"Voxels",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VOYA",

-         "name":"VOYA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VPN",

-         "name":"VPNCoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VRM",

-         "name":"VRM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VRS",

-         "name":"VRS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VTA",

-         "name":"VTA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VTN",

-         "name":"VTN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VTR",

-         "name":"VTR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"VTY",

-         "name":"VTY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WA",

-         "name":"WA",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WAC",

-         "name":"WAC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WARP",

-         "name":"WARP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WASH",

-         "name":"WASH",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WAV",

-         "name":"WAV",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WAVES",

-         "name":"WAVES",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WAY",

-         "name":"WAY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WCN",

-         "name":"WCN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WEX",

-         "name":"WEX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WGC",

-         "name":"WGC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XWC",

-         "name":"Whitecoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WBB",

-         "name":"Wild Beast Block",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WINE",

-         "name":"WINE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WLC",

-         "name":"WLC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WMC",

-         "name":"WMC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"LOG",

-         "name":"Woodcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WDC",

-         "name":"Worldcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"WRP",

-         "name":"WRP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"X2",

-         "name":"X2",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"X2C",

-         "name":"X2C",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XAB",

-         "name":"XAB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XAUR",

-         "name":"XAUR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XAU",

-         "name":"Xaurum",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XBS",

-         "name":"XBS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XBTS",

-         "name":"XBTS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XBU",

-         "name":"XBU",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XCO",

-         "name":"XCO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XC",

-         "name":"XCurrency",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XDB",

-         "name":"XDB",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XDE2",

-         "name":"XDE2",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"MI",

-         "name":"Xiaomicoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XID",

-         "name":"XID",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XJO",

-         "name":"XJO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XLTCG",

-         "name":"XLTCG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XMINE",

-         "name":"XMINE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XMS",

-         "name":"XMS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XNG",

-         "name":"XNG",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XODUS",

-         "name":"XODUS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XPC",

-         "name":"XPC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XPO",

-         "name":"XPO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XPOKE",

-         "name":"XPOKE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XPRO",

-         "name":"XPRO",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XPTX",

-         "name":"XPTX",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XQN",

-         "name":"XQN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XRC",

-         "name":"XRC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XSEED",

-         "name":"XSEED",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XSY",

-         "name":"XSY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XTP",

-         "name":"XTP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XUP",

-         "name":"XUP",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"YAC",

-         "name":"Yacoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"YAY",

-         "name":"YAY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"YBC",

-         "name":"Ybcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"YMC",

-         "name":"YMC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"YOC",

-         "name":"YOC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"YOVI",

-         "name":"YOVI",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"YUM",

-         "name":"YUM",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZEC",

-         "name":"Zcash",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZCL",

-         "name":"Zcash classic",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZCC",

-         "name":"ZCC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZCOIN",

-         "name":"ZCOIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"XZC",

-         "name":"Zcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZECD",

-         "name":"ZECD",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZEIT",

-         "name":"Zeitcoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZET2",

-         "name":"ZET2",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZET",

-         "name":"Zetacoin",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZRC",

-         "name":"ZiftrCOIN",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZLQ",

-         "name":"ZLQ",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZMC",

-         "name":"ZMC",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZNE",

-         "name":"ZNE",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZNY",

-         "name":"ZNY",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZS",

-         "name":"ZS",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZUR",

-         "name":"ZUR",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZXT",

-         "name":"ZXT",

-         "statuses":[

-            "primary"

-         ]

-      },

-      {

-         "code":"ZYD",

-         "name":"ZYD",

-         "statuses":[

-            "primary"

-         ]

-      }

-   ]

-}
\ No newline at end of file
diff --git a/ui/app/css/debug.css b/ui/app/css/debug.css
deleted file mode 100644
index 3e125bcd4..000000000
--- a/ui/app/css/debug.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
-debug / dev
-*/
-
-#app-content {
-  border: 2px solid green;
-}
-
-#design-container {
-  position: absolute;
-  left: 360px;
-  top: -42px;
-  width: calc(100vw - 360px);
-  height: 100vh;
-  overflow: scroll;
-}
-
-#design-container img {
-  width: 2000px;
-  margin-right: 600px;
-}
\ No newline at end of file
diff --git a/ui/app/css/fonts.css b/ui/app/css/fonts.css
deleted file mode 100644
index 3b9f581b9..000000000
--- a/ui/app/css/fonts.css
+++ /dev/null
@@ -1,36 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Roboto:300,500);
-@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
-
-@font-face {
-  font-family: 'Montserrat Regular';
-    src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
-    src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-  font-size: 'small';
-
-}
-
-@font-face {
-  font-family: 'Montserrat Bold';
-    src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
-    src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat Light';
-    src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff');
-    src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat UltraLight';
-    src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
-    src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss
new file mode 100644
index 000000000..445c819ff
--- /dev/null
+++ b/ui/app/css/index.scss
@@ -0,0 +1,14 @@
+/*
+  ITCSS
+
+  http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
+  https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
+ */
+
+@import './itcss/settings/index.scss';
+@import './itcss/tools/index.scss';
+@import './itcss/generic/index.scss';
+@import './itcss/base/index.scss';
+@import './itcss/objects/index.scss';
+@import './itcss/components/index.scss';
+@import './itcss/trumps/index.scss';
diff --git a/ui/app/css/itcss/base/index.scss b/ui/app/css/itcss/base/index.scss
new file mode 100644
index 000000000..1475e8bb5
--- /dev/null
+++ b/ui/app/css/itcss/base/index.scss
@@ -0,0 +1,7 @@
+// Base
+
+.mouse-user-styles {
+  button:focus {
+    outline: 0;
+  }
+}
diff --git a/ui/app/css/itcss/components/account-dropdown-mini.scss b/ui/app/css/itcss/components/account-dropdown-mini.scss
new file mode 100644
index 000000000..996993db7
--- /dev/null
+++ b/ui/app/css/itcss/components/account-dropdown-mini.scss
@@ -0,0 +1,48 @@
+.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
new file mode 100644
index 000000000..725da9d39
--- /dev/null
+++ b/ui/app/css/itcss/components/account-dropdown.scss
@@ -0,0 +1,83 @@
+.account-dropdown-name {
+  font-family: Roboto;
+}
+
+.account-dropdown-balance {
+  color: $dusty-gray;
+  line-height: 19px;
+}
+
+.account-dropdown-edit-button {
+  color: $dusty-gray;
+  font-family: Roboto;
+
+  &:hover {
+    color: $white;
+  }
+}
+
+.account-list-item {
+  &__top-row {
+    display: flex;
+    margin-top: 10px;
+    margin-left: 8px;
+    position: relative;
+  }
+
+  &__account-balances {
+    height: auto;
+    border: none;
+    background-color: transparent;
+    color: #9b9b9b;
+    margin-left: 34px;
+    margin-top: 4px;
+    position: relative;
+  }
+  
+  &__account-name {
+    font-size: 16px;
+    margin-left: 8px;
+  }
+
+  &__icon {
+    position: absolute;
+    right: 12px;
+    top: 1px;
+  }
+
+  &__account-primary-balance,
+  &__account-secondary-balance {
+    font-family: Roboto;
+    line-height: 16px;
+    font-size: 12px;
+    font-weight: 300;
+  }
+
+  &__account-primary-balance {
+    color: $scorpion;
+    border: none;
+    outline: 0 !important;
+  }
+
+  &__account-secondary-balance {
+    color: $dusty-gray;
+  }
+
+  &__account-address {
+    margin-left: 35px;
+    width: 80%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__dropdown {
+    &:hover {
+      background: rgba($alto, .2);
+      cursor: pointer;
+
+      input {
+        background: rgba($alto, .1);
+      }
+    }
+  }
+}
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
new file mode 100644
index 000000000..8ad7481c7
--- /dev/null
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -0,0 +1,132 @@
+.account-menu {
+  position: fixed;
+  z-index: 100;
+  top: 58px;
+  width: 310px;
+
+  @media screen and (max-width: 575px) {
+    right: calc(((100vw - 100%) / 2) + 8px);
+  }
+
+  @media screen and (min-width: 576px) {
+    right: calc((100vw - 85vw) / 2);
+  }
+
+  @media screen and (min-width: 769px) {
+    right: calc((100vw - 80vw) / 2);
+  }
+
+  @media screen and (min-width: 1281px) {
+    right: calc((100vw - 65vw) / 2);
+  }
+
+  &__icon {
+    margin-left: 20px;
+    cursor: pointer;
+  }
+
+  &__header {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__logout-button {
+    border: 1px solid $dusty-gray;
+    background-color: transparent;
+    color: $white;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 23px;
+    padding: 0 24px;
+    font-weight: 300;
+  }
+
+  &__item-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  &__accounts {
+    display: flex;
+    flex-flow: column nowrap;
+    overflow-y: auto;
+    max-height: 240px;
+    position: relative;
+    z-index: 200;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @media screen and (max-width: 575px) {
+      max-height: 215px;
+    }
+
+    .keyring-label {
+      margin-top: 5px;
+      background-color: $black;
+      color: $dusty-gray;
+    }
+  }
+
+  &__account {
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 16px 14px;
+    flex: 0 0 auto;
+
+    @media screen and (max-width: 575px) {
+      padding: 12px 14px;
+    }
+  }
+
+  &__account-info {
+    flex: 1 0 auto;
+    display: flex;
+    flex-flow: column nowrap;
+    padding-top: 4px;
+  }
+
+  &__check-mark {
+    width: 14px;
+    margin-right: 12px;
+    flex: 0 0 auto;
+  }
+
+  &__check-mark-icon {
+    background-image: url("images/check-white.svg");
+    height: 18px;
+    width: 18px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    margin: 3px 0;
+  }
+
+  .identicon {
+    margin: 0 12px 0 0;
+    flex: 0 0 auto;
+  }
+
+  &__name {
+    color: $white;
+    font-size: 18px;
+    font-weight: 300;
+    line-height: 16px;
+  }
+
+  &__balance {
+    color: $dusty-gray;
+    font-size: 14px;
+    line-height: 19px;
+  }
+
+  &__action {
+    font-size: 16px;
+    line-height: 18px;
+    font-weight: 300;
+    cursor: pointer;
+  }
+}
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
new file mode 100644
index 000000000..13020f62f
--- /dev/null
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -0,0 +1,343 @@
+.add-token {
+  width: 498px;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  position: relative;
+  z-index: 12;
+  font-family: 'DIN Next Light';
+
+  &__wrapper {
+    background-color: $white;
+    box-shadow: 0 2px 4px 0 rgba($black, .08);
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+
+  &__title-container {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    padding: 30px 60px 12px;
+    border-bottom: 1px solid $gallery;
+    flex: 0 0 auto;
+  }
+
+  &__title {
+    color: $scorpion;
+    font-size: 20px;
+    line-height: 26px;
+    text-align: center;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+
+  &__description {
+    text-align: center;
+  }
+
+  &__description + &__description {
+    margin-top: 24px;
+  }
+
+  &__confirmation-description {
+    margin: 12px 0;
+  }
+
+  &__content-container {
+    width: 100%;
+    border-bottom: 1px solid $gallery;
+  }
+
+  &__input-container {
+    padding: 11px 0;
+    width: 263px;
+    margin: 0 auto;
+    position: relative;
+  }
+
+  &__search-input-error-message {
+    position: absolute;
+    bottom: -10px;
+    font-size: 12px;
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: $red;
+  }
+
+  &__input {
+    width: 100%;
+    border: 2px solid $gallery;
+    border-radius: 4px;
+    padding: 5px 15px;
+    font-size: 14px;
+    line-height: 19px;
+
+    &::placeholder {
+      color: $silver;
+    }
+  }
+
+  &__footers {
+    width: 100%;
+  }
+
+  &__add-custom {
+    color: $scorpion;
+    font-size: 18px;
+    line-height: 24px;
+    text-align: center;
+    padding: 12px 0;
+    font-weight: 600;
+    cursor: pointer;
+    position: relative;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .05);
+    }
+
+    &:active {
+      background-color: rgba(0, 0, 0, .1);
+    }
+
+    .fa {
+      position: absolute;
+      right: 24px;
+      font-size: 24px;
+      line-height: 24px;
+    }
+  }
+
+  &__add-custom-form {
+    display: flex;
+    flex-flow: column nowrap;
+    margin: 8px 0 51px;
+  }
+
+  &__add-custom-field {
+    width: 290px;
+    margin: 0 auto;
+    position: relative;
+
+    &--error {
+      .add-token__add-custom-input {
+        border-color: $red;
+      }
+    }
+  }
+
+  &__add-custom-error-message {
+    position: absolute;
+    bottom: -21px;
+    font-size: 12px;
+    width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: $red;
+  }
+
+  &__add-custom-label {
+    font-size: 16px;
+    line-height: 21px;
+    margin-bottom: 8px;
+  }
+
+  &__add-custom-input {
+    width: 100%;
+    border: 1px solid $silver;
+    padding: 5px 15px;
+    font-size: 14px;
+    line-height: 19px;
+
+    &::placeholder {
+      color: $silver;
+    }
+  }
+
+  &__add-custom-field + &__add-custom-field {
+    margin-top: 21px;
+  }
+
+  &__buttons {
+    display: flex;
+    flex-flow: row nowrap;
+    margin: 30px 0 51px;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__button {
+    flex: 1 0 141px;
+    margin: 0 12px;
+    padding: 10px 22px;
+    height: 54px;
+  }
+
+  &__token-icons-container {
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  &__token-wrapper {
+    transition: 200ms ease-in-out;
+    display: flex;
+    flex-flow: row nowrap;
+    flex: 0 0 42.5%;
+    align-items: center;
+    padding: 12px;
+    margin: 2.5%;
+    box-sizing: border-box;
+    border-radius: 10px;
+    cursor: pointer;
+    border: 2px solid transparent;
+    position: relative;
+
+    &:hover {
+      border: 2px solid rgba($malibu-blue, .5);
+    }
+
+    &--selected {
+      border: 2px solid $malibu-blue !important;
+    }
+
+    &--disabled {
+      opacity: .4;
+      pointer-events: none;
+    }
+  }
+
+  &__token-data {
+    align-self: flex-start;
+  }
+
+  &__token-name {
+    font-size: 14px;
+    line-height: 19px;
+  }
+
+  &__token-symbol {
+    font-size: 22px;
+    line-height: 29px;
+    font-weight: 600;
+  }
+
+  &__token-icon {
+    width: 60px;
+    height: 60px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    border-radius: 50%;
+    background-color: $white;
+    box-shadow: 0 2px 4px 0 rgba($black, .24);
+    margin-right: 12px;
+    flex: 0 0 auto;
+  }
+
+  &__token-message {
+    position: absolute;
+    color: $caribbean-green;
+    font-size: 11px;
+    bottom: 0;
+    left: 85px;
+  }
+
+  &__confirmation-token-list {
+    display: flex;
+    flex-flow: column nowrap;
+
+    .token-balance {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: flex-start;
+
+      &__amount {
+        color: $scorpion;
+        font-size: 43px;
+        font-weight: 300;
+        line-height: 43px;
+        margin-right: 8px;
+      }
+
+      &__symbol {
+        color: $scorpion;
+        font-size: 16px;
+        line-height: 24px;
+      }
+    }
+  }
+
+  &__confirmation-title {
+    padding: 30px 120px 12px;
+
+    @media screen and (max-width: $break-small) {
+      padding: 20px 0;
+      width: 100%;
+    }
+  }
+
+  &__confirmation-content {
+    padding-bottom: 60px;
+  }
+
+  &__confirmation-token-list-item {
+    display: flex;
+    flex-flow: row nowrap;
+    margin: 0 auto;
+    align-items: center;
+  }
+
+  &__confirmation-token-list-item + &__confirmation-token-list-item {
+    margin-top: 30px;
+  }
+
+  &__confirmation-token-icon {
+    margin-right: 18px;
+  }
+
+  @media screen and (max-width: $break-small) {
+    top: 0;
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+
+    &__wrapper {
+      box-shadow: none !important;
+      flex: 1 1 auto;
+      width: 100%;
+      overflow-y: auto;
+    }
+
+    &__footers {
+      border-bottom: 1px solid $gallery;
+    }
+
+    &__token-icon {
+      width: 50px;
+      height: 50px;
+    }
+
+    &__token-symbol {
+      font-size: 18px;
+      line-height: 24px;
+    }
+
+    &__token-name {
+      font-size: 12px;
+      line-height: 16px;
+    }
+
+    &__buttons {
+      padding: 12px 0;
+      margin: 0;
+      border-top: 1px solid $gallery;
+      width: 100%;
+    }
+  }
+}
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
new file mode 100644
index 000000000..1450b71cc
--- /dev/null
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -0,0 +1,142 @@
+/*
+  Buttons
+ */
+
+.btn-green {
+  background-color: #02c9b1; // TODO: reusable color in colors.css
+}
+
+.btn-clear {
+  background: $white;
+  text-align: center;
+  padding: .8rem 1rem;
+  color: $curious-blue;
+  border: 2px solid $spindle;
+  border-radius: 4px;
+  font-size: .85rem;
+  font-weight: 400;
+  transition: border-color .3s ease;
+
+  &:hover {
+    border-color: $curious-blue;
+  }
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: .5;
+    pointer-events: none;
+  }
+}
+
+.btn-cancel {
+  background: $white;
+  text-align: center;
+  padding: .9rem 1rem;
+  color: $scorpion;
+  border: 2px solid $dusty-gray;
+  border-radius: 4px;
+  font-size: .85rem;
+  font-weight: 400;
+  transition: border-color .3s ease;
+
+  &:hover {
+    border-color: $scorpion;
+  }
+}
+
+// No longer used in flat design, remove when modal buttons done
+// div.wallet-btn {
+//   border: 1px solid rgb(91, 93, 103);
+//   border-radius: 2px;
+//   height: 30px;
+//   width: 75px;
+//   font-size: 0.8em;
+//   text-align: center;
+//   line-height: 25px;
+// }
+
+// .btn-red {
+//   background: rgba(254, 35, 17, 1);
+//   box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
+// }
+
+button[disabled],
+input[type="submit"][disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+  // background: rgba(197, 197, 197, 1);
+  // box-shadow: 0 3px 6px rgba(197, 197, 197, .36);
+}
+
+// button.spaced {
+//   margin: 2px;
+// }
+
+// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
+//   transform: scale(1.1);
+// }
+// button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
+//   transform: scale(0.95);
+// }
+
+button.primary {
+  padding: 8px 12px;
+  background: #f7861c;
+  box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
+  color: $white;
+  font-size: 1.1em;
+  font-family: Roboto;
+  text-transform: uppercase;
+}
+
+.btn-light {
+  padding: 8px 12px;
+  // background: #FFFFFF; // $bg-white
+  box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
+  color: #585d67; // TODO: make reusable light button color
+  font-size: 1.1em;
+  font-family: Roboto;
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 20px;
+  border-radius: 2px;
+  border: 1px solid #979797; // #TODO: make reusable light border color
+  opacity: .5;
+}
+
+// TODO: cleanup: not used anywhere
+button.btn-thin {
+  border: 1px solid;
+  border-color: #4d4d4d;
+  color: #4d4d4d;
+  background: rgb(255, 174, 41);
+  border-radius: 4px;
+  min-width: 200px;
+  margin: 12px 0;
+  padding: 6px;
+  font-size: 13px;
+}
+
+.btn-secondary {
+  border: 1px solid #979797;
+  border-radius: 2px;
+  background-color: $white;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 16px 42px;
+
+  &[disabled] {
+    background-color: $white !important;
+    opacity: .5;
+  }
+}
+
+.btn-tertiary {
+  border: 1px solid transparent;
+  border-radius: 2px;
+  background-color: transparent;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 16px 42px;
+}
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
new file mode 100644
index 000000000..878495290
--- /dev/null
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -0,0 +1,324 @@
+.confirm-screen-container {
+  position: relative;
+  align-items: center;
+  font-family: Roboto;
+  flex: 1 0 auto;
+  flex-flow: column nowrap;
+  box-shadow: 0 2px 4px 0 rgba($black, .08);
+  border-radius: 8px;
+  display: flex;
+
+  @media screen and (max-width: 575px) {
+    width: 100%;
+    box-shadow: initial;
+  }
+
+  @media screen and (min-width: 576px) {
+    // top: -26px;
+  }
+}
+
+.notification {
+  .confirm-screen-wrapper {
+
+    @media screen and (max-width: $break-small) {
+      height: calc(100vh - 85px);
+    }
+  }
+}
+
+.confirm-screen-wrapper {
+  height: 100%;
+  width: 380px;
+  background-color: $white;
+  display: flex;
+  flex-flow: column nowrap;
+  z-index: 25;
+  align-items: center;
+  font-family: Roboto;
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+
+  @media screen and (max-width: $break-small) {
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    top: 0;
+    box-shadow: none;
+    height: calc(100vh - 58px - 85px);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.confirm-screen-wrapper > .confirm-screen-total-box {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.confirm-screen-wrapper > .confirm-memo-wrapper {
+  margin: 0;
+}
+
+.confirm-screen-header {
+  height: 88px;
+  background-color: $athens-grey;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 22px;
+  line-height: 29px;
+  width: 100%;
+  padding: 25px 0;
+  flex: 0 0 auto;
+
+  @media screen and (max-width: $break-small) {
+    font-size: 20px;
+  }
+}
+
+.confirm-screen-header-tip {
+  height: 25px;
+  width: 25px;
+  background: $athens-grey;
+  position: absolute;
+  transform: rotate(45deg);
+  top: 71px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+}
+
+.confirm-screen-title {
+  line-height: 27px;
+
+  @media screen and (max-width: $break-small) {
+    margin-left: 22px;
+    margin-right: 8px;
+  }
+}
+
+.confirm-screen-back-button {
+  color: $curious-blue;
+  font-family: Roboto;
+  font-size: 1rem;
+  position: absolute;
+  top: 38px;
+  right: 38px;
+  background: none;
+}
+
+.confirm-screen-account-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.confirm-screen-account-name {
+  margin-top: 12px;
+  font-size: 14px;
+  line-height: 19px;
+  color: $scorpion;
+  text-align: center;
+}
+
+.confirm-screen-row-info {
+  font-size: 16px;
+  line-height: 21px;
+}
+
+.confirm-screen-account-number {
+  font-size: 10px;
+  line-height: 16px;
+  color: $dusty-gray;
+  text-align: center;
+  height: 16px;
+}
+
+.confirm-send-ether,
+.confirm-send-token {
+  i.fa-arrow-right {
+    align-self: start;
+    margin: 24px 14px 0 !important;
+  }
+}
+
+.confirm-screen-identicons {
+  margin-top: 24px;
+  flex: 0 0 auto;
+
+  i.fa-arrow-right {
+    align-self: start;
+    margin: 42px 14px 0;
+  }
+
+  i.fa-file-text-o {
+    font-size: 60px;
+    margin: 16px 8px 0 8px;
+    text-align: center;
+  }
+}
+
+.confirm-screen-sending-to-message {
+  text-align: center;
+  font-size: 16px;
+  margin-top: 30px;
+  font-family: 'DIN NEXT Light';
+}
+
+.confirm-screen-send-amount {
+  color: $scorpion;
+  margin-top: 12px;
+  text-align: center;
+  font-size: 40px;
+  font-weight: 300;
+  line-height: 53px;
+  flex: 0 0 auto;
+}
+
+.confirm-screen-send-amount-currency {
+  font-size: 20px;
+  line-height: 20px;
+  text-align: center;
+  flex: 0 0 auto;
+}
+
+.confirm-memo-wrapper {
+  min-height: 24px;
+  width: 100%;
+  border-bottom: 1px solid $alto;
+  flex: 0 0 auto;
+}
+
+.confirm-screen-send-memo {
+  color: $scorpion;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 400;
+}
+
+.confirm-screen-label {
+  font-size: 18px;
+  line-height: 40px;
+  color: $scorpion;
+  text-align: left;
+}
+
+section .confirm-screen-account-name,
+section .confirm-screen-account-number,
+.confirm-screen-row-info,
+.confirm-screen-row-detail {
+  text-align: left;
+}
+
+.confirm-screen-rows {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+.confirm-screen-section-column {
+  flex: .5;
+}
+
+.confirm-screen-row {
+  display: flex;
+  flex-flow: row nowrap;
+  border-bottom: 1px solid $alto;
+  width: 100%;
+  align-items: center;
+  padding: 12px;
+  padding-left: 35px;
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 300;
+}
+
+.confirm-screen-row-detail {
+  font-size: 12px;
+  line-height: 16px;
+  color: $dusty-gray;
+}
+
+.confirm-screen-total-box {
+  background-color: $wild-sand;
+  padding: 20px;
+  padding-left: 35px;
+  border-bottom: 1px solid $alto;
+
+  .confirm-screen-label {
+    line-height: 18px;
+  }
+
+  .confirm-screen-row-detail {
+    color: $scorpion;
+  }
+
+  &__subtitle {
+    font-size: 12px;
+    line-height: 22px;
+  }
+
+  .confirm-screen-row-info {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 21px;
+  }
+}
+
+.confirm-screen-confirm-button {
+  height: 50px;
+  border-radius: 4px;
+  background-color: #02c9b1;
+  font-size: 16px;
+  color: $white;
+  text-align: center;
+  font-family: Roboto;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  border-width: 0;
+  box-shadow: none;
+  flex: 1 0 auto;
+  font-weight: 300;
+  margin: 0 5px;
+}
+
+.btn-light.confirm-screen-cancel-button {
+  height: 50px;
+  background: none;
+  border: none;
+  opacity: 1;
+  font-family: Roboto;
+  border-width: 0;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  font-size: 16px;
+  box-shadow: none;
+  cursor: pointer;
+  flex: 1 0 auto;
+  font-weight: 300;
+  margin: 0 5px;
+}
+
+#pending-tx-form {
+  flex: 1 0 auto;
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  background-color: $white;
+  padding: 12px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  width: 100%;
+
+  @media screen and (max-width: $break-small) {
+    border-top: 1px solid $alto;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
new file mode 100644
index 000000000..e043c1966
--- /dev/null
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -0,0 +1,57 @@
+.currency-display {
+  height: 54px;
+  width: 100%ß;
+  border: 1px solid $alto;
+  border-radius: 4px;
+  background-color: $white;
+  color: $scorpion;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: 300;
+  padding: 8px 10px;
+  position: relative;
+
+  &__primary-row {
+    display: flex;
+  }
+
+  &__input {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 22px;
+    border: none;
+    outline: 0 !important;
+    max-width: 100%;
+  }
+
+  &__primary-currency {
+    color: $scorpion;
+    font-weight: 400;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  &__converted-row {
+    display: flex;
+  }
+
+  &__converted-value,
+  &__converted-currency {
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 12px;
+    line-height: 12px;
+  }
+
+  &__input-wrapper {
+    position: relative;
+    display: flex;
+  }
+
+  &__currency-symbol {
+    margin-top: 1px;
+    color: $scorpion;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/editable-label.scss b/ui/app/css/itcss/components/editable-label.scss
new file mode 100644
index 000000000..c69ea1428
--- /dev/null
+++ b/ui/app/css/itcss/components/editable-label.scss
@@ -0,0 +1,35 @@
+.editable-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &__value {
+    max-width: 250px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__input {
+    width: 250px;
+    font-size: 14px;
+    text-align: center;
+    border: 1px solid $alto;
+
+    &--error {
+      border: 1px solid $monzo;
+    }
+  }
+
+  &__icon-wrapper {
+    position: absolute;
+    margin-left: 10px;
+    left: 100%;
+  }
+
+  &__icon {
+    cursor: pointer;
+    color: $dusty-gray;
+  }
+}
diff --git a/ui/app/css/itcss/components/footer.scss b/ui/app/css/itcss/components/footer.scss
new file mode 100644
index 000000000..000a53eed
--- /dev/null
+++ b/ui/app/css/itcss/components/footer.scss
@@ -0,0 +1,4 @@
+.app-footer {
+  padding-bottom: 10px;
+  align-items: center;
+}
diff --git a/ui/app/css/itcss/components/gas-slider.scss b/ui/app/css/itcss/components/gas-slider.scss
new file mode 100644
index 000000000..c27a560bd
--- /dev/null
+++ b/ui/app/css/itcss/components/gas-slider.scss
@@ -0,0 +1,51 @@
+.gas-slider {
+  position: relative;
+  width: 313px;
+
+  &__input {
+    width: 317px;
+    margin-left: -2px;
+    z-index: 2;
+  }
+
+  input[type=range] {
+    -webkit-appearance: none !important;
+  }
+
+  input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    height: 26px;
+    width: 26px;
+    border: 2px solid #B8B8B8;
+    background-color: #FFFFFF;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
+    border-radius: 50%;
+    position: relative;
+    z-index: 10;
+  }
+
+  &__bar {
+    height: 6px;
+    width: 313px;
+    background: $alto;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    top: 11px;
+    z-index: 0;
+  }
+
+  &__low, &__high {
+    height: 6px;
+    width: 49px;
+    z-index: 1;
+  }
+
+  &__low {
+    background-color: $crimson;
+  }
+
+  &__high {
+    background-color: $caribbean-green;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
new file mode 100644
index 000000000..ac2cecf7e
--- /dev/null
+++ b/ui/app/css/itcss/components/header.scss
@@ -0,0 +1,107 @@
+.app-header {
+  align-items: center;
+  visibility: visible;
+  background: $gallery;
+  position: relative;
+  z-index: $header-z-index;
+  display: flex;
+  flex-flow: column nowrap;
+
+  @media screen and (max-width: 575px) {
+    padding: 12px;
+    width: 100%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
+    z-index: $mobile-header-z-index;
+  }
+
+  @media screen and (min-width: 576px) {
+    height: 75px;
+    justify-content: center;
+  }
+
+  .metafox-icon {
+    cursor: pointer;
+  }
+}
+
+.app-header--initialized {
+
+  @media screen and (min-width: 576px) {
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 32px;
+      background: $gallery;
+      bottom: -32px;
+    }
+  }
+}
+
+.app-header-contents {
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+  width: 100%;
+  height: 6.9vh;
+
+  @media screen and (max-width: 575px) {
+    height: 100%;
+  }
+
+  @media screen and (min-width: 576px) {
+    width: 85vw;
+  }
+
+  @media screen and (min-width: 769px) {
+    width: 80vw;
+  }
+
+  @media screen and (min-width: 1281px) {
+    width: 62vw;
+  }
+}
+
+.app-header h1 {
+  font-family: Roboto;
+  text-transform: uppercase;
+  font-weight: 400;
+  font-size: 1.1rem;
+  position: relative;
+  padding-left: 15px;
+  color: #5b5d67;
+
+  @media screen and (max-width: 575px) {
+    display: none;
+  }
+}
+
+h2.page-subtitle {
+  text-transform: uppercase;
+  color: #aeaeae;
+  font-size: 1em;
+  margin: 12px;
+}
+
+.network-component-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.left-menu-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+
+.header__right-actions {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+
+  .identicon {
+    cursor: pointer;
+  }
+}
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
new file mode 100644
index 000000000..4af0c2c55
--- /dev/null
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -0,0 +1,118 @@
+.hero-balance {
+
+  @media screen and (max-width: $break-small) {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin: .3em .9em 0;
+    // height: 80vh;
+    // max-height: 225px;
+    flex: 0 0 auto;
+  }
+
+  @media screen and (min-width: $break-large) {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 2.3em 2.37em .8em;
+    flex: 0 0 auto;
+  }
+
+  .balance-container {
+    display: flex;
+    margin: 0;
+    justify-content: flex-start;
+    align-items: center;
+
+    @media screen and (max-width: $break-small) {
+      flex-direction: column;
+      flex: 0 0 auto;
+    }
+
+    @media screen and (min-width: $break-large) {
+      flex-direction: row;
+      flex-grow: 3;
+    }
+  }
+
+  .balance-display {
+    .token-amount {
+      color: $black;
+    }
+
+    @media screen and (max-width: $break-small) {
+      text-align: center;
+
+      .token-amount {
+        font-size: 1.75rem;
+        margin-top: 1rem;
+      }
+
+      .fiat-amount {
+        font-size: 115%;
+        margin-top: 8.5%;
+        color: #a0a0a0;
+      }
+    }
+
+    @media screen and (min-width: $break-large) {
+      margin-left: .8em;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .token-amount {
+        font-size: 1.5rem;
+      }
+
+      .fiat-amount {
+        margin-top: .25%;
+        font-size: 105%;
+      }
+    }
+
+    @media #{$sub-mid-size-breakpoint-range} {
+      margin-left: .4em;
+      margin-right: .4em;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .token-amount {
+        font-size: 1rem;
+      }
+
+      .fiat-amount {
+        margin-top: .25%;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  .hero-balance-buttons {
+
+    @media screen and (max-width: $break-small) {
+      width: 100%;
+      // height: 100px; // needed a round number to set the heights of the buttons inside
+      flex: 0 0 auto;
+      padding: 16px 0;
+    }
+
+    @media screen and (min-width: $break-large) {
+      flex-grow: 2;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.hero-balance-button {
+  width: 6rem;
+
+  @media #{$sub-mid-size-breakpoint-range} {
+    padding: 0.4rem;
+    width: 4rem;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+  }
+}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
new file mode 100644
index 000000000..0219f9fb2
--- /dev/null
+++ b/ui/app/css/itcss/components/index.scss
@@ -0,0 +1,57 @@
+@import './buttons.scss';
+
+@import './header.scss';
+
+@import './footer.scss';
+
+@import './network.scss';
+
+@import './modal.scss';
+
+@import './newui-sections.scss';
+
+@import './account-dropdown.scss';
+
+@import './send.scss';
+
+@import './confirm.scss';
+
+@import './loading-overlay.scss';
+
+// Balances
+@import './hero-balance.scss';
+
+@import './wallet-balance.scss';
+
+// Tx List and Sections
+@import './transaction-list.scss';
+
+@import './sections.scss';
+
+@import './token-list.scss';
+
+@import './add-token.scss';
+
+@import './currency-display.scss';
+
+@import './account-menu.scss';
+
+@import './menu.scss';
+
+@import './gas-slider.scss';
+
+@import './settings.scss';
+
+@import './tab-bar.scss';
+
+@import './simple-dropdown.scss';
+
+@import './request-signature.scss';
+
+@import './account-dropdown-mini.scss';
+
+@import './editable-label.scss';
+
+@import './new-account.scss';
+
+@import './tooltip.scss';
diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
new file mode 100644
index 000000000..15009c1e6
--- /dev/null
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -0,0 +1,21 @@
+.loading-overlay {
+  left: 0px;
+  z-index: 50;
+  position: absolute;
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.8);
+
+  @media screen and (max-width: 575px) {
+    margin-top: 56px;
+    height: calc(100% - 56px);
+  }
+
+  @media screen and (min-width: 576px) {
+    margin-top: 75px;
+    height: calc(100% - 75px);
+  }
+}
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
new file mode 100644
index 000000000..eb92a1b70
--- /dev/null
+++ b/ui/app/css/itcss/components/menu.scss
@@ -0,0 +1,59 @@
+.menu {
+  border-radius: 4px;
+  background: rgba($black, .8);
+  box-shadow: rgba($black, .15) 0 2px 2px 2px;
+  min-width: 150px;
+  color: $white;
+
+  &__item {
+    padding: 18px;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    position: relative;
+    font-weight: 300;
+    z-index: 201;
+
+    @media screen and (max-width: 575px) {
+      padding: 14px;
+    }
+
+    &--clickable {
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba($white, .05);
+      }
+
+      &:active {
+        background-color: rgba($white, .1);
+      }
+    }
+
+    &__icon {
+      height: 16px;
+      width: 16px;
+      margin-right: 14px;
+    }
+
+    &__text {
+      font-size: 16px;
+      line-height: 21px;
+    }
+  }
+
+  &__divider {
+    background-color: $scorpion;
+    width: 100%;
+    height: 1px;
+  }
+
+  &__close-area {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 100;
+  }
+}
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
new file mode 100644
index 000000000..919e1793b
--- /dev/null
+++ b/ui/app/css/itcss/components/modal.scss
@@ -0,0 +1,851 @@
+.modal > div:focus {
+  outline: none !important;
+}
+
+// Buy Modal
+.buy-modal-content {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-family: Roboto;
+  padding: 0 16px;
+}
+
+.buy-modal-content-option {
+  cursor: pointer;
+  color: #5B5D67;
+}
+
+.qr-ellip-address, .ellip-address {
+  width: 247px;
+  border: none;
+  font-family: Roboto;
+  font-size: 14px;
+}
+
+@media screen and (max-width: 575px) {
+  .buy-modal-content-title-wrapper {
+    justify-content: space-around;
+    width: 100%;
+    height: 100px;
+  }
+
+  .buy-modal-content-title {
+    font-size: 26px;
+    margin-top: 15px;
+  }
+
+  .buy-modal-content-options {
+    flex-direction: column;
+    padding: 5% 33%;
+  }
+
+  .buy-modal-content-footer {
+    text-transform: uppercase;
+    width: 100%;
+    height: 50px;
+  }
+
+  div.buy-modal-content-option {
+    display: flex;
+    flex-direction: column;
+    width: 80vw;
+    height: 15vh;
+    margin: 10px;
+    text-align: center;
+    border-radius: 6px;
+    border: 1px solid $black;
+    padding: 0% 7%;
+    justify-content: center;
+
+    div.buy-modal-content-option-title {
+      font-size: 20px;
+    }
+
+    div.buy-modal-content-option-subtitle {
+      font-size: 16px;
+    }
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .buy-modal-content-title-wrapper {
+    justify-content: space-around;
+    width: 100%;
+    height: 110px;
+  }
+
+  .buy-modal-content-title {
+    font-size: 26px;
+    margin-top: 15px;
+  }
+
+  .buy-modal-content-footer {
+    text-transform: uppercase;
+    width: 100%;
+    height: 50px;
+  }
+
+  .buy-modal-content-options {
+    flex-direction: row;
+    margin: 20px 0 60px;
+  }
+
+  div.buy-modal-content-option {
+    display: flex;
+    flex-direction: column;
+    width: 20vw;
+    height: 120px;
+    text-align: center;
+    border-radius: 6px;
+    border: 1px solid $black;
+    margin: 0 8px;
+    padding: 18px 0;
+
+    div.buy-modal-content-option-title {
+      font-size: 20px;
+      margin-bottom: 12px;
+
+      @media screen and (max-width: 679px) {
+        font-size: 14px;
+      }
+
+      @media screen and (min-width: 1281px) {
+        font-size: 20px;
+      }
+    }
+
+    div.buy-modal-content-option-subtitle {
+      font-size: 16px;
+      padding: 0 10px;
+      height: 25%;
+
+      @media screen and (max-width: 679px) {
+        font-size: 10px;
+        padding: 0 10px;
+        margin-bottom: 5px;
+        line-height: 15px;
+      }
+
+      @media screen and (min-width: 680px) {
+        font-size: 14px;
+        padding: 0 4px;
+        margin-bottom: 2px;
+      }
+
+      @media screen and (min-width: 1281px) {
+        font-size: 16px;
+        padding: 0;
+      }
+    }
+
+    div.buy-modal-content-footer {
+      margin-top: 8vh;
+    }
+  }
+}
+
+// Edit Account Name Modal
+.edit-account-name-modal-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+}
+
+.edit-account-name-modal-cancel {
+  position: absolute;
+  top: 12px;
+  right: 20px;
+  font-size: 25px;
+}
+
+.edit-account-name-modal-title {
+  margin: 15px;
+}
+
+.edit-account-name-modal-save-button {
+  width: 33%;
+  height: 45px;
+  margin: 15px;
+  font-weight: 700;
+  margin-top: 25px;
+}
+
+.edit-account-name-modal-input {
+  width: 90%;
+  height: 50px;
+  text-align: left;
+  margin: 10px;
+  padding: 10px;
+  font-size: 18px;
+}
+
+// Account Modal Container
+.account-modal-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  padding: 5px 0 31px 0;
+  border: 1px solid $silver;
+  border-radius: 4px;
+  font-family: Roboto;
+
+  button {
+    cursor: pointer;
+  }
+}
+
+.account-modal-back {
+  color: $dusty-gray;
+  position: absolute;
+  top: 13px;
+  left: 17px;
+  cursor: pointer;
+
+  &__text {
+    margin-top: 2px;
+    font-family: Roboto;
+    font-size: 14px;
+    line-height: 18px;
+  }
+}
+
+.account-modal-close::after {
+  content: '\00D7';
+  font-size: 40px;
+  color: $dusty-gray;
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  cursor: pointer;
+}
+
+.account-modal-container .identicon {
+  position: relative;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  top: -32px;
+  margin-bottom: -32px;
+}
+
+
+// Account Details Modal
+
+.account-modal-container {
+
+  .qr-header {
+    margin-top: 9px;
+    font-size: 20px;
+  }
+
+  .qr-wrapper {
+    margin-top: 5px;
+  }
+
+  .ellip-address-wrapper {
+    display: flex;
+    justify-content: center;
+    border: 1px solid $alto;
+    padding: 5px 10px;
+    font-family: Roboto;
+    margin-top: 7px;
+    width: 286px;
+  }
+
+  .account-modal__button {
+    margin-top: 17px;
+    padding: 10px 22px;
+    width: 235px;
+  }
+}
+
+.account-modal-divider {
+  width: 100%;
+  height: 1px;
+  margin: 19px 0 8px 0;
+  background-color: $alto;
+}
+
+// Export Private Key Modal
+
+.account-modal-container .account-name {
+  margin-top: 9px;
+  font-size: 20px;
+}
+
+.account-modal-container .modal-body-title {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-size: 18px;
+}
+
+.account-modal__name {
+  margin-top: 9px;
+  font-size: 20px;
+}
+
+.private-key-password {
+  display: flex;
+  flex-direction: column;
+}
+
+.private-key-password-label, .private-key-password-error {
+  color: $scorpion;
+  font-size: 14px;
+  line-height: 18px;
+  margin-bottom: 10px;
+}
+
+.private-key-password-error {
+  color: $crimson;
+  margin-bottom: 0;
+}
+
+.private-key-password-input {
+  padding: 10px 0 13px 17px;
+  font-size: 16px;
+  line-height: 21px;
+  width: 291px;
+  height: 44px;
+}
+
+.private-key-password::-webkit-input-placeholder {
+  color: $dusty-gray;
+  font-family: Roboto;
+}
+
+.private-key-password-warning {
+  border-radius: 8px;
+  background-color: #FFF6F6;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 15px;
+  color: $crimson;
+  width: 292px;
+  padding: 9px 15px;
+  margin-top: 18px;
+  font-family: Roboto;
+}
+
+.export-private-key-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.export-private-key__button {
+  margin-top: 17px;
+  padding: 10px 22px;
+  width: 141px;
+  height: 54px;
+}
+
+.export-private-key__button--cancel {
+  margin-right: 15px;
+}
+
+.private-key-password-display-wrapper {
+  height: 80px;
+  width: 291px;
+  border: 1px solid $silver;
+  border-radius: 2px;
+}
+
+.private-key-password-display-textarea {
+  color: $crimson;
+  font-family: Roboto;
+  font-size: 16px;
+  line-height: 21px;
+  border: none;
+  height: 75px;
+  width: 100%;
+  overflow: hidden;
+  resize: none;
+  padding: 9px 13px 8px;
+  text-transform: uppercase;
+  font-weight: 300;
+}
+
+
+// New Account Modal
+.new-account-modal-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  border: 1px solid $alto;
+  box-shadow: 0 0 2px 2px $alto;
+  font-family: Roboto;
+}
+
+.new-account-modal-header {
+  background: $wild-sand;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 30px;
+  font-size: 22px;
+  color: $nile-blue;
+  height: 79px;
+}
+
+.modal-close-x::after {
+  content: '\00D7';
+  font-size: 2em;
+  color: $dusty-gray;
+  position: absolute;
+  top: 25px;
+  right: 17.5px;
+  font-family: sans-serif;
+  cursor: pointer;
+}
+
+.new-account-modal-content {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+  font-size: 17px;
+  color: $nile-blue;
+}
+
+.new-account-modal-content.after-input {
+  margin-top: 15px;
+  line-height: 25px;
+}
+
+.new-account-input-wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  padding-bottom: 2px;
+  margin-top: 13px;
+}
+
+.new-account-input {
+  padding: 15px;
+  padding-bottom: 20px;
+  border-radius: 8px;
+  border: 1px solid $alto;
+  width: 100%;
+  font-size: 1em;
+  color: $dusty-gray;
+  font-family: Roboto;
+  font-size: 17px;
+  margin: 0 60px;
+}
+
+// For reference on below placeholder selectors: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css
+.new-account-input::-webkit-input-placeholder {
+  color: $dusty-gray;
+}
+
+.new-account-input:-moz-placeholder {
+  color: $dusty-gray;
+  opacity: 1;
+}
+
+.new-account-input::-moz-placeholder {
+  color: $dusty-gray;
+  opacity: 1;
+}
+
+.new-account-input:-ms-input-placeholder {
+  color: $dusty-gray;
+}
+
+.new-account-input::-ms-input-placeholder {
+  color: $dusty-gray;
+}
+
+.new-account-modal-content.button {
+  margin-top: 22px;
+  margin-bottom: 30px;
+  width: 113px;
+  height: 44px;
+}
+
+.new-account-modal-wrapper .btn-clear {
+  font-size: 14px;
+  font-weight: 700;
+  background: $white;
+  border: 1px solid;
+  border-radius: 2px;
+  color: $tundora;
+  flex: 1;
+}
+
+// Hide token confirmation
+
+.hide-token-confirmation {
+  min-height: 250.72px;
+  border-radius: 4px;
+  background-color: $white;
+  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .5);
+
+  &__container {
+    padding: 24px 27px 21px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__identicon {
+    margin-bottom: 10px;
+  }
+
+  &__symbol {
+    color: $tundora;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    margin-bottom: 7.5px;
+  }
+
+  &__title {
+    height: 30px;
+    width: 271.28px;
+    color: $tundora;
+    font-family: Roboto;
+    font-size: 22px;
+    line-height: 30px;
+    text-align: center;
+    margin-bottom: 10.5px;
+  }
+
+  &__copy {
+    height: 41px;
+    width: 318px;
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 14px;
+    line-height: 18px;
+    text-align: center;
+  }
+
+  &__buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 15px;
+    width: 100%;
+  }
+
+  &__button {
+    width: 141px;
+    margin: 0 5px;
+  }
+}
+
+//Notification Modal
+
+.notification-modal {
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    border: 1px solid $alto;
+    box-shadow: 0 0 2px 2px $alto;
+    font-family: Roboto;
+  }
+
+  &__header {
+    background: $wild-sand;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 30px;
+    font-size: 22px;
+    color: $nile-blue;
+    height: 79px;
+  }
+
+  &__message {
+    padding: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 17px;
+    color: $nile-blue;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    margin-bottom: 24px;
+    padding: 0px 42px;
+
+    &__btn {
+      cursor: pointer;
+    }
+  }
+
+  &__link {
+    color: $curious-blue;
+  }
+}
+
+// Deposit Ether Modal
+.deposit-ether-modal {
+  border-radius: 8px;
+  font-family: Roboto;
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+
+  &__header {
+    width: 100%;
+    border-radius: 8px 8px 0 0;
+    background-color: $mid-gray;
+    display: flex;
+    position: relative;
+    padding: 25px;
+    flex-flow: column;
+    align-items: flex-start;
+
+    &__title {
+      color: $white;
+      font-size: 24px;
+      line-height: 32px;
+    }
+
+    &__description {
+      color: $white;
+      font-size: 16px;
+      line-height: 22px;
+      margin-top: 10px;
+    }
+
+    &__close::after {
+      content: '\00D7';
+      font-size: 2em;
+      color: $white;
+      position: absolute;
+      top: 20.8px;
+      right: 28px;
+      cursor: pointer;
+    }
+  }
+
+  &__buy-rows {
+    width: 100%;
+    padding: 33px;
+    padding-top: 0px;
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1;
+    overflow-y: auto;
+
+    @media screen and (max-width: 575px) {
+      height: 0;
+    }
+  }
+
+  &__buy-row {
+    border-bottom: 1px solid $alto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    padding-bottom: 25px;
+    padding-top: 25px;
+
+    @media screen and (max-width: 575px) {
+      min-height: 360px;
+      flex-flow: column;
+      justify-content: center;
+      padding-top: 45px;
+    }
+
+    &__back {
+      position: absolute;
+      top: 10px;
+      left: 0px;
+    }
+
+    &__shapeshift-buy {
+      padding-top: 25px;
+      position: relative;
+      @media screen and (max-width: 575px) {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex: 1;
+        padding-bottom: 25px;
+        flex-flow: column;
+        justify-content: center;
+        padding-top: 20px;
+        min-height: 240px;
+        border: none;
+      }
+    }
+
+    &__logo {
+      display: flex;
+      justify-content: center;
+      flex: 0.3 1 auto;
+
+      @media screen and (min-width: 575px) {
+        min-width: 215px;
+      }
+    }
+
+    &__coinbase-logo {
+      height: 40px;
+      width: 180px;
+    }
+
+    &__shapeshift-logo {
+      height: 60px;
+      width: 174px;
+    }
+
+    &__eth-logo {
+      border-radius: 50%;
+      width: 68px;
+      height: 68px;
+      border: 3px solid $tundora;
+      z-index: 25;
+      padding: 4px;
+      background-color: #fff;
+    }
+
+    &__right {
+      display: flex;
+    }
+
+    &__description {
+      color: $cape-cod;
+      flex: 0.5 1 auto;
+
+      @media screen and (min-width: 575px) {
+        min-width: 315px;
+      }
+
+      &__title {
+        font-size: 20px;
+        line-height: 30px;
+      }
+
+      &__text {
+        font-size: 14px;
+        line-height: 22px;
+        margin-top: 7px;
+      }
+    }
+
+    &__button {
+      display: flex;
+      justify-content: flex-end;
+
+      @media screen and (min-width: 575px) {
+        min-width: 300px;
+      }
+    }
+  }
+
+  &__buy-row:last-of-type {
+    border-bottom: 0px;
+  }
+
+  &__deposit-button, .shapeshift-form__shapeshift-buy-btn {
+    height: 54px;
+    width: 257px;
+    border: 1px solid $curious-blue;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    color: $curious-blue;
+    background-color: $white;
+  }
+
+  .shapeshift-form-wrapper {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 28px;
+    flex: 1 0 auto;
+
+    .shapeshift-form {
+      width: auto;
+
+      &__caret {
+        width: auto;
+        flex: 1;
+      }
+    }
+  }
+
+  .shapeshift-form__shapeshift-buy-btn {
+    margin-top: 10px;
+  }
+
+  .simple-dropdown {
+    color: #5B5D67;
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 21px;
+    border: 1px solid #D8D8D8;
+    background-color: #FFFFFF;
+    text-align: center;
+    width: 100%;
+    height: 45px;
+    line-height: 44px;
+    font-family: Montserrat Light;
+  }
+
+  .simple-dropdown__selected {
+    text-align: center;
+  }
+}
+
+//Notification Modal
+
+.notification-modal-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  border: 1px solid $alto;
+  box-shadow: 0 0 2px 2px $alto;
+  font-family: Roboto;
+}
+
+.notification-modal-header {
+  background: $wild-sand;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30px;
+  font-size: 22px;
+  color: $nile-blue;
+  height: 79px;
+}
+
+.notification-modal-message {
+  padding: 20px;
+}
+
+.notification-modal-message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  font-size: 17px;
+  color: $nile-blue;
+}
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
new file mode 100644
index 000000000..d9a39b8d5
--- /dev/null
+++ b/ui/app/css/itcss/components/network.scss
@@ -0,0 +1,157 @@
+.network-component--disabled {
+  // border-color: transparent !important;
+  cursor: default;
+
+  .fa-caret-down {
+    opacity: 0;
+  }
+}
+
+.network-component.pointer {
+  border: 2px solid $silver;
+  border-radius: 82px;
+  padding: 3px;
+  flex: 0 0 auto;
+
+  &.ethereum-network .menu-icon-circle div {
+    background-color: rgba(3, 135, 137, .7) !important;
+  }
+
+  &.ropsten-test-network .menu-icon-circle div {
+    background-color: rgba(233, 21, 80, .7) !important;
+  }
+
+  &.kovan-test-network .menu-icon-circle div {
+    background-color: rgba(105, 4, 150, .7) !important;
+  }
+
+  &.rinkeby-test-network .menu-icon-circle div {
+    background-color: rgba(235, 179, 63, .7) !important;
+  }
+}
+
+.dropdown-menu-item {
+  .menu-icon-circle,
+  .menu-icon-circle--active {
+    margin: 0 14px;
+  }
+}
+
+.network-indicator {
+  display: flex;
+  align-items: center;
+  font-size: .6em;
+
+  .fa-caret-down {
+    line-height: 15px;
+    font-size: 12px;
+    padding: 0 4px;
+  }
+}
+
+.network-name {
+  padding: 0 4px;
+  font-family: Roboto;
+  font-size: 12px;
+  flex: 1 0 auto;
+  color: $tundora;
+  font-weight: 500;
+}
+
+.network-droppo {
+  right: 2px;
+
+  @media screen and (min-width: 576px) {
+    right: calc(((100% - 85vw) / 2) + 2px);
+  }
+
+  @media screen and (min-width: 769px) {
+    right: calc(((100% - 80vw) / 2) + 2px);
+  }
+
+  @media screen and (min-width: 1281px) {
+    right: calc(((100% - 65vw) / 2) + 2px);
+  }
+}
+
+.network-name-item {
+  font-weight: 100;
+  flex: 1 0 auto;
+  color: $dusty-gray;
+}
+
+.network-check,
+.network-check__transparent {
+  color: $white;
+  margin-left: 7px;
+}
+
+.network-check__transparent {
+  opacity: 0;
+  width: 16px;
+  margin: 0;
+}
+
+.menu-icon-circle,
+.menu-icon-circle--active {
+  background: none;
+  border-radius: 22px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid transparent;
+  margin: 0 4px;
+}
+
+.menu-icon-circle--active {
+  border: 1px solid $white;
+  background: rgba(100, 100, 100, .4);
+}
+
+.menu-icon-circle div,
+.menu-icon-circle--active div {
+  height: 12px;
+  width: 12px;
+  border-radius: 17px;
+}
+
+.menu-icon-circle--active div {
+  opacity: 1;
+}
+
+.network-dropdown-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.network-dropdown-divider {
+  width: 100%;
+  height: 1px;
+  margin: 10px 0;
+  background-color: $scorpion;
+}
+
+.network-dropdown-title {
+  height: 25px;
+  width: 75px;
+  color: $white;
+  font-family: Roboto;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+}
+
+.network-dropdown-content {
+  height: 36px;
+  width: 265px;
+  color: $dusty-gray;
+  font-family: Roboto;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.network-caret {
+  margin: 0 8px 2px;
+}
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
new file mode 100644
index 000000000..81f919df3
--- /dev/null
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -0,0 +1,211 @@
+.new-account {
+  width: 376px;
+  background-color: #FFFFFF;
+  box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+  z-index: 25;
+  padding-bottom: 31px;
+
+  &__header {
+    display: flex;
+    flex-flow: column;
+    border-bottom: 1px solid $geyser;
+  }
+
+  &__title {
+    color: $tundora;
+    font-family: Roboto;
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 43px;
+    margin-top: 22px;
+    margin-left: 29px;
+  }
+
+  &__tabs {
+    margin-left: 22px;
+    display: flex;
+    margin-top: 10px;
+
+    &__tab {
+      height: 54px;
+      width: 75px;
+      padding: 15px 10px;
+      color: $dusty-gray;
+      font-family: Roboto;
+      font-size: 18px;
+      line-height: 24px;
+      text-align: center;
+    }
+
+    &__tab:first-of-type {
+      margin-right: 20px;
+    }
+
+    &__unselected:hover {
+      color: $black;
+      border-bottom: none;
+    }
+
+    &__selected {
+      color: $curious-blue;
+      border-bottom: 3px solid $curious-blue;
+    }
+  }
+
+}
+
+.new-account-import-form {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding: 0 30px;
+
+  &__select-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 29px;
+    width: 100%;
+  }
+
+  &__select-label {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+  }
+
+  &__select {
+    height: 54px;
+    width: 210px;
+    border: 1px solid #D2D8DD;
+    border-radius: 4px;
+    background-color: #FFFFFF;
+    display: flex;
+    align-items: center;
+
+    .Select-control,
+    .Select-control:hover {
+      height: 100%;
+      border: none;
+      box-shadow: none;
+
+      .Select-value {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  &__private-key-password-container {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__instruction {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    align-self: flex-start;
+  }
+
+  &__private-key {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+    margin-top: 34px;
+  }
+
+  &__input-password {
+    height: 54px;
+    width: 315px;
+    border: 1px solid $geyser;
+    border-radius: 4px;
+    background-color: $white;
+    margin-top: 16px;
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    padding: 0px 20px;
+  }
+
+  &__json {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    margin-top: 29px;
+  }
+
+  &__buttons {
+    margin-top: 39px;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+.new-account-create-form {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+
+  &__input-label {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    margin-top: 29px;
+    align-self: flex-start;
+    margin-left: 30px;
+  }
+
+  &__input {
+    height: 54px;
+    width: 315.84px;
+    border: 1px solid $geyser;
+    border-radius: 4px;
+    background-color: $white;
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    margin-top: 15px;
+    padding: 0px 20px;
+  }
+
+  &__buttons {
+    margin-top: 39px;
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+  }
+
+  &__button-cancel,
+  &__button-create {
+    height: 55px;
+    width: 150px;
+    border-radius: 2px;
+    background-color: #FFFFFF;
+  }
+
+  &__button-cancel {
+    border: 1px solid $dusty-gray;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+  }
+
+  &__button-create {
+    border: 1px solid $curious-blue;
+    color: $curious-blue;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
new file mode 100644
index 000000000..73faebe8b
--- /dev/null
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -0,0 +1,292 @@
+$sub-mid-size-breakpoint: 667px;
+$sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})";
+
+/*
+  NewUI Container Elements
+ */
+
+// Component Colors
+$tx-view-bg: $white;
+$wallet-view-bg: $alabaster;
+
+// Main container
+.main-container {
+  // position: absolute;
+  z-index: $main-container-z-index;
+  font-family: Roboto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+.main-container::-webkit-scrollbar {
+  display: none;
+}
+
+//Account and transaction details
+.account-and-transaction-details {
+  display: flex;
+  flex: 1 0 auto;
+}
+
+// tx view
+
+.tx-view {
+  flex: 63.5 0 66.5%;
+  background: $tx-view-bg;
+
+  // No title on mobile
+  @media screen and (max-width: 575px) {
+    .identicon-wrapper {
+      display: none;
+    }
+
+    .account-name {
+      display: none;
+    }
+  }
+}
+
+.open-in-browser {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+}
+
+// wallet view and sidebar
+
+.wallet-view {
+  display: flex;
+  flex-direction: column;
+  flex: 32 1 32%;
+  width: 0;
+  background: $wallet-view-bg;
+  z-index: 200;
+  position: relative;
+
+  @media screen and (min-width: 576px) {
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  @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;
+    font-weight: 300;
+    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;
+      }
+    }
+  }
+
+  &__add-token-button {
+    flex: 0 0 auto;
+    margin: 36px auto;
+    background: none;
+    padding: .7rem 2rem;
+    transition: border-color .3s ease;
+
+    &:hover {
+      border-color: $curious-blue;
+    }
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .wallet-view::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.wallet-view-title-wrapper {
+  flex: 0 0 25px;
+}
+
+.wallet-view-title {
+  margin-left: 15px;
+  font-size: 16px;
+
+  // No title on mobile
+  @media screen and (max-width: 575px) {
+    display: none;
+  }
+}
+
+.wallet-view.sidebar {
+  flex: 1 0 230px;
+  background: rgb(250, 250, 250);
+  z-index: $sidebar-z-index;
+  position: fixed;
+  top: 66px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  visibility: visible;
+  will-change: transform;
+  overflow-y: auto;
+  box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
+  width: 85%;
+  height: calc(100% - 56px);
+}
+
+.sidebar-overlay {
+  z-index: $sidebar-overlay-z-index;
+  position: fixed;
+  // top: 41px;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 1;
+  visibility: visible;
+  background-color: rgba(0, 0, 0, .3);
+}
+
+// main-container media queries
+
+@media screen and (min-width: 576px) {
+  .lap-visible {
+    display: flex;
+  }
+
+  .phone-visible {
+    display: none;
+  }
+
+  .main-container {
+    // margin-top: 6.9vh;
+    width: 85vw;
+    height: 90vh;
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .main-container {
+    // margin-top: 6.9vh;
+    width: 80vw;
+    height: 82vh;
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+  }
+}
+
+@media screen and (min-width: 1281px) {
+  .main-container {
+    // margin-top: 6.9vh;
+    width: 62vw;
+    height: 82vh;
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+  }
+}
+
+@media screen and (max-width: 575px) {
+  .lap-visible {
+    display: none;
+  }
+
+  .phone-visible {
+    display: flex;
+  }
+
+  .main-container {
+    // margin-top: 41px;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    background-color: $white;
+  }
+}
+
+// wallet view
+.account-name {
+  font-size: 24px;
+  font-weight: 300;
+  line-height: 20px;
+  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;
+  justify-content: flex-start;
+  margin: 5% 7% 0%;
+}
+
+.fiat-amount {
+  text-transform: uppercase;
+}
+
+.token-balance__amount {
+  padding-right: 6px;
+}
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
new file mode 100644
index 000000000..d81099bfa
--- /dev/null
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -0,0 +1,230 @@
+.request-signature {
+  &__container {
+    width: 380px;
+    border-radius: 8px;
+    background-color: $white;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
+    display: flex;
+    flex-flow: column nowrap;
+    z-index: 25;
+    align-items: center;
+    font-family: Roboto;
+    position: relative;
+    height: 100%;
+
+    @media screen and (max-width: $break-small) {
+      width: 100%;
+      top: 0;
+      box-shadow: none;
+    }
+
+    @media screen and (min-width: $break-large) {
+      max-height: 620px;
+    }
+  }
+
+  &__header {
+    height: 64px;
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+
+  &__header-background {
+    position: absolute;
+    background-color: $athens-grey;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__header__text {
+    height: 29px;
+    width: 179px;
+    color: #5B5D67;
+    font-family: Roboto;
+    font-size: 22px;
+    font-weight: 300;
+    line-height: 29px;
+    z-index: 3;
+  }
+
+  &__header__tip-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__header__tip {
+    height: 25px;
+    width: 25px;
+    background: $athens-grey;
+    transform: rotate(45deg);
+    position: absolute;
+    bottom: -8px;
+    z-index: 1;
+  }
+
+  &__account-info {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 18px;
+    margin-bottom: 20px;
+  }
+
+  &__account {
+    color: $dusty-gray;
+    margin-left: 17px;
+  }
+
+  &__account-text {
+    font-size: 14px;
+  }
+
+  &__balance {
+    color: $dusty-gray;
+    margin-right: 17px;
+    width: 124px;
+  }
+
+  &__balance-text {
+    text-align: right;
+    font-size: 14px;
+  }
+
+  &__balance-value {
+    text-align: right;
+    margin-top: 2.5px;
+  }
+
+  &__request-icon {
+    margin-top: 25px;
+  }
+
+  &__body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    flex: 1 1 auto;
+    height: 0;
+  }
+
+  &__request-info {
+    display: flex;
+    justify-content: center;
+  }
+
+  &__headline {
+    height: 48px;
+    width: 240px;
+    color: $tundora;
+    font-family: Roboto;
+    font-size: 18px;
+    font-weight: 300;
+    line-height: 24px;
+    text-align: center;
+    margin-top: 20px;
+  }
+
+  &__notice,
+  &__warning {
+    font-family: "Avenir Next";
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    margin-top: 41px;
+    margin-bottom: 11px;
+    width: 100%;
+  }
+
+  &__notice {
+    color: $dusty-gray;
+  }
+
+  &__warning {
+    color: $crimson;
+  }
+
+  &__rows {
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    border-top: 1px solid $geyser;
+    display: flex;
+    flex-flow: column;
+  }
+
+  &__row {
+    display: flex;
+    flex-flow: column;
+  }
+
+  &__row-title {
+    width: 80px;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 22px;
+    margin-top: 12px;
+    margin-left: 18px;
+    width: 100%;
+  }
+
+  &__row-value {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 14px;
+    line-height: 19px;
+    width: 100%;
+    overflow-wrap: break-word;
+    border-bottom: 1px solid #d2d8dd;
+    padding: 6px 18px 15px;
+  }
+
+  &__footer {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    font-size: 22px;
+    position: relative;
+    flex: 0 0 auto;
+    border-top: 1px solid $geyser;
+
+    &__cancel-button,
+    &__sign-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1 0 auto;
+      font-family: Roboto;
+      font-size: 16px;
+      font-weight: 300;
+      height: 55px;
+      line-height: 32px;
+      cursor: pointer;
+      border-radius: 2px;
+      box-shadow: none;
+      max-width: 162px;
+      margin: 12px;
+    }
+
+    &__cancel-button {
+      background: none;
+      border: 1px solid $dusty-gray;
+      margin-right: 6px;
+    }
+
+    &__sign-button {
+      background-color: $caribbean-green;
+      border-width: 0;
+      color: $white;
+      margin-left: 6px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/ui/app/css/index.css b/ui/app/css/itcss/components/sections.scss
index 033502f5a..388aea175 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/itcss/components/sections.scss
@@ -1,191 +1,26 @@
-/*
-faint orange (textfield shades) #FAF6F0
-light orange (button shades): #F5C26D
-dark orange (text): #F5A623
-borders/font/any gray: #4A4A4A
-*/
-
-/*
-application specific styles
-*/
-
-* {
-  box-sizing: border-box;
-}
-
-html, body {
-  font-family: 'Montserrat Regular', Arial;
-  color: #4D4D4D;
-  font-weight: 300;
-  line-height: 1.4em;
-  background: #F7F7F7;
-}
-
-input:focus, textarea:focus {
-  outline: none;
-}
-
-#app-content {
-  overflow-x: hidden;
-  min-width: 357px;
-  width: 360px;
-  height: 500px;
-}
-
-button, input[type="submit"] {
-  font-family: 'Montserrat Bold';
-  outline: none;
-  cursor: pointer;
-  padding: 8px 12px;
-  border: none;
-  color: white;
-  transform-origin: center center;
-  transition: transform 50ms ease-in;
-  /* default orange */
-  background: rgba(247, 134, 28, 1);
-  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
-}
-
-.btn-green, input[type="submit"].btn-green {
-  background: rgba(106, 195, 96, 1);
-  box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
-}
-
-.btn-red {
-  background: rgba(254, 35, 17, 1);
-  box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
-}
-
-button[disabled], input[type="submit"][disabled] {
-  cursor: not-allowed;
-  background: rgba(197, 197, 197, 1);
-  box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
-}
-
-button.spaced {
-  margin: 2px;
-}
-
-button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
-  transform: scale(1.1);
-}
-button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
-  transform: scale(0.95);
-}
-
-a {
-  text-decoration: none;
-  color: inherit;
-}
+// Old scss, do not lint - clean up later
+/* stylelint-disable */
 
-a:hover{
-  color: #df6b0e;
-}
 
 /*
-app
+App Sections
+  TODO: Move into separate files.
 */
 
-.active {
-  color: #909090;
-}
-
-button.primary {
-  padding: 8px 12px;
-  background: #F7861C;
-  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
-  color: white;
-  font-size: 1.1em;
-  font-family: 'Montserrat Regular';
-  text-transform: uppercase;
-}
-
-button.btn-thin {
-  border: 1px solid;
-  border-color: #4D4D4D;
-  color: #4D4D4D;
-  background: rgb(255, 174, 41);
-  border-radius: 4px;
-  min-width: 200px;
-  margin: 12px 0;
-  padding: 6px;
-  font-size: 13px;
-}
-
-.app-header {
-  padding: 6px 8px;
-}
-
-.app-header h1 {
-  font-family: 'Montserrat Regular';
-  text-transform: uppercase;
-  color: #AEAEAE;
-}
-
-h2.page-subtitle {
-  font-family: 'Montserrat Regular';
-  text-transform: uppercase;
-  color: #AEAEAE;
-  font-size: 1em;
-  margin: 12px;
-}
-
-.app-primary {
-
-}
-
-.app-footer {
-  padding-bottom: 10px;
-  align-items: center;
-}
-
-.identicon {
-  height: 46px;
-  width: 46px;
-  background-size: cover;
-  border-radius: 100%;
-  border: 3px solid gray;
-}
-
+/* initialize */
 textarea.twelve-word-phrase {
   padding: 12px;
   width: 300px;
   height: 140px;
   font-size: 16px;
-  background: white;
+  background: $white;
   resize: none;
 }
 
-.network-indicator {
-  display: flex;
-  align-items: center;
-  font-size: 0.6em;
-
-}
-
-.network-name {
-  width: 5.2em;
-  line-height: 9px;
-  text-rendering: geometricPrecision;
-}
-
-.check {
-  margin-left: 7px;
-  color: #F7861C;
-  flex: 1 0 auto;
-  display: flex;
-  justify-content: flex-end;
-}
-/*
-app sections
-*/
-
-/* initialize */
-
 .initialize-screen hr {
   width: 60px;
   margin: 12px;
-  border-color: #F7861C;
+  border-color: #f7861c;
   border-style: solid;
 }
 
@@ -204,11 +39,13 @@ app sections
 
 /* unlock */
 .error {
-  color: #E20202;
+  // color: #e20202;
+  color: #f7861c;
+  margin-bottom: 9px;
 }
 
 .warning {
-  color: #FFAE00;
+  color: #ffae00;
 }
 
 .lock {
@@ -218,9 +55,10 @@ app sections
 
 .lock.locked {
   transform: scale(1.5);
-  opacity: 0.0;
+  opacity: 0;
   transition: opacity 400ms ease-in, transform 400ms ease-in;
 }
+
 .lock.unlocked {
   transform: scale(1);
   opacity: 1;
@@ -231,15 +69,18 @@ app sections
   transform: scaleX(1) translateX(0);
   transition: transform 250ms ease-in;
 }
+
 .lock.unlocked .lock-top {
   transform: scaleX(-1) translateX(-12px);
   transition: transform 250ms ease-in;
 }
+
 .lock.unlocked:hover {
   border-radius: 4px;
   background: #e5e5e5;
   border: 1px solid #b1b1b1;
 }
+
 .lock.unlocked:active {
   background: #c3c3c3;
 }
@@ -259,55 +100,46 @@ app sections
 
 .unlock-screen input[type=password] {
   width: 260px;
-  /*height: 36px;
-  margin-bottom: 24px;
-  padding: 8px;*/
 }
 
-.sizing-input{
+.sizing-input {
   font-size: 14px;
   height: 30px;
   padding-left: 5px;
 }
-.editable-label{
+
+.editable-label {
   display: flex;
 }
+
 /* Webkit */
+
 .unlock-screen input::-webkit-input-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
+
 /* Firefox 18- */
+
 .unlock-screen input:-moz-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
+
 /* Firefox 19+ */
+
 .unlock-screen input::-moz-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
+
 /* IE */
+
 .unlock-screen input:-ms-input-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
 
-input.large-input, textarea.large-input {
-  /*margin-bottom: 24px;*/
-  padding: 8px;
-}
-
-input.large-input {
-  height: 36px;
-}
-
-.letter-spacey {
-  letter-spacing: 0.1em;
-}
-
-
-
 /* accounts */
 
 .accounts-section {
@@ -315,7 +147,7 @@ input.large-input {
 }
 
 .accounts-section .horizontal-line {
-  margin: 0px 18px;
+  margin: 0 18px;
 }
 
 .accounts-list-option {
@@ -332,7 +164,7 @@ input.large-input {
 }
 
 .unconftx-link .fa-arrow-right {
-  margin: 0px -8px 0px 8px;
+  margin: 0 -8px 0px 8px;
 }
 
 /* identity panel */
@@ -359,7 +191,7 @@ input.large-input {
 .identity-panel i {
   margin-top: 32px;
   margin-right: 6px;
-  color: #B9B9B9;
+  color: #b9b9b9;
 }
 
 .identity-panel .arrow-right {
@@ -370,50 +202,56 @@ input.large-input {
 }
 
 .identity-copy.flex-column {
-  flex: 0.25 0 auto;
+  flex: .25 0 auto;
   justify-content: center;
 }
 
 /* accounts screen */
 
 .identity-section {
-
 }
 
 .identity-section .identity-panel {
-  background: #E9E9E9;
-  border-bottom: 1px solid #B1B1B1;
+  background: #e9e9e9;
+  border-bottom: 1px solid #b1b1b1;
   cursor: pointer;
 }
 
 .identity-section .identity-panel.selected {
-  background: white;
-  color: #F3C83E;
+  background: $white;
+  color: #f3c83e;
 }
 
 .identity-section .identity-panel.selected .identicon {
-  border-color: orange;
+  border-color: $orange;
 }
 
 .identity-section .accounts-list-option:hover,
 .identity-section .accounts-list-option.selected {
-  background:white;
+  background: $white;
 }
 
 /* account detail screen */
 
 .account-detail-section {
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  flex-direction: inherit;
+}
 
+.grow-tenx {
+  flex-grow: 10;
 }
-.name-label{
 
+.name-label {
 }
 
 .unapproved-tx-icon {
   height: 16px;
   width: 16px;
   background: rgb(47, 174, 244);
-  border-color: #AEAEAE;
+  border-color: $silver-chalice;
   border-radius: 13px;
 }
 
@@ -421,6 +259,7 @@ input.large-input {
   height: 100%;
   visibility: hidden;
 }
+
 .editing-label {
   display: flex;
   justify-content: flex-start;
@@ -428,8 +267,9 @@ input.large-input {
   margin-bottom: 2px;
   font-size: 11px;
   text-rendering: geometricPrecision;
-  color: #F7861C;
+  color: #f7861c;
 }
+
 .name-label:hover .edit-text {
   visibility: visible;
 }
@@ -441,102 +281,114 @@ input.large-input {
   margin: 12px;
   margin-bottom: 24px;
   border-radius: 4px;
-  border: 2px solid #F3C83E;
-  background: #FAF6F0;
-}
-
-/* Send Screen */
-
-.send-screen {
-
-}
-
-.send-screen section {
-  margin: 8px 16px;
-}
-
-.send-screen input {
-  width: 100%;
-  font-size: 12px;
+  border: 2px solid #f3c83e;
+  background: #faf6f0;
 }
 
 /* Ether Balance Widget */
 
 .ether-balance-amount {
-  color: #F7861C;
+  color: #f7861c;
 }
 
 .ether-balance-label {
-  color: #ABA9AA;
+  color: #aba9aa;
 }
 
 /* Info screen */
-.info-gray{
-  font-family: 'Montserrat Regular';
+.info-gray {
+  font-family: Roboto;
   text-transform: uppercase;
-  color: #AEAEAE;
+  color: $silver-chalice;
 }
 
-.icon-size{
+.icon-size {
   width: 20px;
 }
 
-.info{
-  font-family: 'Montserrat Regular', Arial;
+.info {
+  font-family: Roboto, Arial;
   padding-bottom: 10px;
   display: inline-block;
   padding-left: 5px;
 }
 
 /* buy eth warning screen */
+.custom-radios {
+  justify-content: space-around;
+  align-items: center;
+}
 
-.eth-warning{
+.custom-radio-selected {
+  width: 17px;
+  height: 17px;
+  border: solid;
+  border-style: double;
+  border-radius: 15px;
+  border-width: 5px;
+  background: rgba(247, 134, 28, 1);
+  border-color: #f7f7f7;
+}
+
+.custom-radio-inactive {
+  width: 14px;
+  height: 14px;
+  border: solid;
+  border-width: 1px;
+  border-radius: 24px;
+  border-color: $silver-chalice;
+}
+
+.radio-titles {
+  color: rgba(247, 134, 28, 1);
+}
+
+.eth-warning {
   transition: opacity 400ms ease-in, transform 400ms ease-in;
 }
 
-.buy-subview{
+.buy-subview {
   transition: opacity 400ms ease-in, transform 400ms ease-in;
 }
 
-.input-container:hover .edit-text{
+.input-container:hover .edit-text {
   visibility: visible;
 }
 
-.buy-inputs{
-  font-family: 'Montserrat Light';
+.buy-inputs {
+  font-family: Roboto;
   font-size: 13px;
   height: 20px;
   background: transparent;
   box-sizing: border-box;
   border: solid;
   border-color: transparent;
-  border-width: 0.5px;
+  border-width: .5px;
   border-radius: 2px;
-
 }
-.input-container:hover .buy-inputs{
+
+.input-container:hover .buy-inputs {
   box-sizing: inherit;
   border: solid;
-  border-color: #F7861C;
-  border-width: 0.5px;
+  border-color: #f7861c;
+  border-width: .5px;
   border-radius: 2px;
 }
 
-.buy-inputs:focus{
+.buy-inputs:focus {
   border: solid;
-  border-color: #F7861C;
-  border-width: 0.5px;
+  border-color: #f7861c;
+  border-width: .5px;
   border-radius: 2px;
 }
 
 .activeForm {
-  background: #F7F7F7;
+  background: #f7f7f7;
   border: none;
   border-radius: 8px 8px 0px 0px;
   width: 50%;
   text-align: center;
   padding-bottom: 4px;
-
 }
 
 .inactiveForm {
@@ -548,19 +400,19 @@ input.large-input {
 }
 
 .ex-coins {
-  font-family: 'Montserrat Regular';
+  font-family: Roboto;
   text-transform: uppercase;
   text-align: center;
   font-size: 33px;
   width: 118px;
   height: 42px;
   padding: 1px;
-  color: #4D4D4D;
+  color: #4d4d4d;
 }
 
-.marketinfo{
-  font-family: 'Montserrat light';
-  color: #AEAEAE;
+.marketinfo {
+  font-family: Roboto;
+  color: $silver-chalice;
   font-size: 15px;
   line-height: 17px;
 }
@@ -575,52 +427,50 @@ input.large-input {
   overflow: scroll;
 }
 
-.icon-control .fa-refresh{
+.icon-control .fa-refresh {
   visibility: hidden;
 }
 
-.icon-control:hover .fa-refresh{
+.icon-control:hover .fa-refresh {
   visibility: visible;
 }
 
-.icon-control:hover .fa-chevron-right{
+.icon-control:hover .fa-chevron-right {
   visibility: hidden;
 }
 
 .inactive {
-    color: #AEAEAE;
+  color: $silver-chalice;
 }
 
-.inactive button{
-    background: #AEAEAE;
-    color: white;
+.inactive button {
+  background: $silver-chalice;
+  color: $white;
 }
 
-.ellip-address {
+.qr-ellip-address, .ellip-address {
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 5em;
-  font-size: 14px;
-  font-family: "Montserrat Light";
-  margin-left: 5px;
 }
 
 .qr-header {
-    font-size: 25px;
-    margin-top: 40px;
+  font-size: 25px;
+  margin-top: 40px;
 }
 
 .qr-message {
   font-size: 12px;
-  color: #F7861C;
+  color: #f7861c;
 }
 
 div.message-container > div:first-child {
   margin-top: 18px;
   font-size: 15px;
-  color: #4D4D4D;
+  color: #4d4d4d;
 }
 
 .pop-hover:hover {
-    transform: scale(1.1);
+  transform: scale(1.1);
 }
+
+/* stylelint-enable */
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
new file mode 100644
index 000000000..bb17e53cd
--- /dev/null
+++ b/ui/app/css/itcss/components/send.scss
@@ -0,0 +1,887 @@
+.send-screen-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  z-index: 25;
+  font-family: Roboto;
+
+  @media screen and (max-width: $break-small) {
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  section {
+    flex: 0 0 auto;
+  }
+}
+
+.send-screen-card {
+  background-color: #fff;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
+  padding: 46px 40.5px 26px;
+  position: relative;
+  // top: -26px;
+  align-items: center;
+  display: flex;
+  flex-flow: column nowrap;
+  width: 498px;
+  flex: 1 0 auto;
+
+  @media screen and (max-width: $break-small) {
+    top: 0;
+    width: 100%;
+    box-shadow: none;
+    padding: 12px;
+  }
+}
+
+/* Send Screen */
+
+.send-screen section {
+  margin: 4px 16px;
+}
+
+.send-screen input {
+  width: 100%;
+  font-size: 12px;
+}
+
+.send-eth-icon {
+  border-radius: 50%;
+  width: 70px;
+  height: 70px;
+  border: 1px solid $alto;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2);
+  position: absolute;
+  top: -35px;
+  z-index: 25;
+  padding: 4px;
+  background-color: $white;
+
+  @media screen and (max-width: $break-small) {
+    position: relative;
+    top: 0;
+  }
+}
+
+.send-screen-input-wrapper {
+  width: 95%;
+  position: relative;
+
+  .fa-bolt {
+    padding-right: 4px;
+  }
+
+  .large-input {
+    border: 1px solid $dusty-gray;
+    border-radius: 4px;
+    margin: 4px 0 20px;
+    font-size: 16px;
+    line-height: 22.4px;
+    font-family: Roboto;
+  }
+
+  .send-screen-gas-input {
+    border: 1px solid transparent;
+  }
+
+  &__error-message {
+    display: none;
+  }
+
+  &--error {
+    input,
+    .send-screen-gas-input {
+      border-color: $red !important;
+    }
+
+    .send-screen-input-wrapper__error-message {
+      display: block;
+      position: absolute;
+      bottom: 4px;
+      font-size: 12px;
+      line-height: 12px;
+      left: 8px;
+      color: $red;
+    }
+  }
+
+  .send-screen-input-wrapper__error-message {
+    display: block;
+    position: absolute;
+    bottom: 4px;
+    font-size: 12px;
+    line-height: 12px;
+    left: 8px;
+    color: $red;
+  }
+}
+
+.send-screen-input {
+  width: 100%;
+}
+
+.send-screen-gas-input {
+  width: 100%;
+  height: 41px;
+  border-radius: 3px;
+  background-color: #f3f3f3;
+  border-width: 0;
+  border-style: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 10px;
+  padding-right: 12px;
+  font-size: 16px;
+  color: $scorpion;
+}
+
+.send-screen-amount-labels {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.send-screen-gas-labels {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.currency-toggle {
+  &__item {
+    color: $curious-blue;
+    cursor: pointer;
+
+    &--selected {
+      color: $black;
+      cursor: default;
+    }
+  }
+}
+
+.send-screen-gas-input-customize {
+  color: $curious-blue;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.gas-tooltip-close-area {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+}
+
+.customize-gas-tooltip-container {
+  position: absolute;
+  bottom: 50px;
+  width: 237px;
+  height: 307px;
+  background-color: $white;
+  opacity: 1;
+  box-shadow: $alto 0 0 5px;
+  z-index: 1050;
+  padding: 13px 19px;
+  font-size: 16px;
+  border-radius: 4px;
+  font-family: "Lato";
+  font-weight: 500;
+}
+
+.gas-tooltip-arrow {
+  height: 25px;
+  width: 25px;
+  z-index: 1200;
+  background: $white;
+  position: absolute;
+  transform: rotate(45deg);
+  left: 107px;
+  top: 294px;
+  box-shadow: 2px 2px 2px $alto;
+}
+
+.customize-gas-tooltip-container input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  display: none;
+}
+
+.customize-gas-tooltip-container input[type="number"]:hover::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  display: none;
+}
+
+.customize-gas-tooltip {
+  position: relative;
+}
+
+.gas-tooltip {
+  display: flex;
+  justify-content: center;
+}
+
+.gas-tooltip-label {
+  font-size: 16px;
+  color: $tundora;
+}
+
+.gas-tooltip-header {
+  padding-bottom: 12px;
+}
+
+.gas-tooltip-input-label {
+  margin-bottom: 5px;
+}
+
+.gas-tooltip-input-label i {
+  color: $silver-chalice;
+  margin-left: 6px;
+}
+
+.customize-gas-input {
+  width: 178px;
+  height: 28px;
+  border: 1px solid $alto;
+  font-size: 16px;
+  color: $nile-blue;
+  padding-left: 8px;
+}
+
+.customize-gas-input-wrapper {
+  position: relative;
+}
+
+.gas-tooltip-input-detail {
+  position: absolute;
+  top: 4px;
+  right: 26px;
+  font-size: 12px;
+  color: $silver-chalice;
+}
+
+.gas-tooltip-input-arrows {
+  position: absolute;
+  top: 0;
+  right: 4px;
+  width: 17px;
+  height: 28px;
+  border: 1px solid #dadada;
+  border-left: 0;
+  display: flex;
+  flex-direction: column;
+  color: #9b9b9b;
+  font-size: .8em;
+  padding: 1px 4px;
+  cursor: pointer;
+}
+
+.token-gas {
+  &__amount {
+    display: inline-block;
+    margin-right: 4px;
+  }
+
+  &__symbol {
+    display: inline-block;
+  }
+}
+
+.send-screen {
+  &__title {
+    color: $scorpion;
+    font-size: 18px;
+    line-height: 29px;
+  }
+
+  &__subtitle {
+    margin: 10px 0 20px;
+    font-size: 14px;
+    line-height: 24px;
+  }
+
+  &__send-button,
+  &__cancel-button {
+    width: 163px;
+    text-align: center;
+  }
+
+  &__send-button__disabled {
+    opacity: .5;
+    cursor: auto;
+  }
+}
+
+.send-token {
+  display: flex;
+  flex-flow: column nowrap;
+  z-index: 25;
+  font-family: Roboto;
+
+  &__content {
+    width: 498px;
+    height: 605px;
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
+    padding: 46px 40.5px 26px;
+    position: relative;
+    // top: -26px;
+    align-items: center;
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1 0 auto;
+
+    @media screen and (max-width: $break-small) {
+      top: 0;
+      width: 100%;
+      box-shadow: none;
+      padding: 12px;
+    }
+  }
+
+  .identicon {
+    position: absolute;
+    top: -35px;
+    z-index: 25;
+
+    @media screen and (max-width: $break-small) {
+      position: relative;
+      top: 0;
+      flex: 0 0 auto;
+    }
+  }
+
+  &__title {
+    color: $scorpion;
+    font-size: 18px;
+    line-height: 29px;
+  }
+
+  &__description,
+  &__balance-text,
+  &__token-symbol {
+    margin-top: 10px;
+    font-size: 14px;
+    line-height: 24px;
+    text-align: center;
+  }
+
+  &__token-balance {
+    font-size: 40px;
+    line-height: 40px;
+    margin-top: 13px;
+
+    .token-balance__amount {
+      padding-right: 12px;
+    }
+  }
+
+  &__button-group {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    flex: 0 0 auto;
+
+    @media screen and (max-width: $break-small) {
+      margin-top: 24px;
+    }
+
+    button {
+      width: 163px;
+    }
+  }
+}
+
+.confirm-send-token {
+  &__hero-amount-wrapper {
+    width: 100%;
+  }
+}
+
+.send-v2 {
+  &__container {
+    // height: 701px;
+    width: 380px;
+    border-radius: 8px;
+    background-color: $white;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
+    display: flex;
+    flex-flow: column nowrap;
+    z-index: 25;
+    align-items: center;
+    font-family: Roboto;
+    position: relative;
+
+    @media screen and (max-width: $break-small) {
+      width: 100%;
+      top: 0;
+      box-shadow: none;
+      flex: 1 1 auto;
+    }
+  }
+
+  &__send-header-icon-container {
+    z-index: 25;
+
+    @media screen and (max-width: $break-small) {
+      position: relative;
+      top: 0;
+    }
+  }
+
+  &__send-header-icon {
+    border-radius: 50%;
+    width: 48px;
+    height: 48px;
+    border: 1px solid $alto;
+    z-index: 25;
+    padding: 4px;
+    background-color: $white;
+  }
+
+  &__send-arrow-icon {
+    color: #f28930;
+    transform: rotate(-45deg);
+    position: absolute;
+    top: -2px;
+    left: 0;
+    font-size: 1.12em;
+  }
+
+  &__arrow-background {
+    background-color: $white;
+    height: 14px;
+    width: 14px;
+    position: absolute;
+    top: 52px;
+    left: 199px;
+    border-radius: 50%;
+    z-index: 100;
+
+    @media screen and (max-width: $break-small) {
+      top: 36px;
+    }
+  }
+
+  &__header {
+    height: 88px;
+    width: 380px;
+    background-color: $athens-grey;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @media screen and (max-width: $break-small) {
+      height: 59px;
+      width: 100vw;
+    }
+  }
+
+  &__header-tip {
+    height: 25px;
+    width: 25px;
+    background: $athens-grey;
+    position: absolute;
+    transform: rotate(45deg);
+    left: 178px;
+    top: 75px;
+
+    @media screen and (max-width: $break-small) {
+      top: 46px;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+    }
+  }
+
+  &__title {
+    color: $scorpion;
+    font-size: 22px;
+    line-height: 29px;
+    text-align: center;
+    margin-top: 25px;
+  }
+
+  &__copy {
+    color: $gray;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 19px;
+    text-align: center;
+    margin-top: 10px;
+    width: 287px;
+  }
+
+  &__error {
+    font-size: 12px;
+    line-height: 12px;
+    left: 8px;
+    color: $red;
+  }
+
+  &__error-border {
+    color: $red;
+  }
+
+  &__form {
+    padding: 13px 0;
+    width: 100%;
+    overflow-y: auto;
+
+    @media screen and (max-width: $break-small) {
+      padding: 13px 0;
+      margin: 0;
+      overflow-y: auto;
+      flex: 1 1 auto;
+    }
+  }
+
+  &__form-header,
+  &__form-header-copy {
+    width: 100%;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+  }
+
+  &__form-row {
+    margin: 14.5px 18px 0px;
+    position: relative;
+    display: flex;
+    flex-flow: row;
+    flex: 1 0 auto;
+    justify-content: space-between;
+  }
+
+  &__form-field {
+    flex: 1 1 auto;
+
+    .currency-display {
+      color: $tundora;
+
+      &__currency-symbol {
+        color: $tundora;
+      }
+
+      &__converted-value,
+      &__converted-currency {
+        color: $tundora;
+      }
+    }
+
+    .account-list-item {
+      &__account-secondary-balance {
+        color: $tundora;
+      }
+    }
+  }
+
+  &__form-label {
+    color: $scorpion;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 22px;
+    width: 88px;
+    font-weight: 400;
+  }
+
+  &__from-dropdown {
+    height: 73px;
+    width: 100%;
+    border: 1px solid $alto;
+    border-radius: 4px;
+    background-color: $white;
+    font-family: Roboto;
+    line-height: 16px;
+    font-size: 12px;
+    color: $tundora;
+    position: relative;
+
+    &__close-area {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 1000;
+      width: 100%;
+      height: 100%;
+    }
+
+    &__list {
+      z-index: 1050;
+      position: absolute;
+      height: 220px;
+      width: 100%;
+      border: 1px solid $geyser;
+      border-radius: 4px;
+      background-color: $white;
+      box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11);
+      margin-top: 11px;
+      margin-left: -1px;
+      overflow-y: scroll;
+    }
+  }
+
+  &__to-autocomplete {
+    position: relative;
+
+    &__down-caret {
+      position: absolute;
+      top: 18px;
+      right: 12px;
+    }
+  }
+
+  &__to-autocomplete, &__memo-text-area {
+    &__input {
+      height: 54px;
+      width: 100%;
+      border: 1px solid $alto;
+      border-radius: 4px;
+      background-color: $white;
+      color: $tundora;
+      padding: 10px;
+      font-family: Roboto;
+      font-size: 16px;
+      line-height: 21px;
+      font-weight: 300;
+    }
+  }
+
+  &__amount-max {
+    color: $curious-blue;
+    font-family: Roboto;
+    font-size: 12px;
+    left: 8px;
+    border: none;
+    cursor: pointer;
+  }
+
+  &__gas-fee-display {
+    width: 100%;
+  }
+
+  &__sliders-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    width: 24px;
+    border: 1px solid $curious-blue;
+    border-radius: 4px;
+    background-color: $white;
+    position: absolute;
+    right: 15px;
+    top: 14px;
+    cursor: pointer;
+    font-size: 1em;
+  }
+
+  &__sliders-icon {
+    color: $curious-blue;
+  }
+
+  &__memo-text-area {
+    &__input {
+      padding: 6px 10px;
+    }
+  }
+
+  &__footer {
+    height: 92px;
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    border-top: 1px solid $alto;
+    background: $white;
+    padding: 0 12px;
+    flex-shrink: 0;
+  }
+
+  &__next-btn,
+  &__cancel-btn {
+    width: 163px;
+    margin: 0 4px;
+  }
+
+  &__customize-gas {
+    border: 1px solid #D8D8D8;
+    border-radius: 4px;
+    background-color: #FFFFFF;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
+    font-family: Roboto;
+    display: flex;
+    flex-flow: column;
+
+    @media screen and (max-width: $break-small) {
+      width: 100vw;
+      height: 100vh;
+    }
+
+    &__header {
+      height: 52px;
+      border-bottom: 1px solid $alto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 22px;
+
+      @media screen and (max-width: $break-small) {
+        flex: 0 0 auto;
+      }
+    }
+
+    &__title {
+      margin-left: 19.25px;
+    }
+
+    &__close::after {
+      content: '\00D7';
+      font-size: 1.8em;
+      color: $dusty-gray;
+      font-family: sans-serif;
+      cursor: pointer;
+      margin-right: 19.25px;
+    }
+
+    &__content {
+      display: flex;
+      flex-flow: column nowrap;
+      height: 100%;
+    }
+
+    &__body {
+      display: flex;
+      margin-bottom: 24px;
+
+      @media screen and (max-width: $break-small) {
+        flex-flow: column;
+        flex: 1 1 auto;
+      }
+    }
+
+    &__footer {
+      height: 75px;
+      border-top: 1px solid $alto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 22px;
+      position: relative;
+
+      @media screen and (max-width: $break-small) {
+        flex: 0 0 auto;
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      justify-content: space-between;
+      width: 181.75px;
+      margin-right: 21.25px;
+    }
+
+    &__revert, &__cancel, &__save, &__save__error {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    &__revert {
+      color: $silver-chalice;
+      font-size: 16px;
+      margin-left: 21.25px;
+    }
+
+    &__cancel, &__save, &__save__error {
+      height: 34.64px;
+      width: 85.74px;
+      border: 1px solid $dusty-gray;
+      border-radius: 2px;
+      font-family: 'DIN OT';
+      font-size: 12px;
+      color: $dusty-gray;
+    }
+
+    &__save__error {
+      opacity: 0.5;
+      cursor: auto;
+    }
+
+    &__error-message {
+      display: block;
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      font-size: 12px;
+      line-height: 12px;
+      color: $red;
+    }
+  }
+
+  &__gas-modal-card {
+    width: 360px;
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+    padding-left: 20px;
+
+    &__title {
+      height: 26px;
+      color: $tundora;
+      font-family: Roboto;
+      font-size: 20px;
+      font-weight: 300;
+      line-height: 26px;
+      margin-top: 17px;
+    }
+
+    &__copy {
+      height: 38px;
+      width: 314px;
+      color: $tundora;
+      font-family: Roboto;
+      font-size: 14px;
+      line-height: 19px;
+      margin-top: 17px;
+    }
+
+    .customize-gas-input-wrapper {
+      margin-top: 17px;
+    }
+
+    .customize-gas-input {
+      height: 54px;
+      width: 315px;
+      border: 1px solid $geyser;
+      background-color: $white;
+      padding-left: 15px;
+    }
+
+    .gas-tooltip-input-arrows {
+      width: 32px;
+      height: 54px;
+      border-left: 1px solid #dadada;
+      font-size: 18px;
+      color: $tundora;
+      right: 0px;
+      padding: 1px 4px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+
+    input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+
+    input[type="number"]:hover::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+  }
+}
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
new file mode 100644
index 000000000..d60ebd934
--- /dev/null
+++ b/ui/app/css/itcss/components/settings.scss
@@ -0,0 +1,206 @@
+.settings {
+  position: relative;
+  background: $white;
+  display: flex;
+  flex-flow: column nowrap;
+  height: auto;
+  overflow: auto;
+}
+
+.settings__header {
+  padding: 25px;
+}
+
+.settings__close-button::after {
+  content: '\00D7';
+  font-size: 40px;
+  color: $dusty-gray;
+  position: absolute;
+  top: 25px;
+  right: 30px;
+  cursor: pointer;
+}
+
+.settings__error {
+  padding-bottom: 20px;
+  text-align: center;
+  color: $crimson;
+}
+
+.settings__content {
+  padding: 0 25px;
+}
+
+.settings__content-row {
+  display: flex;
+  flex-direction: row;
+  padding: 10px 0 20px;
+
+  @media screen and (max-width: 575px) {
+    flex-direction: column;
+    padding: 10px 0;
+  }
+}
+
+.settings__content-item {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0 5px;
+  height: 71px;
+
+  @media screen and (max-width: 575px) {
+    height: initial;
+    padding: 5px 0;
+  }
+
+  &--without-height {
+    height: initial;
+  }
+}
+
+.settings__content-item-col {
+  max-width: 300px;
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (max-width: 575px) {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+.settings__content-description {
+  font-size: 14px;
+  color: $dusty-gray;
+  padding-top: 5px;
+}
+
+.settings__input {
+  padding-left: 10px;
+  font-size: 14px;
+  height: 40px;
+  border: 1px solid $alto;
+}
+
+.settings__input::-webkit-input-placeholder {
+  font-weight: 100;
+  color: $dusty-gray;
+}
+
+.settings__input::-moz-placeholder {
+  font-weight: 100;
+  color: $dusty-gray;
+}
+
+.settings__input:-ms-input-placeholder {
+  font-weight: 100;
+  color: $dusty-gray;
+}
+
+.settings__input:-moz-placeholder {
+  font-weight: 100;
+  color: $dusty-gray;
+}
+
+.settings__provider-wrapper {
+  font-size: 16px;
+  border: 1px solid $alto;
+  border-radius: 2px;
+  padding: 15px;
+  background-color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.settings__provider-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: 10px;
+  border-radius: 10px;
+}
+
+.settings__rpc-save-button {
+  align-self: flex-end;
+  padding: 5px;
+  text-transform: uppercase;
+  color: $dusty-gray;
+  cursor: pointer;
+}
+
+.settings__clear-button {
+  font-size: 16px;
+  border: 1px solid $curious-blue;
+  color: $curious-blue;
+  border-radius: 2px;
+  padding: 18px;
+  background-color: $white;
+  text-transform: uppercase;
+}
+
+.settings__clear-button--red {
+  border: 1px solid $monzo;
+  color: $monzo;
+}
+
+.settings__clear-button--orange {
+  border: 1px solid rgba(247, 134, 28, 1);
+  color: rgba(247, 134, 28, 1);
+}
+
+.settings__info-logo-wrapper {
+  height: 80px;
+  margin-bottom: 20px;
+}
+
+.settings__info-logo {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.settings__info-item {
+  padding: 10px 0;
+}
+
+.settings__info-link-header {
+  padding-bottom: 15px;
+
+  @media screen and (max-width: 575px) {
+    padding-bottom: 5px;
+  }
+}
+
+.settings__info-link-item {
+  padding: 15px 0;
+
+  @media screen and (max-width: 575px) {
+    padding: 5px 0;
+  }
+}
+
+.settings__info-version-number {
+  padding-top: 5px;
+  font-size: 13px;
+  color: $dusty-gray;
+}
+
+.settings__info-about {
+  color: $dusty-gray;
+  margin-bottom: 15px;
+}
+
+.settings__info-link {
+  color: $curious-blue;
+}
+
+.settings__info-separator {
+  margin: 15px 0;
+  width: 80px;
+  border-color: $alto;
+  border: none;
+  height: 1px;
+  background-color: $alto;
+  color: $alto;
+}
diff --git a/ui/app/css/itcss/components/simple-dropdown.scss b/ui/app/css/itcss/components/simple-dropdown.scss
new file mode 100644
index 000000000..a21095a3e
--- /dev/null
+++ b/ui/app/css/itcss/components/simple-dropdown.scss
@@ -0,0 +1,65 @@
+.simple-dropdown {
+  height: 56px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border: 1px solid $alto;
+  border-radius: 4px;
+  background-color: $white;
+  font-size: 16px;
+  color: #4d4d4d;
+  cursor: pointer;
+  position: relative;
+}
+
+.simple-dropdown__caret {
+  color: $silver;
+  padding: 0 10px;
+}
+
+.simple-dropdown__selected {
+  flex-grow: 1;
+  padding: 0 15px;
+}
+
+.simple-dropdown__options {
+  z-index: 1050;
+  position: absolute;
+  height: 220px;
+  width: 100%;
+  border: 1px solid #d2d8dd;
+  border-radius: 4px;
+  background-color: #fff;
+  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11);
+  margin-top: 10px;
+  overflow-y: scroll;
+  left: 0;
+  top: 100%;
+}
+
+.simple-dropdown__option {
+  padding: 10px;
+
+  &:hover {
+    background-color: $gallery;
+  }
+}
+
+.simple-dropdown__option--selected {
+  background-color: $alto;
+
+  &:hover {
+    background-color: $alto;
+    cursor: default;
+  }
+}
+
+.simple-dropdown__close-area {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+}
diff --git a/ui/app/css/itcss/components/tab-bar.scss b/ui/app/css/itcss/components/tab-bar.scss
new file mode 100644
index 000000000..4f3077974
--- /dev/null
+++ b/ui/app/css/itcss/components/tab-bar.scss
@@ -0,0 +1,23 @@
+.tab-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+
+.tab-bar__tab {
+  min-width: 0;
+  flex: 0 0 auto;
+  padding: 15px 25px;
+  border-bottom: 1px solid $alto;
+  box-sizing: border-box;
+  font-size: 18px;
+}
+
+.tab-bar__tab--active {
+  border-color: $black;
+}
+
+.tab-bar__grow-tab {
+  flex-grow: 1;
+}
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
new file mode 100644
index 000000000..9dc4f1055
--- /dev/null
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -0,0 +1,111 @@
+$wallet-balance-breakpoint: 890px;
+$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
+
+.token-list-item {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding: 20px 24px;
+  cursor: pointer;
+  transition: linear 200ms;
+  background-color: rgba($wallet-balance-bg, 0);
+  position: relative;
+
+  &__token-balance {
+    font-size: 1.5rem;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      font-size: 95%;
+    }
+  }
+
+  &__fiat-amount {
+    margin-top: .25%;
+    font-size: 105%;
+    text-transform: uppercase;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      font-size: 95%;
+    }
+  }
+
+  @media #{$wallet-balance-breakpoint-range} {
+    padding: 10% 4%;
+  }
+
+  &--active {
+    background-color: $manatee;
+    color: $white;
+  }
+
+  &__identicon {
+    margin-right: 15px;
+    border: '1px solid #dedede';
+    min-width: 50px;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      margin-right: 4%;
+    }
+  }
+
+  &__balance-ellipsis {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__ellipsis {
+    line-height: 45px;
+    margin-left: 5px;
+  }
+
+  &__balance-wrapper {
+    flex: 1 1 auto;
+  }
+}
+
+.token-menu-dropdown {
+  height: 55px;
+  width: 80%;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .82);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
+  position: absolute;
+  top: 60px;
+  right: 25px;
+  z-index: 2000;
+
+  @media #{$wallet-balance-breakpoint-range} {
+    right: 18px;
+  }
+
+  &__close-area {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 2100;
+    width: 100%;
+    height: 100%;
+    cursor: default;
+  }
+
+  &__container {
+    padding: 16px;
+    z-index: 2200;
+    position: relative;
+  }
+
+  &__options {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &__option {
+    color: $white;
+    font-family: Roboto;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/tooltip.scss b/ui/app/css/itcss/components/tooltip.scss
new file mode 100644
index 000000000..78325865e
--- /dev/null
+++ b/ui/app/css/itcss/components/tooltip.scss
@@ -0,0 +1,7 @@
+.metamask-tooltip {
+	padding: 5px !important;
+}
+
+// needed for react-tippy
+// copied from node_modules/react-tippy/dist/tippy.css
+.tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.7)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#26323d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia]{transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:130%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;overflow:hidden;transition:all ease}.tippy-tooltip [x-circle]:before{content:"";padding-top:90%;float:left}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}}
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
new file mode 100644
index 000000000..c3df493df
--- /dev/null
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -0,0 +1,264 @@
+.tx-list-container {
+  height: 87.5%;
+
+  @media screen and (min-width: $break-large) {
+    overflow-y: scroll;
+  }
+}
+
+.tx-list-header-wrapper {
+  flex: 0 0 auto;
+}
+
+.tx-list-header {
+  text-transform: capitalize;
+}
+
+@media screen and (max-width: $break-small) {
+  .tx-list-header-wrapper {
+    margin-top: .2em;
+    margin-bottom: .6em;
+    // TODO: Resolve Layout Conflicst in Wallet View
+    //  - This fixes txlist "transactions" title dispay
+    // margin-top: 0.2em;
+    // margin-bottom: 0.6em;
+    justify-content: center;
+    flex: 0 0 auto;
+  }
+
+  .tx-list-header {
+    align-self: center;
+    font-size: 12px;
+    color: $dusty-gray;
+    font-family: Roboto;
+    text-transform: uppercase;
+  }
+}
+
+@media screen and (min-width: $break-large) {
+  .tx-list-header {
+    font-size: 16px;
+    margin: 1.1em 2.37em .8em;
+  }
+
+  .tx-list-container::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.tx-list-content-divider {
+  height: 1px;
+  background: rgb(231, 231, 231);
+  flex: 0 0 1px;
+
+  @media screen and (max-width: $break-small) {
+    margin: .1em 0;
+  }
+
+  @media screen and (min-width: $break-large) {
+    margin: .1em 2.37em;
+  }
+}
+
+.tx-list-item-wrapper {
+  flex: 1 1 auto;
+  width: 0;
+  align-items: stretch;
+  justify-content: flex-start;
+  display: flex;
+  flex-flow: column nowrap;
+
+  @media screen and (max-width: $break-small) {
+    padding: 0 1.3em .8em;
+  }
+
+  @media screen and (min-width: $break-large) {
+    padding-bottom: 8px;
+  }
+}
+
+.tx-list-clickable {
+  cursor: pointer;
+
+  &:hover {
+    background: rgba($alto, .2);
+  }
+}
+
+.tx-list-pending-item-container {
+  cursor: pointer;
+  opacity: .5;
+}
+
+.tx-list-date-wrapper {
+  margin-top: 6px;
+  flex: 1 1 auto;
+}
+
+.tx-list-content-wrapper {
+  align-items: stretch;
+  margin-bottom: 4px;
+  flex: 1 0 auto;
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+
+  @media screen and (max-width: $break-small) {
+    font-size: 12px;
+
+    .tx-list-status {
+      font-size: 12px !important;
+    }
+
+    .tx-list-account {
+      font-size: 14px !important;
+    }
+
+    .tx-list-value {
+      font-size: 14px;
+      line-height: 18px;
+    }
+
+    .tx-list-fiat-value {
+      font-size: 12px;
+      line-height: 22px;
+    }
+  }
+}
+
+.tx-list-date {
+  color: $dusty-gray;
+  font-size: 12px;
+  font-family: Roboto;
+}
+
+.tx-list-identicon-wrapper {
+  align-self: center;
+  flex: 0 0 auto;
+  margin-right: 16px;
+}
+
+.tx-list-account-and-status-wrapper {
+  display: flex;
+  flex: 1 1 auto;
+  flex-flow: row wrap;
+  width: 0;
+
+  @media screen and (max-width: $break-small) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-self: center;
+
+    .tx-list-account-wrapper {
+      height: 18px;
+
+      .tx-list-account {
+        line-height: 14px;
+      }
+    }
+  }
+
+  @media screen and (min-width: $break-large) {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    .tx-list-account-wrapper {
+      flex: 1.3 2 auto;
+      min-width: 153px;
+    }
+
+    .tx-list-status-wrapper {
+      flex: 6 6 auto;
+    }
+  }
+
+  .tx-list-account {
+    font-size: 16px;
+    color: $scorpion;
+  }
+
+  .tx-list-status {
+    color: $dusty-gray;
+    font-size: 16px;
+    text-transform: capitalize;
+  }
+
+  .tx-list-status--rejected,
+  .tx-list-status--failed {
+    color: $monzo;
+  }
+}
+
+.tx-list-item {
+  border-top: 1px solid rgb(231, 231, 231);
+  flex: 0 0 auto;
+  display: flex;
+  flex-flow: row nowrap;
+
+  @media screen and (max-width: $break-small) {
+    // margin: 0 1.3em .95em; !important
+  }
+
+  @media screen and (min-width: $break-large) {
+    padding: 0 2.37em;
+  }
+
+  &:last-of-type {
+    border-bottom: 1px solid rgb(231, 231, 231);
+    margin-bottom: 32px;
+  }
+
+  &__wrapper {
+    align-self: center;
+    flex: 2 2 auto;
+    color: $dusty-gray;
+
+    .tx-list-value {
+      font-size: 16px;
+      text-align: right;
+    }
+
+    .tx-list-value--confirmed {
+      color: $caribbean-green;
+    }
+
+    .tx-list-fiat-value {
+      font-size: 12px;
+      text-align: right;
+    }
+  }
+
+  &--empty {
+    text-align: center;
+    border-bottom: none !important;
+    padding: 16px;
+  }
+}
+
+.tx-list-details-wrapper {
+  overflow: hidden;
+  flex: 0 0 35%;
+}
+
+.tx-list-value {
+  font-size: 16px;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tx-list-fiat-value {
+  font-size: 12px;
+  line-height: initial;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.tx-list-value--confirmed {
+  color: $caribbean-green;
+}
diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss
new file mode 100644
index 000000000..293771550
--- /dev/null
+++ b/ui/app/css/itcss/components/wallet-balance.scss
@@ -0,0 +1,74 @@
+$wallet-balance-bg: #e7e7e7;
+$wallet-balance-breakpoint: 890px;
+$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
+
+.wallet-balance-wrapper {
+  flex: 0 0 auto;
+  transition: linear 200ms;
+  background: rgba($wallet-balance-bg, 0);
+
+  &--active {
+    background: $manatee;
+    color: $white;
+  }
+}
+
+.wallet-balance {
+  background: inherit;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex: 0 0 auto;
+  cursor: pointer;
+  border-top: 1px solid $wallet-balance-bg;
+
+  .balance-container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 20px 24px;
+    flex-direction: row;
+    flex-grow: 3;
+
+    @media #{$wallet-balance-breakpoint-range} {
+      margin: 10% 4%;
+    }
+  }
+
+  .balance-display {
+    margin-left: 15px;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    .token-amount {
+      font-size: 1.5rem;
+    }
+
+    .fiat-amount {
+      margin-top: .25%;
+      font-size: 105%;
+    }
+
+    @media #{$wallet-balance-breakpoint-range} {
+      margin-left: 4%;
+
+      .token-amount {
+        font-size: 105%;
+      }
+
+      .fiat-amount {
+        font-size: 95%;
+      }
+    }
+  }
+}
+
+.balance-icon {
+  border-radius: 25px;
+  width: 50px;
+  height: 50px;
+  border: 1px solid $alto;
+  padding: 5px;
+  background: $white;
+}
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
new file mode 100644
index 000000000..9b3d7475b
--- /dev/null
+++ b/ui/app/css/itcss/generic/index.scss
@@ -0,0 +1,204 @@
+/*
+  Generic
+ */
+
+@import './reset.scss';
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-family: Roboto, Arial;
+  color: #4d4d4d;
+  font-weight: 300;
+  line-height: 1.4em;
+  background: #f7f7f7;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  min-height: 500px;
+}
+
+.app-root {
+  overflow: hidden;
+  position: relative;
+}
+
+.app-primary {
+  display: flex;
+}
+
+input:focus,
+textarea:focus {
+  outline: none;
+}
+
+/* stylelint-disable */
+#app-content {
+  overflow-x: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (max-width: $break-small) {
+    background-color: $white;
+  }
+}
+/* stylelint-enable */
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+a:hover {
+  color: #df6b0e;
+}
+
+input.large-input,
+textarea.large-input {
+  padding: 8px;
+}
+
+input.large-input {
+  height: 36px;
+}
+
+.page-container {
+  width: 400px;
+  background-color: $white;
+  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
+  z-index: 25;
+  display: flex;
+  flex-flow: column;
+
+  &__header {
+    display: flex;
+    flex-flow: column;
+    border-bottom: 1px solid $geyser;
+    padding: 1.15rem 0.95rem;
+    flex: 0 0 auto;
+    background: $alabaster;
+    position: relative;
+  }
+
+  &__header-close::after {
+    content: '\00D7';
+    font-size: 40px;
+    color: $tundora;
+    position: absolute;
+    top: 21.5px;
+    right: 28.5px;
+    cursor: pointer;
+  }
+
+  &__footer {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    border-top: 1px solid $geyser;
+    padding: 1.6rem;
+    flex: 0 0 auto;
+
+    .btn-clear,
+    .btn-cancel {
+      font-size: 1rem;
+    }
+  }
+
+  &__footer-button {
+    width: 165px;
+    height: 60px;
+    font-size: 1rem;
+    text-transform: uppercase;
+    margin-right: 1rem;
+    border-radius: 2px;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  &__title {
+    color: $black;
+    font-family: Roboto;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: initial;
+  }
+
+  &__subtitle {
+    padding-top: .5rem;
+    line-height: initial;
+    font-size: .9rem;
+    color: $gray;
+  }
+
+  &__tabs {
+    padding: 0 1.3rem;
+    display: flex;
+  }
+
+  &__tab {
+    min-width: 5rem;
+    padding: .2rem .8rem .9rem;
+    color: $dusty-gray;
+    font-family: Roboto;
+    font-size: 1.1rem;
+    line-height: initial;
+    text-align: center;
+    cursor: pointer;
+    border-bottom: none;
+    margin-right: 1rem;
+
+    &:hover {
+      color: $black;
+    }
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+
+    &--selected {
+      color: $curious-blue;
+      border-bottom: 3px solid $curious-blue;
+
+      &:hover {
+        color: $curious-blue;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 250px) {
+  .page-container {
+    &__footer {
+      flex-flow: column-reverse;
+    }
+
+    &__footer-button {
+      width: 100%;
+      margin-bottom: 1rem;
+      margin-right: 0;
+
+      &:first-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 575px) {
+  .page-container {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    background-color: $white;
+  }
+}
diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/itcss/generic/reset.scss
new file mode 100644
index 000000000..e054d533e
--- /dev/null
+++ b/ui/app/css/itcss/generic/reset.scss
@@ -0,0 +1,147 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  /* stylelint-disable */
+  font: inherit;
+  /* stylelint-enable */
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+
+/* stylelint-disable */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button {
+  border-style: none;
+  cursor: pointer;
+}
+
+/* stylelint-enable */
diff --git a/ui/app/css/itcss/objects/index.scss b/ui/app/css/itcss/objects/index.scss
new file mode 100644
index 000000000..220775682
--- /dev/null
+++ b/ui/app/css/itcss/objects/index.scss
@@ -0,0 +1 @@
+// Objects
diff --git a/ui/app/css/itcss/settings/index.scss b/ui/app/css/itcss/settings/index.scss
new file mode 100644
index 000000000..58a7ca7b7
--- /dev/null
+++ b/ui/app/css/itcss/settings/index.scss
@@ -0,0 +1,3 @@
+@import './variables.scss';
+
+@import './typography.scss';
diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss
new file mode 100644
index 000000000..ac8c41336
--- /dev/null
+++ b/ui/app/css/itcss/settings/typography.scss
@@ -0,0 +1,71 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
+
+@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
+
+@font-face {
+  font-family: 'Montserrat Regular';
+  src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
+  src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-size: 'small';
+}
+
+@font-face {
+  font-family: 'Montserrat Bold';
+  src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
+  src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat Light';
+  src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff');
+  src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat UltraLight';
+  src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
+  src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN OT';
+  src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN OT Light';
+  src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN NEXT';
+  src: url('/fonts/DIN Next/DIN Next W01 Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN NEXT Light';
+  src: url('/fonts/DIN Next/DIN Next W10 Light.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url('/fonts/Lato/Lato-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
new file mode 100644
index 000000000..4c0972527
--- /dev/null
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -0,0 +1,81 @@
+/*
+  Variables
+ */
+
+// Base Colors
+$white: #fff;
+$black: #000;
+$orange: #ffa500;
+$red: #f00;
+$gray: #808080;
+
+/*
+  Colors
+  http://chir.ag/projects/name-that-color
+ */
+$white-linen: #faf6f0; // formerly 'faint orange (textfield shades)'
+$rajah: #f5c26d; // formerly 'light orange (button shades)'
+$buttercup: #f5a623; // formerly 'dark orange (text)'
+$tundora: #4a4a4a; // formerly 'borders/font/any gray'
+$gallery: #efefef;
+$alabaster: #f7f7f7;
+$shark: #22232c;
+$wild-sand: #f6f6f6;
+$white: #fff;
+$dusty-gray: #9b9b9b;
+$alto: #dedede;
+$alabaster: #fafafa;
+$silver-chalice: #aeaeae;
+$curious-blue: #2f9ae0;
+$concrete: #f3f3f3;
+$tundora: #4d4d4d;
+$nile-blue: #1b344d;
+$scorpion: #5d5d5d;
+$silver: #cdcdcd;
+$caribbean-green: #02c9b1;
+$monzo: #d0021b;
+$crimson: #e91550;
+$blue-lagoon: #038789;
+$purple: #690496;
+$tulip-tree: #ebb33f;
+$malibu-blue: #7ac9fd;
+$athens-grey: #e9edf0;
+$jaffa: #f28930;
+$geyser: #d2d8dd;
+$manatee: #93949d;
+$spindle: #c7ddec;
+$mid-gray: #5b5d67;
+$cape-cod: #38393a;
+
+/*
+  Z-Indicies
+ */
+$dropdown-z-index: 30;
+$token-icon-z-index: 15;
+$container-z-index: 15;
+$header-z-index: 12;
+$mobile-header-z-index: 26;
+$main-container-z-index: 18;
+$send-card-z-index: 20;
+$sidebar-z-index: 26;
+$sidebar-overlay-z-index: 25;
+
+/*
+  Z Indicies - Current
+  app - 11
+  hex/bn as decimal input - 1 - remove?
+  dropdown - 11
+  loading - 10 - higher?
+  mascot - 0 - remove?
+ */
+
+/*
+  Responsive Breakpoints
+ */
+$break-small: 575px;
+$break-midpoint: 780px;
+$break-large: 576px;
+
+
+$primary-font-type: Roboto;
+
diff --git a/ui/app/css/itcss/tools/index.scss b/ui/app/css/itcss/tools/index.scss
new file mode 100644
index 000000000..2236729e8
--- /dev/null
+++ b/ui/app/css/itcss/tools/index.scss
@@ -0,0 +1 @@
+@import './utilities.scss';
diff --git a/ui/app/css/lib.css b/ui/app/css/itcss/tools/utilities.scss
index 670dc9fd0..ee867640d 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/itcss/tools/utilities.scss
@@ -1,19 +1,34 @@
+/*
+  Utility Classes
+ */
+
 /* color */
 
 .color-orange {
-  color: #F7861C;
+  color: #f7861c; // TODO: move to settings/variables
 }
 
 .color-forest {
-  color: #0A5448;
+  color: #0a5448; // TODO: move to settings/variables
 }
 
 /* lib */
 
+.full-size {
+  height: 100%;
+  width: 100%;
+}
+
 .full-width {
   width: 100%;
 }
 
+.full-flex-height {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
 .full-height {
   height: 100%;
 }
@@ -118,16 +133,19 @@
 .pointer {
   cursor: pointer;
 }
+
 .cursor-pointer {
   cursor: pointer;
   transform-origin: center center;
   transition: transform 50ms ease-in-out;
 }
+
 .cursor-pointer:hover {
   transform: scale(1.1);
 }
+
 .cursor-pointer:active {
-  transform: scale(0.95);
+  transform: scale(.95);
 }
 
 .cursor-disabled {
@@ -147,7 +165,7 @@
 }
 
 .bold {
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .text-transform-uppercase {
@@ -172,12 +190,12 @@ hr.horizontal-line {
 }
 
 .hover-white:hover {
-  background: white;
+  background: $white;
 }
 
 .red-dot {
-  background: #E91550;
-  color: white;
+  background: #e91550;
+  color: $white;
   border-radius: 10px;
 }
 
@@ -191,11 +209,15 @@ hr.horizontal-line {
   border: 3px solid #690496;
 }
 
+.golden-square {
+  background: #ebb33f;
+}
+
 .pending-dot {
-  background: red;
+  background: $red;
   left: 14px;
   top: 14px;
-  color: white;
+  color: $white;
   border-radius: 10px;
   height: 20px;
   min-width: 20px;
@@ -209,18 +231,14 @@ hr.horizontal-line {
 
 .keyring-label {
   z-index: 1;
-  font-size: 11px;
-  background: rgba(255,0,0,0.8);
-  bottom: -47px;
-  color: white;
+  font-size: 8px;
+  line-height: 8px;
+  background: rgba(255, 255, 255, 0.4);
+  color: #fff;
   border-radius: 10px;
-  height: 20px;
-  min-width: 20px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   padding: 4px;
+  text-align: center;
+  height: 15px;
 }
 
 .ether-balance {
@@ -228,18 +246,24 @@ hr.horizontal-line {
   align-items: center;
 }
 
+.tabSection {
+  min-width: 350px;
+}
+
 .menu-icon {
   display: inline-block;
-  height: 9px;
-  min-width: 9px;
+  height: 12px;
+  min-width: 12px;
   margin: 13px;
 }
+
 .ether-icon {
   background: rgb(0, 163, 68);
   border-radius: 20px;
 }
+
 .testnet-icon {
-  background: #2465E1;
+  background: #2465e1;
 }
 
 .drop-menu-item {
@@ -260,5 +284,26 @@ hr.horizontal-line {
 .critical-error {
   text-align: center;
   margin-top: 20px;
-  color: red;
+  color: $red;
+}
+
+/*
+  Misc
+ */
+
+// TODO: move into component-level contextual 'active' state
+.letter-spacey {
+  letter-spacing: .1em;
+}
+
+.active {
+  color: #909090;
+}
+
+.check {
+  margin-left: 7px;
+  color: #f7861c;
+  flex: 1 0 auto;
+  display: flex;
+  justify-content: flex-end;
 }
diff --git a/ui/app/css/transitions.css b/ui/app/css/itcss/trumps/index.scss
index 393a944f9..d9a4202a4 100644
--- a/ui/app/css/transitions.css
+++ b/ui/app/css/itcss/trumps/index.scss
@@ -1,3 +1,9 @@
+/*
+  Trumps
+ */
+
+// Transitions
+
 /* universal */
 .app-primary .main-enter {
   position: absolute;
@@ -8,7 +14,7 @@
 .app-primary.from-right .main-enter-active,
 .app-primary.from-left .main-enter-active {
   overflow-x: hidden;
-  transform: translateX(0px);
+  transform: translateX(0);
   transition: transform 300ms ease-in;
 }
 
@@ -17,18 +23,27 @@
   transform: translateX(360px);
   transition: transform 300ms ease-in;
 }
+
 .app-primary.from-right .main-leave-active {
   transform: translateX(-360px);
   transition: transform 300ms ease-in;
 }
 
+.sidebar.from-left {
+  transform: translateX(-320px);
+  transition: transform 300ms ease-in;
+}
+
 /* loader transitions */
-.loader-enter, .loader-leave-active {
-  opacity: 0.0;
+.loader-enter,
+.loader-leave-active {
+  opacity: 0;
   transition: opacity 150 ease-in;
 }
-.loader-enter-active, .loader-leave {
-  opacity: 1.0;
+
+.loader-enter-active,
+.loader-leave {
+  opacity: 1;
   transition: opacity 150 ease-in;
 }
 
@@ -36,7 +51,22 @@
 .app-primary.from-right .main-enter:not(.main-enter-active) {
   transform: translateX(360px);
 }
+
 .app-primary.from-left .main-enter:not(.main-enter-active) {
   transform: translateX(-360px);
 }
 
+i.fa.fa-question-circle.fa-lg.menu-icon {
+  font-size: 18px;
+}
+
+// This text is contained inside a div.
+// ID needed to override user agent stylesheet.
+// See components/modal.scss
+
+/* stylelint-disable */
+#buy-modal-content-footer-text {
+  font-family: 'DIN OT';
+  font-size: 16px;
+}
+/* stylelint-enable */
diff --git a/ui/app/css/reset.css b/ui/app/css/reset.css
deleted file mode 100644
index 9ce89e8bc..000000000
--- a/ui/app/css/reset.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol, ul {
-  list-style: none;
-}
-blockquote, q {
-  quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
\ No newline at end of file
diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js
index cc7c51bd3..0e08da8db 100644
--- a/ui/app/first-time/init-menu.js
+++ b/ui/app/first-time/init-menu.js
@@ -7,6 +7,10 @@ const Mascot = require('../components/mascot')
 const actions = require('../actions')
 const Tooltip = require('../components/tooltip')
 const getCaretCoordinates = require('textarea-caret')
+const environmentType = require('../../../app/scripts/lib/environment-type')
+const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
+
+let isSubmitting = false
 
 module.exports = connect(mapStateToProps)(InitializeMenuScreen)
 
@@ -128,6 +132,18 @@ InitializeMenuScreen.prototype.renderMenu = function (state) {
         }, 'Import Existing DEN'),
       ]),
 
+      h('.flex-row.flex-center.flex-grow', [
+        h('p.pointer', {
+          onClick: this.showOldUI.bind(this),
+          style: {
+            fontSize: '0.8em',
+            color: '#aeaeae',
+            textDecoration: 'underline',
+            marginTop: '32px',
+          },
+        }, 'Use classic interface'),
+      ]),
+
     ])
   )
 }
@@ -144,7 +160,15 @@ InitializeMenuScreen.prototype.componentDidMount = function () {
 }
 
 InitializeMenuScreen.prototype.showRestoreVault = function () {
-  this.props.dispatch(actions.showRestoreVault())
+  this.props.dispatch(actions.markPasswordForgotten())
+  if (environmentType() === 'popup') {
+    global.platform.openExtensionInBrowser()
+  }
+}
+
+InitializeMenuScreen.prototype.showOldUI = function () {
+  this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+    .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
 }
 
 InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () {
@@ -164,7 +188,10 @@ InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () {
     return
   }
 
-  this.props.dispatch(actions.createNewVaultAndKeychain(password))
+  if (!isSubmitting) {
+    isSubmitting = true
+    this.props.dispatch(actions.createNewVaultAndKeychain(password))
+  }
 }
 
 InitializeMenuScreen.prototype.inputChanged = function (event) {
diff --git a/ui/app/info.js b/ui/app/info.js
index a6fdeb315..49ff9f24a 100644
--- a/ui/app/info.js
+++ b/ui/app/info.js
@@ -20,7 +20,11 @@ InfoScreen.prototype.render = function () {
   const version = global.platform.getVersion()
 
   return (
-    h('.flex-column.flex-grow', [
+    h('.flex-column.flex-grow', {
+      style: {
+        maxWidth: '400px',
+      },
+    }, [
 
       // subtitle and nav
       h('.section-title.flex-row.flex-center', [
@@ -52,7 +56,7 @@ InfoScreen.prototype.render = function () {
 
           h('div', {
             style: {
-              marginBottom: '10px',
+              marginBottom: '5px',
             }},
             [
               h('div', [
@@ -87,7 +91,7 @@ InfoScreen.prototype.render = function () {
 
           h('hr', {
             style: {
-              margin: '20px 0 ',
+              margin: '10px 0 ',
               width: '7em',
             },
           }),
@@ -97,11 +101,17 @@ InfoScreen.prototype.render = function () {
               paddingLeft: '30px',
             }},
             [
+              h('div.fa.fa-support', [
+                h('a.info', {
+                  href: 'https://metamask.helpscoutdocs.com/',
+                  target: '_blank',
+                }, 'Visit our Knowledge Base'),
+              ]),
+
               h('div', [
                 h('a', {
                   href: 'https://metamask.io/',
                   target: '_blank',
-                  onClick (event) { this.navigateTo(event.target.href) },
                 }, [
                   h('img.icon-size', {
                     src: 'images/icon-128.png',
@@ -115,37 +125,22 @@ InfoScreen.prototype.render = function () {
                   h('div.info', 'Visit our web site'),
                 ]),
               ]),
-              h('div.fa.fa-slack', [
-                h('a.info', {
-                  href: 'http://slack.metamask.io',
-                  target: '_blank',
-                  onClick (event) { this.navigateTo(event.target.href) },
-                }, 'Join the conversation on Slack'),
-              ]),
 
-              h('div.fa.fa-twitter', [
-                h('a.info', {
-                  href: 'https://twitter.com/metamask_io',
-                  target: '_blank',
-                  onClick (event) { this.navigateTo(event.target.href) },
-                }, 'Follow us on Twitter'),
+              h('div', [
+                h('.fa.fa-twitter', [
+                  h('a.info', {
+                    href: 'https://twitter.com/metamask_io',
+                    target: '_blank',
+                  }, 'Follow us on Twitter'),
+                ]),
               ]),
 
               h('div.fa.fa-envelope', [
                 h('a.info', {
                   target: '_blank',
-                  style: { width: '85vw' },
-                  onClick () { this.navigateTo('mailto:help@metamask.io?subject=Feedback') },
+                  href: 'mailto:support@metamask.io?subject=MetaMask Support',
                 }, 'Email us!'),
               ]),
-
-              h('div.fa.fa-github', [
-                h('a.info', {
-                  href: 'https://github.com/MetaMask/metamask-plugin/issues',
-                  target: '_blank',
-                  onClick (event) { this.navigateTo(event.target.href) },
-                }, 'Start a thread on GitHub'),
-              ]),
             ]),
         ]),
       ]),
@@ -156,3 +151,4 @@ InfoScreen.prototype.render = function () {
 InfoScreen.prototype.navigateTo = function (url) {
   global.platform.openWindow({ url })
 }
+
diff --git a/ui/app/infura-conversion.json b/ui/app/infura-conversion.json
new file mode 100644
index 000000000..9a96fe069
--- /dev/null
+++ b/ui/app/infura-conversion.json
@@ -0,0 +1,653 @@
+{
+  "objects": [
+    {
+      "symbol": "ethaud",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "aud",
+        "name": "Australian Dollar"
+      }
+    },
+    {
+      "symbol": "ethhkd",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "hkd",
+        "name": "Hong Kong Dollar"
+      }
+    },
+    {
+      "symbol": "ethsgd",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "sgd",
+        "name": "Singapore Dollar"
+      }
+    },
+    {
+      "symbol": "ethidr",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "idr",
+        "name": "Indonesian Rupiah"
+      }
+    },
+    {
+      "symbol": "ethphp",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "php",
+        "name": "Philippine Peso"
+      }
+    },
+    {
+      "symbol": "eth1st",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "1st",
+        "name": "FirstBlood"
+      }
+    },
+    {
+      "symbol": "ethadt",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "adt",
+        "name": "adToken"
+      }
+    },
+    {
+      "symbol": "ethadx",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "adx",
+        "name": "AdEx"
+      }
+    },
+    {
+      "symbol": "ethant",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "ant",
+        "name": "Aragon"
+      }
+    },
+    {
+      "symbol": "ethbat",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "bat",
+        "name": "Basic Attention Token"
+      }
+    },
+    {
+      "symbol": "ethbnt",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "bnt",
+        "name": "Bancor"
+      }
+    },
+    {
+      "symbol": "ethbtc",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "btc",
+        "name": "Bitcoin"
+      }
+    },
+    {
+      "symbol": "ethcad",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "cad",
+        "name": "Canadian Dollar"
+      }
+    },
+    {
+      "symbol": "ethcfi",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "cfi",
+        "name": "Cofound.it"
+      }
+    },
+    {
+      "symbol": "ethcrb",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "crb",
+        "name": "CreditBit"
+      }
+    },
+    {
+      "symbol": "ethcvc",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "cvc",
+        "name": "Civic"
+      }
+    },
+    {
+      "symbol": "ethdash",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "dash",
+        "name": "Dash"
+      }
+    },
+    {
+      "symbol": "ethdgd",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "dgd",
+        "name": "DigixDAO"
+      }
+    },
+    {
+      "symbol": "ethetc",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "etc",
+        "name": "Ethereum Classic"
+      }
+    },
+    {
+      "symbol": "etheur",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "eur",
+        "name": "Euro"
+      }
+    },
+    {
+      "symbol": "ethfun",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "fun",
+        "name": "FunFair"
+      }
+    },
+    {
+      "symbol": "ethgbp",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "gbp",
+        "name": "Pound Sterling"
+      }
+    },
+    {
+      "symbol": "ethgno",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "gno",
+        "name": "Gnosis"
+      }
+    },
+    {
+      "symbol": "ethgnt",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "gnt",
+        "name": "Golem"
+      }
+    },
+    {
+      "symbol": "ethgup",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "gup",
+        "name": "Matchpool"
+      }
+    },
+    {
+      "symbol": "ethhmq",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "hmq",
+        "name": "Humaniq"
+      }
+    },
+    {
+      "symbol": "ethjpy",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "jpy",
+        "name": "Japanese Yen"
+      }
+    },
+    {
+      "symbol": "ethlgd",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "lgd",
+        "name": "Legends Room"
+      }
+    },
+    {
+      "symbol": "ethlsk",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "lsk",
+        "name": "Lisk"
+      }
+    },
+    {
+      "symbol": "ethltc",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "ltc",
+        "name": "Litecoin"
+      }
+    },
+    {
+      "symbol": "ethlun",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "lun",
+        "name": "Lunyr"
+      }
+    },
+    {
+      "symbol": "ethmco",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "mco",
+        "name": "Monaco"
+      }
+    },
+    {
+      "symbol": "ethmtl",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "mtl",
+        "name": "Metal"
+      }
+    },
+    {
+      "symbol": "ethmyst",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "myst",
+        "name": "Mysterium"
+      }
+    },
+    {
+      "symbol": "ethnmr",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "nmr",
+        "name": "Numeraire"
+      }
+    },
+    {
+      "symbol": "ethomg",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "omg",
+        "name": "OmiseGO"
+      }
+    },
+    {
+      "symbol": "ethpay",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "pay",
+        "name": "TenX"
+      }
+    },
+    {
+      "symbol": "ethptoy",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "ptoy",
+        "name": "Patientory"
+      }
+    },
+    {
+      "symbol": "ethqrl",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "qrl",
+        "name": "Quantum-Resistant Ledger"
+      }
+    },
+    {
+      "symbol": "ethqtum",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "qtum",
+        "name": "Qtum"
+      }
+    },
+    {
+      "symbol": "ethrep",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "rep",
+        "name": "Augur"
+      }
+    },
+    {
+      "symbol": "ethrlc",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "rlc",
+        "name": "iEx.ec"
+      }
+    },
+    {
+      "symbol": "ethrub",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "rub",
+        "name": "Russian Ruble"
+      }
+    },
+    {
+      "symbol": "ethsc",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "sc",
+        "name": "Siacoin"
+      }
+    },
+    {
+      "symbol": "ethsngls",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "sngls",
+        "name": "SingularDTV"
+      }
+    },
+    {
+      "symbol": "ethsnt",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "snt",
+        "name": "Status"
+      }
+    },
+    {
+      "symbol": "ethsteem",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "steem",
+        "name": "Steem"
+      }
+    },
+    {
+      "symbol": "ethstorj",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "storj",
+        "name": "Storj"
+      }
+    },
+    {
+      "symbol": "ethtime",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "time",
+        "name": "ChronoBank"
+      }
+    },
+    {
+      "symbol": "ethtkn",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "tkn",
+        "name": "TokenCard"
+      }
+    },
+    {
+      "symbol": "ethtrst",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "trst",
+        "name": "WeTrust"
+      }
+    },
+    {
+      "symbol": "ethuah",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "uah",
+        "name": "Ukrainian Hryvnia"
+      }
+    },
+    {
+      "symbol": "ethusd",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "usd",
+        "name": "United States Dollar"
+      }
+    },
+    {
+      "symbol": "ethwings",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "wings",
+        "name": "Wings"
+      }
+    },
+    {
+      "symbol": "ethxem",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "xem",
+        "name": "NEM"
+      }
+    },
+    {
+      "symbol": "ethxlm",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "xlm",
+        "name": "Stellar Lumen"
+      }
+    },
+    {
+      "symbol": "ethxmr",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "xmr",
+        "name": "Monero"
+      }
+    },
+    {
+      "symbol": "ethxrp",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "xrp",
+        "name": "Ripple"
+      }
+    },
+    {
+      "symbol": "ethzec",
+      "base": {
+        "code": "eth",
+        "name": "Ethereum"
+      },
+      "quote": {
+        "code": "zec",
+        "name": "Zcash"
+      }
+    }
+  ]
+}
diff --git a/ui/app/keychains/hd/create-vault-complete.js b/ui/app/keychains/hd/create-vault-complete.js
index 5230797ad..5ab5d4c33 100644
--- a/ui/app/keychains/hd/create-vault-complete.js
+++ b/ui/app/keychains/hd/create-vault-complete.js
@@ -3,6 +3,7 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const actions = require('../../actions')
+const exportAsFile = require('../../util').exportAsFile
 
 module.exports = connect(mapStateToProps)(CreateVaultCompleteScreen)
 
@@ -20,7 +21,7 @@ function mapStateToProps (state) {
 
 CreateVaultCompleteScreen.prototype.render = function () {
   var state = this.props
-  var seed = state.seed || state.cachedSeed
+  var seed = state.seed || state.cachedSeed || ''
 
   return (
 
@@ -47,14 +48,12 @@ CreateVaultCompleteScreen.prototype.render = function () {
 
       h('div', {
         style: {
-          width: '360px',
-          height: '78px',
           fontSize: '1em',
           marginTop: '10px',
           textAlign: 'center',
         },
       }, [
-        h('span.error', 'These 12 words can restore all of your MetaMask accounts for this vault.\nSave them somewhere safe and secret.'),
+        h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'),
       ]),
 
       h('textarea.twelve-word-phrase', {
@@ -63,16 +62,30 @@ CreateVaultCompleteScreen.prototype.render = function () {
       }),
 
       h('button.primary', {
-        onClick: () => this.confirmSeedWords(),
+        onClick: () => this.confirmSeedWords()
+          .then(account => this.showAccountDetail(account)),
         style: {
           margin: '24px',
           fontSize: '0.9em',
+          marginBottom: '10px',
         },
       }, 'I\'ve copied it somewhere safe'),
+
+      h('button.primary', {
+        onClick: () => exportAsFile(`MetaMask Seed Words`, seed),
+        style: {
+          margin: '10px',
+          fontSize: '0.9em',
+        },
+      }, 'Save Seed Words As File'),
     ])
   )
 }
 
 CreateVaultCompleteScreen.prototype.confirmSeedWords = function () {
-  this.props.dispatch(actions.confirmSeedWords())
+  return this.props.dispatch(actions.confirmSeedWords())
+}
+
+CreateVaultCompleteScreen.prototype.showAccountDetail = function (account) {
+  return this.props.dispatch(actions.showAccountDetail(account))
 }
diff --git a/ui/app/keychains/hd/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js
index 4ccbec9fc..4335186a5 100644
--- a/ui/app/keychains/hd/recover-seed/confirmation.js
+++ b/ui/app/keychains/hd/recover-seed/confirmation.js
@@ -23,7 +23,9 @@ RevealSeedConfirmation.prototype.render = function () {
 
   return (
 
-    h('.initialize-screen.flex-column.flex-center.flex-grow', [
+    h('.initialize-screen.flex-column.flex-center.flex-grow', {
+      style: { maxWidth: '420px' },
+    }, [
 
       h('h3.flex-center.text-transform-uppercase', {
         style: {
@@ -61,7 +63,7 @@ RevealSeedConfirmation.prototype.render = function () {
           },
         }),
 
-        h('.flex-row.flex-space-between', {
+        h('.flex-row.flex-start', {
           style: {
             marginTop: 30,
             width: '50%',
@@ -74,6 +76,7 @@ RevealSeedConfirmation.prototype.render = function () {
 
           // submit
           h('button.primary', {
+            style: { marginLeft: '10px' },
             onClick: this.revealSeedWords.bind(this),
           }, 'OK'),
 
diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js
index 06e51d9b3..a4ed137f9 100644
--- a/ui/app/keychains/hd/restore-vault.js
+++ b/ui/app/keychains/hd/restore-vault.js
@@ -107,6 +107,7 @@ RestoreVaultScreen.prototype.render = function () {
 }
 
 RestoreVaultScreen.prototype.showInitializeMenu = function () {
+  this.props.dispatch(actions.unMarkPasswordForgotten())
   if (this.props.forgottenPassword) {
     this.props.dispatch(actions.backToUnlockView())
   } else {
@@ -149,4 +150,11 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
   this.warning = null
   this.props.dispatch(actions.displayWarning(this.warning))
   this.props.dispatch(actions.createNewVaultAndRestore(password, seed))
+  .then(() => {
+    this.props.dispatch(actions.unMarkPasswordForgotten())
+  })
+  .catch((err) => {
+    log.error(err.message)
+  })
+
 }
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
new file mode 100644
index 000000000..292abcc3d
--- /dev/null
+++ b/ui/app/main-container.js
@@ -0,0 +1,59 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const AccountAndTransactionDetails = require('./account-and-transaction-details')
+const Settings = require('./settings')
+const UnlockScreen = require('./unlock')
+
+module.exports = MainContainer
+
+inherits(MainContainer, Component)
+function MainContainer () {
+  Component.call(this)
+}
+
+MainContainer.prototype.render = function () {
+  // 3. summarize:
+  //  switch statement goes inside MainContainer,
+  //  or a method in renderPrimary
+  //    - pass resulting h() to MainContainer
+  //  - error checking in separate func
+  //  - router in separate func
+  let contents = {
+    component: AccountAndTransactionDetails,
+    key: 'account-detail',
+    style: {},
+  }
+
+  if (this.props.isUnlocked === false) {
+    switch (this.props.currentViewName) {
+      case 'config':
+        log.debug('rendering config screen from unlock screen.')
+        return h(Settings, {key: 'config'})
+      default:
+        log.debug('rendering locked screen')
+        contents = {
+          component: UnlockScreen,
+          style: {
+            boxShadow: 'none',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: '#F7F7F7',
+            // must force 100%, because lock screen is full-width
+            width: '100%',
+          },
+          key: 'locked',
+        }
+    }
+  }
+
+  return h('div.main-container', {
+    style: contents.style,
+  }, [
+    h(contents.component, {
+      key: contents.key,
+    }, []),
+  ])
+}
+
diff --git a/ui/app/reducers.js b/ui/app/reducers.js
index c656af849..70b7e71dc 100644
--- a/ui/app/reducers.js
+++ b/ui/app/reducers.js
@@ -1,4 +1,5 @@
 const extend = require('xtend')
+const copyToClipboard = require('copy-to-clipboard')
 
 //
 // Sub-Reducers take in the complete state and return their sub-state
@@ -41,9 +42,33 @@ function rootReducer (state, action) {
   return state
 }
 
-window.logState = function () {
-  var stateString = JSON.stringify(window.METAMASK_CACHED_LOG_STATE, removeSeedWords, 2)
-  console.log(stateString)
+window.logStateString = function (cb) {
+  const state = window.METAMASK_CACHED_LOG_STATE
+  const version = global.platform.getVersion()
+  const browser = window.navigator.userAgent
+  return global.platform.getPlatformInfo((err, platform) => {
+    if (err) {
+      return cb(err)
+    }
+    state.version = version
+    state.platform = platform
+    state.browser = browser
+    const stateString = JSON.stringify(state, removeSeedWords, 2)
+    return cb(null, stateString)
+  })
+}
+
+window.logState = function (toClipboard) {
+  return window.logStateString((err, result) => {
+    if (err) {
+      console.error(err.message)
+    } else if (toClipboard) {
+      copyToClipboard(result)
+      console.log('State log copied')
+    } else {
+      console.log(result)
+    }
+  })
 }
 
 function removeSeedWords (key, value) {
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 7ad1229e5..02f024f7c 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -14,6 +14,7 @@ function reduceApp (state, action) {
   if (selectedAddress) {
     name = 'accountDetail'
   }
+
   if (hasUnconfActions) {
     log.debug('pending txs detected, defaulting to conf-tx view.')
     name = 'confTx'
@@ -36,19 +37,76 @@ function reduceApp (state, action) {
   var appState = extend({
     shouldClose: false,
     menuOpen: false,
+    modal: {
+      open: false,
+      modalState: {
+        name: null,
+      },
+      previousModalState: {
+        name: null,
+      },
+    },
+    sidebarOpen: false,
+    networkDropdownOpen: false,
     currentView: seedWords ? seedConfView : defaultView,
     accountDetail: {
       subview: 'transactions',
     },
-    transForward: true, // Used to render transition direction
-    isLoading: false,   // Used to display loading indicator
-    warning: null,      // Used to display error text
+    // Used to render transition direction
+    transForward: true,
+    // Used to display loading indicator
+    isLoading: false,
+    // Used to display error text
+    warning: null,
+    buyView: {},
+    isMouseUser: false,
   }, state.appState)
 
   switch (action.type) {
+    // dropdown methods
+    case actions.NETWORK_DROPDOWN_OPEN:
+      return extend(appState, {
+        networkDropdownOpen: true,
+      })
 
-    // transition methods
+    case actions.NETWORK_DROPDOWN_CLOSE:
+      return extend(appState, {
+        networkDropdownOpen: false,
+      })
+
+    // sidebar methods
+    case actions.SIDEBAR_OPEN:
+      return extend(appState, {
+        sidebarOpen: true,
+      })
 
+    case actions.SIDEBAR_CLOSE:
+      return extend(appState, {
+        sidebarOpen: false,
+      })
+
+    // modal methods:
+    case actions.MODAL_OPEN:
+      return extend(appState, {
+        modal: Object.assign(
+          state.appState.modal,
+          { open: true },
+          { modalState: action.payload },
+          { previousModalState: appState.modal.modalState},
+        ),
+      })
+
+    case actions.MODAL_CLOSE:
+      return extend(appState, {
+        modal: Object.assign(
+          state.appState.modal,
+          { open: false },
+          { modalState: { name: null } },
+          { previousModalState: appState.modal.modalState},
+        ),
+      })
+
+    // transition methods
     case actions.TRANSITION_FORWARD:
       return extend(appState, {
         transForward: true,
@@ -103,12 +161,40 @@ function reduceApp (state, action) {
         transForward: action.value,
       })
 
+    case actions.SHOW_ADD_TOKEN_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'add-token',
+          context: appState.currentView.context,
+        },
+        transForward: action.value,
+      })
+
     case actions.SHOW_IMPORT_PAGE:
       return extend(appState, {
         currentView: {
           name: 'import-menu',
         },
         transForward: true,
+        warning: null,
+      })
+
+    case actions.SHOW_NEW_ACCOUNT_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'new-account-page',
+          context: action.formToSelect,
+        },
+        transForward: true,
+        warning: null,
+      })
+
+    case actions.SET_NEW_ACCOUNT_FORM:
+      return extend(appState, {
+        currentView: {
+          name: appState.currentView.name,
+          context: action.formToSelect,
+        },
       })
 
     case actions.SHOW_INFO_PAGE:
@@ -120,7 +206,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',
@@ -159,6 +245,16 @@ function reduceApp (state, action) {
         warning: null,
       })
 
+    case actions.SHOW_SEND_TOKEN_PAGE:
+      return extend(appState, {
+        currentView: {
+          name: 'sendToken',
+          context: appState.currentView.context,
+        },
+        transForward: true,
+        warning: null,
+      })
+
     case actions.SHOW_NEW_KEYCHAIN:
       return extend(appState, {
         currentView: {
@@ -294,7 +390,7 @@ function reduceApp (state, action) {
       return extend(appState, {
         currentView: {
           name: 'confTx',
-          context: 0,
+          context: action.id ? indexForPending(state, action.id) : 0,
         },
         transForward: action.transForward,
         warning: null,
@@ -315,7 +411,7 @@ function reduceApp (state, action) {
     case actions.COMPLETED_TX:
       log.debug('reducing COMPLETED_TX for tx ' + action.value)
       const otherUnconfActions = getUnconfActionList(state)
-      .filter(tx => tx.id !== action.value )
+        .filter(tx => tx.id !== action.value)
       const hasOtherUnconfActions = otherUnconfActions.length > 0
 
       if (hasOtherUnconfActions) {
@@ -389,6 +485,11 @@ function reduceApp (state, action) {
         warning: action.value || 'Incorrect password. Try again.',
       })
 
+    case actions.UNLOCK_SUCCEEDED:
+      return extend(appState, {
+        warning: '',
+      })
+
     case actions.SHOW_LOADING:
       return extend(appState, {
         isLoading: true,
@@ -469,8 +570,9 @@ function reduceApp (state, action) {
           name: 'buyEth',
           context: appState.currentView.name,
         },
+        identity: state.metamask.identities[action.value],
         buyView: {
-          subview: 'buyForm',
+          subview: 'Coinbase',
           amount: '15.00',
           buyAddress: action.value,
           formView: {
@@ -480,36 +582,20 @@ function reduceApp (state, action) {
         },
       })
 
-    case actions.UPDATE_BUY_ADDRESS:
-      return extend(appState, {
-        buyView: {
-          subview: 'buyForm',
-          formView: {
-            coinbase: appState.buyView.formView.coinbase,
-            shapeshift: appState.buyView.formView.shapeshift,
-          },
-          buyAddress: action.value,
-          amount: appState.buyView.amount,
-        },
-      })
-
-    case actions.UPDATE_COINBASE_AMOUNT:
+    case actions.ONBOARDING_BUY_ETH_VIEW:
       return extend(appState, {
-        buyView: {
-          subview: 'buyForm',
-          formView: {
-            coinbase: true,
-            shapeshift: false,
-          },
-          buyAddress: appState.buyView.buyAddress,
-          amount: action.value,
+        transForward: true,
+        currentView: {
+          name: 'onboardingBuyEth',
+          context: appState.currentView.name,
         },
+        identity: state.metamask.identities[action.value],
       })
 
     case actions.COINBASE_SUBVIEW:
       return extend(appState, {
         buyView: {
-          subview: 'buyForm',
+          subview: 'Coinbase',
           formView: {
             coinbase: true,
             shapeshift: false,
@@ -522,22 +608,22 @@ function reduceApp (state, action) {
     case actions.SHAPESHIFT_SUBVIEW:
       return extend(appState, {
         buyView: {
-          subview: 'buyForm',
+          subview: 'ShapeShift',
           formView: {
             coinbase: false,
             shapeshift: true,
             marketinfo: action.value.marketinfo,
             coinOptions: action.value.coinOptions,
           },
-          buyAddress: appState.buyView.buyAddress,
-          amount: appState.buyView.amount,
+          buyAddress: action.value.buyAddress || appState.buyView.buyAddress,
+          amount: appState.buyView.amount || 0,
         },
       })
 
     case actions.PAIR_UPDATE:
       return extend(appState, {
         buyView: {
-          subview: 'buyForm',
+          subview: 'ShapeShift',
           formView: {
             coinbase: false,
             shapeshift: true,
@@ -573,6 +659,12 @@ function reduceApp (state, action) {
           data: action.value.data,
         },
       })
+
+    case actions.SET_MOUSE_USER_STATE:
+      return extend(appState, {
+        isMouseUser: action.value,
+      })
+
     default:
       return appState
   }
@@ -586,9 +678,9 @@ function checkUnconfActions (state) {
 
 function getUnconfActionList (state) {
   const { unapprovedTxs, unapprovedMsgs,
-    unapprovedPersonalMsgs, network } = state.metamask
+    unapprovedPersonalMsgs, unapprovedTypedMessages, network } = state.metamask
 
-  const unconfActionList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, network)
+  const unconfActionList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, unapprovedTypedMessages, network)
   return unconfActionList
 }
 
@@ -598,3 +690,7 @@ function indexForPending (state, txId) {
   const index = unconfTxList.indexOf(match)
   return index
 }
+
+// function indexForLastPending (state) {
+//   return getUnconfActionList(state).length
+// }
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index e0c416c2d..beeba948d 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -1,5 +1,8 @@
 const extend = require('xtend')
 const actions = require('../actions')
+const MetamascaraPlatform = require('../../../app/scripts/platforms/window')
+const environmentType = require('../../../app/scripts/lib/environment-type')
+const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
 
 module.exports = reduceMetamask
 
@@ -10,6 +13,9 @@ function reduceMetamask (state, action) {
   var metamaskState = extend({
     isInitialized: false,
     isUnlocked: false,
+    isAccountMenuOpen: false,
+    isMascara: window.platform instanceof MetamascaraPlatform,
+    isPopup: environmentType() === 'popup',
     rpcTarget: 'https://rawtestrpc.metamask.io/',
     identities: {},
     unapprovedTxs: {},
@@ -17,6 +23,26 @@ function reduceMetamask (state, action) {
     lastUnreadNotice: undefined,
     frequentRpcList: [],
     addressBook: [],
+    selectedTokenAddress: null,
+    tokenExchangeRates: {},
+    tokens: [],
+    send: {
+      gasLimit: null,
+      gasPrice: null,
+      gasTotal: null,
+      tokenBalance: null,
+      from: '',
+      to: '',
+      amount: '0x0',
+      memo: '',
+      errors: {},
+      maxModeOn: false,
+      editingTransactionId: null,
+    },
+    coinOptions: {},
+    useBlockie: false,
+    featureFlags: {},
+    networkEndpointType: OLD_UI_NETWORK_TYPE,
   }, state.metamask)
 
   switch (action.type) {
@@ -90,6 +116,14 @@ function reduceMetamask (state, action) {
       }
       return newState
 
+    case actions.EDIT_TX:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          editingTransactionId: action.value,
+        },
+      })
+
     case actions.SHOW_NEW_VAULT_SEED:
       return extend(metamaskState, {
         isUnlocked: true,
@@ -115,12 +149,17 @@ function reduceMetamask (state, action) {
       delete newState.seedWords
       return newState
 
+    case actions.SET_SELECTED_TOKEN:
+      return extend(metamaskState, {
+        selectedTokenAddress: action.value,
+      })
+
     case actions.SAVE_ACCOUNT_LABEL:
       const account = action.value.account
       const name = action.value.label
-      var id = {}
+      const id = {}
       id[account] = extend(metamaskState.identities[account], { name })
-      var identities = extend(metamaskState.identities, id)
+      const identities = extend(metamaskState.identities, id)
       return extend(metamaskState, { identities })
 
     case actions.SET_CURRENT_FIAT:
@@ -130,6 +169,181 @@ function reduceMetamask (state, action) {
         conversionDate: action.value.conversionDate,
       })
 
+    case actions.UPDATE_TOKEN_EXCHANGE_RATE:
+      const { payload: { pair, marketinfo } } = action
+      return extend(metamaskState, {
+        tokenExchangeRates: {
+          ...metamaskState.tokenExchangeRates,
+          [pair]: marketinfo,
+        },
+      })
+
+    case actions.UPDATE_TOKENS:
+      return extend(metamaskState, {
+        tokens: action.newTokens,
+      })
+
+    // metamask.send
+    case actions.UPDATE_GAS_LIMIT:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          gasLimit: action.value,
+        },
+      })
+
+    case actions.UPDATE_GAS_PRICE:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          gasPrice: action.value,
+        },
+      })
+
+    case actions.TOGGLE_ACCOUNT_MENU:
+      return extend(metamaskState, {
+        isAccountMenuOpen: !metamaskState.isAccountMenuOpen,
+      })
+
+    case actions.UPDATE_GAS_TOTAL:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          gasTotal: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_TOKEN_BALANCE:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          tokenBalance: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_FROM:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          from: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_TO:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          to: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_AMOUNT:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          amount: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_MEMO:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          memo: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND_ERRORS:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          errors: {
+            ...metamaskState.send.errors,
+            ...action.value,
+          },
+        },
+      })
+
+    case actions.UPDATE_MAX_MODE:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          maxModeOn: action.value,
+        },
+      })
+
+    case actions.UPDATE_SEND:
+      return extend(metamaskState, {
+        send: {
+          ...metamaskState.send,
+          ...action.value,
+        },
+      })
+
+    case actions.CLEAR_SEND:
+      return extend(metamaskState, {
+        send: {
+          gasLimit: null,
+          gasPrice: null,
+          gasTotal: null,
+          tokenBalance: null,
+          from: '',
+          to: '',
+          amount: '0x0',
+          memo: '',
+          errors: {},
+          editingTransactionId: null,
+        },
+      })
+
+    case actions.UPDATE_TRANSACTION_PARAMS:
+      const { id: txId, value } = action
+      let { selectedAddressTxList } = metamaskState
+      selectedAddressTxList = selectedAddressTxList.map(tx => {
+        if (tx.id === txId) {
+          tx.txParams = value
+        }
+        return tx
+      })
+
+      return extend(metamaskState, {
+        selectedAddressTxList,
+      })
+
+    case actions.PAIR_UPDATE:
+      const { value: { marketinfo: pairMarketInfo } } = action
+      return extend(metamaskState, {
+        tokenExchangeRates: {
+          ...metamaskState.tokenExchangeRates,
+          [pairMarketInfo.pair]: pairMarketInfo,
+        },
+      })
+
+    case actions.SHAPESHIFT_SUBVIEW:
+      const { value: { marketinfo: ssMarketInfo, coinOptions } } = action
+      return extend(metamaskState, {
+        tokenExchangeRates: {
+          ...metamaskState.tokenExchangeRates,
+          [ssMarketInfo.pair]: ssMarketInfo,
+        },
+        coinOptions,
+      })
+
+    case actions.SET_USE_BLOCKIE:
+          return extend(metamaskState, {
+            useBlockie: action.value,
+          })
+
+    case actions.UPDATE_FEATURE_FLAGS:
+      return extend(metamaskState, {
+        featureFlags: action.value,
+      })
+
+    case actions.UPDATE_NETWORK_ENDPOINT_TYPE:
+      return extend(metamaskState, {
+        networkEndpointType: action.value,
+      })
+
     default:
       return metamaskState
 
diff --git a/ui/app/root.js b/ui/app/root.js
index 9e7314b20..21d6d1829 100644
--- a/ui/app/root.js
+++ b/ui/app/root.js
@@ -2,7 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const Provider = require('react-redux').Provider
 const h = require('react-hyperscript')
-const App = require('./app')
+const SelectedApp = require('./select-app')
 
 module.exports = Root
 
@@ -15,7 +15,7 @@ Root.prototype.render = function () {
     h(Provider, {
       store: this.props.store,
     }, [
-      h(App),
+      h(SelectedApp),
     ])
 
   )
diff --git a/ui/app/select-app.js b/ui/app/select-app.js
new file mode 100644
index 000000000..193c98353
--- /dev/null
+++ b/ui/app/select-app.js
@@ -0,0 +1,68 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const App = require('./app')
+const OldApp = require('../../old-ui/app/app')
+const { autoAddToBetaUI } = require('./selectors')
+const { setFeatureFlag, setNetworkEndpoints } = require('./actions')
+const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
+
+function mapStateToProps (state) {
+  return {
+    betaUI: state.metamask.featureFlags.betaUI,
+    autoAdd: autoAddToBetaUI(state),
+    isUnlocked: state.metamask.isUnlocked,
+    isMascara: state.metamask.isMascara,
+    firstTime: Object.keys(state.metamask.identities).length === 0,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    setFeatureFlagWithModal: () => {
+      return dispatch(setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
+        .then(() => dispatch(setNetworkEndpoints(BETA_UI_NETWORK_TYPE)))
+    },
+    setFeatureFlagWithoutModal: () => {
+      return dispatch(setFeatureFlag('betaUI', true))
+        .then(() => dispatch(setNetworkEndpoints(BETA_UI_NETWORK_TYPE)))
+    },
+  }
+}
+module.exports = connect(mapStateToProps, mapDispatchToProps)(SelectedApp)
+
+inherits(SelectedApp, Component)
+function SelectedApp () {
+  Component.call(this)
+}
+
+SelectedApp.prototype.componentWillReceiveProps = function (nextProps) {
+  // Code commented out until we begin auto adding users to NewUI
+  const {
+    // isUnlocked,
+    // setFeatureFlagWithModal,
+    setFeatureFlagWithoutModal,
+    isMascara,
+    // firstTime,
+  } = this.props
+
+  // if (isMascara || firstTime) {
+  if (isMascara) {
+    setFeatureFlagWithoutModal()
+  }
+  // } else if (!isUnlocked && nextProps.isUnlocked && (nextProps.autoAdd)) {
+  //   setFeatureFlagWithModal()
+  // }
+}
+
+SelectedApp.prototype.render = function () {
+  // Code commented out until we begin auto adding users to NewUI
+  // const { betaUI, isMascara, firstTime } = this.props
+  // const Selected = betaUI || isMascara || firstTime ? App : OldApp
+
+  const { betaUI, isMascara } = this.props
+  const Selected = betaUI || isMascara ? App : OldApp
+
+  return h(Selected)
+}
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
new file mode 100644
index 000000000..5d2635775
--- /dev/null
+++ b/ui/app/selectors.js
@@ -0,0 +1,189 @@
+const valuesFor = require('./util').valuesFor
+const abi = require('human-standard-token-abi')
+
+const {
+  multiplyCurrencies,
+} = require('./conversion-util')
+
+const selectors = {
+  getSelectedAddress,
+  getSelectedIdentity,
+  getSelectedAccount,
+  getSelectedToken,
+  getSelectedTokenExchangeRate,
+  getTokenExchangeRate,
+  conversionRateSelector,
+  transactionsSelector,
+  accountsWithSendEtherInfoSelector,
+  getCurrentAccountWithSendEtherInfo,
+  getGasPrice,
+  getGasLimit,
+  getAddressBook,
+  getSendFrom,
+  getCurrentCurrency,
+  getSendAmount,
+  getSelectedTokenToFiatRate,
+  getSelectedTokenContract,
+  autoAddToBetaUI,
+  getSendMaxModeState,
+  getCurrentViewContext,
+}
+
+module.exports = selectors
+
+function getSelectedAddress (state) {
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(state.metamask.accounts)[0]
+
+  return selectedAddress
+}
+
+function getSelectedIdentity (state) {
+  const selectedAddress = getSelectedAddress(state)
+  const identities = state.metamask.identities
+
+  return identities[selectedAddress]
+}
+
+function getSelectedAccount (state) {
+  const accounts = state.metamask.accounts
+  const selectedAddress = getSelectedAddress(state)
+
+  return accounts[selectedAddress]
+}
+
+function getSelectedToken (state) {
+  const tokens = state.metamask.tokens || []
+  const selectedTokenAddress = state.metamask.selectedTokenAddress
+  const selectedToken = tokens.filter(({ address }) => address === selectedTokenAddress)[0]
+
+  return selectedToken || null
+}
+
+function getSelectedTokenExchangeRate (state) {
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const selectedToken = getSelectedToken(state) || {}
+  const { symbol = '' } = selectedToken
+
+  const pair = `${symbol.toLowerCase()}_eth`
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
+
+  return tokenExchangeRate
+}
+
+function getTokenExchangeRate (state, tokenSymbol) {
+  const pair = `${tokenSymbol.toLowerCase()}_eth`
+  const tokenExchangeRates = state.metamask.tokenExchangeRates
+  const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {}
+
+  return tokenExchangeRate
+}
+
+function conversionRateSelector (state) {
+  return state.metamask.conversionRate
+}
+
+function getAddressBook (state) {
+  return state.metamask.addressBook
+}
+
+function accountsWithSendEtherInfoSelector (state) {
+  const {
+    accounts,
+    identities,
+  } = state.metamask
+
+  const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
+    return Object.assign({}, account, identities[key])
+  })
+
+  return accountsWithSendEtherInfo
+}
+
+function getCurrentAccountWithSendEtherInfo (state) {
+  const currentAddress = getSelectedAddress(state)
+  const accounts = accountsWithSendEtherInfoSelector(state)
+
+  return accounts.find(({ address }) => address === currentAddress)
+}
+
+function transactionsSelector (state) {
+  const { network, selectedTokenAddress } = state.metamask
+  const unapprovedMsgs = valuesFor(state.metamask.unapprovedMsgs)
+  const shapeShiftTxList = (network === '1') ? state.metamask.shapeShiftTxList : undefined
+  const transactions = state.metamask.selectedAddressTxList || []
+  const txsToRender = !shapeShiftTxList ? transactions.concat(unapprovedMsgs) : transactions.concat(unapprovedMsgs, shapeShiftTxList)
+
+  // console.log({txsToRender, selectedTokenAddress})
+  return selectedTokenAddress
+    ? txsToRender
+      .filter(({ txParams }) => txParams && txParams.to === selectedTokenAddress)
+      .sort((a, b) => b.time - a.time)
+    : txsToRender
+      .sort((a, b) => b.time - a.time)
+}
+
+function getGasPrice (state) {
+  return state.metamask.send.gasPrice
+}
+
+function getGasLimit (state) {
+  return state.metamask.send.gasLimit
+}
+
+function getSendFrom (state) {
+  return state.metamask.send.from
+}
+
+function getSendAmount (state) {
+  return state.metamask.send.amount
+}
+
+function getSendMaxModeState (state) {
+  return state.metamask.send.maxModeOn
+}
+
+function getCurrentCurrency (state) {
+  return state.metamask.currentCurrency
+}
+
+function getSelectedTokenToFiatRate (state) {
+  const selectedTokenExchangeRate = getSelectedTokenExchangeRate(state)
+  const conversionRate = conversionRateSelector(state)
+
+  const tokenToFiatRate = multiplyCurrencies(
+    conversionRate,
+    selectedTokenExchangeRate,
+    { toNumericBase: 'dec' }
+  )
+
+  return tokenToFiatRate
+}
+
+function getSelectedTokenContract (state) {
+  const selectedToken = getSelectedToken(state)
+  return selectedToken
+    ? global.eth.contract(abi).at(selectedToken.address)
+    : null
+}
+
+function autoAddToBetaUI (state) {
+  const autoAddTransactionThreshold = 12
+  const autoAddAccountsThreshold = 2
+  const autoAddTokensThreshold = 1
+
+  const numberOfTransactions = state.metamask.selectedAddressTxList.length
+  const numberOfAccounts = Object.keys(state.metamask.accounts).length
+  const numberOfTokensAdded = state.metamask.tokens.length
+
+  const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) &&
+    (numberOfAccounts > autoAddAccountsThreshold) &&
+    (numberOfTokensAdded > autoAddTokensThreshold)
+  const userIsNotInBeta = !state.metamask.featureFlags.betaUI
+
+  return userIsNotInBeta && userPassesThreshold
+}
+
+function getCurrentViewContext (state) {
+  const { currentView = {} } = state.appState
+  return currentView.context
+}
\ No newline at end of file
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
new file mode 100644
index 000000000..1d67150e3
--- /dev/null
+++ b/ui/app/send-v2.js
@@ -0,0 +1,624 @@
+const { inherits } = require('util')
+const PersistentForm = require('../lib/persistent-form')
+const h = require('react-hyperscript')
+
+const ethAbi = require('ethereumjs-abi')
+const ethUtil = require('ethereumjs-util')
+
+const FromDropdown = require('./components/send/from-dropdown')
+const ToAutoComplete = require('./components/send/to-autocomplete')
+const CurrencyDisplay = require('./components/send/currency-display')
+const MemoTextArea = require('./components/send/memo-textarea')
+const GasFeeDisplay = require('./components/send/gas-fee-display-v2')
+
+const {
+  TOKEN_TRANSFER_FUNCTION_SIGNATURE,
+} = require('./components/send/send-constants')
+
+const {
+  multiplyCurrencies,
+  conversionGreaterThan,
+  subtractCurrencies,
+} = require('./conversion-util')
+const {
+  calcTokenAmount,
+} = require('./token-util')
+const {
+  isBalanceSufficient,
+  isTokenBalanceSufficient,
+} = require('./components/send/send-utils')
+const { isValidAddress } = require('./util')
+
+module.exports = SendTransactionScreen
+
+inherits(SendTransactionScreen, PersistentForm)
+function SendTransactionScreen () {
+  PersistentForm.call(this)
+
+  this.state = {
+    fromDropdownOpen: false,
+    toDropdownOpen: false,
+    errors: {
+      to: null,
+      amount: null,
+    },
+  }
+
+  this.handleToChange = this.handleToChange.bind(this)
+  this.handleAmountChange = this.handleAmountChange.bind(this)
+  this.validateAmount = this.validateAmount.bind(this)
+}
+
+const getParamsForGasEstimate = function (selectedAddress, symbol, data) {
+  const estimatedGasParams = {
+    from: selectedAddress,
+    gas: '746a528800',
+  }
+
+  if (symbol) {
+    Object.assign(estimatedGasParams, { value: '0x0' })
+  }
+
+  if (data) {
+    Object.assign(estimatedGasParams, { data })
+  }
+
+  return estimatedGasParams
+}
+
+SendTransactionScreen.prototype.updateSendTokenBalance = function (usersToken) {
+  if (!usersToken) return
+
+  const {
+    selectedToken = {},
+    updateSendTokenBalance,
+  } = this.props
+  const { decimals } = selectedToken || {}
+  const tokenBalance = calcTokenAmount(usersToken.balance.toString(), decimals)
+
+  updateSendTokenBalance(tokenBalance)
+}
+
+SendTransactionScreen.prototype.componentWillMount = function () {
+  const {
+    updateTokenExchangeRate,
+    selectedToken = {},
+  } = this.props
+
+  const { symbol } = selectedToken || {}
+
+  if (symbol) {
+    updateTokenExchangeRate(symbol)
+  }
+
+  this.updateGas()
+}
+
+SendTransactionScreen.prototype.updateGas = function () {
+  const {
+    selectedToken = {},
+    getGasPrice,
+    estimateGas,
+    selectedAddress,
+    data,
+    updateGasTotal,
+    from,
+    tokenContract,
+    editingTransactionId,
+    gasPrice,
+    gasLimit,
+  } = this.props
+
+  const { symbol } = selectedToken || {}
+
+  const tokenBalancePromise = tokenContract
+    ? tokenContract.balanceOf(from.address)
+    : Promise.resolve()
+  tokenBalancePromise
+      .then(usersToken => this.updateSendTokenBalance(usersToken))
+
+  if (!editingTransactionId) {
+    const estimateGasParams = getParamsForGasEstimate(selectedAddress, symbol, data)
+
+    Promise
+      .all([
+        getGasPrice(),
+        estimateGas(estimateGasParams),
+      ])
+      .then(([gasPrice, gas]) => {
+        const newGasTotal = this.getGasTotal(gas, gasPrice)
+        updateGasTotal(newGasTotal)
+      })
+  } else {
+    const newGasTotal = this.getGasTotal(gasLimit, gasPrice)
+    updateGasTotal(newGasTotal)
+  }
+}
+
+SendTransactionScreen.prototype.getGasTotal = function (gasLimit, gasPrice) {
+  return multiplyCurrencies(gasLimit, gasPrice, {
+    toNumericBase: 'hex',
+    multiplicandBase: 16,
+    multiplierBase: 16,
+  })
+}
+
+SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
+  const {
+    from: { balance },
+    gasTotal,
+    tokenBalance,
+    amount,
+    selectedToken,
+    network,
+  } = this.props
+
+  const {
+    from: { balance: prevBalance },
+    gasTotal: prevGasTotal,
+    tokenBalance: prevTokenBalance,
+    network: prevNetwork,
+  } = prevProps
+
+  const uninitialized = [prevBalance, prevGasTotal].every(n => n === null)
+
+  const balanceHasChanged = balance !== prevBalance
+  const gasTotalHasChange = gasTotal !== prevGasTotal
+  const tokenBalanceHasChanged = selectedToken && tokenBalance !== prevTokenBalance
+  const amountValidationChange = balanceHasChanged || gasTotalHasChange || tokenBalanceHasChanged
+
+  if (!uninitialized) {
+    if (amountValidationChange) {
+      this.validateAmount(amount)
+    }
+
+    if (network !== prevNetwork && network !== 'loading') {
+      this.updateGas()
+    }
+  }
+}
+
+SendTransactionScreen.prototype.renderHeader = function () {
+  const { selectedToken, clearSend, goHome } = this.props
+  const tokenText = selectedToken ? 'tokens' : 'ETH'
+
+  return h('div.page-container__header', [
+
+    h('div.page-container__title', selectedToken ? 'Send Tokens' : 'Send ETH'),
+
+    h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`),
+
+    h('div.page-container__header-close', {
+      onClick: () => {
+        clearSend()
+        goHome()
+      },
+    }),
+
+  ])
+}
+
+SendTransactionScreen.prototype.renderErrorMessage = function (errorType) {
+  const { errors } = this.props
+  const errorMessage = errors[errorType]
+
+  return errorMessage
+    ? h('div.send-v2__error', [ errorMessage ])
+    : null
+}
+
+SendTransactionScreen.prototype.handleFromChange = async function (newFrom) {
+  const {
+    updateSendFrom,
+    tokenContract,
+  } = this.props
+
+  if (tokenContract) {
+    const usersToken = await tokenContract.balanceOf(newFrom.address)
+    this.updateSendTokenBalance(usersToken)
+  }
+  updateSendFrom(newFrom)
+}
+
+SendTransactionScreen.prototype.renderFromRow = function () {
+  const {
+    from,
+    fromAccounts,
+    conversionRate,
+  } = this.props
+
+  const { fromDropdownOpen } = this.state
+
+  return h('div.send-v2__form-row', [
+
+    h('div.send-v2__form-label', 'From:'),
+
+    h('div.send-v2__form-field', [
+      h(FromDropdown, {
+        dropdownOpen: fromDropdownOpen,
+        accounts: fromAccounts,
+        selectedAccount: from,
+        onSelect: newFrom => this.handleFromChange(newFrom),
+        openDropdown: () => this.setState({ fromDropdownOpen: true }),
+        closeDropdown: () => this.setState({ fromDropdownOpen: false }),
+        conversionRate,
+      }),
+    ]),
+
+  ])
+}
+
+SendTransactionScreen.prototype.handleToChange = function (to) {
+  const {
+    updateSendTo,
+    updateSendErrors,
+    from: {address: from},
+  } = this.props
+  let toError = null
+
+  if (!to) {
+    toError = 'Required'
+  } else if (!isValidAddress(to)) {
+    toError = 'Recipient address is invalid'
+  } else if (to === from) {
+    toError = 'From and To address cannot be the same'
+  }
+
+  updateSendTo(to)
+  updateSendErrors({ to: toError })
+}
+
+SendTransactionScreen.prototype.renderToRow = function () {
+  const { toAccounts, errors, to } = this.props
+
+  const { toDropdownOpen } = this.state
+
+  return h('div.send-v2__form-row', [
+
+    h('div.send-v2__form-label', [
+
+      'To:',
+
+      this.renderErrorMessage('to'),
+
+    ]),
+
+    h('div.send-v2__form-field', [
+      h(ToAutoComplete, {
+        to,
+        accounts: Object.entries(toAccounts).map(([key, account]) => account),
+        dropdownOpen: toDropdownOpen,
+        openDropdown: () => this.setState({ toDropdownOpen: true }),
+        closeDropdown: () => this.setState({ toDropdownOpen: false }),
+        onChange: this.handleToChange,
+        inError: Boolean(errors.to),
+      }),
+    ]),
+
+  ])
+}
+
+SendTransactionScreen.prototype.handleAmountChange = function (value) {
+  const amount = value
+  const { updateSendAmount, setMaxModeTo } = this.props
+
+  setMaxModeTo(false)
+  this.validateAmount(amount)
+  updateSendAmount(amount)
+}
+
+SendTransactionScreen.prototype.setAmountToMax = function () {
+  const {
+    from: { balance },
+    updateSendAmount,
+    updateSendErrors,
+    tokenBalance,
+    selectedToken,
+    gasTotal,
+  } = this.props
+  const { decimals } = selectedToken || {}
+  const multiplier = Math.pow(10, Number(decimals || 0))
+
+  const maxAmount = selectedToken
+    ? multiplyCurrencies(tokenBalance, multiplier, {toNumericBase: 'hex'})
+    : subtractCurrencies(
+      ethUtil.addHexPrefix(balance),
+      ethUtil.addHexPrefix(gasTotal),
+      { toNumericBase: 'hex' }
+    )
+
+  updateSendErrors({ amount: null })
+
+  updateSendAmount(maxAmount)
+}
+
+SendTransactionScreen.prototype.validateAmount = function (value) {
+  const {
+    from: { balance },
+    updateSendErrors,
+    amountConversionRate,
+    conversionRate,
+    primaryCurrency,
+    selectedToken,
+    gasTotal,
+    tokenBalance,
+  } = this.props
+  const { decimals } = selectedToken || {}
+  const amount = value
+
+  let amountError = null
+
+  let sufficientBalance = true
+
+  if (gasTotal) {
+    sufficientBalance = isBalanceSufficient({
+      amount: selectedToken ? '0x0' : amount,
+      gasTotal,
+      balance,
+      primaryCurrency,
+      amountConversionRate,
+      conversionRate,
+    })
+  }
+
+  let sufficientTokens
+  if (selectedToken) {
+    sufficientTokens = isTokenBalanceSufficient({
+      tokenBalance,
+      amount,
+      decimals,
+    })
+  }
+
+  const amountLessThanZero = conversionGreaterThan(
+    { value: 0, fromNumericBase: 'dec' },
+    { value: amount, fromNumericBase: 'hex' },
+  )
+
+  if (conversionRate && !sufficientBalance) {
+    amountError = 'Insufficient funds.'
+  } else if (selectedToken && !sufficientTokens) {
+    amountError = 'Insufficient tokens.'
+  } else if (amountLessThanZero) {
+    amountError = 'Can not send negative amounts of ETH.'
+  }
+
+  updateSendErrors({ amount: amountError })
+}
+
+SendTransactionScreen.prototype.renderAmountRow = function () {
+  const {
+    selectedToken,
+    primaryCurrency = 'ETH',
+    convertedCurrency,
+    amountConversionRate,
+    errors,
+    amount,
+    setMaxModeTo,
+    maxModeOn,
+  } = this.props
+
+  return h('div.send-v2__form-row', [
+
+     h('div.send-v2__form-label', [
+      'Amount:',
+      this.renderErrorMessage('amount'),
+      !errors.amount && h('div.send-v2__amount-max', {
+        onClick: (event) => {
+          event.preventDefault()
+          setMaxModeTo(true)
+          this.setAmountToMax()
+        },
+      }, [ !maxModeOn ? 'Max' : '' ]),
+    ]),
+
+    h('div.send-v2__form-field', [
+      h(CurrencyDisplay, {
+        inError: Boolean(errors.amount),
+        primaryCurrency,
+        convertedCurrency,
+        selectedToken,
+        value: amount || '0x0',
+        conversionRate: amountConversionRate,
+        handleChange: this.handleAmountChange,
+      }),
+    ]),
+
+  ])
+}
+
+SendTransactionScreen.prototype.renderGasRow = function () {
+  const {
+    conversionRate,
+    convertedCurrency,
+    showCustomizeGasModal,
+    gasTotal,
+  } = this.props
+
+  return h('div.send-v2__form-row', [
+
+    h('div.send-v2__form-label', 'Gas fee:'),
+
+    h('div.send-v2__form-field', [
+
+      h(GasFeeDisplay, {
+        gasTotal,
+        conversionRate,
+        convertedCurrency,
+        onClick: showCustomizeGasModal,
+      }),
+
+    ]),
+
+  ])
+}
+
+SendTransactionScreen.prototype.renderMemoRow = function () {
+  const { updateSendMemo, memo } = this.props
+
+  return h('div.send-v2__form-row', [
+
+    h('div.send-v2__form-label', 'Transaction Memo:'),
+
+    h('div.send-v2__form-field', [
+      h(MemoTextArea, {
+        memo,
+        onChange: (event) => updateSendMemo(event.target.value),
+      }),
+    ]),
+
+  ])
+}
+
+SendTransactionScreen.prototype.renderForm = function () {
+  return h('div.send-v2__form', {}, [
+
+    this.renderFromRow(),
+
+    this.renderToRow(),
+
+    this.renderAmountRow(),
+
+    this.renderGasRow(),
+
+    // this.renderMemoRow(),
+
+  ])
+}
+
+SendTransactionScreen.prototype.renderFooter = function () {
+  const {
+    goHome,
+    clearSend,
+    gasTotal,
+    errors: { amount: amountError, to: toError },
+  } = this.props
+
+  const noErrors = !amountError && toError === null
+
+  return h('div.page-container__footer', [
+    h('button.btn-cancel.page-container__footer-button', {
+      onClick: () => {
+        clearSend()
+        goHome()
+      },
+    }, 'Cancel'),
+    h('button.btn-clear.page-container__footer-button', {
+      disabled: !noErrors || !gasTotal,
+      onClick: event => this.onSubmit(event),
+    }, 'Next'),
+  ])
+}
+
+SendTransactionScreen.prototype.render = function () {
+  return (
+
+    h('div.page-container', [
+
+      this.renderHeader(),
+
+      this.renderForm(),
+
+      this.renderFooter(),
+    ])
+
+  )
+}
+
+SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress) {
+  const { toAccounts, addToAddressBook } = this.props
+  if (!toAccounts.find(({ address }) => newAddress === address)) {
+    // TODO: nickname, i.e. addToAddressBook(recipient, nickname)
+    addToAddressBook(newAddress)
+  }
+}
+
+SendTransactionScreen.prototype.getEditedTx = function () {
+  const {
+    from: {address: from},
+    to,
+    amount,
+    gasLimit: gas,
+    gasPrice,
+    selectedToken,
+    editingTransactionId,
+    unapprovedTxs,
+  } = this.props
+
+  const editingTx = {
+    ...unapprovedTxs[editingTransactionId],
+    txParams: {
+      from: ethUtil.addHexPrefix(from),
+      gas: ethUtil.addHexPrefix(gas),
+      gasPrice: ethUtil.addHexPrefix(gasPrice),
+    },
+  }
+
+  if (selectedToken) {
+    const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call(
+      ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]),
+      x => ('00' + x.toString(16)).slice(-2)
+    ).join('')
+
+    Object.assign(editingTx.txParams, {
+      value: ethUtil.addHexPrefix('0'),
+      to: ethUtil.addHexPrefix(selectedToken.address),
+      data,
+    })
+  } else {
+    Object.assign(editingTx.txParams, {
+      value: ethUtil.addHexPrefix(amount),
+      to: ethUtil.addHexPrefix(to),
+    })
+  }
+
+  return editingTx
+}
+
+SendTransactionScreen.prototype.onSubmit = function (event) {
+  event.preventDefault()
+  const {
+    from: {address: from},
+    to,
+    amount,
+    gasLimit: gas,
+    gasPrice,
+    signTokenTx,
+    signTx,
+    updateTx,
+    selectedToken,
+    editingTransactionId,
+    errors: { amount: amountError, to: toError },
+  } = this.props
+
+  const noErrors = !amountError && toError === null
+
+  if (!noErrors) {
+    return
+  }
+
+  this.addToAddressBookIfNew(to)
+
+  if (editingTransactionId) {
+    const editedTx = this.getEditedTx()
+
+    updateTx(editedTx)
+  } else {
+
+    const txParams = {
+      from,
+      value: '0',
+      gas,
+      gasPrice,
+    }
+
+    if (!selectedToken) {
+      txParams.value = amount
+      txParams.to = to
+    }
+
+    selectedToken
+      ? signTokenTx(selectedToken.address, to, amount, txParams)
+      : signTx(txParams)
+  }
+}
diff --git a/ui/app/send.js b/ui/app/send.js
index eb32d5e06..517b7690d 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -1,280 +1,547 @@
-const inherits = require('util').inherits
-const PersistentForm = require('../lib/persistent-form')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const Identicon = require('./components/identicon')
-const actions = require('./actions')
-const util = require('./util')
-const numericBalance = require('./util').numericBalance
-const addressSummary = require('./util').addressSummary
-const isHex = require('./util').isHex
-const EthBalance = require('./components/eth-balance')
-const EnsInput = require('./components/ens-input')
-const ethUtil = require('ethereumjs-util')
-module.exports = connect(mapStateToProps)(SendTransactionScreen)
-
-function mapStateToProps (state) {
-  var result = {
-    address: state.metamask.selectedAddress,
-    accounts: state.metamask.accounts,
-    identities: state.metamask.identities,
-    warning: state.appState.warning,
-    network: state.metamask.network,
-    addressBook: state.metamask.addressBook,
-  }
-
-  result.error = result.warning && result.warning.split('.')[0]
-
-  result.account = result.accounts[result.address]
-  result.identity = result.identities[result.address]
-  result.balance = result.account ? numericBalance(result.account.balance) : null
-
-  return result
-}
-
-inherits(SendTransactionScreen, PersistentForm)
-function SendTransactionScreen () {
-  PersistentForm.call(this)
-}
-
-SendTransactionScreen.prototype.render = function () {
-  this.persistentFormParentId = 'send-tx-form'
-
-  var state = this.props
-  var address = state.address
-  var account = state.account
-  var identity = state.identity
-  var network = state.network
-  var identities = state.identities
-  var addressBook = state.addressBook
-
-  return (
-
-    h('.send-screen.flex-column.flex-grow', [
-
-      //
-      // Sender Profile
-      //
-
-      h('.account-data-subsection.flex-row.flex-grow', {
-        style: {
-          margin: '0 20px',
-        },
-      }, [
-
-        // header - identicon + nav
-        h('.flex-row.flex-space-between', {
-          style: {
-            marginTop: '15px',
-          },
-        }, [
-          // back button
-          h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
-            onClick: this.back.bind(this),
-          }),
-
-          // large identicon
-          h('.identicon-wrapper.flex-column.flex-center.select-none', [
-            h(Identicon, {
-              diameter: 62,
-              address: address,
-            }),
-          ]),
-
-          // invisible place holder
-          h('i.fa.fa-users.fa-lg.invisible', {
-            style: {
-              marginTop: '28px',
-            },
-          }),
-
-        ]),
-
-        // account label
-
-        h('.flex-column', {
-          style: {
-            marginTop: '10px',
-            alignItems: 'flex-start',
-          },
-        }, [
-          h('h2.font-medium.color-forest.flex-center', {
-            style: {
-              paddingTop: '8px',
-              marginBottom: '8px',
-            },
-          }, identity && identity.name),
-
-          // address and getter actions
-          h('.flex-row.flex-center', {
-            style: {
-              marginBottom: '8px',
-            },
-          }, [
-
-            h('div', {
-              style: {
-                lineHeight: '16px',
-              },
-            }, addressSummary(address)),
-
-          ]),
-
-          // balance
-          h('.flex-row.flex-center', [
-
-            h(EthBalance, {
-              value: account && account.balance,
-            }),
-
-          ]),
-        ]),
-      ]),
-
-      //
-      // Required Fields
-      //
-
-      h('h3.flex-center.text-transform-uppercase', {
-        style: {
-          background: '#EBEBEB',
-          color: '#AEAEAE',
-          marginTop: '15px',
-          marginBottom: '16px',
-        },
-      }, [
-        'Send Transaction',
-      ]),
-
-      // error message
-      state.error && h('span.error.flex-center', state.error),
-
-      // 'to' field
-      h('section.flex-row.flex-center', [
-        h(EnsInput, {
-          name: 'address',
-          placeholder: 'Recipient Address',
-          onChange: this.recipientDidChange.bind(this),
-          network,
-          identities,
-          addressBook,
-        }),
-      ]),
-
-      // 'amount' and send button
-      h('section.flex-row.flex-center', [
-
-        h('input.large-input', {
-          name: 'amount',
-          placeholder: 'Amount',
-          type: 'number',
-          style: {
-            marginRight: '6px',
-          },
-          dataset: {
-            persistentFormId: 'tx-amount',
-          },
-        }),
-
-        h('button.primary', {
-          onClick: this.onSubmit.bind(this),
-          style: {
-            textTransform: 'uppercase',
-          },
-        }, 'Send'),
-
-      ]),
-
-      //
-      // Optional Fields
-      //
-      h('h3.flex-center.text-transform-uppercase', {
-        style: {
-          background: '#EBEBEB',
-          color: '#AEAEAE',
-          marginTop: '16px',
-          marginBottom: '16px',
-        },
-      }, [
-        'Transaction Data (optional)',
-      ]),
-
-      // 'data' field
-      h('section.flex-column.flex-center', [
-        h('input.large-input', {
-          name: 'txData',
-          placeholder: '0x01234',
-          style: {
-            width: '100%',
-            resize: 'none',
-          },
-          dataset: {
-            persistentFormId: 'tx-data',
-          },
-        }),
-      ]),
-    ])
-  )
-}
-
-SendTransactionScreen.prototype.navigateToAccounts = function (event) {
-  event.stopPropagation()
-  this.props.dispatch(actions.showAccountsPage())
-}
-
-SendTransactionScreen.prototype.back = function () {
-  var address = this.props.address
-  this.props.dispatch(actions.backToAccountDetail(address))
-}
-
-SendTransactionScreen.prototype.recipientDidChange = function (recipient, nickname) {
-  this.setState({
-    recipient: recipient,
-    nickname: nickname,
-  })
-}
-
-SendTransactionScreen.prototype.onSubmit = function () {
-  const state = this.state || {}
-  const recipient = state.recipient || document.querySelector('input[name="address"]').value
-  const nickname = state.nickname || ' '
-  const input = document.querySelector('input[name="amount"]').value
-  const value = util.normalizeEthStringToWei(input)
-  const txData = document.querySelector('input[name="txData"]').value
-  const balance = this.props.balance
-  let message
-
-  if (value.gt(balance)) {
-    message = 'Insufficient funds.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
-
-  if (input < 0) {
-    message = 'Can not send negative amounts of ETH.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
-
-  if ((!util.isValidAddress(recipient) && !txData) || (!recipient && !txData)) {
-    message = 'Recipient address is invalid.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
-
-  if (!isHex(ethUtil.stripHexPrefix(txData)) && txData) {
-    message = 'Transaction data must be hex string.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
-
-  this.props.dispatch(actions.hideWarning())
-
-  this.props.dispatch(actions.addToAddressBook(recipient, nickname))
-
-  var txParams = {
-    from: this.props.address,
-    value: '0x' + value.toString(16),
-  }
-
-  if (recipient) txParams.to = ethUtil.addHexPrefix(recipient)
-  if (txData) txParams.data = txData
-
-  this.props.dispatch(actions.signTx(txParams))
-}
+// const { inherits } = require('util')
+// const PersistentForm = require('../lib/persistent-form')
+// const h = require('react-hyperscript')
+// const connect = require('react-redux').connect
+// const Identicon = require('./components/identicon')
+// const EnsInput = require('./components/ens-input')
+// const GasTooltip = require('./components/send/gas-tooltip')
+// const CurrencyToggle = require('./components/send/currency-toggle')
+// const GasFeeDisplay = require('./components/send/gas-fee-display')
+// const { getSelectedIdentity } = require('./selectors')
+
+// const {
+//   showAccountsPage,
+//   backToAccountDetail,
+//   displayWarning,
+//   hideWarning,
+//   addToAddressBook,
+//   signTx,
+//   estimateGas,
+//   getGasPrice,
+// } = require('./actions')
+// const { stripHexPrefix, addHexPrefix } = require('ethereumjs-util')
+// const { isHex, numericBalance, isValidAddress, allNull } = require('./util')
+// const { conversionUtil, conversionGreaterThan } = require('./conversion-util')
+
+// module.exports = connect(mapStateToProps)(SendTransactionScreen)
+
+// function mapStateToProps (state) {
+//   const {
+//     selectedAddress: address,
+//     accounts,
+//     identities,
+//     network,
+//     addressBook,
+//     conversionRate,
+//     currentBlockGasLimit: blockGasLimit,
+//   } = state.metamask
+//   const { warning } = state.appState
+//   const selectedIdentity = getSelectedIdentity(state)
+//   const account = accounts[address]
+
+//   return {
+//     address,
+//     accounts,
+//     identities,
+//     network,
+//     addressBook,
+//     conversionRate,
+//     blockGasLimit,
+//     warning,
+//     selectedIdentity,
+//     error: warning && warning.split('.')[0],
+//     account,
+//     identity: identities[address],
+//     balance: account ? account.balance : null,
+//   }
+// }
+
+// inherits(SendTransactionScreen, PersistentForm)
+// function SendTransactionScreen () {
+//   PersistentForm.call(this)
+
+//   // [WIP] These are the bare minimum of tx props needed to sign a transaction
+//   // We will need a few more for contract-related interactions
+//   this.state = {
+//     newTx: {
+//       from: '',
+//       to: '',
+//       amountToSend: '0x0',
+//       gasPrice: null,
+//       gas: null,
+//       amount: '0x0',
+//       txData: null,
+//       memo: '',
+//     },
+//     activeCurrency: 'USD',
+//     tooltipIsOpen: false,
+//     errors: {},
+//     isValid: false,
+//   }
+
+//   this.back = this.back.bind(this)
+//   this.closeTooltip = this.closeTooltip.bind(this)
+//   this.onSubmit = this.onSubmit.bind(this)
+//   this.setActiveCurrency = this.setActiveCurrency.bind(this)
+//   this.toggleTooltip = this.toggleTooltip.bind(this)
+//   this.validate = this.validate.bind(this)
+//   this.getAmountToSend = this.getAmountToSend.bind(this)
+//   this.setErrorsFor = this.setErrorsFor.bind(this)
+//   this.clearErrorsFor = this.clearErrorsFor.bind(this)
+
+//   this.renderFromInput = this.renderFromInput.bind(this)
+//   this.renderToInput = this.renderToInput.bind(this)
+//   this.renderAmountInput = this.renderAmountInput.bind(this)
+//   this.renderGasInput = this.renderGasInput.bind(this)
+//   this.renderMemoInput = this.renderMemoInput.bind(this)
+//   this.renderErrorMessage = this.renderErrorMessage.bind(this)
+// }
+
+// SendTransactionScreen.prototype.componentWillMount = function () {
+//   const { newTx } = this.state
+//   const { address } = this.props
+
+//   Promise.all([
+//     this.props.dispatch(getGasPrice()),
+//     this.props.dispatch(estimateGas({
+//       from: address,
+//       gas: '746a528800',
+//     })),
+//   ])
+//   .then(([blockGasPrice, estimatedGas]) => {
+//     console.log({ blockGasPrice, estimatedGas})
+//     this.setState({
+//       newTx: {
+//         ...newTx,
+//         gasPrice: blockGasPrice,
+//         gas: estimatedGas,
+//       },
+//     })
+//   })
+// }
+
+// SendTransactionScreen.prototype.renderErrorMessage = function(errorType, warning) {
+//   const { errors } = this.state
+//   const errorMessage = errors[errorType];
+
+//   return errorMessage || warning
+//     ? h('div.send-screen-input-wrapper__error-message', [ errorMessage || warning ])
+//     : null
+// }
+
+// SendTransactionScreen.prototype.renderFromInput = function (from, identities) {
+//   return h('div.send-screen-input-wrapper', [
+
+//     h('div', 'From:'),
+
+//     h('input.large-input.send-screen-input', {
+//       list: 'accounts',
+//       placeholder: 'Account',
+//       value: from,
+//       onChange: (event) => {
+//         this.setState({
+//           newTx: {
+//             ...this.state.newTx,
+//             from: event.target.value,
+//           },
+//         })
+//       },
+//       onBlur: () => this.setErrorsFor('from'),
+//       onFocus: event => {
+//         this.clearErrorsFor('from')
+//         this.state.newTx.from && event.target.select()
+//       },
+//     }),
+
+//     h('datalist#accounts', [
+//       Object.entries(identities).map(([key, { address, name }]) => {
+//         return h('option', {
+//           value: address,
+//           label: name,
+//           key: address,
+//         })
+//       }),
+//     ]),
+
+//     this.renderErrorMessage('from'),
+
+//   ])
+// }
+
+// SendTransactionScreen.prototype.renderToInput = function (to, identities, addressBook) {
+//   return h('div.send-screen-input-wrapper', [
+
+//     h('div', 'To:'),
+
+//     h('input.large-input.send-screen-input', {
+//       name: 'address',
+//       list: 'addresses',
+//       placeholder: 'Address',
+//       value: to,
+//       onChange: (event) => {
+//         this.setState({
+//           newTx: {
+//             ...this.state.newTx,
+//             to: event.target.value,
+//           },
+//         })
+//       },
+//       onBlur: () => {
+//         this.setErrorsFor('to')
+//       },
+//       onFocus: event => {
+//         this.clearErrorsFor('to')
+//         this.state.newTx.to && event.target.select()
+//       },
+//     }),
+
+//     h('datalist#addresses', [
+//       // Corresponds to the addresses owned.
+//       ...Object.entries(identities).map(([key, { address, name }]) => {
+//         return h('option', {
+//           value: address,
+//           label: name,
+//           key: address,
+//         })
+//       }),
+//       // Corresponds to previously sent-to addresses.
+//       ...addressBook.map(({ address, name }) => {
+//         return h('option', {
+//           value: address,
+//           label: name,
+//           key: address,
+//         })
+//       }),
+//     ]),
+
+//     this.renderErrorMessage('to'),
+
+//   ])
+// }
+
+// SendTransactionScreen.prototype.renderAmountInput = function (activeCurrency) {
+//   return h('div.send-screen-input-wrapper', [
+
+//     h('div.send-screen-amount-labels', [
+//       h('span', 'Amount'),
+//       h(CurrencyToggle, {
+//         activeCurrency,
+//         onClick: (newCurrency) => this.setActiveCurrency(newCurrency),
+//       }), // holding on icon from design
+//     ]),
+
+//     h('input.large-input.send-screen-input', {
+//       placeholder: `0 ${activeCurrency}`,
+//       type: 'number',
+//       onChange: (event) => {
+//         const amountToSend = event.target.value
+//           ? this.getAmountToSend(event.target.value)
+//           : '0x0'
+
+//         this.setState({
+//           newTx: Object.assign(
+//             this.state.newTx,
+//             {
+//               amount: event.target.value,
+//               amountToSend: amountToSend,
+//             }
+//           ),
+//         })
+//       },
+//       onBlur: () => {
+//         this.setErrorsFor('amount')
+//       },
+//       onFocus: () => this.clearErrorsFor('amount'),
+//     }),
+
+//     this.renderErrorMessage('amount'),
+
+//   ])
+// }
+
+// SendTransactionScreen.prototype.renderGasInput = function (gasPrice, gas, activeCurrency, conversionRate, blockGasLimit) {
+//   return h('div.send-screen-input-wrapper', [
+//     this.state.tooltipIsOpen && h(GasTooltip, {
+//       className: 'send-tooltip',
+//       gasPrice,
+//       gasLimit: gas,
+//       onClose: this.closeTooltip,
+//       onFeeChange: ({gasLimit, gasPrice}) => {
+//         this.setState({
+//           newTx: {
+//             ...this.state.newTx,
+//             gas: gasLimit,
+//             gasPrice,
+//           },
+//         })
+//       },
+//     }),
+
+//     h('div.send-screen-gas-labels', [
+//       h('span', [
+//         h('i.fa.fa-bolt'),
+//         'Gas fee:',
+//       ]),
+//       h('span', 'What\'s this?'),
+//     ]),
+
+//     // TODO: handle loading time when switching to USD
+//     h('div.large-input.send-screen-gas-input', {}, [
+//       h(GasFeeDisplay, {
+//         activeCurrency,
+//         conversionRate,
+//         gas,
+//         gasPrice,
+//         blockGasLimit,
+//       }),
+//       h('div.send-screen-gas-input-customize', {
+//         onClick: this.toggleTooltip,
+//       }, [
+//         'Customize',
+//       ]),
+//     ]),
+
+//   ])
+// }
+
+// SendTransactionScreen.prototype.renderMemoInput = function () {
+//   return h('div.send-screen-input-wrapper', [
+//     h('div', 'Transaction memo (optional)'),
+//     h('input.large-input.send-screen-input', {
+//       onChange: () => {
+//         this.setState({
+//           newTx: Object.assign(
+//             this.state.newTx,
+//             {
+//               memo: event.target.value,
+//             }
+//           ),
+//         })
+//       },
+//     }),
+//   ])
+// }
+
+// SendTransactionScreen.prototype.render = function () {
+//   this.persistentFormParentId = 'send-tx-form'
+
+//   const props = this.props
+//   const {
+//     warning,
+//     identities,
+//     addressBook,
+//     conversionRate,
+//   } = props
+
+//   const {
+//     blockGasLimit,
+//     newTx,
+//     activeCurrency,
+//     isValid,
+//   } = this.state
+//   const { gas, gasPrice } = newTx
+
+//   return (
+
+//     h('div.send-screen-wrapper', [
+//       // Main Send token Card
+//       h('div.send-screen-card', [
+
+//         h('img.send-eth-icon', { src: '../images/eth_logo.svg' }),
+
+//         h('div.send-screen__title', 'Send'),
+
+//         h('div.send-screen__subtitle', 'Send Ethereum to anyone with an Ethereum account'),
+
+//         this.renderFromInput(this.state.newTx.from, identities),
+
+//         this.renderToInput(this.state.newTx.to, identities, addressBook),
+
+//         this.renderAmountInput(activeCurrency),
+
+//         this.renderGasInput(
+//           gasPrice || '0x0',
+//           gas || '0x0',
+//           activeCurrency,
+//           conversionRate,
+//           blockGasLimit
+//         ),
+
+//         this.renderMemoInput(),
+
+//         this.renderErrorMessage(null, warning),
+
+//       ]),
+
+//       // Buttons underneath card
+//       h('section.flex-column.flex-center', [
+//         h('button.btn-secondary.send-screen__send-button', {
+//           className: !isValid && 'send-screen__send-button__disabled',
+//           onClick: (event) => isValid && this.onSubmit(event),
+//         }, 'Next'),
+//         h('button.btn-tertiary.send-screen__cancel-button', {
+//           onClick: this.back,
+//         }, 'Cancel'),
+//       ]),
+//     ])
+
+//   )
+// }
+
+// SendTransactionScreen.prototype.toggleTooltip = function () {
+//   this.setState({ tooltipIsOpen: !this.state.tooltipIsOpen })
+// }
+
+// SendTransactionScreen.prototype.closeTooltip = function () {
+//   this.setState({ tooltipIsOpen: false })
+// }
+
+// SendTransactionScreen.prototype.setActiveCurrency = function (newCurrency) {
+//   this.setState({ activeCurrency: newCurrency })
+// }
+
+// SendTransactionScreen.prototype.back = function () {
+//   var address = this.props.address
+//   this.props.dispatch(backToAccountDetail(address))
+// }
+
+// SendTransactionScreen.prototype.validate = function (balance, amountToSend, { to, from }) {
+//   const sufficientBalance = conversionGreaterThan(
+//     {
+//       value: balance,
+//       fromNumericBase: 'hex',
+//     },
+//     {
+//       value: amountToSend,
+//       fromNumericBase: 'hex',
+//     },
+//   )
+
+//   const amountLessThanZero = conversionGreaterThan(
+//     {
+//       value: 0,
+//       fromNumericBase: 'dec',
+//     },
+//     {
+//       value: amountToSend,
+//       fromNumericBase: 'hex',
+//     },
+//   )
+
+//   const errors = {}
+
+//   if (!sufficientBalance) {
+//     errors.amount = 'Insufficient funds.'
+//   }
+
+//   if (amountLessThanZero) {
+//     errors.amount = 'Can not send negative amounts of ETH.'
+//   }
+
+//   if (!from) {
+//     errors.from = 'Required'
+//   }
+
+//   if (from && !isValidAddress(from)) {
+//     errors.from = 'Sender address is invalid.'
+//   }
+
+//   if (!to) {
+//     errors.to = 'Required'
+//   }
+
+//   if (to && !isValidAddress(to)) {
+//     errors.to = 'Recipient address is invalid.'
+//   }
+
+//   // if (txData && !isHex(stripHexPrefix(txData))) {
+//   //   message = 'Transaction data must be hex string.'
+//   //   return this.props.dispatch(displayWarning(message))
+//   // }
+
+//   return {
+//     isValid: allNull(errors),
+//     errors,
+//   }
+// }
+
+// SendTransactionScreen.prototype.getAmountToSend = function (amount) {
+//   const { activeCurrency } = this.state
+//   const { conversionRate } = this.props
+
+//   return conversionUtil(amount, {
+//     fromNumericBase: 'dec',
+//     toNumericBase: 'hex',
+//     fromCurrency: activeCurrency,
+//     toCurrency: 'ETH',
+//     toDenomination: 'WEI',
+//     conversionRate,
+//     invertConversionRate: activeCurrency !== 'ETH',
+//   })
+// }
+
+// SendTransactionScreen.prototype.setErrorsFor = function (field) {
+//   const { balance } = this.props
+//   const { newTx, errors: previousErrors } = this.state
+//   const { amountToSend } = newTx
+
+//   const {
+//     isValid,
+//     errors: newErrors
+//   } = this.validate(balance, amountToSend, newTx)
+
+//   const nextErrors = Object.assign({}, previousErrors, {
+//     [field]: newErrors[field] || null
+//   })
+
+//   if (!isValid) {
+//     this.setState({
+//       errors: nextErrors,
+//       isValid,
+//     })
+//   }
+// }
+
+// SendTransactionScreen.prototype.clearErrorsFor = function (field) {
+//   const { errors: previousErrors } = this.state
+//   const nextErrors = Object.assign({}, previousErrors, {
+//     [field]: null
+//   })
+
+//   this.setState({
+//     errors: nextErrors,
+//     isValid: allNull(nextErrors),
+//   })
+// }
+
+// SendTransactionScreen.prototype.onSubmit = function (event) {
+//   event.preventDefault()
+//   const { warning, balance } = this.props
+//   const state = this.state || {}
+
+//   const recipient = state.newTx.to
+//   const sender = state.newTx.from
+//   const nickname = state.nickname || ' '
+
+//   // TODO: convert this to hex when created and include it in send
+//   const txData = state.newTx.memo
+
+//   this.props.dispatch(hideWarning())
+
+//   this.props.dispatch(addToAddressBook(recipient, nickname))
+
+//   var txParams = {
+//     from: this.state.newTx.from,
+//     to: this.state.newTx.to,
+
+//     value: this.state.newTx.amountToSend,
+
+//     gas: this.state.newTx.gas,
+//     gasPrice: this.state.newTx.gasPrice,
+//   }
+
+//   if (recipient) txParams.to = addHexPrefix(recipient)
+//   if (txData) txParams.data = txData
+
+//   this.props.dispatch(signTx(txParams))
+// }
diff --git a/ui/app/settings.js b/ui/app/settings.js
index 454cc95e0..466f739d5 100644
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@@ -1,59 +1,447 @@
-const inherits = require('util').inherits
-const Component = require('react').Component
+const { Component } = require('react')
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
+const { connect } = require('react-redux')
 const actions = require('./actions')
+const infuraCurrencies = require('./infura-conversion.json')
+const validUrl = require('valid-url')
+const { exportAsFile } = require('./util')
+const TabBar = require('./components/tab-bar')
+const SimpleDropdown = require('./components/dropdowns/simple-dropdown')
+const ToggleButton = require('react-toggle-button')
+const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
 
-module.exports = connect(mapStateToProps)(AppSettingsPage)
+const getInfuraCurrencyOptions = () => {
+  const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
+    return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
+  })
 
-function mapStateToProps (state) {
-  return {}
+  return sortedCurrencies.map(({ quote: { code, name } }) => {
+    return {
+      displayValue: `${code.toUpperCase()} - ${name}`,
+      key: code,
+      value: code,
+    }
+  })
 }
 
-inherits(AppSettingsPage, Component)
-function AppSettingsPage () {
-  Component.call(this)
-}
+class Settings extends Component {
+  constructor (props) {
+    super(props)
 
-AppSettingsPage.prototype.render = function () {
-  return (
+    const { tab } = props
+    const activeTab = tab === 'info' ? 'info' : 'settings'
 
-    h('.account-detail-section.flex-column.flex-grow', [
+    this.state = {
+      activeTab,
+      newRpc: '',
+    }
+  }
 
-      // subtitle and nav
-      h('.flex-row.flex-center', [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          onClick: this.navigateToAccounts.bind(this),
-        }),
-        h('h2.page-subtitle', 'Settings'),
-      ]),
+  renderTabs () {
+    const { activeTab } = this.state
 
-      h('label', {
-        htmlFor: 'settings-rpc-endpoint',
-      }, 'RPC Endpoint:'),
-      h('input', {
-        type: 'url',
-        id: 'settings-rpc-endpoint',
-        onKeyPress: this.onKeyPress.bind(this),
+    return h('div.settings__tabs', [
+      h(TabBar, {
+        tabs: [
+          { content: 'Settings', key: 'settings' },
+          { content: 'Info', key: 'info' },
+        ],
+        defaultTab: activeTab,
+        tabSelected: key => this.setState({ activeTab: key }),
       }),
+    ])
+  }
+
+  renderBlockieOptIn () {
+    const { metamask: { useBlockie }, setUseBlockie } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', 'Use Blockies Identicon'),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(ToggleButton, {
+            value: useBlockie,
+            onToggle: (value) => setUseBlockie(!value),
+            activeLabel: '',
+            inactiveLabel: '',
+          }),
+        ]),
+      ]),
+    ])
+  }
+
+  renderCurrentConversion () {
+    const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', 'Current Conversion'),
+        h('span.settings__content-description', `Updated ${Date(conversionDate)}`),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(SimpleDropdown, {
+            placeholder: 'Select Currency',
+            options: getInfuraCurrencyOptions(),
+            selectedOption: currentCurrency,
+            onSelect: newCurrency => setCurrentCurrency(newCurrency),
+          }),
+        ]),
+      ]),
+    ])
+  }
+
+  renderCurrentProvider () {
+    const { metamask: { provider = {} } } = this.props
+    let title, value, color
+
+    switch (provider.type) {
+
+      case 'mainnet':
+        title = 'Current Network'
+        value = 'Main Ethereum Network'
+        color = '#038789'
+        break
+
+      case 'ropsten':
+        title = 'Current Network'
+        value = 'Ropsten Test Network'
+        color = '#e91550'
+        break
+
+      case 'kovan':
+        title = 'Current Network'
+        value = 'Kovan Test Network'
+        color = '#690496'
+        break
+
+      case 'rinkeby':
+        title = 'Current Network'
+        value = 'Rinkeby Test Network'
+        color = '#ebb33f'
+        break
+
+      default:
+        title = 'Current RPC'
+        value = provider.rpcTarget
+    }
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', title),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h('div.settings__provider-wrapper', [
+            h('div.settings__provider-icon', { style: { background: color } }),
+            h('div', value),
+          ]),
+        ]),
+      ]),
+    ])
+  }
+
+  renderNewRpcUrl () {
+    return (
+      h('div.settings__content-row', [
+        h('div.settings__content-item', [
+          h('span', 'New RPC URL'),
+        ]),
+        h('div.settings__content-item', [
+          h('div.settings__content-item-col', [
+            h('input.settings__input', {
+              placeholder: 'New RPC URL',
+              onChange: event => this.setState({ newRpc: event.target.value }),
+              onKeyPress: event => {
+                if (event.key === 'Enter') {
+                  this.validateRpc(this.state.newRpc)
+                }
+              },
+            }),
+            h('div.settings__rpc-save-button', {
+              onClick: event => {
+                event.preventDefault()
+                this.validateRpc(this.state.newRpc)
+              },
+            }, 'Save'),
+          ]),
+        ]),
+      ])
+    )
+  }
 
+  validateRpc (newRpc) {
+    const { setRpcTarget, displayWarning } = this.props
+
+    if (validUrl.isWebUri(newRpc)) {
+      setRpcTarget(newRpc)
+    } else {
+      const appendedRpc = `http://${newRpc}`
+
+      if (validUrl.isWebUri(appendedRpc)) {
+        displayWarning('URIs require the appropriate HTTP/HTTPS prefix.')
+      } else {
+        displayWarning('Invalid RPC URI')
+      }
+    }
+  }
+
+  renderStateLogs () {
+    return (
+      h('div.settings__content-row', [
+        h('div.settings__content-item', [
+          h('div', 'State Logs'),
+          h(
+            'div.settings__content-description',
+            'State logs contain your public account addresses and sent transactions.'
+          ),
+        ]),
+        h('div.settings__content-item', [
+          h('div.settings__content-item-col', [
+            h('button.settings__clear-button', {
+              onClick (event) {
+                window.logStateString((err, result) => {
+                  if (err) {
+                    this.state.dispatch(actions.displayWarning('Error in retrieving state logs.'))
+                  } else {
+                    exportAsFile('MetaMask State Logs.json', result)
+                  }
+                })
+              },
+            }, 'Download State Logs'),
+          ]),
+        ]),
+      ])
+    )
+  }
+
+  renderSeedWords () {
+    const { revealSeedConfirmation } = this.props
+
+    return (
+      h('div.settings__content-row', [
+        h('div.settings__content-item', 'Reveal Seed Words'),
+        h('div.settings__content-item', [
+          h('div.settings__content-item-col', [
+            h('button.settings__clear-button.settings__clear-button--red', {
+              onClick (event) {
+                event.preventDefault()
+                revealSeedConfirmation()
+              },
+            }, 'Reveal Seed Words'),
+          ]),
+        ]),
+      ])
+    )
+  }
+
+  renderOldUI () {
+    const { setFeatureFlagToBeta } = this.props
+
+    return (
+      h('div.settings__content-row', [
+        h('div.settings__content-item', 'Use old UI'),
+        h('div.settings__content-item', [
+          h('div.settings__content-item-col', [
+            h('button.settings__clear-button.settings__clear-button--orange', {
+              onClick (event) {
+                event.preventDefault()
+                setFeatureFlagToBeta()
+              },
+            }, 'Use old UI'),
+          ]),
+        ]),
+      ])
+    )
+  }
+
+  renderResetAccount () {
+    const { showResetAccountConfirmationModal } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', 'Reset Account'),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h('button.settings__clear-button.settings__clear-button--orange', {
+            onClick (event) {
+              event.preventDefault()
+              showResetAccountConfirmationModal()
+            },
+          }, 'Reset Account'),
+        ]),
+      ]),
     ])
+  }
 
-  )
+  renderSettingsContent () {
+    const { warning, isMascara } = this.props
+
+    return (
+      h('div.settings__content', [
+        warning && h('div.settings__error', warning),
+        this.renderCurrentConversion(),
+        // this.renderCurrentProvider(),
+        this.renderNewRpcUrl(),
+        this.renderStateLogs(),
+        this.renderSeedWords(),
+        !isMascara && this.renderOldUI(),
+        this.renderResetAccount(),
+        this.renderBlockieOptIn(),
+      ])
+    )
+  }
+
+  renderLogo () {
+    return (
+      h('div.settings__info-logo-wrapper', [
+        h('img.settings__info-logo', { src: 'images/info-logo.png' }),
+      ])
+    )
+  }
+
+  renderInfoLinks () {
+    return (
+      h('div.settings__content-item.settings__content-item--without-height', [
+        h('div.settings__info-link-header', 'Links'),
+        h('div.settings__info-link-item', [
+          h('a', {
+            href: 'https://metamask.io/privacy.html',
+            target: '_blank',
+          }, [
+            h('span.settings__info-link', 'Privacy Policy'),
+          ]),
+        ]),
+        h('div.settings__info-link-item', [
+          h('a', {
+            href: 'https://metamask.io/terms.html',
+            target: '_blank',
+          }, [
+            h('span.settings__info-link', 'Terms of Use'),
+          ]),
+        ]),
+        h('div.settings__info-link-item', [
+          h('a', {
+            href: 'https://metamask.io/attributions.html',
+            target: '_blank',
+          }, [
+            h('span.settings__info-link', 'Attributions'),
+          ]),
+        ]),
+        h('hr.settings__info-separator'),
+        h('div.settings__info-link-item', [
+          h('a', {
+            href: 'https://support.metamask.io',
+            target: '_blank',
+          }, [
+            h('span.settings__info-link', 'Visit our Support Center'),
+          ]),
+        ]),
+        h('div.settings__info-link-item', [
+          h('a', {
+            href: 'https://metamask.io/',
+            target: '_blank',
+          }, [
+            h('span.settings__info-link', 'Visit our web site'),
+          ]),
+        ]),
+        h('div.settings__info-link-item', [
+          h('a', {
+            target: '_blank',
+            href: 'mailto:help@metamask.io?subject=Feedback',
+          }, [
+            h('span.settings__info-link', 'Email us!'),
+          ]),
+        ]),
+      ])
+    )
+  }
+
+  renderInfoContent () {
+    const version = global.platform.getVersion()
+
+    return (
+      h('div.settings__content', [
+        h('div.settings__content-row', [
+          h('div.settings__content-item.settings__content-item--without-height', [
+            this.renderLogo(),
+            h('div.settings__info-item', [
+              h('div.settings__info-version-header', 'MetaMask Version'),
+              h('div.settings__info-version-number', `${version}`),
+            ]),
+            h('div.settings__info-item', [
+              h(
+                'div.settings__info-about',
+                'MetaMask is designed and built in California.'
+              ),
+            ]),
+          ]),
+          this.renderInfoLinks(),
+        ]),
+      ])
+    )
+  }
+
+  render () {
+    const { goHome } = this.props
+    const { activeTab } = this.state
+
+    return (
+      h('.main-container.settings', {}, [
+        h('.settings__header', [
+          h('div.settings__close-button', {
+            onClick: goHome,
+          }),
+          this.renderTabs(),
+        ]),
+
+        activeTab === 'settings'
+          ? this.renderSettingsContent()
+          : this.renderInfoContent(),
+      ])
+    )
+  }
 }
 
-AppSettingsPage.prototype.componentDidMount = function () {
-  document.querySelector('input').focus()
+Settings.propTypes = {
+  tab: PropTypes.string,
+  metamask: PropTypes.object,
+  setUseBlockie: PropTypes.func,
+  setCurrentCurrency: PropTypes.func,
+  setRpcTarget: PropTypes.func,
+  displayWarning: PropTypes.func,
+  revealSeedConfirmation: PropTypes.func,
+  setFeatureFlagToBeta: PropTypes.func,
+  showResetAccountConfirmationModal: PropTypes.func,
+  warning: PropTypes.string,
+  goHome: PropTypes.func,
+  isMascara: PropTypes.bool,
 }
 
-AppSettingsPage.prototype.onKeyPress = function (event) {
-  // get submit event
-  if (event.key === 'Enter') {
-    // this.submitPassword(event)
+const mapStateToProps = state => {
+  return {
+    metamask: state.metamask,
+    warning: state.appState.warning,
+    isMascara: state.metamask.isMascara,
   }
 }
 
-AppSettingsPage.prototype.navigateToAccounts = function (event) {
-  event.stopPropagation()
-  this.props.dispatch(actions.showAccountsPage())
+const mapDispatchToProps = dispatch => {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+    setCurrentCurrency: currency => dispatch(actions.setCurrentCurrency(currency)),
+    setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)),
+    displayWarning: warning => dispatch(actions.displayWarning(warning)),
+    revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
+    setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
+    setFeatureFlagToBeta: () => {
+      return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+        .then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
+    },
+    showResetAccountConfirmationModal: () => {
+      return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' }))
+    },
+  }
 }
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings)
diff --git a/ui/app/store.js b/ui/app/store.js
index ba9e58b49..3bafdee11 100644
--- a/ui/app/store.js
+++ b/ui/app/store.js
@@ -1,8 +1,8 @@
 const createStore = require('redux').createStore
 const applyMiddleware = require('redux').applyMiddleware
-const thunkMiddleware = require('redux-thunk')
+const thunkMiddleware = require('redux-thunk').default
 const rootReducer = require('./reducers')
-const createLogger = require('redux-logger')
+const createLogger = require('redux-logger').createLogger
 
 global.METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
 
diff --git a/ui/app/token-tracker.js b/ui/app/token-tracker.js
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/ui/app/token-tracker.js
diff --git a/ui/app/token-util.js b/ui/app/token-util.js
new file mode 100644
index 000000000..f84051ef5
--- /dev/null
+++ b/ui/app/token-util.js
@@ -0,0 +1,45 @@
+const abi = require('human-standard-token-abi')
+const Eth = require('ethjs-query')
+const EthContract = require('ethjs-contract')
+
+const tokenInfoGetter = function () {
+  if (typeof global.ethereumProvider === 'undefined') return
+
+  const eth = new Eth(global.ethereumProvider)
+  const contract = new EthContract(eth)
+  const TokenContract = contract(abi)
+
+  const tokens = {}
+
+  return async (address) => {
+    if (tokens[address]) {
+      return tokens[address]
+    }
+
+    const contract = TokenContract.at(address)
+
+    const result = await Promise.all([
+      contract.symbol(),
+      contract.decimals(),
+    ])
+
+    const [ symbol = [], decimals = [] ] = result
+
+    tokens[address] = { symbol: symbol[0], decimals: decimals[0] }
+
+    return tokens[address]
+  }
+}
+
+function calcTokenAmount (value, decimals) {
+  const multiplier = Math.pow(10, Number(decimals || 0))
+  const amount = Number(value / multiplier)
+
+  return amount
+}
+
+
+module.exports = {
+  tokenInfoGetter,
+  calcTokenAmount,
+}
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index 1aee3c5d0..13c3f1274 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -5,6 +5,8 @@ const connect = require('react-redux').connect
 const actions = require('./actions')
 const getCaretCoordinates = require('textarea-caret')
 const EventEmitter = require('events').EventEmitter
+const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
+const environmentType = require('../../app/scripts/lib/environment-type')
 
 const Mascot = require('./components/mascot')
 
@@ -26,7 +28,11 @@ UnlockScreen.prototype.render = function () {
   const state = this.props
   const warning = state.warning
   return (
-    h('.flex-column', [
+    h('.flex-column', {
+      style: {
+        width: 'inherit',
+      },
+    }, [
       h('.unlock-screen.flex-column.flex-center.flex-grow', [
 
         h(Mascot, {
@@ -46,7 +52,7 @@ UnlockScreen.prototype.render = function () {
           id: 'password-box',
           placeholder: 'enter password',
           style: {
-
+            background: 'white',
           },
           onKeyPress: this.onKeyPress.bind(this),
           onInput: this.inputChanged.bind(this),
@@ -70,14 +76,35 @@ UnlockScreen.prototype.render = function () {
 
       h('.flex-row.flex-center.flex-grow', [
         h('p.pointer', {
-          onClick: () => this.props.dispatch(actions.forgotPassword()),
+          onClick: () => {
+            this.props.dispatch(actions.markPasswordForgotten())
+            if (environmentType() === 'popup') {
+              global.platform.openExtensionInBrowser()
+            }
+          },
           style: {
             fontSize: '0.8em',
             color: 'rgb(247, 134, 28)',
             textDecoration: 'underline',
           },
-        }, 'I forgot my password.'),
+        }, 'Restore from seed phrase'),
+      ]),
+
+      h('.flex-row.flex-center.flex-grow', [
+        h('p.pointer', {
+          onClick: () => {
+            this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+              .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
+          },
+          style: {
+            fontSize: '0.8em',
+            color: '#aeaeae',
+            textDecoration: 'underline',
+            marginTop: '32px',
+          },
+        }, 'Use classic interface'),
       ]),
+      
     ])
   )
 }
diff --git a/ui/app/util.js b/ui/app/util.js
index 7a56bf6a0..800ccb218 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -1,4 +1,16 @@
+const abi = require('human-standard-token-abi')
 const ethUtil = require('ethereumjs-util')
+const hexToBn = require('../../app/scripts/lib/hex-to-bn')
+const vreme = new (require('vreme'))()
+
+const MIN_GAS_PRICE_GWEI_BN = new ethUtil.BN(1)
+const GWEI_FACTOR = new ethUtil.BN(1e9)
+const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR)
+
+// formatData :: ( date: <Unix Timestamp> ) -> String
+function formatDate (date) {
+  return vreme.format(new Date(date), 'March 16 2014 14:30')
+}
 
 var valueTable = {
   wei: '1000000000000000000',
@@ -36,6 +48,15 @@ module.exports = {
   valueTable: valueTable,
   bnTable: bnTable,
   isHex: isHex,
+  formatDate,
+  bnMultiplyByFraction,
+  getTxFeeBn,
+  shortenBalance,
+  getContractAtAddress,
+  exportAsFile: exportAsFile,
+  isInvalidChecksumAddress,
+  allNull,
+  getTokenAddressFromTokenObject,
 }
 
 function valuesFor (obj) {
@@ -61,9 +82,16 @@ function miniAddressSummary (address) {
 
 function isValidAddress (address) {
   var prefixed = ethUtil.addHexPrefix(address)
+  if (address === '0x0000000000000000000000000000000000000000') return false
   return (isAllOneCase(prefixed) && ethUtil.isValidAddress(prefixed)) || ethUtil.isValidChecksumAddress(prefixed)
 }
 
+function isInvalidChecksumAddress (address) {
+  var prefixed = ethUtil.addHexPrefix(address)
+  if (address === '0x0000000000000000000000000000000000000000') return false
+  return !isAllOneCase(prefixed) && !ethUtil.isValidChecksumAddress(prefixed) && ethUtil.isValidAddress(prefixed)
+}
+
 function isAllOneCase (address) {
   if (!address) return true
   var lower = address.toLowerCase()
@@ -184,6 +212,9 @@ function normalizeEthStringToWei (str) {
     while (decimal.length < 18) {
       decimal += '0'
     }
+    if (decimal.length > 18) {
+      decimal = decimal.slice(0, 18)
+    }
     const decimalBN = new ethUtil.BN(decimal, 10)
     eth = eth.add(decimalBN)
   }
@@ -214,3 +245,44 @@ function readableDate (ms) {
 function isHex (str) {
   return Boolean(str.match(/^(0x)?[0-9a-fA-F]+$/))
 }
+
+function bnMultiplyByFraction (targetBN, numerator, denominator) {
+  const numBN = new ethUtil.BN(numerator)
+  const denomBN = new ethUtil.BN(denominator)
+  return targetBN.mul(numBN).div(denomBN)
+}
+
+function getTxFeeBn (gas, gasPrice = MIN_GAS_PRICE_BN.toString(16), blockGasLimit) {
+  const gasBn = hexToBn(gas)
+  const gasPriceBn = hexToBn(gasPrice)
+  const txFeeBn = gasBn.mul(gasPriceBn)
+
+  return txFeeBn.toString(16)
+}
+
+function getContractAtAddress (tokenAddress) {
+  return global.eth.contract(abi).at(tokenAddress)
+}
+
+function exportAsFile (filename, data) {
+  // source: https://stackoverflow.com/a/33542499 by Ludovic Feltz
+  const blob = new Blob([data], {type: 'text/csv'})
+  if (window.navigator.msSaveOrOpenBlob) {
+    window.navigator.msSaveBlob(blob, filename)
+  } else {
+    const elem = window.document.createElement('a')
+    elem.href = window.URL.createObjectURL(blob)
+    elem.download = filename
+    document.body.appendChild(elem)
+    elem.click()
+    document.body.removeChild(elem)
+  }
+}
+
+function allNull (obj) {
+  return Object.entries(obj).every(([key, value]) => value === null)
+}
+
+function getTokenAddressFromTokenObject (token) {
+  return Object.values(token)[0].address.toLowerCase()
+}
diff --git a/ui/css.js b/ui/css.js
index 043363cd7..0d0f60806 100644
--- a/ui/css.js
+++ b/ui/css.js
@@ -4,11 +4,8 @@ const path = require('path')
 module.exports = bundleCss
 
 var cssFiles = {
-  'fonts.css': fs.readFileSync(path.join(__dirname, '/app/css/fonts.css'), 'utf8'),
-  'reset.css': fs.readFileSync(path.join(__dirname, '/app/css/reset.css'), 'utf8'),
-  'lib.css': fs.readFileSync(path.join(__dirname, '/app/css/lib.css'), 'utf8'),
-  'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'),
-  'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'),
+  'index.css': fs.readFileSync(path.join(__dirname, '/app/css/output/index.css'), 'utf8'),
+  'first-time.css': fs.readFileSync(path.join(__dirname, '../mascara/src/app/first-time/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'),
 }
diff --git a/ui/index.js b/ui/index.js
index a729138d3..fdb2f23e0 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -4,11 +4,12 @@ const Root = require('./app/root')
 const actions = require('./app/actions')
 const configureStore = require('./app/store')
 const txHelper = require('./lib/tx-helper')
+const { OLD_UI_NETWORK_TYPE, BETA_UI_NETWORK_TYPE } = require('../app/scripts/config').enums
+
 global.log = require('loglevel')
 
 module.exports = launchMetamaskUi
 
-
 log.setLevel(global.METAMASK_DEBUG ? 'debug' : 'warn')
 
 function launchMetamaskUi (opts, cb) {
@@ -24,6 +25,7 @@ function launchMetamaskUi (opts, cb) {
 
 function startApp (metamaskState, accountManager, opts) {
   // parse opts
+  if (!metamaskState.featureFlags) metamaskState.featureFlags = {}
   const store = configureStore({
 
     // metamaskState represents the cross-tab state
@@ -36,10 +38,17 @@ function startApp (metamaskState, accountManager, opts) {
     networkVersion: opts.networkVersion,
   })
 
+  const useBetaUi = metamaskState.featureFlags.betaUI
+  const networkEndpointType = useBetaUi ? BETA_UI_NETWORK_TYPE : OLD_UI_NETWORK_TYPE
+  store.dispatch(actions.setNetworkEndpoints(networkEndpointType))
+
   // if unconfirmed txs, start on txConf page
-  const unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.unapprovedPersonalMsgs, metamaskState.network)
-  if (unapprovedTxsAll.length > 0) {
-    store.dispatch(actions.showConfTxPage())
+  const unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.unapprovedPersonalMsgs, metamaskState.unapprovedTypedMessages, metamaskState.network)
+  const numberOfUnapprivedTx = unapprovedTxsAll.length
+  if (numberOfUnapprivedTx > 0) {
+    store.dispatch(actions.showConfTxPage({
+      id: unapprovedTxsAll[numberOfUnapprivedTx - 1].id,
+    }))
   }
 
   accountManager.on('update', function (metamaskState) {
diff --git a/ui/lib/account-link.js b/ui/lib/account-link.js
index 4f27b35c0..037d990fa 100644
--- a/ui/lib/account-link.js
+++ b/ui/lib/account-link.js
@@ -3,16 +3,19 @@ module.exports = function (address, network) {
   let link
   switch (net) {
     case 1: // main net
-      link = `http://etherscan.io/address/${address}`
+      link = `https://etherscan.io/address/${address}`
       break
     case 2: // morden test net
-      link = `http://morden.etherscan.io/address/${address}`
+      link = `https://morden.etherscan.io/address/${address}`
       break
     case 3: // ropsten test net
-      link = `http://ropsten.etherscan.io/address/${address}`
+      link = `https://ropsten.etherscan.io/address/${address}`
+      break
+    case 4: // rinkeby test net
+      link = `https://rinkeby.etherscan.io/address/${address}`
       break
     case 42: // kovan test net
-      link = `http://kovan.etherscan.io/address/${address}`
+      link = `https://kovan.etherscan.io/address/${address}`
       break
     default:
       link = ''
diff --git a/ui/lib/blockies.js b/ui/lib/blockies.js
new file mode 100644
index 000000000..ee5a2a5ca
--- /dev/null
+++ b/ui/lib/blockies.js
@@ -0,0 +1,364 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+      (factory((global.blockies = {})));
+}(this, (function (exports) { 'use strict';
+
+  /**
+   * A handy class to calculate color values.
+   *
+   * @version 1.0
+   * @author Robert Eisele <robert@xarg.org>
+   * @copyright Copyright (c) 2010, Robert Eisele
+   * @link http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/
+   * @license http://www.opensource.org/licenses/bsd-license.php BSD License
+   *
+   */
+
+
+// helper functions for that ctx
+  function write(buffer, offs) {
+    for (var i = 2; i < arguments.length; i++) {
+      for (var j = 0; j < arguments[i].length; j++) {
+        buffer[offs++] = arguments[i].charAt(j);
+      }
+    }
+  }
+
+  function byte2(w) {
+    return String.fromCharCode((w >> 8) & 255, w & 255);
+  }
+
+  function byte4(w) {
+    return String.fromCharCode((w >> 24) & 255, (w >> 16) & 255, (w >> 8) & 255, w & 255);
+  }
+
+  function byte2lsb(w) {
+    return String.fromCharCode(w & 255, (w >> 8) & 255);
+  }
+
+  var PNG = function(width,height,depth) {
+
+    this.width   = width;
+    this.height  = height;
+    this.depth   = depth;
+
+    // pixel data and row filter identifier size
+    this.pix_size = height * (width + 1);
+
+    // deflate header, pix_size, block headers, adler32 checksum
+    this.data_size = 2 + this.pix_size + 5 * Math.floor((0xfffe + this.pix_size) / 0xffff) + 4;
+
+    // offsets and sizes of Png chunks
+    this.ihdr_offs = 0;									// IHDR offset and size
+    this.ihdr_size = 4 + 4 + 13 + 4;
+    this.plte_offs = this.ihdr_offs + this.ihdr_size;	// PLTE offset and size
+    this.plte_size = 4 + 4 + 3 * depth + 4;
+    this.trns_offs = this.plte_offs + this.plte_size;	// tRNS offset and size
+    this.trns_size = 4 + 4 + depth + 4;
+    this.idat_offs = this.trns_offs + this.trns_size;	// IDAT offset and size
+    this.idat_size = 4 + 4 + this.data_size + 4;
+    this.iend_offs = this.idat_offs + this.idat_size;	// IEND offset and size
+    this.iend_size = 4 + 4 + 4;
+    this.buffer_size  = this.iend_offs + this.iend_size;	// total PNG size
+
+    this.buffer  = new Array();
+    this.palette = new Object();
+    this.pindex  = 0;
+
+    var _crc32 = new Array();
+
+    // initialize buffer with zero bytes
+    for (var i = 0; i < this.buffer_size; i++) {
+      this.buffer[i] = "\x00";
+    }
+
+    // initialize non-zero elements
+    write(this.buffer, this.ihdr_offs, byte4(this.ihdr_size - 12), 'IHDR', byte4(width), byte4(height), "\x08\x03");
+    write(this.buffer, this.plte_offs, byte4(this.plte_size - 12), 'PLTE');
+    write(this.buffer, this.trns_offs, byte4(this.trns_size - 12), 'tRNS');
+    write(this.buffer, this.idat_offs, byte4(this.idat_size - 12), 'IDAT');
+    write(this.buffer, this.iend_offs, byte4(this.iend_size - 12), 'IEND');
+
+    // initialize deflate header
+    var header = ((8 + (7 << 4)) << 8) | (3 << 6);
+    header+= 31 - (header % 31);
+
+    write(this.buffer, this.idat_offs + 8, byte2(header));
+
+    // initialize deflate block headers
+    for (var i = 0; (i << 16) - 1 < this.pix_size; i++) {
+      var size, bits;
+      if (i + 0xffff < this.pix_size) {
+        size = 0xffff;
+        bits = "\x00";
+      } else {
+        size = this.pix_size - (i << 16) - i;
+        bits = "\x01";
+      }
+      write(this.buffer, this.idat_offs + 8 + 2 + (i << 16) + (i << 2), bits, byte2lsb(size), byte2lsb(~size));
+    }
+
+    /* Create crc32 lookup table */
+    for (var i = 0; i < 256; i++) {
+      var c = i;
+      for (var j = 0; j < 8; j++) {
+        if (c & 1) {
+          c = -306674912 ^ ((c >> 1) & 0x7fffffff);
+        } else {
+          c = (c >> 1) & 0x7fffffff;
+        }
+      }
+      _crc32[i] = c;
+    }
+
+    // compute the index into a png for a given pixel
+    this.index = function(x,y) {
+      var i = y * (this.width + 1) + x + 1;
+      var j = this.idat_offs + 8 + 2 + 5 * Math.floor((i / 0xffff) + 1) + i;
+      return j;
+    };
+
+    // convert a color and build up the palette
+    this.color = function(red, green, blue, alpha) {
+
+      alpha = alpha >= 0 ? alpha : 255;
+      var color = (((((alpha << 8) | red) << 8) | green) << 8) | blue;
+
+      if (typeof this.palette[color] == "undefined") {
+        if (this.pindex == this.depth) return "\x00";
+
+        var ndx = this.plte_offs + 8 + 3 * this.pindex;
+
+        this.buffer[ndx + 0] = String.fromCharCode(red);
+        this.buffer[ndx + 1] = String.fromCharCode(green);
+        this.buffer[ndx + 2] = String.fromCharCode(blue);
+        this.buffer[this.trns_offs+8+this.pindex] = String.fromCharCode(alpha);
+
+        this.palette[color] = String.fromCharCode(this.pindex++);
+      }
+      return this.palette[color];
+    };
+
+    // output a PNG string, Base64 encoded
+    this.getBase64 = function() {
+
+      var s = this.getDump();
+
+      var ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+      var c1, c2, c3, e1, e2, e3, e4;
+      var l = s.length;
+      var i = 0;
+      var r = "";
+
+      do {
+        c1 = s.charCodeAt(i);
+        e1 = c1 >> 2;
+        c2 = s.charCodeAt(i+1);
+        e2 = ((c1 & 3) << 4) | (c2 >> 4);
+        c3 = s.charCodeAt(i+2);
+        if (l < i+2) { e3 = 64; } else { e3 = ((c2 & 0xf) << 2) | (c3 >> 6); }
+        if (l < i+3) { e4 = 64; } else { e4 = c3 & 0x3f; }
+        r+= ch.charAt(e1) + ch.charAt(e2) + ch.charAt(e3) + ch.charAt(e4);
+      } while ((i+= 3) < l);
+      return r;
+    };
+
+    // output a PNG string
+    this.getDump = function() {
+
+      // compute adler32 of output pixels + row filter bytes
+      var BASE = 65521; /* largest prime smaller than 65536 */
+      var NMAX = 5552;  /* NMAX is the largest n such that 255n(n+1)/2 + (n+1)(BASE-1) <= 2^32-1 */
+      var s1 = 1;
+      var s2 = 0;
+      var n = NMAX;
+
+      for (var y = 0; y < this.height; y++) {
+        for (var x = -1; x < this.width; x++) {
+          s1+= this.buffer[this.index(x, y)].charCodeAt(0);
+          s2+= s1;
+          if ((n-= 1) == 0) {
+            s1%= BASE;
+            s2%= BASE;
+            n = NMAX;
+          }
+        }
+      }
+      s1%= BASE;
+      s2%= BASE;
+      write(this.buffer, this.idat_offs + this.idat_size - 8, byte4((s2 << 16) | s1));
+
+      // compute crc32 of the PNG chunks
+      function crc32(png, offs, size) {
+        var crc = -1;
+        for (var i = 4; i < size-4; i += 1) {
+          crc = _crc32[(crc ^ png[offs+i].charCodeAt(0)) & 0xff] ^ ((crc >> 8) & 0x00ffffff);
+        }
+        write(png, offs+size-4, byte4(crc ^ -1));
+      }
+
+      crc32(this.buffer, this.ihdr_offs, this.ihdr_size);
+      crc32(this.buffer, this.plte_offs, this.plte_size);
+      crc32(this.buffer, this.trns_offs, this.trns_size);
+      crc32(this.buffer, this.idat_offs, this.idat_size);
+      crc32(this.buffer, this.iend_offs, this.iend_size);
+
+      // convert PNG to string
+      return "\x89PNG\r\n\x1A\n"+this.buffer.join('');
+    };
+
+    this.fillRect = function (x, y, w, h, color) {
+      for(var i = 0; i < w; i++) {
+        for (var j = 0; j < h; j++) {
+          this.buffer[this.index(x+i, y+j)] = color;
+        }
+      }
+    };
+  };
+
+// https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
+  /**
+   * Converts an HSL color value to RGB. Conversion formula
+   * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+   * Assumes h, s, and l are contained in the set [0, 1] and
+   * returns r, g, and b in the set [0, 255].
+   *
+   * @param   {number}  h       The hue
+   * @param   {number}  s       The saturation
+   * @param   {number}  l       The lightness
+   * @return  {Array}           The RGB representation
+   */
+
+  function hue2rgb(p, q, t) {
+    if(t < 0) t += 1;
+    if(t > 1) t -= 1;
+    if(t < 1/6) return p + (q - p) * 6 * t;
+    if(t < 1/2) return q;
+    if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+    return p;
+  }
+
+  function hsl2rgb(h, s, l){
+    var r, g, b;
+
+    if(s == 0){
+      r = g = b = l; // achromatic
+    }else{
+      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      var p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1/3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1/3);
+    }
+
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), 255];
+  }
+
+// The random number is a js implementation of the Xorshift PRNG
+  var randseed = new Array(4); // Xorshift: [x, y, z, w] 32 bit values
+
+  function seedrand(seed) {
+    for (var i = 0; i < randseed.length; i++) {
+      randseed[i] = 0;
+    }
+    for (var i = 0; i < seed.length; i++) {
+      randseed[i % 4] = (randseed[i % 4] << 5) - randseed[i % 4] + seed.charCodeAt(i);
+    }
+  }
+
+  function rand() {
+    // based on Java's String.hashCode(), expanded to 4 32bit values
+    var t = randseed[0] ^ (randseed[0] << 11);
+
+    randseed[0] = randseed[1];
+    randseed[1] = randseed[2];
+    randseed[2] = randseed[3];
+    randseed[3] = randseed[3] ^ (randseed[3] >> 19) ^ t ^ (t >> 8);
+
+    return (randseed[3] >>> 0) / (1 << 31 >>> 0);
+  }
+
+  function createColor() {
+    //saturation is the whole color spectrum
+    var h = Math.floor(rand() * 360);
+    //saturation goes from 40 to 100, it avoids greyish colors
+    var s = rand() * 60 + 40;
+    //lightness can be anything from 0 to 100, but probabilities are a bell curve around 50%
+    var l = (rand() + rand() + rand() + rand()) * 25;
+
+    return [h / 360,s / 100,l / 100];
+  }
+
+  function createImageData(size) {
+    var width = size; // Only support square icons for now
+    var height = size;
+
+    var dataWidth = Math.ceil(width / 2);
+    var mirrorWidth = width - dataWidth;
+
+    var data = [];
+    for (var y = 0; y < height; y++) {
+      var row = [];
+      for (var x = 0; x < dataWidth; x++) {
+        // this makes foreground and background color to have a 43% (1/2.3) probability
+        // spot color has 13% chance
+        row[x] = Math.floor(rand() * 2.3);
+      }
+      var r = row.slice(0, mirrorWidth);
+      r.reverse();
+      row = row.concat(r);
+
+      for (var i = 0; i < row.length; i++) {
+        data.push(row[i]);
+      }
+    }
+
+    return data;
+  }
+
+  function buildOpts(opts) {
+    if (!opts.seed) {
+      throw 'No seed provided'
+    }
+
+    seedrand(opts.seed);
+
+    return Object.assign({
+      size: 8,
+      scale: 16,
+      color: createColor(),
+      bgcolor: createColor(),
+      spotcolor: createColor(),
+    }, opts)
+  }
+
+  function toDataUrl(address) {
+    const opts = buildOpts({seed: address.toLowerCase()});
+
+    const imageData = createImageData(opts.size);
+    const width = Math.sqrt(imageData.length);
+
+    const p = new PNG(opts.size*opts.scale, opts.size*opts.scale, 3);
+    const bgcolor = p.color(...hsl2rgb(...opts.bgcolor));
+    const color = p.color(...hsl2rgb(...opts.color));
+    const spotcolor = p.color(...hsl2rgb(...opts.spotcolor));
+
+    for (var i = 0; i < imageData.length; i++) {
+      var row = Math.floor(i / width);
+      var col = i % width;
+      // if data is 0, leave the background
+      if (imageData[i]) {
+        // if data is 2, choose spot color, if 1 choose foreground
+        const pngColor = imageData[i] == 1 ? color : spotcolor;
+        p.fillRect(col * opts.scale, row * opts.scale, opts.scale, opts.scale, pngColor);
+      }
+    }
+    return `data:image/png;base64,${p.getBase64()}`;
+  }
+
+  exports.toDataUrl = toDataUrl;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
diff --git a/ui/lib/contract-namer.js b/ui/lib/contract-namer.js
index a94c62b62..f05e770cc 100644
--- a/ui/lib/contract-namer.js
+++ b/ui/lib/contract-namer.js
@@ -5,14 +5,18 @@
  * otherwise returns null.
  */
 
-// Nickname keys must be stored in lower case.
-const nicknames = {}
+const contractMap = require('eth-contract-metadata')
+const ethUtil = require('ethereumjs-util')
 
 module.exports = function (addr, identities = {}) {
+  const checksummed = ethUtil.toChecksumAddress(addr)
+  if (contractMap[checksummed] && contractMap[checksummed].name) {
+    return contractMap[checksummed].name
+  }
+
   const address = addr.toLowerCase()
   const ids = hashFromIdentities(identities)
-
-  return addrFromHash(address, ids) || addrFromHash(address, nicknames)
+  return addrFromHash(address, ids)
 }
 
 function hashFromIdentities (identities) {
diff --git a/ui/lib/explorer-link.js b/ui/lib/etherscan-prefix-for-network.js
index ca89f8b25..2c1904f1c 100644
--- a/ui/lib/explorer-link.js
+++ b/ui/lib/etherscan-prefix-for-network.js
@@ -1,4 +1,4 @@
-module.exports = function (hash, network) {
+module.exports = function (network) {
   const net = parseInt(network)
   let prefix
   switch (net) {
@@ -8,11 +8,14 @@ module.exports = function (hash, network) {
     case 3: // ropsten test net
       prefix = 'ropsten.'
       break
+    case 4: // rinkeby test net
+      prefix = 'rinkeby.'
+      break
     case 42: // kovan test net
       prefix = 'kovan.'
       break
     default:
       prefix = ''
   }
-  return `http://${prefix}etherscan.io/tx/${hash}`
+  return prefix
 }
diff --git a/ui/lib/feature-toggle-utils.js b/ui/lib/feature-toggle-utils.js
new file mode 100644
index 000000000..6d4e461ca
--- /dev/null
+++ b/ui/lib/feature-toggle-utils.js
@@ -0,0 +1,11 @@
+function checkFeatureToggle (name) {
+  const queryPairMap = window.location.search.substr(1).split('&')
+    .map(pair => pair.split('='))
+    .reduce((pairs, [key, value]) => ({...pairs, [key]: value }), {})
+  const featureToggles = queryPairMap['ft'] ? queryPairMap['ft'].split(',') : []
+  return Boolean(featureToggles.find(ft => ft === name))
+}
+
+module.exports = {
+  checkFeatureToggle,
+}
diff --git a/ui/lib/icon-factory.js b/ui/lib/icon-factory.js
index 82cc839d6..31498a3a9 100644
--- a/ui/lib/icon-factory.js
+++ b/ui/lib/icon-factory.js
@@ -1,4 +1,7 @@
 var iconFactory
+const isValidAddress = require('ethereumjs-util').isValidAddress
+const toChecksumAddress = require('ethereumjs-util').toChecksumAddress
+const contractMap = require('eth-contract-metadata')
 
 module.exports = function (jazzicon) {
   if (!iconFactory) {
@@ -12,22 +15,13 @@ function IconFactory (jazzicon) {
   this.cache = {}
 }
 
-IconFactory.prototype.iconForAddress = function (address, diameter, imageify) {
-  if (imageify) {
-    return this.generateIdenticonImg(address, diameter)
-  } else {
-    return this.generateIdenticonSvg(address, diameter)
+IconFactory.prototype.iconForAddress = function (address, diameter) {
+  const addr = toChecksumAddress(address)
+  if (iconExistsFor(addr)) {
+    return imageElFor(addr)
   }
-}
 
-// returns img dom element
-IconFactory.prototype.generateIdenticonImg = function (address, diameter) {
-  var identicon = this.generateIdenticonSvg(address, diameter)
-  var identiconSrc = identicon.innerHTML
-  var dataUri = toDataUri(identiconSrc)
-  var img = document.createElement('img')
-  img.src = dataUri
-  return img
+  return this.generateIdenticonSvg(address, diameter)
 }
 
 // returns svg dom element
@@ -49,12 +43,23 @@ IconFactory.prototype.generateNewIdenticon = function (address, diameter) {
 
 // util
 
+function iconExistsFor (address) {
+  return contractMap[address] && isValidAddress(address) && contractMap[address].logo
+}
+
+function imageElFor (address) {
+  const contract = contractMap[address]
+  const fileName = contract.logo
+  const path = `images/contract/${fileName}`
+  const img = document.createElement('img')
+  img.src = path
+  img.style.width = '100%'
+  return img
+}
+
 function jsNumberForAddress (address) {
   var addr = address.slice(2, 10)
   var seed = parseInt(addr, 16)
   return seed
 }
 
-function toDataUri (identiconSrc) {
-  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(identiconSrc)
-}
diff --git a/ui/lib/is-mobile-view.js b/ui/lib/is-mobile-view.js
new file mode 100644
index 000000000..78fd6cb54
--- /dev/null
+++ b/ui/lib/is-mobile-view.js
@@ -0,0 +1,5 @@
+// Checks if viewport at invoke time fits mobile dimensions
+// isMobileView :: () => Bool
+const isMobileView = () => window.matchMedia('screen and (max-width: 575px)').matches
+
+module.exports = isMobileView
diff --git a/ui/lib/tx-helper.js b/ui/lib/tx-helper.js
index ec19daf64..de3f00d2d 100644
--- a/ui/lib/tx-helper.js
+++ b/ui/lib/tx-helper.js
@@ -1,17 +1,27 @@
 const valuesFor = require('../app/util').valuesFor
 
-module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, network) {
+module.exports = function (unapprovedTxs, unapprovedMsgs, personalMsgs, typedMessages, network) {
   log.debug('tx-helper called with params:')
-  log.debug({ unapprovedTxs, unapprovedMsgs, personalMsgs, network })
+  log.debug({ unapprovedTxs, unapprovedMsgs, personalMsgs, typedMessages, network })
 
   const txValues = network ? valuesFor(unapprovedTxs).filter(txMeta => txMeta.metamaskNetworkId === network) : valuesFor(unapprovedTxs)
   log.debug(`tx helper found ${txValues.length} unapproved txs`)
+
   const msgValues = valuesFor(unapprovedMsgs)
   log.debug(`tx helper found ${msgValues.length} unsigned messages`)
   let allValues = txValues.concat(msgValues)
+
   const personalValues = valuesFor(personalMsgs)
   log.debug(`tx helper found ${personalValues.length} unsigned personal messages`)
   allValues = allValues.concat(personalValues)
 
-  return allValues.sort(txMeta => txMeta.time)
+  const typedValues = valuesFor(typedMessages)
+  log.debug(`tx helper found ${typedValues.length} unsigned typed messages`)
+  allValues = allValues.concat(typedValues)
+
+  allValues = allValues.sort((a, b) => {
+    return a.time > b.time
+  })
+
+  return allValues
 }