fix conflicts

167 files changed, 4483 insertions, 1450 deletions

diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js
index 1e0ef1b64..4a06333e7 100644
--- a/ui/app/components/button/button.component.js
+++ b/ui/app/components/button/button.component.js
@@ -6,6 +6,7 @@ const CLASSNAME_DEFAULT = 'btn-default'
 const CLASSNAME_PRIMARY = 'btn-primary'
 const CLASSNAME_SECONDARY = 'btn-secondary'
 const CLASSNAME_CONFIRM = 'btn-confirm'
+const CLASSNAME_RAISED = 'btn-raised'
 const CLASSNAME_LARGE = 'btn--large'
 
 const typeHash = {
@@ -13,6 +14,7 @@ const typeHash = {
   primary: CLASSNAME_PRIMARY,
   secondary: CLASSNAME_SECONDARY,
   confirm: CLASSNAME_CONFIRM,
+  raised: CLASSNAME_RAISED,
 }
 
 export default class Button extends Component {
@@ -20,7 +22,7 @@ export default class Button extends Component {
     type: PropTypes.string,
     large: PropTypes.bool,
     className: PropTypes.string,
-    children: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   }
 
   render () {
@@ -29,6 +31,7 @@ export default class Button extends Component {
     return (
       <button
         className={classnames(
+          'button',
           typeHash[type],
           large && CLASSNAME_LARGE,
           className
diff --git a/ui/app/components/card/card.component.js b/ui/app/components/card/card.component.js
new file mode 100644
index 000000000..bb7241da1
--- /dev/null
+++ b/ui/app/components/card/card.component.js
@@ -0,0 +1,25 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class Card extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    overrideClassName: PropTypes.bool,
+    title: PropTypes.string,
+    children: PropTypes.node,
+  }
+
+  render () {
+    const { className, overrideClassName, title } = this.props
+
+    return (
+      <div className={classnames({ 'card': !overrideClassName }, className)}>
+        <div className="card__title">
+          { title }
+        </div>
+        { this.props.children }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/card/index.js b/ui/app/components/card/index.js
new file mode 100644
index 000000000..c3ca6e3f4
--- /dev/null
+++ b/ui/app/components/card/index.js
@@ -0,0 +1 @@
+export { default } from './card.component'
diff --git a/ui/app/components/card/index.scss b/ui/app/components/card/index.scss
new file mode 100644
index 000000000..bde54a15e
--- /dev/null
+++ b/ui/app/components/card/index.scss
@@ -0,0 +1,11 @@
+.card {
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+  padding: 8px;
+
+  &__title {
+    border-bottom: 1px solid #d8d8d8;
+    padding-bottom: 4px;
+    text-transform: capitalize;
+  }
+}
diff --git a/ui/app/components/card/tests/card.component.test.js b/ui/app/components/card/tests/card.component.test.js
new file mode 100644
index 000000000..cea05033f
--- /dev/null
+++ b/ui/app/components/card/tests/card.component.test.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import Card from '../card.component'
+
+describe('Card Component', () => {
+  it('should render a card with a title and child element', () => {
+    const wrapper = shallow(
+      <Card
+        title="Test"
+        className="card-test-class"
+      >
+        <div className="child-test-class">Child</div>
+      </Card>
+    )
+
+    assert.ok(wrapper.hasClass('card-test-class'))
+    const title = wrapper.find('.card__title')
+    assert.ok(title)
+    assert.equal(title.text(), 'Test')
+    const child = wrapper.find('.child-test-class')
+    assert.ok(child)
+    assert.equal(child.text(), 'Child')
+  })
+})
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
index de9aa6eb7..74e95ece6 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -2,11 +2,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { Tabs, Tab } from '../../tabs'
-import {
-  ConfirmPageContainerSummary,
-  ConfirmPageContainerError,
-  ConfirmPageContainerWarning,
-} from './'
+import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from './'
+import ErrorMessage from '../../error-message'
 
 export default class ConfirmPageContainerContent extends Component {
   static propTypes = {
@@ -95,7 +92,7 @@ export default class ConfirmPageContainerContent extends Component {
         {
           (errorKey || errorMessage) && (
             <div className="confirm-page-container-content__error-container">
-              <ConfirmPageContainerError
+              <ErrorMessage
                 errorMessage={errorMessage}
                 errorKey={errorKey}
               />
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.js b/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.js
deleted file mode 100644
index 4ac95d0e3..000000000
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './confirm-page-container-error.component'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/index.js b/ui/app/components/confirm-page-container/confirm-page-container-content/index.js
index 1469dd438..4dfd89d92 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/index.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/index.js
@@ -1,4 +1,3 @@
 export { default } from './confirm-page-container-content.component'
 export { default as ConfirmPageContainerSummary } from './confirm-page-container-summary'
-export { default as ConfirmPageContainerError } from './confirm-page-container-error'
 export { default as ConfirmPageContainerWarning } from './confirm-page-container-warning'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
index 39797a43f..698e624f4 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
+++ b/ui/app/components/confirm-page-container/confirm-page-container-content/index.scss
@@ -1,5 +1,3 @@
-@import './confirm-page-container-error/index';
-
 @import './confirm-page-container-warning/index';
 
 @import './confirm-page-container-summary/index';
diff --git a/ui/app/components/confirm-page-container/confirm-page-container.component.js b/ui/app/components/confirm-page-container/confirm-page-container.component.js
index b1582051e..36d5a1f58 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container.component.js
+++ b/ui/app/components/confirm-page-container/confirm-page-container.component.js
@@ -41,7 +41,9 @@ export default class ConfirmPageContainer extends Component {
     assetImage: PropTypes.string,
     summaryComponent: PropTypes.node,
     warning: PropTypes.string,
+    unapprovedTxCount: PropTypes.number,
     // Footer
+    onCancelAll: PropTypes.func,
     onCancel: PropTypes.func,
     onSubmit: PropTypes.func,
     disabled: PropTypes.bool,
@@ -67,10 +69,12 @@ export default class ConfirmPageContainer extends Component {
       summaryComponent,
       detailsComponent,
       dataComponent,
+      onCancelAll,
       onCancel,
       onSubmit,
       identiconAddress,
       nonce,
+      unapprovedTxCount,
       assetImage,
       warning,
     } = this.props
@@ -112,11 +116,18 @@ export default class ConfirmPageContainer extends Component {
         }
         <PageContainerFooter
           onCancel={() => onCancel()}
+          cancelText={this.context.t('reject')}
           onSubmit={() => onSubmit()}
           submitText={this.context.t('confirm')}
           submitButtonType="confirm"
           disabled={disabled}
-        />
+        >
+          {unapprovedTxCount > 1 && (
+            <a onClick={() => onCancelAll()}>
+              {this.context.t('rejectTxsN', [unapprovedTxCount])}
+            </a>
+          )}
+        </PageContainerFooter>
       </div>
     )
   }
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
index 389791b42..e4eb58a2a 100644
--- a/ui/app/components/currency-display/currency-display.component.js
+++ b/ui/app/components/currency-display/currency-display.component.js
@@ -1,13 +1,18 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { ETH } from '../../constants/common'
+import { ETH, GWEI } from '../../constants/common'
 
 export default class CurrencyDisplay extends PureComponent {
   static propTypes = {
     className: PropTypes.string,
     displayValue: PropTypes.string,
     prefix: PropTypes.string,
+    // Used in container
     currency: PropTypes.oneOf([ETH]),
+    denomination: PropTypes.oneOf([GWEI]),
+    value: PropTypes.string,
+    numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    hideLabel: PropTypes.bool,
   }
 
   render () {
diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js
index b8a738c65..6644a1099 100644
--- a/ui/app/components/currency-display/currency-display.container.js
+++ b/ui/app/components/currency-display/currency-display.container.js
@@ -3,13 +3,15 @@ import CurrencyDisplay from './currency-display.component'
 import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util'
 
 const mapStateToProps = (state, ownProps) => {
-  const { value, numberOfDecimals = 2, currency } = ownProps
+  const { value, numberOfDecimals = 2, currency, denomination, hideLabel } = ownProps
   const { metamask: { currentCurrency, conversionRate } } = state
 
   const toCurrency = currency || currentCurrency
-  const convertedValue = getValueFromWeiHex({ value, toCurrency, conversionRate, numberOfDecimals })
+  const convertedValue = getValueFromWeiHex({
+    value, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination,
+  })
   const formattedValue = formatCurrency(convertedValue, toCurrency)
-  const displayValue = `${formattedValue} ${toCurrency.toUpperCase()}`
+  const displayValue = hideLabel ? formattedValue : `${formattedValue} ${toCurrency.toUpperCase()}`
 
   return {
     displayValue,
diff --git a/ui/app/components/currency-display/tests/currency-display.container.test.js b/ui/app/components/currency-display/tests/currency-display.container.test.js
index 474ce5378..5265bbb04 100644
--- a/ui/app/components/currency-display/tests/currency-display.container.test.js
+++ b/ui/app/components/currency-display/tests/currency-display.container.test.js
@@ -51,6 +51,50 @@ describe('CurrencyDisplay container', () => {
             displayValue: '1.266 ETH',
           },
         },
+        {
+          props: {
+            value: '0x1193461d01595930',
+            currency: 'ETH',
+            numberOfDecimals: 3,
+            hideLabel: true,
+          },
+          result: {
+            displayValue: '1.266',
+          },
+        },
+        {
+          props: {
+            value: '0x3b9aca00',
+            currency: 'ETH',
+            denomination: 'GWEI',
+            hideLabel: true,
+          },
+          result: {
+            displayValue: '1',
+          },
+        },
+        {
+          props: {
+            value: '0x3b9aca00',
+            currency: 'ETH',
+            denomination: 'WEI',
+            hideLabel: true,
+          },
+          result: {
+            displayValue: '1000000000',
+          },
+        },
+        {
+          props: {
+            value: '0x3b9aca00',
+            currency: 'ETH',
+            numberOfDecimals: 100,
+            hideLabel: true,
+          },
+          result: {
+            displayValue: '1e-9',
+          },
+        },
       ]
 
       tests.forEach(({ props, result }) => {
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index c255fd64d..e67fbe45b 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -5,6 +5,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const GasModalCard = require('./gas-modal-card')
+import Button from '../button'
 
 const ethUtil = require('ethereumjs-util')
 
@@ -353,16 +354,16 @@ CustomizeGasModal.prototype.render = function () {
         }, [this.context.t('revert')]),
 
         h('div.send-v2__customize-gas__buttons', [
-          h('button.btn-default.send-v2__customize-gas__cancel', {
+          h(Button, {
+            type: 'default',
+            className: 'send-v2__customize-gas__cancel',
             onClick: this.props.hideModal,
-            style: {
-              marginRight: '10px',
-            },
           }, [this.context.t('cancel')]),
-
-          h('button.btn-primary.send-v2__customize-gas__save', {
+          h(Button, {
+            type: 'primary',
+            className: 'send-v2__customize-gas__save',
             onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
-            className: error && 'btn-primary--disabled',
+            disabled: error,
           }, [this.context.t('save')]),
         ]),
 
diff --git a/ui/app/components/dropdowns/account-details-dropdown.js b/ui/app/components/dropdowns/account-details-dropdown.js
new file mode 100644
index 000000000..7476cfdd9
--- /dev/null
+++ b/ui/app/components/dropdowns/account-details-dropdown.js
@@ -0,0 +1,109 @@
+const Component = require('react').Component
+const PropTypes = require('prop-types')
+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 genAccountLink = require('../../../lib/account-link.js')
+const { Menu, Item, CloseArea } = require('./components/menu')
+
+AccountDetailsDropdown.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsDropdown)
+
+function mapStateToProps (state) {
+  return {
+    selectedIdentity: getSelectedIdentity(state),
+    network: state.metamask.network,
+    keyrings: state.metamask.keyrings,
+  }
+}
+
+function mapDispatchToProps (dispatch) {
+  return {
+    showAccountDetailModal: () => {
+      dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
+    },
+    viewOnEtherscan: (address, network) => {
+      global.platform.openWindow({ url: genAccountLink(address, network) })
+    },
+    showRemoveAccountConfirmationModal: (identity) => {
+      return dispatch(actions.showModal({ name: 'CONFIRM_REMOVE_ACCOUNT', identity }))
+    },
+  }
+}
+
+inherits(AccountDetailsDropdown, Component)
+function AccountDetailsDropdown () {
+  Component.call(this)
+
+  this.onClose = this.onClose.bind(this)
+}
+
+AccountDetailsDropdown.prototype.onClose = function (e) {
+  e.stopPropagation()
+  this.props.onClose()
+}
+
+AccountDetailsDropdown.prototype.render = function () {
+  const {
+    selectedIdentity,
+    network,
+    keyrings,
+    showAccountDetailModal,
+    viewOnEtherscan,
+    showRemoveAccountConfirmationModal } = this.props
+
+  const address = selectedIdentity.address
+
+  const keyring = keyrings.find((kr) => {
+    return kr.accounts.includes(address)
+  })
+
+  const isRemovable = keyring.type !== 'HD Key Tree'
+
+  return h(Menu, { className: 'account-details-dropdown', isShowing: true }, [
+    h(CloseArea, {
+      onClick: this.onClose,
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        global.platform.openExtensionInBrowser()
+        this.props.onClose()
+      },
+      text: this.context.t('expandView'),
+      icon: h(`img`, { src: 'images/expand.svg', style: { height: '15px' } }),
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        showAccountDetailModal()
+        this.props.onClose()
+      },
+      text: this.context.t('accountDetails'),
+      icon: h(`img`, { src: 'images/info.svg', style: { height: '15px' } }),
+    }),
+    h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        viewOnEtherscan(address, network)
+        this.props.onClose()
+      },
+      text: this.context.t('viewOnEtherscan'),
+      icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }),
+    }),
+    isRemovable ? h(Item, {
+      onClick: (e) => {
+        e.stopPropagation()
+        showRemoveAccountConfirmationModal(selectedIdentity)
+        this.props.onClose()
+      },
+      text: this.context.t('removeAccount'),
+      icon: h(`img`, { src: 'images/hide.svg', style: { height: '15px' } }),
+    }) : null,
+  ])
+}
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 63a30dd82..b252b25d9 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -43,6 +43,9 @@ function mapDispatchToProps (dispatch) {
     setRpcTarget: (target) => {
       dispatch(actions.setRpcTarget(target))
     },
+    delRpcTarget: (target) => {
+      dispatch(actions.delRpcTarget(target))
+    },
     showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
     hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
   }
@@ -300,6 +303,13 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
               color: currentRpcTarget ? '#ffffff' : '#9b9b9b',
             },
           }, rpc),
+          h('i.fa.fa-times.delete',
+          {
+            onClick: (e) => {
+              e.stopPropagation()
+              props.delRpcTarget(rpc)
+            },
+          }),
         ]
       )
     }
diff --git a/ui/app/components/dropdowns/tests/dropdown.test.js b/ui/app/components/dropdowns/tests/dropdown.test.js
new file mode 100644
index 000000000..2b026589a
--- /dev/null
+++ b/ui/app/components/dropdowns/tests/dropdown.test.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow } from 'enzyme'
+import { DropdownMenuItem } from '../components/dropdown.js'
+
+describe('', () => {
+  let wrapper
+  const onClickSpy = sinon.spy()
+  const closeMenuSpy = sinon.spy()
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <DropdownMenuItem
+        onClick = {onClickSpy}
+        style = {{test: 'style'}}
+        closeMenu = {closeMenuSpy}
+      >
+      </DropdownMenuItem>
+    )
+  })
+
+  it('renders li with dropdown-menu-item class', () => {
+    assert.equal(wrapper.find('li.dropdown-menu-item').length, 1)
+  })
+
+  it('adds style based on props passed', () => {
+    assert.equal(wrapper.prop('style').test, 'style')
+  })
+
+  it('simulates click event and calls onClick and closeMenu', () => {
+    wrapper.prop('onClick')()
+    assert.equal(onClickSpy.callCount, 1)
+    assert.equal(closeMenuSpy.callCount, 1)
+  })
+
+})
diff --git a/ui/app/components/dropdowns/tests/menu.test.js b/ui/app/components/dropdowns/tests/menu.test.js
new file mode 100644
index 000000000..9f5f13f00
--- /dev/null
+++ b/ui/app/components/dropdowns/tests/menu.test.js
@@ -0,0 +1,87 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow } from 'enzyme'
+import { Menu, Item, Divider, CloseArea } from '../components/menu'
+
+describe('Dropdown Menu Components', () => {
+
+  describe('Menu', () => {
+    let wrapper
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <Menu className = {'Test Class'} isShowing = {true}/>
+      )
+    })
+
+    it('adds prop className to menu', () => {
+      assert.equal(wrapper.find('.menu').prop('className'), 'menu Test Class')
+    })
+
+  })
+
+  describe('Item', () => {
+    let wrapper
+
+    const onClickSpy = sinon.spy()
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <Item
+          icon = {'test icon'}
+          text = {'test text'}
+          className = {'test className'}
+          onClick = {onClickSpy}
+        />
+      )
+    })
+
+    it('add className based on props', () => {
+      assert.equal(wrapper.find('.menu__item').prop('className'), 'menu__item menu__item test className menu__item--clickable')
+    })
+
+    it('simulates onClick called', () => {
+      wrapper.find('.menu__item').prop('onClick')()
+      assert.equal(onClickSpy.callCount, 1)
+    })
+
+    it('adds icon based on icon props', () => {
+      assert.equal(wrapper.find('.menu__item__icon').text(), 'test icon')
+    })
+
+    it('adds html text based on text props', () => {
+      assert.equal(wrapper.find('.menu__item__text').text(), 'test text')
+    })
+  })
+
+  describe('Divider', () => {
+    let wrapper
+
+    before(() => {
+      wrapper = shallow(<Divider />)
+    })
+
+    it('renders menu divider', () => {
+      assert.equal(wrapper.find('.menu__divider').length, 1)
+    })
+  })
+
+  describe('CloseArea', () => {
+    let wrapper
+
+    const onClickSpy = sinon.spy()
+
+    beforeEach(() => {
+      wrapper = shallow(<CloseArea
+        onClick = {onClickSpy}
+      />)
+    })
+
+    it('simulates click', () => {
+      wrapper.prop('onClick')()
+      assert.equal(onClickSpy.callCount, 1)
+    })
+  })
+
+})
diff --git a/ui/app/components/dropdowns/tests/network-dropdown-icon.test.js b/ui/app/components/dropdowns/tests/network-dropdown-icon.test.js
new file mode 100644
index 000000000..67b192c11
--- /dev/null
+++ b/ui/app/components/dropdowns/tests/network-dropdown-icon.test.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import NetworkDropdownIcon from '../components/network-dropdown-icon'
+
+describe('Network Dropdown Icon', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<NetworkDropdownIcon
+      backgroundColor = {'red'}
+      isSelected = {false}
+      innerBorder = {'none'}
+      diameter = {'12'}
+    />)
+  })
+
+  it('adds style props based on props', () => {
+    const styleProp = wrapper.find('.menu-icon-circle').children().prop('style')
+    assert.equal(styleProp.background, 'red')
+    assert.equal(styleProp.border, 'none')
+    assert.equal(styleProp.height, '12px')
+    assert.equal(styleProp.width, '12px')
+  })
+})
diff --git a/ui/app/components/dropdowns/tests/network-dropdown.test.js b/ui/app/components/dropdowns/tests/network-dropdown.test.js
new file mode 100644
index 000000000..699b54605
--- /dev/null
+++ b/ui/app/components/dropdowns/tests/network-dropdown.test.js
@@ -0,0 +1,97 @@
+import React from 'react'
+import assert from 'assert'
+import { createMockStore } from 'redux-test-utils'
+import { mountWithRouter } from '../../../../../test/lib/render-helpers'
+import NetworkDropdown from '../network-dropdown'
+import { DropdownMenuItem } from '../components/dropdown'
+import NetworkDropdownIcon from '../components/network-dropdown-icon'
+
+describe('Network Dropdown', () => {
+  let wrapper
+
+  describe('NetworkDropdown in appState in false', () => {
+    const mockState = {
+      metamask: {
+        provider: {
+          type: 'test',
+        },
+      },
+      appState: {
+        networkDropdown: false,
+      },
+    }
+
+    const store = createMockStore(mockState)
+
+    beforeEach(() => {
+      wrapper = mountWithRouter(
+        <NetworkDropdown store={store} />
+      )
+    })
+
+    it('checks for network droppo class', () => {
+      assert.equal(wrapper.find('.network-droppo').length, 1)
+    })
+
+    it('renders only one child when networkDropdown is false in state', () => {
+      assert.equal(wrapper.children().length, 1)
+    })
+
+  })
+
+  describe('NetworkDropdown in appState is true', () => {
+    const mockState = {
+      metamask: {
+        provider: {
+          'type': 'test',
+        },
+        frequentRpcList: [
+          'http://localhost:7545',
+        ],
+      },
+      appState: {
+        'networkDropdownOpen': true,
+      },
+    }
+    const store = createMockStore(mockState)
+
+    beforeEach(() => {
+      wrapper = mountWithRouter(
+        <NetworkDropdown store={store}/>,
+      )
+    })
+
+    it('renders 7 DropDownMenuItems ', () => {
+      assert.equal(wrapper.find(DropdownMenuItem).length, 7)
+    })
+
+    it('checks background color for first NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(0).prop('backgroundColor'), '#29B6AF') // Main Ethereum Network Teal
+    })
+
+    it('checks background color for second NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(1).prop('backgroundColor'), '#ff4a8d') // Ropsten Red
+    })
+
+    it('checks background color for third NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(2).prop('backgroundColor'), '#7057ff') // Kovan Purple
+    })
+
+    it('checks background color for fourth NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(3).prop('backgroundColor'), '#f6c343') // Rinkeby Yellow
+    })
+
+    it('checks background color for fifth NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(4).prop('innerBorder'), '1px solid #9b9b9b')
+    })
+
+    it('checks dropdown for frequestRPCList from  state ', () => {
+      assert.equal(wrapper.find(DropdownMenuItem).at(5).text(), '✓http://localhost:7545')
+    })
+
+    it('checks background color for sixth NetworkDropdownIcon', () => {
+      assert.equal(wrapper.find(NetworkDropdownIcon).at(5).prop('innerBorder'), '1px solid #9b9b9b')
+    })
+
+  })
+})
diff --git a/ui/app/components/dropdowns/token-menu-dropdown.js b/ui/app/components/dropdowns/token-menu-dropdown.js
index 5a794c7c1..8a072b1bc 100644
--- a/ui/app/components/dropdowns/token-menu-dropdown.js
+++ b/ui/app/components/dropdowns/token-menu-dropdown.js
@@ -5,7 +5,6 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const genAccountLink = require('etherscan-link').createAccountLink
-const copyToClipboard = require('copy-to-clipboard')
 const { Menu, Item, CloseArea } = require('./components/menu')
 
 TokenMenuDropdown.contextTypes = {
@@ -59,14 +58,6 @@ TokenMenuDropdown.prototype.render = function () {
     h(Item, {
       onClick: (e) => {
         e.stopPropagation()
-        copyToClipboard(this.props.token.address)
-        this.props.onClose()
-      },
-      text: this.context.t('copyContractAddress'),
-    }),
-    h(Item, {
-      onClick: (e) => {
-        e.stopPropagation()
         const url = genAccountLink(this.props.token.address, this.props.network)
         global.platform.openWindow({ url })
         this.props.onClose()
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js b/ui/app/components/error-message/error-message.component.js
index 4965d7b4e..b4464c33b 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/confirm-page-container-error.component.js
+++ b/ui/app/components/error-message/error-message.component.js
@@ -1,30 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const ConfirmPageContainerError = (props, context) => {
+const ErrorMessage = (props, context) => {
   const { errorMessage, errorKey } = props
   const error = errorKey ? context.t(errorKey) : errorMessage
 
   return (
-    <div className="confirm-page-container-error">
+    <div className="error-message">
       <img
         src="/images/alert-red.svg"
-        className="confirm-page-container-error__icon"
+        className="error-message__icon"
       />
-      <div className="confirm-page-container-error__text">
+      <div className="error-message__text">
         { `ALERT: ${error}` }
       </div>
     </div>
   )
 }
 
-ConfirmPageContainerError.propTypes = {
+ErrorMessage.propTypes = {
   errorMessage: PropTypes.string,
   errorKey: PropTypes.string,
 }
 
-ConfirmPageContainerError.contextTypes = {
+ErrorMessage.contextTypes = {
   t: PropTypes.func,
 }
 
-export default ConfirmPageContainerError
+export default ErrorMessage
diff --git a/ui/app/components/error-message/index.js b/ui/app/components/error-message/index.js
new file mode 100644
index 000000000..1c97a9955
--- /dev/null
+++ b/ui/app/components/error-message/index.js
@@ -0,0 +1 @@
+export { default } from './error-message.component'
diff --git a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss b/ui/app/components/error-message/index.scss
index 89ff25578..5915e21cf 100644
--- a/ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-error/index.scss
+++ b/ui/app/components/error-message/index.scss
@@ -1,4 +1,4 @@
-.confirm-page-container-error {
+.error-message {
   min-height: 32px;
   border: 1px solid $monzo;
   color: $monzo;
diff --git a/ui/app/components/error-message/tests/error-message.component.test.js b/ui/app/components/error-message/tests/error-message.component.test.js
new file mode 100644
index 000000000..8c5347173
--- /dev/null
+++ b/ui/app/components/error-message/tests/error-message.component.test.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import ErrorMessage from '../error-message.component'
+
+describe('ErrorMessage Component', () => {
+  const t = key => `translate ${key}`
+
+  it('should render a message from props.errorMessage', () => {
+    const wrapper = shallow(
+      <ErrorMessage
+        errorMessage="This is an error."
+      />,
+      { context: { t }}
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find('.error-message').length, 1)
+    assert.equal(wrapper.find('.error-message__icon').length, 1)
+    assert.equal(wrapper.find('.error-message__text').text(), 'ALERT: This is an error.')
+  })
+
+  it('should render a message translated from props.errorKey', () => {
+    const wrapper = shallow(
+      <ErrorMessage
+        errorKey="testKey"
+      />,
+      { context: { t }}
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find('.error-message').length, 1)
+    assert.equal(wrapper.find('.error-message__icon').length, 1)
+    assert.equal(wrapper.find('.error-message__text').text(), 'ALERT: translate testKey')
+  })
+})
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
deleted file mode 100644
index 75303a34a..000000000
--- a/ui/app/components/hex-as-decimal-input.js
+++ /dev/null
@@ -1,161 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const ethUtil = require('ethereumjs-util')
-const BN = ethUtil.BN
-const extend = require('xtend')
-const connect = require('react-redux').connect
-
-HexAsDecimalInput.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect()(HexAsDecimalInput)
-
-
-inherits(HexAsDecimalInput, Component)
-function HexAsDecimalInput () {
-  this.state = { invalid: null }
-  Component.call(this)
-}
-
-/* Hex as Decimal Input
- *
- * A component for allowing easy, decimal editing
- * of a passed in hex string value.
- *
- * On change, calls back its `onChange` function parameter
- * and passes it an updated hex string.
- */
-
-HexAsDecimalInput.prototype.render = function () {
-  const props = this.props
-  const state = this.state
-
-  const { value, onChange, min, max } = props
-
-  const toEth = props.toEth
-  const suffix = props.suffix
-  const decimalValue = decimalize(value, toEth)
-  const style = props.style
-
-  return (
-    h('.flex-column', [
-      h('.flex-row', {
-        style: {
-          alignItems: 'flex-end',
-          lineHeight: '13px',
-          fontFamily: 'Montserrat Light',
-          textRendering: 'geometricPrecision',
-        },
-      }, [
-        h('input.hex-input', {
-          type: 'number',
-          required: true,
-          min: min,
-          max: max,
-          style: extend({
-            display: 'block',
-            textAlign: 'right',
-            backgroundColor: 'transparent',
-            border: '1px solid #bdbdbd',
-
-          }, style),
-          value: parseInt(decimalValue),
-          onBlur: (event) => {
-            this.updateValidity(event)
-          },
-          onChange: (event) => {
-            this.updateValidity(event)
-            const hexString = (event.target.value === '') ? '' : hexify(event.target.value)
-            onChange(hexString)
-          },
-          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,
-    ])
-  )
-}
-
-HexAsDecimalInput.prototype.setValid = function (message) {
-  this.setState({ invalid: null })
-}
-
-HexAsDecimalInput.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 })
-  }
-}
-
-HexAsDecimalInput.prototype.constructWarning = function () {
-  const { name, min, max } = this.props
-  let message = name ? name + ' ' : ''
-
-  if (min && max) {
-    message += this.context.t('betweenMinAndMax', [min, max])
-  } else if (min) {
-    message += this.context.t('greaterThanMin', [min])
-  } else if (max) {
-    message += this.context.t('lessThanMax', [max])
-  } else {
-    message += this.context.t('invalidInput')
-  }
-
-  return message
-}
-
-function hexify (decimalString) {
-  const hexBN = new BN(parseInt(decimalString), 10)
-  return '0x' + hexBN.toString('hex')
-}
-
-function decimalize (input, toEth) {
-  if (input === '') {
-    return ''
-  } else {
-    const strippedInput = ethUtil.stripHexPrefix(input)
-    const inputBN = new BN(strippedInput, 'hex')
-    return inputBN.toString(10)
-  }
-}
diff --git a/ui/app/components/hex-to-decimal/hex-to-decimal.component.js b/ui/app/components/hex-to-decimal/hex-to-decimal.component.js
new file mode 100644
index 000000000..6847a6919
--- /dev/null
+++ b/ui/app/components/hex-to-decimal/hex-to-decimal.component.js
@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { hexToDecimal } from '../../helpers/conversions.util'
+
+export default class HexToDecimal extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    value: PropTypes.string,
+  }
+
+  render () {
+    const { className, value } = this.props
+    const decimalValue = hexToDecimal(value)
+
+    return (
+      <div className={className}>
+        { decimalValue }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/hex-to-decimal/index.js b/ui/app/components/hex-to-decimal/index.js
new file mode 100644
index 000000000..6e8567ca9
--- /dev/null
+++ b/ui/app/components/hex-to-decimal/index.js
@@ -0,0 +1 @@
+export { default } from './hex-to-decimal.component'
diff --git a/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js b/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js
new file mode 100644
index 000000000..c98da9ad4
--- /dev/null
+++ b/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import HexToDecimal from '../hex-to-decimal.component'
+
+describe('HexToDecimal Component', () => {
+  it('should render a prefixed hex as a decimal with a className', () => {
+    const wrapper = shallow(<HexToDecimal
+      value="0x3039"
+      className="hex-to-decimal"
+    />)
+
+    assert.ok(wrapper.hasClass('hex-to-decimal'))
+    assert.equal(wrapper.text(), '12345')
+  })
+
+  it('should render an unprefixed hex as a decimal with a className', () => {
+    const wrapper = shallow(<HexToDecimal
+      value="1A85"
+      className="hex-to-decimal"
+    />)
+
+    assert.ok(wrapper.hasClass('hex-to-decimal'))
+    assert.equal(wrapper.text(), '6789')
+  })
+})
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 076e65b81..7bd921892 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -56,6 +56,7 @@ IdenticonComponent.prototype.render = function () {
     })
   } else {
     return h('img.balance-icon', {
+      className,
       src: './images/eth_logo.svg',
       style: {
         ...style,
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index cb4065fd9..21b65bf55 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -2,14 +2,20 @@
 
 @import './button-group/index';
 
+@import './card/index';
+
 @import './confirm-page-container/index';
 
+@import './error-message/index';
+
 @import './export-text-container/index';
 
 @import './info-box/index';
 
 @import './menu-bar/index';
 
+@import './modal/index';
+
 @import './modals/index';
 
 @import './network-display/index';
@@ -24,6 +30,10 @@
 
 @import './tabs/index';
 
+@import './transaction-activity-log/index';
+
+@import './transaction-breakdown/index';
+
 @import './transaction-view/index';
 
 @import './transaction-view-balance/index';
@@ -32,6 +42,8 @@
 
 @import './transaction-list-item/index';
 
+@import './transaction-list-item-details/index';
+
 @import './transaction-status/index';
 
 @import './app-header/index';
diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js
index 59c6842ef..eec5e3740 100644
--- a/ui/app/components/input-number.js
+++ b/ui/app/components/input-number.js
@@ -66,13 +66,16 @@ InputNumber.prototype.render = function () {
     }),
     h('span.gas-tooltip-input-detail', {}, [unitLabel]),
     h('div.gas-tooltip-input-arrows', {}, [
-      h('i.fa.fa-angle-up', {
+      h('div.gas-tooltip-input-arrow-wrapper', {
         onClick: () => this.setValue(addCurrencies(value, step, { toNumericBase: 'dec' })),
-      }),
-      h('i.fa.fa-angle-down', {
-        style: { cursor: 'pointer' },
+      }, [
+        h('i.fa.fa-angle-up'),
+      ]),
+      h('div.gas-tooltip-input-arrow-wrapper', {
         onClick: () => this.setValue(subtractCurrencies(value, step, { toNumericBase: 'dec' })),
-      }),
+      }, [
+        h('i.fa.fa-angle-down'),
+      ]),
     ]),
   ])
 }
diff --git a/ui/app/components/menu-bar/menu-bar.component.js b/ui/app/components/menu-bar/menu-bar.component.js
index eee9feebb..7460e8dd5 100644
--- a/ui/app/components/menu-bar/menu-bar.component.js
+++ b/ui/app/components/menu-bar/menu-bar.component.js
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Tooltip from '../tooltip'
 import SelectedAccount from '../selected-account'
+import AccountDetailsDropdown from '../dropdowns/account-details-dropdown.js'
 
 export default class MenuBar extends PureComponent {
   static contextTypes = {
@@ -15,9 +16,12 @@ export default class MenuBar extends PureComponent {
     showSidebar: PropTypes.func,
   }
 
+  state = { accountDetailsMenuOpen: false }
+
   render () {
     const { t } = this.context
     const { isMascara, sidebarOpen, hideSidebar, showSidebar } = this.props
+    const { accountDetailsMenuOpen } = this.state
 
     return (
       <div className="menu-bar">
@@ -34,18 +38,25 @@ export default class MenuBar extends PureComponent {
         {
           !isMascara && (
             <Tooltip
-              title={t('openInTab')}
+              title={t('accountOptions')}
               position="bottom"
             >
               <div
-                className="menu-bar__open-in-browser"
-                onClick={() => global.platform.openExtensionInBrowser()}
+                className="fa fa-ellipsis-h fa-lg menu-bar__open-in-browser"
+                onClick={() => this.setState({ accountDetailsMenuOpen: true })}
               >
-                <img src="images/popout.svg" />
               </div>
             </Tooltip>
           )
         }
+        {
+          accountDetailsMenuOpen && (
+            <AccountDetailsDropdown
+              className="menu-bar__account-details-dropdown" 
+              onClose={() => this.setState({ accountDetailsMenuOpen: false })}
+            />
+          )
+        }
       </div>
     )
   }
diff --git a/ui/app/components/modal/index.js b/ui/app/components/modal/index.js
new file mode 100644
index 000000000..58309abbe
--- /dev/null
+++ b/ui/app/components/modal/index.js
@@ -0,0 +1,2 @@
+export { default } from './modal.component'
+export { default as ModalContent } from './modal-content'
diff --git a/ui/app/components/modal/index.scss b/ui/app/components/modal/index.scss
new file mode 100644
index 000000000..2beb14633
--- /dev/null
+++ b/ui/app/components/modal/index.scss
@@ -0,0 +1,62 @@
+@import './modal-content/index';
+
+.modal-container {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-flow: column;
+  border-radius: 8px;
+
+  @media screen and (max-width: 575px) {
+    max-height: 450px;
+  }
+
+  &__content {
+    overflow-y: auto;
+    flex: 1;
+    padding: 16px 32px;
+
+    @media screen and (max-width: 575px) {
+      justify-content: center;
+      padding: 28px 20px;
+    }
+  }
+
+  &__header {
+    position: relative;
+    display: flex;
+    padding: 12px;
+    justify-content: center;
+    border-bottom: 1px solid #d2d8dd;
+    flex: 0 0 auto;
+  }
+
+  &__header-close::after {
+    content: '\00D7';
+    font-size: 40px;
+    color: $dusty-gray;
+    position: absolute;
+    top: -5px;
+    right: 10px;
+    cursor: pointer;
+  }
+
+  &__footer {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    border-top: 1px solid #d2d8dd;
+    padding: 16px;
+    flex: 0 0 auto;
+
+    &-button {
+      min-width: 0;
+      margin-right: 16px;
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+}
diff --git a/ui/app/components/modal/modal-content/index.js b/ui/app/components/modal/modal-content/index.js
new file mode 100644
index 000000000..733cfb3b8
--- /dev/null
+++ b/ui/app/components/modal/modal-content/index.js
@@ -0,0 +1 @@
+export { default } from './modal-content.component'
diff --git a/ui/app/components/modal/modal-content/index.scss b/ui/app/components/modal/modal-content/index.scss
new file mode 100644
index 000000000..560505b84
--- /dev/null
+++ b/ui/app/components/modal/modal-content/index.scss
@@ -0,0 +1,19 @@
+.modal-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    padding: 16px 0;
+    text-align: center;
+  }
+
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+  }
+}
diff --git a/ui/app/components/modal/modal-content/modal-content.component.js b/ui/app/components/modal/modal-content/modal-content.component.js
new file mode 100644
index 000000000..ecec0ee5b
--- /dev/null
+++ b/ui/app/components/modal/modal-content/modal-content.component.js
@@ -0,0 +1,32 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class ModalContent extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+  }
+
+  render () {
+    const { title, description } = this.props
+
+    return (
+      <div className="modal-content">
+        {
+          title && (
+            <div className="modal-content__title">
+              { title }
+            </div>
+          )
+        }
+        {
+          description && (
+            <div className="modal-content__description">
+              { description }
+            </div>
+          )
+        }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/modal/modal-content/tests/modal-content.component.test.js b/ui/app/components/modal/modal-content/tests/modal-content.component.test.js
new file mode 100644
index 000000000..17af09f45
--- /dev/null
+++ b/ui/app/components/modal/modal-content/tests/modal-content.component.test.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import ModalContent from '../modal-content.component'
+
+describe('ModalContent Component', () => {
+  it('should render a title', () => {
+    const wrapper = shallow(
+      <ModalContent
+        title="Modal Title"
+      />
+    )
+
+    assert.equal(wrapper.find('.modal-content__title').length, 1)
+    assert.equal(wrapper.find('.modal-content__title').text(), 'Modal Title')
+    assert.equal(wrapper.find('.modal-content__description').length, 0)
+  })
+
+  it('should render a description', () => {
+    const wrapper = shallow(
+      <ModalContent
+        description="Modal Description"
+      />
+    )
+
+    assert.equal(wrapper.find('.modal-content__title').length, 0)
+    assert.equal(wrapper.find('.modal-content__description').length, 1)
+    assert.equal(wrapper.find('.modal-content__description').text(), 'Modal Description')
+  })
+
+  it('should render both a title and a description', () => {
+    const wrapper = shallow(
+      <ModalContent
+        title="Modal Title"
+        description="Modal Description"
+      />
+    )
+
+    assert.equal(wrapper.find('.modal-content__title').length, 1)
+    assert.equal(wrapper.find('.modal-content__title').text(), 'Modal Title')
+    assert.equal(wrapper.find('.modal-content__description').length, 1)
+    assert.equal(wrapper.find('.modal-content__description').text(), 'Modal Description')
+  })
+})
diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js
new file mode 100644
index 000000000..2a75b559b
--- /dev/null
+++ b/ui/app/components/modal/modal.component.js
@@ -0,0 +1,80 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../button'
+
+export default class Modal extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node,
+    // Header text
+    headerText: PropTypes.string,
+    onClose: PropTypes.func,
+    // Submit button (right button)
+    onSubmit: PropTypes.func,
+    submitType: PropTypes.string,
+    submitText: PropTypes.string,
+    // Cancel button (left button)
+    onCancel: PropTypes.func,
+    cancelType: PropTypes.string,
+    cancelText: PropTypes.string,
+  }
+
+  static defaultProps = {
+    submitType: 'primary',
+    cancelType: 'default',
+  }
+
+  render () {
+    const {
+      children,
+      headerText,
+      onClose,
+      onSubmit,
+      submitType,
+      submitText,
+      onCancel,
+      cancelType,
+      cancelText,
+    } = this.props
+
+    return (
+      <div className="modal-container">
+        {
+          headerText && (
+            <div className="modal-container__header">
+              <div className="modal-container__header-text">
+                { headerText }
+              </div>
+              <div
+                className="modal-container__header-close"
+                onClick={onClose}
+              />
+            </div>
+          )
+        }
+        <div className="modal-container__content">
+          { children }
+        </div>
+        <div className="modal-container__footer">
+          {
+            onCancel && (
+              <Button
+                type={cancelType}
+                onClick={onCancel}
+                className="modal-container__footer-button"
+              >
+                { cancelText }
+              </Button>
+            )
+          }
+          <Button
+            type={submitType}
+            onClick={onSubmit}
+            className="modal-container__footer-button"
+          >
+            { submitText }
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/modal/tests/modal.component.test.js b/ui/app/components/modal/tests/modal.component.test.js
new file mode 100644
index 000000000..8cce1a808
--- /dev/null
+++ b/ui/app/components/modal/tests/modal.component.test.js
@@ -0,0 +1,103 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import Modal from '../modal.component'
+import Button from '../../button'
+
+describe('Modal Component', () => {
+  it('should render a modal with a submit button', () => {
+    const wrapper = shallow(<Modal />)
+
+    assert.equal(wrapper.find('.modal-container').length, 1)
+    const buttons = wrapper.find(Button)
+    assert.equal(buttons.length, 1)
+    assert.equal(buttons.at(0).props().type, 'primary')
+  })
+
+  it('should render a modal with a cancel and a submit button', () => {
+    const handleCancel = sinon.spy()
+    const handleSubmit = sinon.spy()
+    const wrapper = shallow(
+      <Modal
+        onCancel={handleCancel}
+        cancelText="Cancel"
+        onSubmit={handleSubmit}
+        submitText="Submit"
+      />
+    )
+
+    const buttons = wrapper.find(Button)
+    assert.equal(buttons.length, 2)
+    const cancelButton = buttons.at(0)
+    const submitButton = buttons.at(1)
+
+    assert.equal(cancelButton.props().type, 'default')
+    assert.equal(cancelButton.props().children, 'Cancel')
+    assert.equal(handleCancel.callCount, 0)
+    cancelButton.simulate('click')
+    assert.equal(handleCancel.callCount, 1)
+
+    assert.equal(submitButton.props().type, 'primary')
+    assert.equal(submitButton.props().children, 'Submit')
+    assert.equal(handleSubmit.callCount, 0)
+    submitButton.simulate('click')
+    assert.equal(handleSubmit.callCount, 1)
+  })
+
+  it('should render a modal with different button types', () => {
+    const wrapper = shallow(
+      <Modal
+        onCancel={() => {}}
+        cancelText="Cancel"
+        cancelType="secondary"
+        onSubmit={() => {}}
+        submitText="Submit"
+        submitType="confirm"
+      />
+    )
+
+    const buttons = wrapper.find(Button)
+    assert.equal(buttons.length, 2)
+    assert.equal(buttons.at(0).props().type, 'secondary')
+    assert.equal(buttons.at(1).props().type, 'confirm')
+  })
+
+  it('should render a modal with children', () => {
+    const wrapper = shallow(
+      <Modal
+        onCancel={() => {}}
+        cancelText="Cancel"
+        onSubmit={() => {}}
+        submitText="Submit"
+      >
+        <div className="test-child" />
+      </Modal>
+    )
+
+    assert.ok(wrapper.find('.test-class'))
+  })
+
+  it('should render a modal with a header', () => {
+    const handleCancel = sinon.spy()
+    const handleSubmit = sinon.spy()
+    const wrapper = shallow(
+      <Modal
+        onCancel={handleCancel}
+        cancelText="Cancel"
+        onSubmit={handleSubmit}
+        submitText="Submit"
+        headerText="My Header"
+        onClose={handleCancel}
+      />
+    )
+
+    assert.ok(wrapper.find('.modal-container__header'))
+    assert.equal(wrapper.find('.modal-container__header-text').text(), 'My Header')
+    assert.equal(handleCancel.callCount, 0)
+    assert.equal(handleSubmit.callCount, 0)
+    wrapper.find('.modal-container__header-close').simulate('click')
+    assert.equal(handleCancel.callCount, 1)
+    assert.equal(handleSubmit.callCount, 0)
+  })
+})
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 0bbabf38d..d22230e32 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -10,6 +10,8 @@ const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
 const EditableLabel = require('../editable-label')
 
+import Button from '../button'
+
 function mapStateToProps (state) {
   return {
     network: state.metamask.network,
@@ -81,12 +83,17 @@ AccountDetailsModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('button.btn-primary.account-modal__button', {
+      h(Button, {
+        type: 'primary',
+        className: 'account-modal__button',
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, this.context.t('etherscanView')),
 
       // Holding on redesign for Export Private Key functionality
-      exportPrivateKeyFeatureEnabled ? h('button.btn-primary.account-modal__button', {
+
+      exportPrivateKeyFeatureEnabled ? h(Button, {
+        type: 'primary',
+        className: 'account-modal__button',
         onClick: () => showExportPrivateKeyModal(),
       }, this.context.t('exportPrivateKey')) : null,
 
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
new file mode 100644
index 000000000..b082db1d0
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.js
@@ -0,0 +1,29 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import CurrencyDisplay from '../../../currency-display'
+import { ETH } from '../../../../constants/common'
+
+export default class CancelTransaction extends PureComponent {
+  static propTypes = {
+    value: PropTypes.string,
+  }
+
+  render () {
+    const { value } = this.props
+
+    return (
+      <div className="cancel-transaction-gas-fee">
+        <CurrencyDisplay
+          className="cancel-transaction-gas-fee__eth"
+          currency={ETH}
+          value={value}
+          numberOfDecimals={6}
+        />
+        <CurrencyDisplay
+          className="cancel-transaction-gas-fee__fiat"
+          value={value}
+        />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
new file mode 100644
index 000000000..1a9ae2e07
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.js
@@ -0,0 +1 @@
+export { default } from './cancel-transaction-gas-fee.component'
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
new file mode 100644
index 000000000..ce81dd448
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/index.scss
@@ -0,0 +1,17 @@
+.cancel-transaction-gas-fee {
+  background: #F1F4F9;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px;
+
+  &__eth {
+    font-size: 1.5rem;
+    font-weight: 500;
+  }
+
+  &__fiat {
+    font-size: .75rem;
+  }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
new file mode 100644
index 000000000..994c2a577
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction-gas-fee/tests/cancel-transaction-gas-fee.component.test.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import CancelTransactionGasFee from '../cancel-transaction-gas-fee.component'
+import CurrencyDisplay from '../../../../currency-display'
+
+describe('CancelTransactionGasFee Component', () => {
+  it('should render', () => {
+    const wrapper = shallow(
+      <CancelTransactionGasFee
+        value="0x3b9aca00"
+      />
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find(CurrencyDisplay).length, 2)
+    const ethDisplay = wrapper.find(CurrencyDisplay).at(0)
+    const fiatDisplay = wrapper.find(CurrencyDisplay).at(1)
+
+    assert.equal(ethDisplay.props().value, '0x3b9aca00')
+    assert.equal(ethDisplay.props().currency, 'ETH')
+    assert.equal(ethDisplay.props().className, 'cancel-transaction-gas-fee__eth')
+
+    assert.equal(fiatDisplay.props().value, '0x3b9aca00')
+    assert.equal(fiatDisplay.props().className, 'cancel-transaction-gas-fee__fiat')
+  })
+})
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
new file mode 100644
index 000000000..8b00cb9b9
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.component.js
@@ -0,0 +1,68 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Modal from '../../modal'
+import CancelTransactionGasFee from './cancel-transaction-gas-fee'
+import { SUBMITTED_STATUS } from '../../../constants/transactions'
+
+export default class CancelTransaction extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    createCancelTransaction: PropTypes.func,
+    hideModal: PropTypes.func,
+    showTransactionConfirmedModal: PropTypes.func,
+    transactionStatus: PropTypes.string,
+    newGasFee: PropTypes.string,
+  }
+
+  componentDidUpdate () {
+    const { transactionStatus, showTransactionConfirmedModal } = this.props
+
+    if (transactionStatus !== SUBMITTED_STATUS) {
+      showTransactionConfirmedModal()
+      return
+    }
+  }
+
+  handleSubmit = async () => {
+    const { createCancelTransaction, hideModal } = this.props
+
+    await createCancelTransaction()
+    hideModal()
+  }
+
+  handleCancel = () => {
+    this.props.hideModal()
+  }
+
+  render () {
+    const { t } = this.context
+    const { newGasFee } = this.props
+
+    return (
+      <Modal
+        headerText={t('attemptToCancel')}
+        onClose={this.handleCancel}
+        onSubmit={this.handleSubmit}
+        onCancel={this.handleCancel}
+        submitText={t('yesLetsTry')}
+        cancelText={t('nevermind')}
+        submitType="secondary"
+      >
+        <div>
+          <div className="cancel-transaction__title">
+            { t('cancellationGasFee') }
+          </div>
+          <div className="cancel-transaction__cancel-transaction-gas-fee-container">
+            <CancelTransactionGasFee value={newGasFee} />
+          </div>
+          <div className="cancel-transaction__description">
+            { t('attemptToCancelDescription') }
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
diff --git a/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
new file mode 100644
index 000000000..eede8b1ee
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/cancel-transaction.container.js
@@ -0,0 +1,62 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import ethUtil from 'ethereumjs-util'
+import { multiplyCurrencies } from '../../../conversion-util'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+import CancelTransaction from './cancel-transaction.component'
+import { showModal, createCancelTransaction } from '../../../actions'
+import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
+
+const mapStateToProps = (state, ownProps) => {
+  const { metamask } = state
+  const { transactionId, originalGasPrice } = ownProps
+  const { selectedAddressTxList } = metamask
+  const transaction = selectedAddressTxList.find(({ id }) => id === transactionId)
+  const transactionStatus = transaction ? transaction.status : ''
+
+  const defaultNewGasPrice = ethUtil.addHexPrefix(
+    multiplyCurrencies(originalGasPrice, 1.1, {
+      toNumericBase: 'hex',
+      multiplicandBase: 16,
+      multiplierBase: 10,
+    })
+  )
+
+  const newGasFee = getHexGasTotal({ gasPrice: defaultNewGasPrice, gasLimit: '0x5208' })
+
+  return {
+    transactionId,
+    transactionStatus,
+    originalGasPrice,
+    newGasFee,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    createCancelTransaction: txId => dispatch(createCancelTransaction(txId)),
+    showTransactionConfirmedModal: () => dispatch(showModal({ name: 'TRANSACTION_CONFIRMED' })),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { transactionId, ...restStateProps } = stateProps
+  const {
+    createCancelTransaction: dispatchCreateCancelTransaction,
+    ...restDispatchProps
+  } = dispatchProps
+
+  return {
+    ...restStateProps,
+    ...restDispatchProps,
+    ...ownProps,
+    createCancelTransaction: newGasPrice => {
+      return dispatchCreateCancelTransaction(transactionId, newGasPrice)
+    },
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+)(CancelTransaction)
diff --git a/ui/app/components/modals/cancel-transaction/index.js b/ui/app/components/modals/cancel-transaction/index.js
new file mode 100644
index 000000000..7abc871ee
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/index.js
@@ -0,0 +1 @@
+export { default } from './cancel-transaction.container'
diff --git a/ui/app/components/modals/cancel-transaction/index.scss b/ui/app/components/modals/cancel-transaction/index.scss
new file mode 100644
index 000000000..62e8e36fd
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/index.scss
@@ -0,0 +1,18 @@
+@import './cancel-transaction-gas-fee/index';
+
+.cancel-transaction {
+  &__title {
+    font-weight: 500;
+    padding-bottom: 16px;
+    text-align: center;
+  }
+
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+  }
+
+  &__cancel-transaction-gas-fee-container {
+    margin-bottom: 16px;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js
new file mode 100644
index 000000000..858fb01a8
--- /dev/null
+++ b/ui/app/components/modals/cancel-transaction/tests/cancel-transaction.component.test.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import CancelTransaction from '../cancel-transaction.component'
+import CancelTransactionGasFee from '../cancel-transaction-gas-fee'
+import Modal from '../../../modal'
+
+describe('CancelTransaction Component', () => {
+  const t = key => key
+
+  it('should render a CancelTransaction modal', () => {
+    const wrapper = shallow(
+      <CancelTransaction
+        newGasFee="0x1319718a5000"
+      />,
+      { context: { t }}
+    )
+
+    assert.ok(wrapper)
+    assert.equal(wrapper.find(Modal).length, 1)
+    assert.equal(wrapper.find(CancelTransactionGasFee).length, 1)
+    assert.equal(wrapper.find(CancelTransactionGasFee).props().value, '0x1319718a5000')
+    assert.equal(wrapper.find('.cancel-transaction__title').text(), 'cancellationGasFee')
+    assert.equal(wrapper.find('.cancel-transaction__description').text(), 'attemptToCancelDescription')
+  })
+
+  it('should pass the correct props to the Modal component', async () => {
+    const createCancelTransactionSpy = sinon.stub().callsFake(() => Promise.resolve())
+    const hideModalSpy = sinon.spy()
+
+    const wrapper = shallow(
+      <CancelTransaction
+        defaultNewGasPrice="0x3b9aca00"
+        createCancelTransaction={createCancelTransactionSpy}
+        hideModal={hideModalSpy}
+      />,
+      { context: { t }}
+    )
+
+    assert.equal(wrapper.find(Modal).length, 1)
+    const modalProps = wrapper.find(Modal).props()
+
+    assert.equal(modalProps.headerText, 'attemptToCancel')
+    assert.equal(modalProps.submitText, 'yesLetsTry')
+    assert.equal(modalProps.cancelText, 'nevermind')
+
+    assert.equal(createCancelTransactionSpy.callCount, 0)
+    assert.equal(hideModalSpy.callCount, 0)
+    await modalProps.onSubmit()
+    assert.equal(createCancelTransactionSpy.callCount, 1)
+    assert.equal(hideModalSpy.callCount, 1)
+    modalProps.onCancel()
+    assert.equal(hideModalSpy.callCount, 2)
+  })
+})
diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
index 5a9f0f289..195c55421 100644
--- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
+++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import Button from '../../button'
+import Modal from '../../modal'
 import { addressSummary } from '../../../util'
 import Identicon from '../../identicon'
 import genAccountLink from '../../../../lib/account-link'
 
-class ConfirmRemoveAccount extends Component {
+export default class ConfirmRemoveAccount extends Component {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     removeAccount: PropTypes.func.isRequired,
@@ -17,30 +17,34 @@ class ConfirmRemoveAccount extends Component {
     t: PropTypes.func,
   }
 
-  handleRemove () {
+  handleRemove = () => {
     this.props.removeAccount(this.props.identity.address)
       .then(() => this.props.hideModal())
   }
 
+  handleCancel = () => {
+    this.props.hideModal()
+  }
+
   renderSelectedAccount () {
     const { identity } = this.props
     return (
-      <div className="modal-container__account">
-        <div className="modal-container__account__identicon">
+      <div className="confirm-remove-account__account">
+        <div className="confirm-remove-account__account__identicon">
           <Identicon
-              address={identity.address}
-              diameter={32}
+            address={identity.address}
+            diameter={32}
           />
         </div>
-        <div className="modal-container__account__name">
-            <span className="modal-container__account__label">Name</span>
-            <span className="account_value">{identity.name}</span>
+        <div className="confirm-remove-account__account__name">
+          <span className="confirm-remove-account__account__label">Name</span>
+          <span className="account_value">{identity.name}</span>
         </div>
-        <div className="modal-container__account__address">
-            <span className="modal-container__account__label">Public Address</span>
-            <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span>
+        <div className="confirm-remove-account__account__address">
+          <span className="confirm-remove-account__account__label">Public Address</span>
+          <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span>
         </div>
-        <div className="modal-container__account__link">
+        <div className="confirm-remove-account__account__link">
           <a
             className=""
             href={genAccountLink(identity.address, this.props.network)}
@@ -58,36 +62,28 @@ class ConfirmRemoveAccount extends Component {
     const { t } = this.context
 
     return (
-      <div className="modal-container">
-        <div className="modal-container__content">
-          <div className="modal-container__title">
-            { `${t('removeAccount')}` }?
-          </div>
-            { this.renderSelectedAccount() }
-          <div className="modal-container__description">
+      <Modal
+        headerText={`${t('removeAccount')}?`}
+        onClose={this.handleCancel}
+        onSubmit={this.handleRemove}
+        onCancel={this.handleCancel}
+        submitText={t('remove')}
+        cancelText={t('nevermind')}
+        submitType="secondary"
+      >
+        <div>
+          { this.renderSelectedAccount() }
+          <div className="confirm-remove-account__description">
             { t('removeAccountDescription') }
-            <a className="modal-container__link" rel="noopener noreferrer" target="_blank" href="https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI-">{ t('learnMore') }</a>
+            <a
+              className="confirm-remove-account__link"
+              rel="noopener noreferrer"
+              target="_blank" href="https://metamask.zendesk.com/hc/en-us/articles/360015289932">
+              { t('learnMore') }
+            </a>
           </div>
         </div>
-        <div className="modal-container__footer">
-          <Button
-            type="default"
-            className="modal-container__footer-button"
-            onClick={() => this.props.hideModal()}
-          >
-            { t('nevermind') }
-          </Button>
-          <Button
-            type="secondary"
-            className="modal-container__footer-button"
-            onClick={() => this.handleRemove()}
-          >
-            { t('remove') }
-          </Button>
-        </div>
-      </div>
+      </Modal>
     )
   }
 }
-
-export default ConfirmRemoveAccount
diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
index 4b194c995..45c6654ab 100644
--- a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
+++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js
@@ -1,20 +1,22 @@
 import { connect } from 'react-redux'
+import { compose } from 'recompose'
 import ConfirmRemoveAccount from './confirm-remove-account.component'
-
-const { hideModal, removeAccount } = require('../../../actions')
+import withModalProps from '../../../higher-order-components/with-modal-props'
+import { removeAccount } from '../../../actions'
 
 const mapStateToProps = state => {
   return {
-    identity: state.appState.modal.modalState.props.identity,
     network: state.metamask.network,
   }
 }
 
 const mapDispatchToProps = dispatch => {
   return {
-    hideModal: () => dispatch(hideModal()),
     removeAccount: (address) => dispatch(removeAccount(address)),
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ConfirmRemoveAccount)
+export default compose(
+  withModalProps,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmRemoveAccount)
diff --git a/ui/app/components/modals/confirm-remove-account/index.js b/ui/app/components/modals/confirm-remove-account/index.js
index 9763fbe05..ecb5f7790 100644
--- a/ui/app/components/modals/confirm-remove-account/index.js
+++ b/ui/app/components/modals/confirm-remove-account/index.js
@@ -1,2 +1 @@
-import ConfirmRemoveAccount from './confirm-remove-account.container'
-module.exports = ConfirmRemoveAccount
+export { default } from './confirm-remove-account.container'
diff --git a/ui/app/components/modals/confirm-remove-account/index.scss b/ui/app/components/modals/confirm-remove-account/index.scss
new file mode 100644
index 000000000..3be3a1967
--- /dev/null
+++ b/ui/app/components/modals/confirm-remove-account/index.scss
@@ -0,0 +1,58 @@
+.confirm-remove-account {
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+  }
+
+  &__account {
+    border: 1px solid #b7b7b7;
+    border-radius: 4px;
+    padding: 10px;
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    width: 100%;
+
+    &__identicon {
+      margin-right: 10px;
+    }
+
+    &__name,
+    &__address {
+      margin-right: 10px;
+      font-size: 14px;
+    }
+
+    &__name {
+      width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &__label {
+      font-size: 11px;
+      display: block;
+      color: #9b9b9b;
+    }
+
+    &__link {
+      margin-top: 14px;
+
+      img {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    @media screen and (max-width: 575px) {
+      &__name {
+        width: 90px;
+      }
+    }
+  }
+
+  &__link {
+    color: #2f9ae0;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
index 14a4da62a..f1a4542ac 100644
--- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
+++ b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import Button from '../../button'
+import Modal, { ModalContent } from '../../modal'
 
-class ConfirmResetAccount extends Component {
+export default class ConfirmResetAccount extends PureComponent {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     resetAccount: PropTypes.func.isRequired,
@@ -12,7 +12,7 @@ class ConfirmResetAccount extends Component {
     t: PropTypes.func,
   }
 
-  handleReset () {
+  handleReset = () => {
     this.props.resetAccount()
       .then(() => this.props.hideModal())
   }
@@ -21,34 +21,18 @@ class ConfirmResetAccount extends Component {
     const { t } = this.context
 
     return (
-      <div className="modal-container">
-        <div className="modal-container__content">
-          <div className="modal-container__title">
-            { `${t('resetAccount')}?` }
-          </div>
-          <div className="modal-container__description">
-            { t('resetAccountDescription') }
-          </div>
-        </div>
-        <div className="modal-container__footer">
-          <Button
-            type="default"
-            className="modal-container__footer-button"
-            onClick={() => this.props.hideModal()}
-          >
-            { t('nevermind') }
-          </Button>
-          <Button
-            type="secondary"
-            className="modal-container__footer-button"
-            onClick={() => this.handleReset()}
-          >
-            { t('reset') }
-          </Button>
-        </div>
-      </div>
+      <Modal
+        onSubmit={this.handleReset}
+        onCancel={() => this.props.hideModal()}
+        submitText={t('reset')}
+        cancelText={t('nevermind')}
+        submitType="secondary"
+      >
+        <ModalContent
+          title={`${t('resetAccount')}?`}
+          description={t('resetAccountDescription')}
+        />
+      </Modal>
     )
   }
 }
-
-export default ConfirmResetAccount
diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
index 9630a5593..c8a7b8478 100644
--- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
+++ b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
@@ -1,13 +1,16 @@
 import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import withModalProps from '../../../higher-order-components/with-modal-props'
 import ConfirmResetAccount from './confirm-reset-account.component'
-
-const { hideModal, resetAccount } = require('../../../actions')
+import { resetAccount } from '../../../actions'
 
 const mapDispatchToProps = dispatch => {
   return {
-    hideModal: () => dispatch(hideModal()),
     resetAccount: () => dispatch(resetAccount()),
   }
 }
 
-export default connect(null, mapDispatchToProps)(ConfirmResetAccount)
+export default compose(
+  withModalProps,
+  connect(null, mapDispatchToProps)
+)(ConfirmResetAccount)
diff --git a/ui/app/components/modals/confirm-reset-account/index.js b/ui/app/components/modals/confirm-reset-account/index.js
index c812ffc55..ca4d9c5bf 100644
--- a/ui/app/components/modals/confirm-reset-account/index.js
+++ b/ui/app/components/modals/confirm-reset-account/index.js
@@ -1,2 +1 @@
-import ConfirmResetAccount from './confirm-reset-account.container'
-module.exports = ConfirmResetAccount
+export { default } from './confirm-reset-account.container'
diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js
index 0337c5413..3f526bd43 100644
--- a/ui/app/components/modals/customize-gas/customize-gas.component.js
+++ b/ui/app/components/modals/customize-gas/customize-gas.component.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import GasModalCard from '../../customize-gas-modal/gas-modal-card'
 import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
+import Button from '../../button'
 
 import {
   getDecimalGasLimit,
@@ -116,21 +117,23 @@ export default class CustomizeGas extends Component {
               { t('revert') }
             </div>
             <div className="customize-gas__buttons">
-              <button
-                className="btn-default customize-gas__cancel"
+              <Button
+                type="default"
+                className="customize-gas__cancel"
                 onClick={() => hideModal()}
                 style={{ marginRight: '10px' }}
               >
                 { t('cancel') }
-              </button>
-              <button
-                className="btn-primary customize-gas__save"
+              </Button>
+              <Button
+                type="primary"
+                className="customize-gas__save"
                 onClick={() => this.handleSave()}
                 style={{ marginRight: '10px' }}
                 disabled={!valid}
               >
                 { t('save') }
-              </button>
+              </Button>
             </div>
           </div>
         </div>
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 2daa7fa1d..09137d39a 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -7,6 +7,8 @@ const actions = require('../../actions')
 const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util')
 const ShapeshiftForm = require('../shapeshift-form')
 
+import Button from '../button'
+
 let DIRECT_DEPOSIT_ROW_TITLE
 let DIRECT_DEPOSIT_ROW_TEXT
 let COINBASE_ROW_TITLE
@@ -109,7 +111,10 @@ DepositEtherModal.prototype.renderRow = function ({
       ]),
 
       !hideButton && h('div.deposit-ether-modal__buy-row__button', [
-        h('button.btn-primary.btn--large.deposit-ether-modal__deposit-button', {
+        h(Button, {
+          type: 'primary',
+          className: 'deposit-ether-modal__deposit-button',
+          large: true,
           onClick: onButtonClick,
         }, [buttonLabel]),
       ]),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 60a416304..d3e3c9a56 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -11,6 +11,7 @@ const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
 const copyToClipboard = require('copy-to-clipboard')
 const { checksumAddress } = require('../../util')
+import Button from '../button'
 
 function mapStateToPropsFactory () {
   let selectedIdentity = null
@@ -97,24 +98,31 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
     })
 }
 
-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-default btn--large export-private-key__button export-private-key__button--cancel',
-      () => hideModal(),
-      'Cancel'
-    ),
+    !privateKey && h(Button, {
+      type: 'default',
+      large: true,
+      className: 'export-private-key__button export-private-key__button--cancel',
+      onClick: () => hideModal(),
+    }, this.context.t('cancel')),
 
     (privateKey
-      ? this.renderButton('btn-primary btn--large export-private-key__button', () => hideModal(), this.context.t('done'))
-      : this.renderButton('btn-primary btn--large export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm'))
+      ? (
+          h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'export-private-key__button',
+          onClick: () => hideModal(),
+        }, this.context.t('done'))
+      ) : (
+          h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'export-private-key__button',
+          onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address),
+        }, this.context.t('confirm'))
+      )
     ),
 
   ])
diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
index 0acccf172..45453a582 100644
--- a/ui/app/components/modals/index.scss
+++ b/ui/app/components/modals/index.scss
@@ -1,108 +1,9 @@
-@import './customize-gas/index';
-
-@import './qr-scanner/index';
-
-.modal-container {
-  width: 100%;
-  height: 100%;
-  background-color: #fff;
-  display: flex;
-  flex-flow: column;
-  border-radius: 8px;
-
-  &__title {
-    font-size: 1.5rem;
-    font-weight: 500;
-    padding: 16px 0;
-    text-align: center;
-  }
-
-  &__description {
-    text-align: center;
-    font-size: .875rem;
-  }
-
-  &__account {
-    border: 1px solid #b7b7b7;
-    border-radius: 4px;
-    padding: 10px;
-    display: flex;
-    margin-top: 10px;
-    margin-bottom: 20px;
-    width: 100%;
-
-    &__identicon {
-      margin-right: 10px;
-    }
-
-    &__name,
-    &__address {
-      margin-right: 10px;
-      font-size: 14px;
-    }
+@import './cancel-transaction/index';
 
-    &__name {
-      width: 100px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+@import './confirm-remove-account/index';
 
-    &__label {
-      font-size: 11px;
-      display: block;
-      color: #9b9b9b;
-    }
-
-    &__link {
-      margin-top: 14px;
-
-      img {
-        width: 15px;
-        height: 15px;
-      }
-    }
-
-    @media screen and (max-width: 575px) {
-      &__name {
-        width: 90px;
-      }
-    }
-  }
-
-  &__link {
-    color: #2f9ae0;
-  }
-
-  &__content {
-    overflow-y: auto;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 32px;
-
-    @media screen and (max-width: 575px) {
-      justify-content: center;
-      padding: 28px 20px;
-    }
-  }
-
-  &__footer {
-    display: flex;
-    flex-flow: row;
-    justify-content: center;
-    border-top: 1px solid #d2d8dd;
-    padding: 16px;
-    flex: 0 0 auto;
+@import './customize-gas/index';
 
-    &-button {
-      min-width: 0;
-      margin-right: 16px;
+@import './qr-scanner/index';
 
-      &:last-of-type {
-        margin-right: 0;
-      }
-    }
-  }
-}
+@import './transaction-confirmed/index';
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 5dda50e52..15ca9deaa 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -19,14 +19,16 @@ 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('./confirm-reset-account')
-const ConfirmRemoveAccount = require('./confirm-remove-account')
 const QRScanner = require('./qr-scanner')
-const TransactionConfirmed = require('./transaction-confirmed')
-const WelcomeBeta = require('./welcome-beta')
-const Notification = require('./notification')
 
+import ConfirmRemoveAccount from './confirm-remove-account'
+import ConfirmResetAccount from './confirm-reset-account'
+import TransactionConfirmed from './transaction-confirmed'
 import ConfirmCustomizeGasModal from './customize-gas'
+import CancelTransaction from './cancel-transaction'
+import WelcomeBeta from './welcome-beta'
+import TransactionDetails from './transaction-details'
+import RejectTransactions from './reject-transactions'
 
 const modalContainerBaseStyle = {
   transform: 'translate3d(-50%, 0, 0px)',
@@ -199,11 +201,7 @@ const MODALS = {
   },
 
   BETA_UI_NOTIFICATION_MODAL: {
-    contents: [
-      h(Notification, [
-        h(WelcomeBeta),
-      ]),
-    ],
+    contents: h(WelcomeBeta),
     mobileModalStyle: {
       ...modalContainerMobileStyle,
     },
@@ -307,9 +305,7 @@ const MODALS = {
   },
 
   CONFIRM_CUSTOMIZE_GAS: {
-    contents: [
-      h(ConfirmCustomizeGasModal),
-    ],
+    contents: h(ConfirmCustomizeGasModal),
     mobileModalStyle: {
       width: '100vw',
       height: '100vh',
@@ -332,11 +328,7 @@ const MODALS = {
 
   TRANSACTION_CONFIRMED: {
     disableBackdropClick: true,
-    contents: [
-      h(Notification, [
-        h(TransactionConfirmed),
-      ]),
-    ],
+    contents: h(TransactionConfirmed),
     mobileModalStyle: {
       ...modalContainerMobileStyle,
     },
@@ -347,6 +339,7 @@ const MODALS = {
       borderRadius: '8px',
     },
   },
+
   QR_SCANNER: {
     contents: h(QRScanner),
     mobileModalStyle: {
@@ -360,6 +353,45 @@ const MODALS = {
     },
   },
 
+  CANCEL_TRANSACTION: {
+    contents: h(CancelTransaction),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  TRANSACTION_DETAILS: {
+    contents: h(TransactionDetails),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
+  REJECT_TRANSACTIONS: {
+    contents: h(RejectTransactions),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
   DEFAULT: {
     contents: [],
     mobileModalStyle: {},
diff --git a/ui/app/components/modals/notification/index.js b/ui/app/components/modals/notification/index.js
deleted file mode 100644
index d60a3129b..000000000
--- a/ui/app/components/modals/notification/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import Notification from './notification.container'
-module.exports = Notification
diff --git a/ui/app/components/modals/notification/notification.component.js b/ui/app/components/modals/notification/notification.component.js
deleted file mode 100644
index 1af2f3ca8..000000000
--- a/ui/app/components/modals/notification/notification.component.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Button from '../../button'
-
-const Notification = (props, context) => {
-  return (
-    <div className="modal-container">
-      { props.children }
-      <div className="modal-container__footer">
-        <Button
-          type="primary"
-          onClick={() => props.onHide()}
-        >
-          { context.t('ok') }
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-Notification.propTypes = {
-  onHide: PropTypes.func.isRequired,
-  children: PropTypes.element,
-}
-
-Notification.contextTypes = {
-  t: PropTypes.func,
-}
-
-export default Notification
diff --git a/ui/app/components/modals/notification/notification.container.js b/ui/app/components/modals/notification/notification.container.js
deleted file mode 100644
index 5b98714da..000000000
--- a/ui/app/components/modals/notification/notification.container.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { connect } from 'react-redux'
-import Notification from './notification.component'
-
-const { hideModal } = require('../../../actions')
-
-const mapStateToProps = state => {
-  const { appState: { modal: { modalState: { props } } } } = state
-  const { onHide } = props
-  return {
-    onHide,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    hideModal: () => dispatch(hideModal()),
-  }
-}
-
-const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { onHide, ...otherStateProps } = stateProps
-  const { hideModal, ...otherDispatchProps } = dispatchProps
-
-  return {
-    ...otherStateProps,
-    ...otherDispatchProps,
-    ...ownProps,
-    onHide: () => {
-      hideModal()
-
-      if (onHide && typeof onHide === 'function') {
-        onHide()
-      }
-    },
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notification)
diff --git a/ui/app/components/modals/reject-transactions/index.js b/ui/app/components/modals/reject-transactions/index.js
new file mode 100644
index 000000000..fcdc372b6
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/index.js
@@ -0,0 +1 @@
+export { default } from './reject-transactions.container'
diff --git a/ui/app/components/modals/reject-transactions/index.scss b/ui/app/components/modals/reject-transactions/index.scss
new file mode 100644
index 000000000..753466883
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/index.scss
@@ -0,0 +1,6 @@
+.reject-transactions {
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+  }
+}
diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.component.js b/ui/app/components/modals/reject-transactions/reject-transactions.component.js
new file mode 100644
index 000000000..60b259bdc
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/reject-transactions.component.js
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
+import Modal from '../../modal'
+
+export default class RejectTransactionsModal extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func.isRequired,
+  }
+
+  static propTypes = {
+    onSubmit: PropTypes.func.isRequired,
+    hideModal: PropTypes.func.isRequired,
+    unapprovedTxCount: PropTypes.number.isRequired,
+  }
+
+  onSubmit = async () => {
+    const { onSubmit, hideModal } = this.props
+
+    await onSubmit()
+    hideModal()
+  }
+
+  render () {
+    const { t } = this.context
+    const { hideModal, unapprovedTxCount } = this.props
+
+    return (
+      <Modal
+        headerText={t('rejectTxsN', [unapprovedTxCount])}
+        onClose={hideModal}
+        onSubmit={this.onSubmit}
+        onCancel={hideModal}
+        submitText={t('rejectAll')}
+        cancelText={t('cancel')}
+        submitType="secondary"
+      >
+        <div>
+          <div className="reject-transactions__description">
+            { t('rejectTxsDescription', [unapprovedTxCount]) }
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
diff --git a/ui/app/components/modals/reject-transactions/reject-transactions.container.js b/ui/app/components/modals/reject-transactions/reject-transactions.container.js
new file mode 100644
index 000000000..81e98d3ff
--- /dev/null
+++ b/ui/app/components/modals/reject-transactions/reject-transactions.container.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import RejectTransactionsModal from './reject-transactions.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+const mapStateToProps = (state, ownProps) => {
+  const { unapprovedTxCount } = ownProps
+
+  return {
+    unapprovedTxCount,
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(mapStateToProps),
+)(RejectTransactionsModal)
diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/modals/transaction-confirmed/index.js
index cee8da7f8..7776b969e 100644
--- a/ui/app/components/modals/transaction-confirmed/index.js
+++ b/ui/app/components/modals/transaction-confirmed/index.js
@@ -1,2 +1 @@
-import TransactionConfirmed from './transaction-confirmed.component'
-module.exports = TransactionConfirmed
+export { default } from './transaction-confirmed.container'
diff --git a/ui/app/components/modals/transaction-confirmed/index.scss b/ui/app/components/modals/transaction-confirmed/index.scss
new file mode 100644
index 000000000..c97371fb6
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/index.scss
@@ -0,0 +1,22 @@
+.transaction-confirmed {
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    padding: 16px 0;
+    text-align: center;
+  }
+
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+  }
+
+  &__content {
+    overflow-y: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 16px;
+  }
+}
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
index c1c8a2976..0a98eb1a1 100644
--- a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
@@ -1,24 +1,45 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import Modal from '../../modal'
 
-const TransactionConfirmed = (props, context) => {
-  const { t } = context
+export default class TransactionConfirmed extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
 
-  return (
-    <div className="modal-container__content">
-      <img src="images/check-icon.svg" />
-      <div className="modal-container__title">
-        { `${t('confirmed')}!` }
-      </div>
-      <div className="modal-container__description">
-        { t('initialTransactionConfirmed') }
-      </div>
-    </div>
-  )
-}
+  static propTypes = {
+    onSubmit: PropTypes.func,
+    hideModal: PropTypes.func,
+  }
 
-TransactionConfirmed.contextTypes = {
-  t: PropTypes.func,
-}
+  handleSubmit = () => {
+    const { hideModal, onSubmit } = this.props
+
+    hideModal()
 
-export default TransactionConfirmed
+    if (onSubmit && typeof onSubmit === 'function') {
+      onSubmit()
+    }
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <Modal
+        onSubmit={this.handleSubmit}
+        submitText={t('ok')}
+      >
+        <div className="transaction-confirmed__content">
+          <img src="images/check-icon.svg" />
+          <div className="transaction-confirmed__title">
+            { `${t('confirmed')}!` }
+          </div>
+          <div className="transaction-confirmed__description">
+            { t('initialTransactionConfirmed') }
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
new file mode 100644
index 000000000..d4e39681a
--- /dev/null
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
@@ -0,0 +1,4 @@
+import TransactionConfirmed from './transaction-confirmed.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+export default withModalProps(TransactionConfirmed)
diff --git a/ui/app/components/modals/transaction-details/index.js b/ui/app/components/modals/transaction-details/index.js
new file mode 100644
index 000000000..1fc42c662
--- /dev/null
+++ b/ui/app/components/modals/transaction-details/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-details.container'
diff --git a/ui/app/components/modals/transaction-details/transaction-details.component.js b/ui/app/components/modals/transaction-details/transaction-details.component.js
new file mode 100644
index 000000000..f2fec3409
--- /dev/null
+++ b/ui/app/components/modals/transaction-details/transaction-details.component.js
@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Modal from '../../modal'
+import TransactionListItemDetails from '../../transaction-list-item-details'
+import { hexToDecimal } from '../../../helpers/conversions.util'
+
+export default class TransactionConfirmed extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    hideModal: PropTypes.func,
+    transaction: PropTypes.object,
+    onRetry: PropTypes.func,
+    showRetry: PropTypes.bool,
+    onCancel: PropTypes.func,
+    showCancel: PropTypes.bool,
+  }
+
+  handleSubmit = () => {
+    this.props.hideModal()
+  }
+
+  handleRetry = () => {
+    const { onRetry, hideModal } = this.props
+
+    Promise.resolve(onRetry()).then(() => hideModal())
+  }
+
+  render () {
+    const { t } = this.context
+    const { transaction, showRetry, onCancel, showCancel } = this.props
+    const { txParams: { nonce } = {} } = transaction
+    const decimalNonce = nonce && hexToDecimal(nonce)
+
+    return (
+      <Modal
+        onSubmit={this.handleSubmit}
+        onClose={this.handleSubmit}
+        submitText={t('ok')}
+        headerText={t('transactionWithNonce', [`#${decimalNonce}`])}
+      >
+        <TransactionListItemDetails
+          transaction={transaction}
+          onRetry={this.handleRetry}
+          showRetry={showRetry}
+          onCancel={() => onCancel()}
+          showCancel={showCancel}
+        />
+      </Modal>
+    )
+  }
+}
diff --git a/ui/app/components/modals/transaction-details/transaction-details.container.js b/ui/app/components/modals/transaction-details/transaction-details.container.js
new file mode 100644
index 000000000..f212920bb
--- /dev/null
+++ b/ui/app/components/modals/transaction-details/transaction-details.container.js
@@ -0,0 +1,4 @@
+import TransactionDetails from './transaction-details.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+export default withModalProps(TransactionDetails)
diff --git a/ui/app/components/modals/welcome-beta/index.js b/ui/app/components/modals/welcome-beta/index.js
index 515c9cdaf..49e45b9d7 100644
--- a/ui/app/components/modals/welcome-beta/index.js
+++ b/ui/app/components/modals/welcome-beta/index.js
@@ -1,2 +1 @@
-import WelcomeBeta from './welcome-beta.component'
-module.exports = WelcomeBeta
+export { default } from './welcome-beta.container'
diff --git a/ui/app/components/modals/welcome-beta/welcome-beta.component.js b/ui/app/components/modals/welcome-beta/welcome-beta.component.js
index 61571723a..ef1799164 100644
--- a/ui/app/components/modals/welcome-beta/welcome-beta.component.js
+++ b/ui/app/components/modals/welcome-beta/welcome-beta.component.js
@@ -1,18 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Modal, { ModalContent } from '../../modal'
 
 const TransactionConfirmed = (props, context) => {
   const { t } = context
+  const { hideModal } = props
 
   return (
-    <div className="modal-container__content">
-      <div className="modal-container__title">
-        { `${t('uiWelcome')}` }
-      </div>
-      <div className="modal-container__description">
-        { t('uiWelcomeMessage') }
-      </div>
-    </div>
+    <Modal
+      onSubmit={() => hideModal()}
+      submitText={t('ok')}
+    >
+      <ModalContent
+        title={t('uiWelcome')}
+        description={t('uiWelcomeMessage')}
+      />
+    </Modal>
   )
 }
 
@@ -20,4 +23,8 @@ TransactionConfirmed.contextTypes = {
   t: PropTypes.func,
 }
 
+TransactionConfirmed.propTypes = {
+  hideModal: PropTypes.func,
+}
+
 export default TransactionConfirmed
diff --git a/ui/app/components/modals/welcome-beta/welcome-beta.container.js b/ui/app/components/modals/welcome-beta/welcome-beta.container.js
new file mode 100644
index 000000000..c5123ad47
--- /dev/null
+++ b/ui/app/components/modals/welcome-beta/welcome-beta.container.js
@@ -0,0 +1,4 @@
+import WelcomeBeta from './welcome-beta.component'
+import withModalProps from '../../../higher-order-components/with-modal-props'
+
+export default withModalProps(WelcomeBeta)
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 14cdbacd3..6742e3082 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -43,16 +43,39 @@
 
   &__footer {
     display: flex;
-    flex-flow: row;
+    flex-flow: column;
     justify-content: center;
     border-top: 1px solid $geyser;
-    padding: 16px;
     flex: 0 0 auto;
 
     .btn-default,
     .btn-confirm {
       font-size: 1rem;
     }
+
+    header {
+      display: flex;
+      flex-flow: row;
+      justify-content: center;
+      padding: 16px;
+      flex: 0 0 auto;
+    }
+
+    footer {
+      display: flex;
+      flex-flow: row;
+      justify-content: space-around;
+      padding: 0 16px 16px;
+      flex: 0 0 auto;
+
+      a, a:hover {
+        text-decoration: none;
+        cursor: pointer;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        color: #2f9ae0;
+      }
+    }
   }
 
   &__footer-button {
@@ -182,5 +205,7 @@
     max-height: 82vh;
     min-height: 570px;
     flex: 0 0 auto;
+    margin-right: auto;
+    margin-left: auto;
   }
 }
diff --git a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
index 3d15df294..773fe1f56 100644
--- a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
@@ -5,6 +5,7 @@ import Button from '../../button'
 export default class PageContainerFooter extends Component {
 
   static propTypes = {
+    children: PropTypes.node,
     onCancel: PropTypes.func,
     cancelText: PropTypes.string,
     onSubmit: PropTypes.func,
@@ -19,6 +20,7 @@ export default class PageContainerFooter extends Component {
 
   render () {
     const {
+      children,
       onCancel,
       cancelText,
       onSubmit,
@@ -30,24 +32,32 @@ export default class PageContainerFooter extends Component {
     return (
       <div className="page-container__footer">
 
-        <Button
-          type="default"
-          large
-          className="page-container__footer-button"
-          onClick={e => onCancel(e)}
-        >
-          { cancelText || this.context.t('cancel') }
-        </Button>
-
-        <Button
-          type={submitButtonType || 'primary'}
-          large
-          className="page-container__footer-button"
-          disabled={disabled}
-          onClick={e => onSubmit(e)}
-        >
-          { submitText || this.context.t('next') }
-        </Button>
+        <header>
+          <Button
+            type="default"
+            large
+            className="page-container__footer-button"
+            onClick={e => onCancel(e)}
+          >
+            { cancelText || this.context.t('cancel') }
+          </Button>
+
+          <Button
+            type={submitButtonType || 'primary'}
+            large
+            className="page-container__footer-button"
+            disabled={disabled}
+            onClick={e => onSubmit(e)}
+          >
+            { submitText || this.context.t('next') }
+          </Button>
+        </header>
+
+        {children && (
+          <footer>
+            {children}
+          </footer>
+        )}
 
       </div>
     )
diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
index e69de29bb..64efabab0 100644
--- a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
+++ b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
@@ -0,0 +1,79 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import Button from '../../../button'
+import PageFooter from '../page-container-footer.component'
+
+describe('Page Footer', () => {
+  let wrapper
+  const onCancel = sinon.spy()
+  const onSubmit = sinon.spy()
+
+  beforeEach(() => {
+    wrapper = shallow(<PageFooter
+      onCancel = {onCancel}
+      onSubmit = {onSubmit}
+      cancelText = {'Cancel'}
+      submitText = {'Submit'}
+      disabled = {false}
+      submitButtonType = {'Test Type'}
+    />)
+  })
+
+  it('renders page container footer', () => {
+    assert.equal(wrapper.find('.page-container__footer').length, 1)
+  })
+
+  it('should render a footer inside page-container__footer when given children', () => {
+    const wrapper = shallow(
+      <PageFooter>
+        <div>Works</div>
+      </PageFooter>,
+      { context: { t: sinon.spy((k) => `[${k}]`) } }
+    )
+
+    assert.equal(wrapper.find('.page-container__footer footer').length, 1)
+  })
+
+  it('renders two button components', () => {
+    assert.equal(wrapper.find(Button).length, 2)
+  })
+
+  describe('Cancel Button', () => {
+
+    it('has button type of default', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').first().prop('type'), 'default')
+    })
+
+    it('has children text of Cancel', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').first().prop('children'), 'Cancel')
+    })
+
+    it('should call cancel when click is simulated', () => {
+      wrapper.find('.page-container__footer-button').first().prop('onClick')()
+      assert.equal(onCancel.callCount, 1)
+    })
+
+  })
+
+  describe('Submit Button', () => {
+
+    it('assigns button type based on props', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').last().prop('type'), 'Test Type')
+    })
+
+    it('has disabled prop', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').last().prop('disabled'), false)
+    })
+
+    it('has children text when submitText prop exists', () => {
+      assert.equal(wrapper.find('.page-container__footer-button').last().prop('children'), 'Submit')
+    })
+
+    it('should call submit when click is simulated', () => {
+      wrapper.find('.page-container__footer-button').last().prop('onClick')()
+      assert.equal(onSubmit.callCount, 1)
+    })
+  })
+})
diff --git a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
index e69de29bb..59304b2bd 100644
--- a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
+++ b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import PageContainerHeader from '../page-container-header.component'
+
+describe('Page Container Header', () => {
+  let wrapper, style, onBackButtonClick, onClose
+
+  beforeEach(() => {
+    style = {test: 'style'}
+    onBackButtonClick = sinon.spy()
+    onClose = sinon.spy()
+
+    wrapper = shallow(<PageContainerHeader
+      showBackButton = {true}
+      onBackButtonClick = {onBackButtonClick}
+      backButtonStyles = {style}
+      title = {'Test Title'}
+      subtitle = {'Test Subtitle'}
+      tabs = {'Test Tab'}
+      onClose = {onClose}
+    />)
+  })
+
+  describe('Render Header Row', () => {
+
+    it('renders back button', () => {
+      assert.equal(wrapper.find('.page-container__back-button').length, 1)
+      assert.equal(wrapper.find('.page-container__back-button').text(), 'Back')
+    })
+
+    it('ensures style prop', () => {
+      assert.equal(wrapper.find('.page-container__back-button').props().style, style)
+    })
+
+    it('should call back button when click is simulated', () => {
+      wrapper.find('.page-container__back-button').prop('onClick')()
+      assert.equal(onBackButtonClick.callCount, 1)
+    })
+  })
+
+  describe('Render', () => {
+    let header, headerRow, pageTitle, pageSubtitle, pageClose, pageTab
+
+    beforeEach(() => {
+      header = wrapper.find('.page-container__header--no-padding-bottom')
+      headerRow = wrapper.find('.page-container__header-row')
+      pageTitle = wrapper.find('.page-container__title')
+      pageSubtitle = wrapper.find('.page-container__subtitle')
+      pageClose = wrapper.find('.page-container__header-close')
+      pageTab = wrapper.find('.page-container__tabs')
+    })
+
+    it('renders page container', () => {
+      assert.equal(header.length, 1)
+      assert.equal(headerRow.length, 1)
+      assert.equal(pageTitle.length, 1)
+      assert.equal(pageSubtitle.length, 1)
+      assert.equal(pageClose.length, 1)
+      assert.equal(pageTab.length, 1)
+    })
+
+    it('renders title', () => {
+      assert.equal(pageTitle.text(), 'Test Title')
+    })
+
+    it('renders subtitle', () => {
+      assert.equal(pageSubtitle.text(), 'Test Subtitle')
+    })
+
+    it('renders tabs', () => {
+      assert.equal(pageTab.text(), 'Test Tab')
+    })
+
+    it('should call close when click is simulated', () => {
+      pageClose.prop('onClick')()
+      assert.equal(onClose.callCount, 1)
+    })
+  })
+
+})
diff --git a/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js b/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
index 1611f817b..20f550927 100644
--- a/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
+++ b/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
@@ -15,7 +15,7 @@ export default class TokenListPlaceholder extends Component {
         </div>
         <a
           className="token-list-placeholder__link"
-          href="https://consensys.zendesk.com/hc/en-us/articles/360004135092"
+          href="https://metamask.zendesk.com/hc/en-us/articles/360015489031"
           target="_blank"
           rel="noopener noreferrer"
         >
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
index c24e1e0ea..ee5d6fa64 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -90,35 +90,31 @@ export default class ConfirmAddSuggestedToken extends Component {
           </div>
         </div>
         <div className="page-container__footer">
-          <Button
-            type="default"
-            large
-            className="page-container__footer-button"
-            onClick={() => {
-              removeSuggestedTokens()
-              .then(() => {
-                history.push(DEFAULT_ROUTE)
-              })
-          }}
-          >
-            { this.context.t('cancel') }
-          </Button>
-          <Button
-            type="primary"
-            large
-            className="page-container__footer-button"
-            onClick={() => {
-              addToken(pendingToken)
-                .then(() => {
-                  removeSuggestedTokens()
-                  .then(() => {
-                    history.push(DEFAULT_ROUTE)
-                  })
-                })
-            }}
-          >
-            { this.context.t('addToken') }
-          </Button>
+          <header>
+            <Button
+              type="default"
+              large
+              className="page-container__footer-button"
+              onClick={() => {
+                removeSuggestedTokens()
+                  .then(() => history.push(DEFAULT_ROUTE))
+              }}
+            >
+              { this.context.t('cancel') }
+            </Button>
+            <Button
+              type="primary"
+              large
+              className="page-container__footer-button"
+              onClick={() => {
+                addToken(pendingToken)
+                  .then(() => removeSuggestedTokens())
+                  .then(() => history.push(DEFAULT_ROUTE))
+              }}
+            >
+              { this.context.t('addToken') }
+            </Button>
+          </header>
         </div>
       </div>
     )
diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
index 3dcc8cda9..d3fec79d7 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
@@ -86,28 +86,30 @@ export default class ConfirmAddToken extends Component {
           </div>
         </div>
         <div className="page-container__footer">
-          <Button
-            type="default"
-            large
-            className="page-container__footer-button"
-            onClick={() => history.push(ADD_TOKEN_ROUTE)}
-          >
-            { this.context.t('back') }
-          </Button>
-          <Button
-            type="primary"
-            large
-            className="page-container__footer-button"
-            onClick={() => {
-              addTokens(pendingTokens)
-                .then(() => {
-                  clearPendingTokens()
-                  history.push(DEFAULT_ROUTE)
-                })
-            }}
-          >
-            { this.context.t('addTokens') }
-          </Button>
+          <header>
+            <Button
+              type="default"
+              large
+              className="page-container__footer-button"
+              onClick={() => history.push(ADD_TOKEN_ROUTE)}
+            >
+              { this.context.t('back') }
+            </Button>
+            <Button
+              type="primary"
+              large
+              className="page-container__footer-button"
+              onClick={() => {
+                addTokens(pendingTokens)
+                  .then(() => {
+                    clearPendingTokens()
+                    history.push(DEFAULT_ROUTE)
+                  })
+              }}
+            >
+              { this.context.t('addTokens') }
+            </Button>
+          </header>
         </div>
       </div>
     )
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 56cfbccc8..707dad62d 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -8,6 +8,7 @@ import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
   TRANSACTION_ERROR_KEY,
 } from '../../../constants/error-keys'
+import { CONFIRMED_STATUS, DROPPED_STATUS } from '../../../constants/transactions'
 
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
@@ -21,6 +22,7 @@ export default class ConfirmTransactionBase extends Component {
     // Redux props
     balance: PropTypes.string,
     cancelTransaction: PropTypes.func,
+    cancelAllTransactions: PropTypes.func,
     clearConfirmTransaction: PropTypes.func,
     clearSend: PropTypes.func,
     conversionRate: PropTypes.number,
@@ -42,12 +44,14 @@ export default class ConfirmTransactionBase extends Component {
     sendTransaction: PropTypes.func,
     showCustomizeGasModal: PropTypes.func,
     showTransactionConfirmedModal: PropTypes.func,
+    showRejectTransactionsConfirmationModal: PropTypes.func,
     toAddress: PropTypes.string,
     tokenData: PropTypes.object,
     tokenProps: PropTypes.object,
     toName: PropTypes.string,
     transactionStatus: PropTypes.string,
     txData: PropTypes.object,
+    unapprovedTxCount: PropTypes.number,
     // Component props
     action: PropTypes.string,
     contentComponent: PropTypes.node,
@@ -85,9 +89,9 @@ export default class ConfirmTransactionBase extends Component {
       clearConfirmTransaction,
     } = this.props
 
-    if (transactionStatus === 'dropped') {
+    if (transactionStatus === DROPPED_STATUS || transactionStatus === CONFIRMED_STATUS) {
       showTransactionConfirmedModal({
-        onHide: () => {
+        onSubmit: () => {
           clearConfirmTransaction()
           history.push(DEFAULT_ROUTE)
         },
@@ -248,6 +252,25 @@ export default class ConfirmTransactionBase extends Component {
     onEdit({ txData, tokenData, tokenProps })
   }
 
+  handleCancelAll () {
+    const {
+      cancelAllTransactions,
+      clearConfirmTransaction,
+      history,
+      showRejectTransactionsConfirmationModal,
+      unapprovedTxCount,
+    } = this.props
+
+    showRejectTransactionsConfirmationModal({
+      unapprovedTxCount,
+      async onSubmit () {
+        await cancelAllTransactions()
+        clearConfirmTransaction()
+        history.push(DEFAULT_ROUTE)
+      },
+    })
+  }
+
   handleCancel () {
     const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction } = this.props
 
@@ -313,6 +336,7 @@ export default class ConfirmTransactionBase extends Component {
       nonce,
       assetImage,
       warning,
+      unapprovedTxCount,
     } = this.props
     const { submitting, submitError } = this.state
 
@@ -336,6 +360,7 @@ export default class ConfirmTransactionBase extends Component {
         dataComponent={this.renderData()}
         contentComponent={contentComponent}
         nonce={nonce}
+        unapprovedTxCount={unapprovedTxCount}
         assetImage={assetImage}
         identiconAddress={identiconAddress}
         errorMessage={errorMessage || submitError}
@@ -343,6 +368,7 @@ export default class ConfirmTransactionBase extends Component {
         warning={warning}
         disabled={!propsValid || !valid || submitting}
         onEdit={() => this.handleEdit()}
+        onCancelAll={() => this.handleCancelAll()}
         onCancel={() => this.handleCancel()}
         onSubmit={() => this.handleSubmit()}
       />
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 8f54c8040..b34067686 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -8,7 +8,7 @@ import {
   clearConfirmTransaction,
   updateGasAndCalculate,
 } from '../../../ducks/confirm-transaction.duck'
-import { clearSend, cancelTx, updateAndApproveTx, showModal } from '../../../actions'
+import { clearSend, cancelTx, cancelTxs, updateAndApproveTx, showModal } from '../../../actions'
 import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
   GAS_LIMIT_TOO_LOW_ERROR_KEY,
@@ -17,7 +17,7 @@ import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
 import { isBalanceSufficient } from '../../send/send.utils'
 import { conversionGreaterThan } from '../../../conversion-util'
 import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
-import { addressSlicer } from '../../../util'
+import { addressSlicer, valuesFor } from '../../../util'
 
 const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
   return {
@@ -53,6 +53,8 @@ const mapStateToProps = (state, props) => {
     selectedAddress,
     selectedAddressTxList,
     assetImages,
+    network,
+    unapprovedTxs,
   } = metamask
   const assetImage = assetImages[txParamsToAddress]
   const { balance } = accounts[selectedAddress]
@@ -67,6 +69,12 @@ const mapStateToProps = (state, props) => {
   const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
   const transactionStatus = transaction ? transaction.status : ''
 
+  const currentNetworkUnapprovedTxs = R.filter(
+    ({ metamaskNetworkId }) => metamaskNetworkId === network,
+    valuesFor(unapprovedTxs),
+  )
+  const unapprovedTxCount = currentNetworkUnapprovedTxs.length
+
   return {
     balance,
     fromAddress,
@@ -90,6 +98,8 @@ const mapStateToProps = (state, props) => {
     transactionStatus,
     nonce,
     assetImage,
+    unapprovedTxs,
+    unapprovedTxCount,
   }
 }
 
@@ -97,8 +107,8 @@ const mapDispatchToProps = dispatch => {
   return {
     clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
     clearSend: () => dispatch(clearSend()),
-    showTransactionConfirmedModal: ({ onHide }) => {
-      return dispatch(showModal({ name: 'TRANSACTION_CONFIRMED', onHide }))
+    showTransactionConfirmedModal: ({ onSubmit }) => {
+      return dispatch(showModal({ name: 'TRANSACTION_CONFIRMED', onSubmit }))
     },
     showCustomizeGasModal: ({ txData, onSubmit, validate }) => {
       return dispatch(showModal({ name: 'CONFIRM_CUSTOMIZE_GAS', txData, onSubmit, validate }))
@@ -106,7 +116,11 @@ const mapDispatchToProps = dispatch => {
     updateGasAndCalculate: ({ gasLimit, gasPrice }) => {
       return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
     },
+    showRejectTransactionsConfirmationModal: ({ onSubmit, unapprovedTxCount }) => {
+      return dispatch(showModal({ name: 'REJECT_TRANSACTIONS', onSubmit, unapprovedTxCount }))
+    },
     cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
+    cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
     sendTransaction: txData => dispatch(updateAndApproveTx(txData)),
   }
 }
@@ -156,8 +170,9 @@ const getValidateEditGas = ({ balance, conversionRate, txData }) => {
 }
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { balance, conversionRate, txData } = stateProps
+  const { balance, conversionRate, txData, unapprovedTxs } = stateProps
   const {
+    cancelAllTransactions: dispatchCancelAllTransactions,
     showCustomizeGasModal: dispatchShowCustomizeGasModal,
     updateGasAndCalculate: dispatchUpdateGasAndCalculate,
     ...otherDispatchProps
@@ -174,6 +189,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
       onSubmit: txData => dispatchUpdateGasAndCalculate(txData),
       validate: validateEditGas,
     }),
+    cancelAllTransactions: () => dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),
   }
 }
 
diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js
index 488a189ea..2767b2e1f 100644
--- a/ui/app/components/pages/create-account/connect-hardware/account-list.js
+++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const genAccountLink = require('../../../../../lib/account-link.js')
 const Select = require('react-select').default
+import Button from '../../../button'
 
 class AccountList extends Component {
     constructor (props, context) {
@@ -143,22 +144,20 @@ class AccountList extends Component {
     }
 
     return h('div.new-account-connect-form__buttons', {}, [
-      h(
-        'button.btn-default.btn--large.new-account-connect-form__button',
-        {
-          onClick: this.props.onCancel.bind(this),
-        },
-        [this.context.t('cancel')]
-      ),
-
-      h(
-        `button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`,
-        {
-          onClick: this.props.onUnlockAccount.bind(this, this.props.device),
-          ...buttonProps,
-        },
-        [this.context.t('unlock')]
-      ),
+      h(Button, {
+        type: 'default',
+        large: true,
+        className: 'new-account-connect-form__button',
+        onClick: this.props.onCancel.bind(this),
+      }, [this.context.t('cancel')]),
+
+      h(Button, {
+        type: 'primary',
+        large: true,
+        className: 'new-account-connect-form__button unlock',
+        disabled,
+        onClick: this.props.onUnlockAccount.bind(this, this.props.device),
+      }, [this.context.t('unlock')]),
     ])
   }
 
diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
index b3dfa4ee2..d3abf3119 100644
--- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
+++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
@@ -1,6 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
+import Button from '../../../button'
 
 class ConnectScreen extends Component {
     constructor (props, context) {
@@ -60,13 +61,13 @@ class ConnectScreen extends Component {
                     h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
                     h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
                 ]),
-                h(
-                    'button.btn-primary.btn--large',
-                    {
-                      onClick: () => global.platform.openWindow({
-                        url: 'https://google.com/chrome',
-                      }),
-                    },
+                h(Button, {
+                  type: 'primary',
+                  large: true,
+                  onClick: () => global.platform.openWindow({
+                    url: 'https://google.com/chrome',
+                  }),
+                },
                     this.context.t('downloadGoogleChrome')
                 ),
             ])
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js
index e2e973af9..48d8f8838 100644
--- a/ui/app/components/pages/create-account/import-account/index.js
+++ b/ui/app/components/pages/create-account/import-account/index.js
@@ -46,7 +46,7 @@ AccountImportSubview.prototype.render = function () {
           },
           onClick: () => {
             global.platform.openWindow({
-              url: 'https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI',
+              url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
             })
           },
         }, this.context.t('here')),
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
index dd57256a3..90279bbbd 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -8,6 +8,7 @@ const actions = require('../../../../actions')
 const FileInput = require('react-simple-file-input').default
 const { DEFAULT_ROUTE } = require('../../../../routes')
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
+import Button from '../../../button'
 
 class JsonImportSubview extends Component {
   constructor (props) {
@@ -51,17 +52,19 @@ class JsonImportSubview extends Component {
 
         h('div.new-account-create-form__buttons', {}, [
 
-          h('button.btn-default.new-account-create-form__button', {
+          h(Button, {
+            type: 'default',
+            large: true,
+            className: 'new-account-create-form__button',
             onClick: () => this.props.history.push(DEFAULT_ROUTE),
-          }, [
-            this.context.t('cancel'),
-          ]),
+          }, [this.context.t('cancel')]),
 
-          h('button.btn-primary.new-account-create-form__button', {
+          h(Button, {
+            type: 'primary',
+            large: true,
+            className: 'new-account-create-form__button',
             onClick: () => this.createNewKeychain(),
-          }, [
-            this.context.t('import'),
-          ]),
+          }, [this.context.t('import')]),
 
         ]),
 
@@ -82,7 +85,7 @@ class JsonImportSubview extends Component {
   }
 
   createNewKeychain () {
-    const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress } = this.props
+    const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress, history } = this.props
     const state = this.state
 
     if (!state) {
diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
index 1db999f2f..8db1bfbdd 100644
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@@ -7,6 +7,7 @@ const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const actions = require('../../../../actions')
 const { DEFAULT_ROUTE } = require('../../../../routes')
+import Button from '../../../button'
 
 PrivateKeyImportView.contextTypes = {
   t: PropTypes.func,
@@ -61,20 +62,22 @@ PrivateKeyImportView.prototype.render = function () {
 
       h('div.new-account-import-form__buttons', {}, [
 
-        h('button.btn-default.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
           onClick: () => {
             displayWarning(null)
             this.props.history.push(DEFAULT_ROUTE)
           },
-        }, [
-          this.context.t('cancel'),
-        ]),
+        }, [this.context.t('cancel')]),
 
-        h('button.btn-primary.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'new-account-create-form__button',
           onClick: () => this.createNewKeychain(),
-        }, [
-          this.context.t('import'),
-        ]),
+        }, [this.context.t('import')]),
 
       ]),
 
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index 402b8f03b..94a5fa487 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -4,6 +4,7 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
+import Button from '../../button'
 
 class NewAccountCreateForm extends Component {
   constructor (props, context) {
@@ -38,20 +39,22 @@ class NewAccountCreateForm extends Component {
 
       h('div.new-account-create-form__buttons', {}, [
 
-        h('button.btn-default.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
           onClick: () => history.push(DEFAULT_ROUTE),
-        }, [
-          this.context.t('cancel'),
-        ]),
+        }, [this.context.t('cancel')]),
 
-        h('button.btn-primary.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'new-account-create-form__button',
           onClick: () => {
             createAccount(newAccountName || defaultAccountName)
               .then(() => history.push(DEFAULT_ROUTE))
           },
-        }, [
-          this.context.t('create'),
-        ]),
+        }, [this.context.t('create')]),
 
       ]),
 
diff --git a/ui/app/components/pages/index.scss b/ui/app/components/pages/index.scss
index b15c59863..6551278f5 100644
--- a/ui/app/components/pages/index.scss
+++ b/ui/app/components/pages/index.scss
@@ -3,3 +3,5 @@
 @import './add-token/index';
 
 @import './confirm-add-token/index';
+
+@import './settings/index';
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
index 7d7d3f462..32557066f 100644
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -8,6 +8,8 @@ const { requestRevealSeedWords } = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
 const ExportTextContainer = require('../../export-text-container')
 
+import Button from '../../button'
+
 const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
 const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
 
@@ -106,13 +108,21 @@ class RevealSeedPage extends Component {
   renderPasswordPromptFooter () {
     return (
       h('.page-container__footer', [
-        h('button.btn-default.btn--large.page-container__footer-button', {
-          onClick: () => this.props.history.push(DEFAULT_ROUTE),
-        }, this.context.t('cancel')),
-        h('button.btn-primary.btn--large.page-container__footer-button', {
-          onClick: event => this.handleSubmit(event),
-          disabled: this.state.password === '',
-        }, this.context.t('next')),
+        h('header', [
+          h(Button, {
+            type: 'default',
+            large: true,
+            className: 'page-container__footer-button',
+            onClick: () => this.props.history.push(DEFAULT_ROUTE),
+          }, this.context.t('cancel')),
+          h(Button, {
+            type: 'primary',
+            large: true,
+            className: 'page-container__footer-button',
+            onClick: event => this.handleSubmit(event),
+            disabled: this.state.password === '',
+          }, this.context.t('next')),
+        ]),
       ])
     )
   }
@@ -120,7 +130,10 @@ class RevealSeedPage extends Component {
   renderRevealSeedFooter () {
     return (
       h('.page-container__footer', [
-        h('button.btn-default.btn--large.page-container__footer-button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'page-container__footer-button',
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, this.context.t('close')),
       ])
diff --git a/ui/app/components/pages/settings/index.js b/ui/app/components/pages/settings/index.js
index aee17e0e8..44a9ffa63 100644
--- a/ui/app/components/pages/settings/index.js
+++ b/ui/app/components/pages/settings/index.js
@@ -1,64 +1 @@
-const { Component } = require('react')
-const { Switch, Route, matchPath } = require('react-router-dom')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const TabBar = require('../../tab-bar')
-const Settings = require('./settings')
-const Info = require('./info')
-const { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } = require('../../../routes')
-
-class Config extends Component {
-  renderTabs () {
-    const { history, location } = this.props
-
-    return h('div.settings__tabs', [
-      h(TabBar, {
-        tabs: [
-          { content: this.context.t('settings'), key: SETTINGS_ROUTE },
-          { content: this.context.t('info'), key: INFO_ROUTE },
-        ],
-        isActive: key => matchPath(location.pathname, { path: key, exact: true }),
-        onSelect: key => history.push(key),
-      }),
-    ])
-  }
-
-  render () {
-    const { history } = this.props
-
-    return (
-      h('.main-container.settings', {}, [
-        h('.settings__header', [
-          h('div.settings__close-button', {
-            onClick: () => history.push(DEFAULT_ROUTE),
-          }),
-          this.renderTabs(),
-        ]),
-        h(Switch, [
-          h(Route, {
-            exact: true,
-            path: INFO_ROUTE,
-            component: Info,
-          }),
-          h(Route, {
-            exact: true,
-            path: SETTINGS_ROUTE,
-            component: Settings,
-          }),
-        ]),
-      ])
-    )
-  }
-}
-
-Config.propTypes = {
-  location: PropTypes.object,
-  history: PropTypes.object,
-  t: PropTypes.func,
-}
-
-Config.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = Config
+export { default } from './settings.component'
diff --git a/ui/app/components/pages/settings/index.scss b/ui/app/components/pages/settings/index.scss
new file mode 100644
index 000000000..138ebcfc5
--- /dev/null
+++ b/ui/app/components/pages/settings/index.scss
@@ -0,0 +1,80 @@
+@import './info-tab/index';
+
+@import './settings-tab/index';
+
+.settings-page {
+  position: relative;
+  background: $white;
+  display: flex;
+  flex-flow: column nowrap;
+
+  &__header {
+    padding: 25px 25px 0;
+  }
+
+  &__close-button::after {
+    content: '\00D7';
+    font-size: 40px;
+    color: $dusty-gray;
+    position: absolute;
+    top: 25px;
+    right: 30px;
+    cursor: pointer;
+  }
+
+  &__content {
+    padding: 25px;
+    height: auto;
+    overflow: auto;
+  }
+
+  &__content-row {
+    display: flex;
+    flex-direction: row;
+    padding: 10px 0 20px;
+
+    @media screen and (max-width: 575px) {
+      flex-direction: column;
+      padding: 10px 0;
+    }
+  }
+
+  &__content-item {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 0 5px;
+    min-height: 71px;
+
+    @media screen and (max-width: 575px) {
+      height: initial;
+      padding: 5px 0;
+    }
+
+    &--without-height {
+      height: initial;
+    }
+  }
+
+  &__content-label {
+    text-transform: capitalize;
+  }
+
+  &__content-description {
+    font-size: 14px;
+    color: $dusty-gray;
+    padding-top: 5px;
+  }
+
+  &__content-item-col {
+    max-width: 300px;
+    display: flex;
+    flex-direction: column;
+
+    @media screen and (max-width: 575px) {
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+}
diff --git a/ui/app/components/pages/settings/info-tab/index.js b/ui/app/components/pages/settings/info-tab/index.js
new file mode 100644
index 000000000..7556a258d
--- /dev/null
+++ b/ui/app/components/pages/settings/info-tab/index.js
@@ -0,0 +1 @@
+export { default } from './info-tab.component'
diff --git a/ui/app/components/pages/settings/info-tab/index.scss b/ui/app/components/pages/settings/info-tab/index.scss
new file mode 100644
index 000000000..43ad6f652
--- /dev/null
+++ b/ui/app/components/pages/settings/info-tab/index.scss
@@ -0,0 +1,56 @@
+.info-tab {
+  &__logo-wrapper {
+    height: 80px;
+    margin-bottom: 20px;
+  }
+
+  &__logo {
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  &__item {
+    padding: 10px 0;
+  }
+
+  &__link-header {
+    padding-bottom: 15px;
+
+    @media screen and (max-width: 575px) {
+      padding-bottom: 5px;
+    }
+  }
+
+  &__link-item {
+    padding: 15px 0;
+
+    @media screen and (max-width: 575px) {
+      padding: 5px 0;
+    }
+  }
+
+  &__link-text {
+    color: $curious-blue;
+  }
+
+  &__version-number {
+    padding-top: 5px;
+    font-size: 13px;
+    color: $dusty-gray;
+  }
+
+  &__separator {
+    margin: 15px 0;
+    width: 80px;
+    border-color: $alto;
+    border: none;
+    height: 1px;
+    background-color: $alto;
+    color: $alto;
+  }
+
+  &__about {
+    color: $dusty-gray;
+    margin-bottom: 15px;
+  }
+}
diff --git a/ui/app/components/pages/settings/info-tab/info-tab.component.js b/ui/app/components/pages/settings/info-tab/info-tab.component.js
new file mode 100644
index 000000000..72f7d835e
--- /dev/null
+++ b/ui/app/components/pages/settings/info-tab/info-tab.component.js
@@ -0,0 +1,136 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class InfoTab extends PureComponent {
+  state = {
+    version: global.platform.getVersion(),
+  }
+
+  static propTypes = {
+    tab: PropTypes.string,
+    metamask: PropTypes.object,
+    setCurrentCurrency: PropTypes.func,
+    setRpcTarget: PropTypes.func,
+    displayWarning: PropTypes.func,
+    revealSeedConfirmation: PropTypes.func,
+    warning: PropTypes.string,
+    location: PropTypes.object,
+    history: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  renderInfoLinks () {
+    const { t } = this.context
+
+    return (
+      <div className="settings-page__content-item settings-page__content-item--without-height">
+        <div className="info-tab__link-header">
+          { t('links') }
+        </div>
+        <div className="info-tab__link-item">
+          <a
+            href="https://metamask.io/privacy.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('privacyMsg') }
+            </span>
+          </a>
+        </div>
+        <div className="info-tab__link-item">
+          <a
+            href="https://metamask.io/terms.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('terms') }
+            </span>
+          </a>
+        </div>
+        <div className="info-tab__link-item">
+          <a
+            href="https://metamask.io/attributions.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('attributions') }
+            </span>
+          </a>
+        </div>
+        <hr className="info-tab__separator" />
+        <div className="info-tab__link-item">
+          <a
+            href="https://support.metamask.io"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('supportCenter') }
+            </span>
+          </a>
+        </div>
+        <div className="info-tab__link-item">
+          <a
+            href="https://metamask.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('visitWebSite') }
+            </span>
+          </a>
+        </div>
+        <div className="info-tab__link-item">
+          <a
+            href="mailto:help@metamask.io?subject=Feedback"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('emailUs') }
+            </span>
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <div className="settings-page__content">
+        <div className="settings-page__content-row">
+          <div className="settings-page__content-item settings-page__content-item--without-height">
+            <div className="info-tab__logo-wrapper">
+              <img
+                src="images/info-logo.png"
+                className="info-tab__logo"
+              />
+            </div>
+            <div className="info-tab__item">
+              <div className="info-tab__version-header">
+                { t('metamaskVersion') }
+              </div>
+              <div className="info-tab__version-number">
+                { this.state.version }
+              </div>
+            </div>
+            <div className="info-tab__item">
+              <div className="info-tab__about">
+                { t('builtInCalifornia') }
+              </div>
+            </div>
+          </div>
+          { this.renderInfoLinks() }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js
deleted file mode 100644
index bd9040499..000000000
--- a/ui/app/components/pages/settings/info.js
+++ /dev/null
@@ -1,120 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-
-class Info extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      version: global.platform.getVersion(),
-    }
-  }
-
-  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', this.context.t('links')),
-        h('div.settings__info-link-item', [
-          h('a', {
-            href: 'https://metamask.io/privacy.html',
-            target: '_blank',
-          }, [
-            h('span.settings__info-link', this.context.t('privacyMsg')),
-          ]),
-        ]),
-        h('div.settings__info-link-item', [
-          h('a', {
-            href: 'https://metamask.io/terms.html',
-            target: '_blank',
-          }, [
-            h('span.settings__info-link', this.context.t('terms')),
-          ]),
-        ]),
-        h('div.settings__info-link-item', [
-          h('a', {
-            href: 'https://metamask.io/attributions.html',
-            target: '_blank',
-          }, [
-            h('span.settings__info-link', this.context.t('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', this.context.t('supportCenter')),
-          ]),
-        ]),
-        h('div.settings__info-link-item', [
-          h('a', {
-            href: 'https://metamask.io/',
-            target: '_blank',
-          }, [
-            h('span.settings__info-link', this.context.t('visitWebSite')),
-          ]),
-        ]),
-        h('div.settings__info-link-item', [
-          h('a', {
-            target: '_blank',
-            href: 'mailto:help@metamask.io?subject=Feedback',
-          }, [
-            h('span.settings__info-link', this.context.t('emailUs')),
-          ]),
-        ]),
-      ])
-    )
-  }
-
-  render () {
-    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', this.state.version),
-            ]),
-            h('div.settings__info-item', [
-              h(
-                'div.settings__info-about',
-                this.context.t('builtInCalifornia')
-              ),
-            ]),
-          ]),
-          this.renderInfoLinks(),
-        ]),
-      ])
-    )
-  }
-}
-
-Info.propTypes = {
-  tab: PropTypes.string,
-  metamask: PropTypes.object,
-  setCurrentCurrency: PropTypes.func,
-  setRpcTarget: PropTypes.func,
-  displayWarning: PropTypes.func,
-  revealSeedConfirmation: PropTypes.func,
-  warning: PropTypes.string,
-  location: PropTypes.object,
-  history: PropTypes.object,
-  t: PropTypes.func,
-}
-
-Info.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = Info
diff --git a/ui/app/components/pages/settings/settings-tab/index.js b/ui/app/components/pages/settings/settings-tab/index.js
new file mode 100644
index 000000000..9fdaafd3f
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/index.js
@@ -0,0 +1 @@
+export { default } from './settings-tab.container'
diff --git a/ui/app/components/pages/settings/settings-tab/index.scss b/ui/app/components/pages/settings/settings-tab/index.scss
new file mode 100644
index 000000000..76a0cec6f
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/index.scss
@@ -0,0 +1,51 @@
+.settings-tab {
+  &__error {
+    padding-bottom: 20px;
+    text-align: center;
+    color: $crimson;
+  }
+
+  &__rpc-save-button {
+    align-self: flex-end;
+    padding: 5px;
+    text-transform: uppercase;
+    color: $dusty-gray;
+    cursor: pointer;
+  }
+
+  &__rpc-save-button {
+    align-self: flex-end;
+    padding: 5px;
+    text-transform: uppercase;
+    color: $dusty-gray;
+    cursor: pointer;
+  }
+
+  &__button--red {
+    border-color: lighten($monzo, 10%);
+    color: $monzo;
+
+    &:active {
+      background: lighten($monzo, 55%);
+      border-color: $monzo;
+    }
+
+    &:hover {
+      border-color: $monzo;
+    }
+  }
+
+  &__button--orange {
+    border-color: lighten($ecstasy, 20%);
+    color: $ecstasy;
+
+    &:active {
+      background: lighten($ecstasy, 40%);
+      border-color: $ecstasy;
+    }
+
+    &:hover {
+      border-color: $ecstasy;
+    }
+  }
+}
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
new file mode 100644
index 000000000..9da624f56
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
@@ -0,0 +1,360 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import infuraCurrencies from '../../../../infura-conversion.json'
+import validUrl from 'valid-url'
+import { exportAsFile } from '../../../../util'
+import SimpleDropdown from '../../../dropdowns/simple-dropdown'
+import ToggleButton from 'react-toggle-button'
+import { REVEAL_SEED_ROUTE } from '../../../../routes'
+import locales from '../../../../../../app/_locales/index.json'
+import TextField from '../../../text-field'
+import Button from '../../../button'
+
+const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
+  return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
+})
+
+const infuraCurrencyOptions = sortedCurrencies.map(({ quote: { code, name } }) => {
+  return {
+    displayValue: `${code.toUpperCase()} - ${name}`,
+    key: code,
+    value: code,
+  }
+})
+
+const localeOptions = locales.map(locale => {
+  return {
+    displayValue: `${locale.name}`,
+    key: locale.code,
+    value: locale.code,
+  }
+})
+
+export default class SettingsTab extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    metamask: PropTypes.object,
+    setUseBlockie: PropTypes.func,
+    setHexDataFeatureFlag: PropTypes.func,
+    setCurrentCurrency: PropTypes.func,
+    setRpcTarget: PropTypes.func,
+    delRpcTarget: PropTypes.func,
+    displayWarning: PropTypes.func,
+    revealSeedConfirmation: PropTypes.func,
+    setFeatureFlagToBeta: PropTypes.func,
+    showResetAccountConfirmationModal: PropTypes.func,
+    warning: PropTypes.string,
+    history: PropTypes.object,
+    isMascara: PropTypes.bool,
+    updateCurrentLocale: PropTypes.func,
+    currentLocale: PropTypes.string,
+    useBlockie: PropTypes.bool,
+    sendHexData: PropTypes.bool,
+    currentCurrency: PropTypes.string,
+    conversionDate: PropTypes.number,
+  }
+
+  state = {
+    newRpc: '',
+  }
+
+  renderCurrentConversion () {
+    const { t } = this.context
+    const { currentCurrency, conversionDate, setCurrentCurrency } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('currentConversion') }</span>
+          <span className="settings-page__content-description">
+            { t('updatedWithDate', [Date(conversionDate)]) }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <SimpleDropdown
+              placeholder={t('selectCurrency')}
+              options={infuraCurrencyOptions}
+              selectedOption={currentCurrency}
+              onSelect={newCurrency => setCurrentCurrency(newCurrency)}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderCurrentLocale () {
+    const { t } = this.context
+    const { updateCurrentLocale, currentLocale } = this.props
+    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
+    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span className="settings-page__content-label">
+            { t('currentLanguage') }
+          </span>
+          <span className="settings-page__content-description">
+            { currentLocaleName }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <SimpleDropdown
+              placeholder={t('selectLocale')}
+              options={localeOptions}
+              selectedOption={currentLocale}
+              onSelect={async newLocale => updateCurrentLocale(newLocale)}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderNewRpcUrl () {
+    const { t } = this.context
+    const { newRpc } = this.state
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('newRPC') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <TextField
+              type="text"
+              id="new-rpc"
+              placeholder={t('newRPC')}
+              value={newRpc}
+              onChange={e => this.setState({ newRpc: e.target.value })}
+              onKeyPress={e => {
+                if (e.key === 'Enter') {
+                  this.validateRpc(newRpc)
+                }
+              }}
+              fullWidth
+              margin="none"
+            />
+            <div
+              className="settings-tab__rpc-save-button"
+              onClick={e => {
+                e.preventDefault()
+                this.validateRpc(newRpc)
+              }}
+            >
+              { t('save') }
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  validateRpc (newRpc) {
+    const { setRpcTarget, displayWarning } = this.props
+
+    if (validUrl.isWebUri(newRpc)) {
+      setRpcTarget(newRpc)
+    } else {
+      const appendedRpc = `http://${newRpc}`
+
+      if (validUrl.isWebUri(appendedRpc)) {
+        displayWarning(this.context.t('uriErrorMsg'))
+      } else {
+        displayWarning(this.context.t('invalidRPC'))
+      }
+    }
+  }
+
+  renderStateLogs () {
+    const { t } = this.context
+    const { displayWarning } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('stateLogs') }</span>
+          <span className="settings-page__content-description">
+            { t('stateLogsDescription') }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="primary"
+              large
+              onClick={() => {
+                window.logStateString((err, result) => {
+                  if (err) {
+                    displayWarning(t('stateLogError'))
+                  } else {
+                    exportAsFile('MetaMask State Logs.json', result)
+                  }
+                })
+              }}
+            >
+              { t('downloadStateLogs') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderSeedWords () {
+    const { t } = this.context
+    const { history } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('revealSeedWords') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              onClick={event => {
+                event.preventDefault()
+                history.push(REVEAL_SEED_ROUTE)
+              }}
+            >
+              { t('revealSeedWords') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderOldUI () {
+    const { t } = this.context
+    const { setFeatureFlagToBeta } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('useOldUI') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              className="settings-tab__button--orange"
+              onClick={event => {
+                event.preventDefault()
+                setFeatureFlagToBeta()
+              }}
+            >
+              { t('useOldUI') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderResetAccount () {
+    const { t } = this.context
+    const { showResetAccountConfirmationModal } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('resetAccount') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              className="settings-tab__button--orange"
+              onClick={event => {
+                event.preventDefault()
+                showResetAccountConfirmationModal()
+              }}
+            >
+              { t('resetAccount') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderBlockieOptIn () {
+    const { useBlockie, setUseBlockie } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ this.context.t('blockiesIdenticon') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={useBlockie}
+              onToggle={value => setUseBlockie(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderHexDataOptIn () {
+    const { t } = this.context
+    const { sendHexData, setHexDataFeatureFlag } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('showHexData') }</span>
+          <div className="settings-page__content-description">
+            { t('showHexDataDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={sendHexData}
+              onToggle={value => setHexDataFeatureFlag(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { warning, isMascara } = this.props
+
+    return (
+      <div className="settings-page__content">
+        { warning && <div className="settings-tab__error">{ warning }</div> }
+        { this.renderCurrentConversion() }
+        { this.renderCurrentLocale() }
+        { this.renderNewRpcUrl() }
+        { this.renderStateLogs() }
+        { this.renderSeedWords() }
+        { !isMascara && this.renderOldUI() }
+        { this.renderResetAccount() }
+        { this.renderBlockieOptIn() }
+        { this.renderHexDataOptIn() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
new file mode 100644
index 000000000..665b56f5c
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
@@ -0,0 +1,59 @@
+import SettingsTab from './settings-tab.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import {
+  setCurrentCurrency,
+  setRpcTarget,
+  displayWarning,
+  revealSeedConfirmation,
+  setUseBlockie,
+  updateCurrentLocale,
+  setFeatureFlag,
+  showModal,
+} from '../../../../actions'
+
+const mapStateToProps = state => {
+  const { appState: { warning }, metamask } = state
+  const {
+    currentCurrency,
+    conversionDate,
+    useBlockie,
+    featureFlags: { sendHexData } = {},
+    provider = {},
+    isMascara,
+    currentLocale,
+  } = metamask
+
+  return {
+    warning,
+    isMascara,
+    currentLocale,
+    currentCurrency,
+    conversionDate,
+    useBlockie,
+    sendHexData,
+    provider,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setCurrentCurrency: currency => dispatch(setCurrentCurrency(currency)),
+    setRpcTarget: newRpc => dispatch(setRpcTarget(newRpc)),
+    displayWarning: warning => dispatch(displayWarning(warning)),
+    revealSeedConfirmation: () => dispatch(revealSeedConfirmation()),
+    setUseBlockie: value => dispatch(setUseBlockie(value)),
+    updateCurrentLocale: key => dispatch(updateCurrentLocale(key)),
+    setFeatureFlagToBeta: () => {
+      return dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+    },
+    setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
+    showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(SettingsTab)
diff --git a/ui/app/components/pages/settings/settings.component.js b/ui/app/components/pages/settings/settings.component.js
new file mode 100644
index 000000000..94a97bba1
--- /dev/null
+++ b/ui/app/components/pages/settings/settings.component.js
@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Switch, Route, matchPath } from 'react-router-dom'
+import TabBar from '../../tab-bar'
+import SettingsTab from './settings-tab'
+import InfoTab from './info-tab'
+import { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } from '../../../routes'
+
+export default class SettingsPage extends PureComponent {
+  static propTypes = {
+    location: PropTypes.object,
+    history: PropTypes.object,
+    t: PropTypes.func,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  render () {
+    const { history, location } = this.props
+
+    return (
+      <div className="main-container settings-page">
+        <div className="settings-page__header">
+          <div
+            className="settings-page__close-button"
+            onClick={() => history.push(DEFAULT_ROUTE)}
+          />
+          <TabBar
+            tabs={[
+              { content: this.context.t('settings'), key: SETTINGS_ROUTE },
+              { content: this.context.t('info'), key: INFO_ROUTE },
+            ]}
+            isActive={key => matchPath(location.pathname, { path: key, exact: true })}
+            onSelect={key => history.push(key)}
+          />
+        </div>
+        <Switch>
+          <Route
+            exact
+            path={INFO_ROUTE}
+            component={InfoTab}
+          />
+          <Route
+            exact
+            path={SETTINGS_ROUTE}
+            component={SettingsTab}
+          />
+        </Switch>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
deleted file mode 100644
index a5ea1b89c..000000000
--- a/ui/app/components/pages/settings/settings.js
+++ /dev/null
@@ -1,394 +0,0 @@
-const { Component } = require('react')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
-const infuraCurrencies = require('../../../infura-conversion.json')
-const validUrl = require('valid-url')
-const { exportAsFile } = require('../../../util')
-const SimpleDropdown = require('../../dropdowns/simple-dropdown')
-const ToggleButton = require('react-toggle-button')
-const { REVEAL_SEED_ROUTE } = require('../../../routes')
-const locales = require('../../../../../app/_locales/index.json')
-
-const getInfuraCurrencyOptions = () => {
-  const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
-    return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
-  })
-
-  return sortedCurrencies.map(({ quote: { code, name } }) => {
-    return {
-      displayValue: `${code.toUpperCase()} - ${name}`,
-      key: code,
-      value: code,
-    }
-  })
-}
-
-const getLocaleOptions = () => {
-  return locales.map((locale) => {
-    return {
-      displayValue: `${locale.name}`,
-      key: locale.code,
-      value: locale.code,
-    }
-  })
-}
-
-class Settings extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      newRpc: '',
-    }
-  }
-
-  renderBlockieOptIn () {
-    const { metamask: { useBlockie }, setUseBlockie } = this.props
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', [
-        h('span', this.context.t('blockiesIdenticon')),
-      ]),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h(ToggleButton, {
-            value: useBlockie,
-            onToggle: (value) => setUseBlockie(!value),
-            activeLabel: '',
-            inactiveLabel: '',
-          }),
-        ]),
-      ]),
-    ])
-  }
-
-  renderHexDataOptIn () {
-    const { metamask: { featureFlags: { sendHexData } }, setHexDataFeatureFlag } = this.props
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', [
-        h('span', this.context.t('showHexData')),
-        h(
-          'div.settings__content-description',
-          this.context.t('showHexDataDescription')
-        ),
-      ]),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h(ToggleButton, {
-            value: sendHexData,
-            onToggle: (value) => setHexDataFeatureFlag(!value),
-            activeLabel: '',
-            inactiveLabel: '',
-          }),
-        ]),
-      ]),
-    ])
-  }
-
-  renderCurrentConversion () {
-    const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', [
-        h('span', this.context.t('currentConversion')),
-        h('span.settings__content-description', `Updated ${Date(conversionDate)}`),
-      ]),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h(SimpleDropdown, {
-            placeholder: this.context.t('selectCurrency'),
-            options: getInfuraCurrencyOptions(),
-            selectedOption: currentCurrency,
-            onSelect: newCurrency => setCurrentCurrency(newCurrency),
-          }),
-        ]),
-      ]),
-    ])
-  }
-
-  renderCurrentLocale () {
-    const { updateCurrentLocale, currentLocale } = this.props
-    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
-    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', [
-        h('span', 'Current Language'),
-        h('span.settings__content-description', `${currentLocaleName}`),
-      ]),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h(SimpleDropdown, {
-            placeholder: 'Select Locale',
-            options: getLocaleOptions(),
-            selectedOption: currentLocale,
-            onSelect: async (newLocale) => {
-              updateCurrentLocale(newLocale)
-            },
-          }),
-        ]),
-      ]),
-    ])
-  }
-
-  renderCurrentProvider () {
-    const { metamask: { provider = {} } } = this.props
-    let title, value, color
-
-    switch (provider.type) {
-
-      case 'mainnet':
-        title = this.context.t('currentNetwork')
-        value = this.context.t('mainnet')
-        color = '#038789'
-        break
-
-      case 'ropsten':
-        title = this.context.t('currentNetwork')
-        value = this.context.t('ropsten')
-        color = '#e91550'
-        break
-
-      case 'kovan':
-        title = this.context.t('currentNetwork')
-        value = this.context.t('kovan')
-        color = '#690496'
-        break
-
-      case 'rinkeby':
-        title = this.context.t('currentNetwork')
-        value = this.context.t('rinkeby')
-        color = '#ebb33f'
-        break
-
-      default:
-        title = this.context.t('currentRpc')
-        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', this.context.t('newRPC')),
-        ]),
-        h('div.settings__content-item', [
-          h('div.settings__content-item-col', [
-            h('input.settings__input', {
-              placeholder: this.context.t('newRPC'),
-              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)
-              },
-            }, this.context.t('save')),
-          ]),
-        ]),
-      ])
-    )
-  }
-
-  validateRpc (newRpc) {
-    const { setRpcTarget, displayWarning } = this.props
-
-    if (validUrl.isWebUri(newRpc)) {
-      setRpcTarget(newRpc)
-    } else {
-      const appendedRpc = `http://${newRpc}`
-
-      if (validUrl.isWebUri(appendedRpc)) {
-        displayWarning(this.context.t('uriErrorMsg'))
-      } else {
-        displayWarning(this.context.t('invalidRPC'))
-      }
-    }
-  }
-
-  renderStateLogs () {
-    return (
-      h('div.settings__content-row', [
-        h('div.settings__content-item', [
-          h('div', this.context.t('stateLogs')),
-          h(
-            'div.settings__content-description',
-            this.context.t('stateLogsDescription')
-          ),
-        ]),
-        h('div.settings__content-item', [
-          h('div.settings__content-item-col', [
-            h('button.btn-primary.btn--large.settings__button', {
-              onClick (event) {
-                window.logStateString((err, result) => {
-                  if (err) {
-                    this.state.dispatch(actions.displayWarning(this.context.t('stateLogError')))
-                  } else {
-                    exportAsFile('MetaMask State Logs.json', result)
-                  }
-                })
-              },
-            }, this.context.t('downloadStateLogs')),
-          ]),
-        ]),
-      ])
-    )
-  }
-
-  renderSeedWords () {
-    const { history } = this.props
-
-    return (
-      h('div.settings__content-row', [
-        h('div.settings__content-item', this.context.t('revealSeedWords')),
-        h('div.settings__content-item', [
-          h('div.settings__content-item-col', [
-            h('button.btn-primary.btn--large.settings__button--red', {
-              onClick: event => {
-                event.preventDefault()
-                history.push(REVEAL_SEED_ROUTE)
-              },
-            }, this.context.t('revealSeedWords')),
-          ]),
-        ]),
-      ])
-    )
-  }
-
-  renderOldUI () {
-    const { setFeatureFlagToBeta } = this.props
-
-    return (
-      h('div.settings__content-row', [
-        h('div.settings__content-item', this.context.t('useOldUI')),
-        h('div.settings__content-item', [
-          h('div.settings__content-item-col', [
-            h('button.btn-primary.btn--large.settings__button--orange', {
-              onClick (event) {
-                event.preventDefault()
-                setFeatureFlagToBeta()
-              },
-            }, this.context.t('useOldUI')),
-          ]),
-        ]),
-      ])
-    )
-  }
-
-  renderResetAccount () {
-    const { showResetAccountConfirmationModal } = this.props
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', this.context.t('resetAccount')),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h('button.btn-primary.btn--large.settings__button--orange', {
-            onClick (event) {
-              event.preventDefault()
-              showResetAccountConfirmationModal()
-            },
-          }, this.context.t('resetAccount')),
-        ]),
-      ]),
-    ])
-  }
-
-  render () {
-    const { warning, isMascara } = this.props
-
-    return (
-      h('div.settings__content', [
-        warning && h('div.settings__error', warning),
-        this.renderCurrentConversion(),
-        this.renderCurrentLocale(),
-        // this.renderCurrentProvider(),
-        this.renderNewRpcUrl(),
-        this.renderStateLogs(),
-        this.renderSeedWords(),
-        !isMascara && this.renderOldUI(),
-        this.renderResetAccount(),
-        this.renderBlockieOptIn(),
-        this.renderHexDataOptIn(),
-      ])
-    )
-  }
-}
-
-Settings.propTypes = {
-  metamask: PropTypes.object,
-  setUseBlockie: PropTypes.func,
-  setHexDataFeatureFlag: PropTypes.func,
-  setCurrentCurrency: PropTypes.func,
-  setRpcTarget: PropTypes.func,
-  displayWarning: PropTypes.func,
-  revealSeedConfirmation: PropTypes.func,
-  setFeatureFlagToBeta: PropTypes.func,
-  showResetAccountConfirmationModal: PropTypes.func,
-  warning: PropTypes.string,
-  history: PropTypes.object,
-  isMascara: PropTypes.bool,
-  updateCurrentLocale: PropTypes.func,
-  currentLocale: PropTypes.string,
-  t: PropTypes.func,
-}
-
-const mapStateToProps = state => {
-  return {
-    metamask: state.metamask,
-    warning: state.appState.warning,
-    isMascara: state.metamask.isMascara,
-    currentLocale: state.metamask.currentLocale,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    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)),
-    updateCurrentLocale: key => dispatch(actions.updateCurrentLocale(key)),
-    setFeatureFlagToBeta: () => {
-      return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
-    },
-    setHexDataFeatureFlag: (featureFlagShowState) => {
-      return dispatch(actions.setFeatureFlag('sendHexData', featureFlagShowState))
-    },
-    showResetAccountConfirmationModal: () => {
-      return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' }))
-    },
-  }
-}
-
-Settings.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(Settings)
diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/components/pages/unlock-page/index.scss
index 3d44bd037..6bd52282d 100644
--- a/ui/app/components/pages/unlock-page/index.scss
+++ b/ui/app/components/pages/unlock-page/index.scss
@@ -14,6 +14,7 @@
     align-self: stretch;
     justify-content: center;
     flex: 1 0 auto;
+    height: 100vh;
   }
 
   &__mascot-container {
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index 3b2c62f49..d3242ddf5 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -26,7 +26,7 @@ function QrCodeView () {
 QrCodeView.prototype.render = function () {
   const props = this.props
   const { message, data } = props.Qr
-  const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${data}`
+  const address = `${isHexPrefixed(data) ? 'ethereum:' : ''}${checksumAddress(data)}`
   const qrImage = qrCode(4, 'M')
   qrImage.addData(address)
   qrImage.make()
diff --git a/ui/app/components/selected-account/selected-account.component.js b/ui/app/components/selected-account/selected-account.component.js
index 6c202141e..4f98df9b6 100644
--- a/ui/app/components/selected-account/selected-account.component.js
+++ b/ui/app/components/selected-account/selected-account.component.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import copyToClipboard from 'copy-to-clipboard'
-import { addressSlicer } from '../../util'
+import { addressSlicer, checksumAddress } from '../../util'
 
-const Tooltip = require('../tooltip-v2.js')
+const Tooltip = require('../tooltip-v2.js').default
 
 class SelectedAccount extends Component {
   state = {
@@ -22,6 +22,7 @@ class SelectedAccount extends Component {
   render () {
     const { t } = this.context
     const { selectedAddress, selectedIdentity } = this.props
+    const checksummedAddress = checksumAddress(selectedAddress)
 
     return (
       <div className="selected-account">
@@ -34,14 +35,14 @@ class SelectedAccount extends Component {
             onClick={() => {
               this.setState({ copied: true })
               setTimeout(() => this.setState({ copied: false }), 3000)
-              copyToClipboard(selectedAddress)
+              copyToClipboard(checksummedAddress)
             }}
           >
             <div className="selected-account__name">
               { selectedIdentity.name }
             </div>
             <div className="selected-account__address">
-              { addressSlicer(selectedAddress) }
+              { addressSlicer(checksummedAddress) }
             </div>
           </div>
         </Tooltip>
diff --git a/ui/app/components/selected-account/tests/selected-account-component.test.js b/ui/app/components/selected-account/tests/selected-account-component.test.js
new file mode 100644
index 000000000..78a94d1c8
--- /dev/null
+++ b/ui/app/components/selected-account/tests/selected-account-component.test.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import assert from 'assert'
+import { render } from 'enzyme'
+import SelectedAccount from '../selected-account.component'
+
+describe('SelectedAccount Component', () => {
+  it('should render checksummed address', () => {
+    const wrapper = render(<SelectedAccount
+      selectedAddress="0x1b82543566f41a7db9a9a75fc933c340ffb55c9d"
+      selectedIdentity={{ name: 'testName' }}
+    />, { context: { t: () => {}}})
+    // Checksummed version of address is displayed
+    assert.equal(wrapper.find('.selected-account__address').text(), '0x1B82...5C9D')
+    assert.equal(wrapper.find('.selected-account__name').text(), 'testName')
+  })
+})
diff --git a/ui/app/components/send/currency-display/tests/currency-display.test.js b/ui/app/components/send/currency-display/tests/currency-display.test.js
new file mode 100644
index 000000000..c9560b81c
--- /dev/null
+++ b/ui/app/components/send/currency-display/tests/currency-display.test.js
@@ -0,0 +1,91 @@
+import React from 'react'
+import assert from 'assert'
+import sinon from 'sinon'
+import { shallow, mount } from 'enzyme'
+import CurrencyDisplay from '../currency-display'
+
+describe('', () => {
+
+  const token = {
+    address: '0xTest',
+    symbol: 'TST',
+    decimals: '13',
+  }
+
+  it('retuns ETH value for wei value', () => {
+    const wrapper = mount(<CurrencyDisplay />, {context: {t: str => str + '_t'}})
+
+    const value = wrapper.instance().getValueToRender({
+      // 1000000000000000000
+      value: 'DE0B6B3A7640000',
+    })
+
+    assert.equal(value, 1)
+  })
+
+  it('returns value of token based on token decimals', () => {
+    const wrapper = mount(<CurrencyDisplay />, {context: {t: str => str + '_t'}})
+
+    const value = wrapper.instance().getValueToRender({
+      selectedToken: token,
+      // 1000000000000000000
+      value: 'DE0B6B3A7640000',
+    })
+
+    assert.equal(value, 100000)
+  })
+
+  it('returns hex value with decimal adjustment', () => {
+
+    const wrapper = mount(
+      <CurrencyDisplay
+        selectedToken={token}
+      />, {context: {t: str => str + '_t'}})
+
+    const value = wrapper.instance().getAmount(1)
+    // 10000000000000
+    assert.equal(value, '9184e72a000')
+  })
+
+  it('#getConvertedValueToRender converts input value based on conversionRate', () => {
+
+    const wrapper = mount(
+      <CurrencyDisplay
+        primaryCurrency={'usd'}
+        convertedCurrency={'ja'}
+        conversionRate={2}
+      />, {context: {t: str => str + '_t'}})
+
+    const value = wrapper.instance().getConvertedValueToRender(32)
+
+    assert.equal(value, 64)
+  })
+
+  it('#onlyRenderConversions renders single element for converted currency and value', () => {
+    const wrapper = mount(
+      <CurrencyDisplay
+        convertedCurrency={'test'}
+      />, {context: {t: str => str + '_t'}})
+
+    const value = wrapper.instance().onlyRenderConversions(10)
+    assert.equal(value.props.className, 'currency-display__converted-value')
+    assert.equal(value.props.children, '10 TEST')
+  })
+
+  it('simulates change value in input', () => {
+    const handleChangeSpy = sinon.spy()
+
+    const wrapper = shallow(
+      <CurrencyDisplay
+        onChange={handleChangeSpy}
+      />, {context: {t: str => str + '_t'}})
+
+    const input = wrapper.find('input')
+    input.simulate('focus')
+    input.simulate('change', { target: { value: '100' } })
+
+    assert.equal(wrapper.state().valueToRender, '100')
+    assert.equal(wrapper.find('input').prop('value'), '100')
+  })
+
+})
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
index 4d0d36ab4..ceb620941 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/amount-max-button.component.js
@@ -34,21 +34,27 @@ export default class AmountMaxButton extends Component {
     })
   }
 
+  onMaxClick = (event) => {
+    const { setMaxModeTo } = this.props
+
+    event.preventDefault()
+    setMaxModeTo(true)
+    this.setMaxAmount()
+  }
+
   render () {
-    const { setMaxModeTo, maxModeOn } = this.props
-
-    return (
-      <div
-        className="send-v2__amount-max"
-        onClick={(event) => {
-          event.preventDefault()
-          setMaxModeTo(true)
-          this.setMaxAmount()
-        }}
-      >
-        {!maxModeOn ? this.context.t('max') : ''}
-      </div>
-    )
+    return this.props.maxModeOn
+      ? null
+      : (
+        <div>
+          <span
+            className="send-v2__amount-max"
+            onClick={this.onMaxClick}
+          >
+            {this.context.t('max')}
+          </span>
+        </div>
+      )
   }
 
 }
diff --git a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
index 86a05ff21..b04d3897f 100644
--- a/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
+++ b/ui/app/components/send/send-content/send-amount-row/amount-max-button/tests/amount-max-button-component.test.js
@@ -56,9 +56,8 @@ describe('AmountMaxButton Component', function () {
   })
 
   describe('render', () => {
-    it('should render a div with a send-v2__amount-max class', () => {
-      assert.equal(wrapper.find('.send-v2__amount-max').length, 1)
-      assert(wrapper.find('.send-v2__amount-max').is('div'))
+    it('should render an element with a send-v2__amount-max class', () => {
+      assert(wrapper.exists('.send-v2__amount-max'))
     })
 
     it('should call setMaxModeTo and setMaxAmount when the send-v2__amount-max div is clicked', () => {
@@ -77,9 +76,9 @@ describe('AmountMaxButton Component', function () {
       )
     })
 
-    it('should not render text when maxModeOn is true', () => {
+    it('should not render anything when maxModeOn is true', () => {
       wrapper.setProps({ maxModeOn: true })
-      assert.equal(wrapper.find('.send-v2__amount-max').text(), '')
+      assert.ok(!wrapper.exists('.send-v2__amount-max'))
     })
 
     it('should render the expected text when maxModeOn is false', () => {
diff --git a/ui/app/components/send/send-content/send-content.component.js b/ui/app/components/send/send-content/send-content.component.js
index 9e0ce9c23..1b03ffd2b 100644
--- a/ui/app/components/send/send-content/send-content.component.js
+++ b/ui/app/components/send/send-content/send-content.component.js
@@ -15,18 +15,24 @@ export default class SendContent extends Component {
     showHexData: PropTypes.bool,
   };
 
+  updateGas = (updateData) => this.props.updateGas(updateData)
+
   render () {
     return (
       <PageContainerContent>
         <div className="send-v2__form">
           <SendFromRow />
           <SendToRow
-            updateGas={(updateData) => this.props.updateGas(updateData)}
+            updateGas={this.updateGas}
             scanQrCode={ _ => this.props.scanQrCode()}
           />
-          <SendAmountRow updateGas={(updateData) => this.props.updateGas(updateData)} />
+          <SendAmountRow updateGas={this.updateGas} />
           <SendGasRow />
-          { this.props.showHexData ? <SendHexDataRow /> : null }
+          {(this.props.showHexData && (
+            <SendHexDataRow
+              updateGas={this.updateGas}
+            />
+          ))}
         </div>
       </PageContainerContent>
     )
diff --git a/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
index 063930db3..62a74a77b 100644
--- a/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
+++ b/ui/app/components/send/send-content/send-hex-data-row/send-hex-data-row.component.js
@@ -7,6 +7,7 @@ export default class SendHexDataRow extends Component {
     data: PropTypes.string,
     inError: PropTypes.bool,
     updateSendHexData: PropTypes.func.isRequired,
+    updateGas: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -14,9 +15,10 @@ export default class SendHexDataRow extends Component {
   };
 
   onInput = (event) => {
-    const {updateSendHexData} = this.props
-    event.target.value = event.target.value.replace(/\n/g, '')
-    updateSendHexData(event.target.value || null)
+    const {updateSendHexData, updateGas} = this.props
+    const data = event.target.value.replace(/\n/g, '') || null
+    updateSendHexData(data)
+    updateGas({ data })
   }
 
   render () {
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
index 434db81e5..17c75c817 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
@@ -8,6 +8,7 @@ export default class SendToRow extends Component {
 
   static propTypes = {
     closeToDropdown: PropTypes.func,
+    hasHexData: PropTypes.bool.isRequired,
     inError: PropTypes.bool,
     network: PropTypes.string,
     openToDropdown: PropTypes.func,
@@ -25,8 +26,8 @@ export default class SendToRow extends Component {
   };
 
   handleToChange (to, nickname = '', toError) {
-    const { updateSendTo, updateSendToError, updateGas } = this.props
-    const toErrorObject = getToErrorObject(to, toError)
+    const { hasHexData, updateSendTo, updateSendToError, updateGas } = this.props
+    const toErrorObject = getToErrorObject(to, toError, hasHexData)
     updateSendTo(to, nickname)
     updateSendToError(toErrorObject)
     if (toErrorObject.to === null) {
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.container.js b/ui/app/components/send/send-content/send-to-row/send-to-row.container.js
index 1c9c9d518..3ee188bad 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.container.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.container.js
@@ -3,6 +3,7 @@ import {
     getCurrentNetwork,
     getSendTo,
     getSendToAccounts,
+    getSendHexData,
 } from '../../send.selectors.js'
 import {
     getToDropdownOpen,
@@ -22,6 +23,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(SendToRow)
 
 function mapStateToProps (state) {
   return {
+    hasHexData: Boolean(getSendHexData(state)),
     inError: sendToIsInError(state),
     network: getCurrentNetwork(state),
     to: getSendTo(state),
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js b/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
index 6b90a9f09..0eeaa3a11 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.utils.js
@@ -4,9 +4,11 @@ const {
 } = require('../../send.constants')
 const { isValidAddress } = require('../../../../util')
 
-function getToErrorObject (to, toError = null) {
+function getToErrorObject (to, toError = null, hasHexData = false) {
   if (!to) {
-    toError = REQUIRED_ERROR
+    if (!hasHexData) {
+      toError = REQUIRED_ERROR
+    }
   } else if (!isValidAddress(to) && !toError) {
     toError = INVALID_RECIPIENT_ADDRESS_ERROR
   }
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
index 92355c00a..dfce7652f 100644
--- a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
+++ b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-container.test.js
@@ -24,6 +24,7 @@ proxyquire('../send-to-row.container.js', {
   },
   '../../send.selectors.js': {
     getCurrentNetwork: (s) => `mockNetwork:${s}`,
+    getSendHexData: (s) => s,
     getSendTo: (s) => `mockTo:${s}`,
     getSendToAccounts: (s) => `mockToAccounts:${s}`,
   },
@@ -41,6 +42,7 @@ describe('send-to-row container', () => {
 
     it('should map the correct properties to props', () => {
       assert.deepEqual(mapStateToProps('mockState'), {
+        hasHexData: true,
         inError: 'mockInError:mockState',
         network: 'mockNetwork:mockState',
         to: 'mockTo:mockState',
diff --git a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
index 4d2447c32..c779aeb76 100644
--- a/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
+++ b/ui/app/components/send/send-content/send-to-row/tests/send-to-row-utils.test.js
@@ -29,6 +29,12 @@ describe('send-to-row utils', () => {
       })
     })
 
+    it('should return null if to is falsy and hexData is truthy', () => {
+      assert.deepEqual(getToErrorObject(null, undefined, true), {
+        to: null,
+      })
+    })
+
     it('should return an invalid recipient error if to is truthy but invalid', () => {
       assert.deepEqual(getToErrorObject('mockInvalidTo'), {
         to: INVALID_RECIPIENT_ADDRESS_ERROR,
diff --git a/ui/app/components/send/send-footer/send-footer.component.js b/ui/app/components/send/send-footer/send-footer.component.js
index 518cff06e..230bf450f 100644
--- a/ui/app/components/send/send-footer/send-footer.component.js
+++ b/ui/app/components/send/send-footer/send-footer.component.js
@@ -86,9 +86,9 @@ export default class SendFooter extends Component {
   }
 
   formShouldBeDisabled () {
-    const { inError, selectedToken, tokenBalance, gasTotal, to } = this.props
+    const { data, inError, selectedToken, tokenBalance, gasTotal, to } = this.props
     const missingTokenBalance = selectedToken && !tokenBalance
-    return inError || !gasTotal || missingTokenBalance || !to
+    return inError || !gasTotal || missingTokenBalance || !(data || to)
   }
 
   render () {
diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js
index 0dc973632..fb7beca16 100644
--- a/ui/app/components/send/send.component.js
+++ b/ui/app/components/send/send.component.js
@@ -62,7 +62,7 @@ export default class SendTransactionScreen extends PersistentForm {
     }
   }
 
-  updateGas ({ to: updatedToAddress, amount: value } = {}) {
+  updateGas ({ to: updatedToAddress, amount: value, data } = {}) {
     const {
       amount,
       blockGasLimit,
@@ -86,6 +86,7 @@ export default class SendTransactionScreen extends PersistentForm {
       selectedToken,
       to: getToAddressForGasUpdate(updatedToAddress, currentToAddress),
       value: value || amount,
+      data,
     })
   }
 
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js
index 6ee8de9aa..87056499f 100644
--- a/ui/app/components/send/send.container.js
+++ b/ui/app/components/send/send.container.js
@@ -86,9 +86,10 @@ function mapDispatchToProps (dispatch) {
       selectedToken,
       to,
       value,
+      data,
     }) => {
       !editingTransactionId
-        ? dispatch(updateGasData({ recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value }))
+        ? dispatch(updateGasData({ recentBlocks, selectedAddress, selectedToken, blockGasLimit, to, value, data }))
         : dispatch(setGasTotal(calcGasTotal(gasLimit, gasPrice)))
     },
     updateSendTokenBalance: ({ selectedToken, tokenContract, address }) => {
diff --git a/ui/app/components/send/send.utils.js b/ui/app/components/send/send.utils.js
index aa255c3d4..a18a9e4b3 100644
--- a/ui/app/components/send/send.utils.js
+++ b/ui/app/components/send/send.utils.js
@@ -200,16 +200,20 @@ function doesAmountErrorRequireUpdate ({
   return amountErrorRequiresUpdate
 }
 
-async function estimateGas ({ selectedAddress, selectedToken, blockGasLimit, to, value, gasPrice, estimateGasMethod }) {
+async function estimateGas ({
+  selectedAddress,
+  selectedToken,
+  blockGasLimit,
+  to,
+  value,
+  data,
+  gasPrice,
+  estimateGasMethod,
+}) {
   const paramsForGasEstimate = { from: selectedAddress, value, gasPrice }
 
-  if (selectedToken) {
-    paramsForGasEstimate.value = '0x0'
-    paramsForGasEstimate.data = generateTokenTransferData({ toAddress: to, amount: value, selectedToken })
-  }
-
   // if recipient has no code, gas is 21k max:
-  if (!selectedToken) {
+  if (!selectedToken && !data) {
     const code = Boolean(to) && await global.eth.getCode(to)
     if (!code || code === '0x') {
       return SIMPLE_GAS_COST
@@ -218,7 +222,19 @@ async function estimateGas ({ selectedAddress, selectedToken, blockGasLimit, to,
     return BASE_TOKEN_GAS_COST
   }
 
-  paramsForGasEstimate.to = selectedToken ? selectedToken.address : to
+  if (selectedToken) {
+    paramsForGasEstimate.value = '0x0'
+    paramsForGasEstimate.data = generateTokenTransferData({ toAddress: to, amount: value, selectedToken })
+    paramsForGasEstimate.to = selectedToken.address
+  } else {
+    if (data) {
+      paramsForGasEstimate.data = data
+    }
+
+    if (to) {
+      paramsForGasEstimate.to = to
+    }
+  }
 
   // if not, fall back to block gasLimit
   paramsForGasEstimate.gas = ethUtil.addHexPrefix(multiplyCurrencies(blockGasLimit, 0.95, {
diff --git a/ui/app/components/send/tests/send-component.test.js b/ui/app/components/send/tests/send-component.test.js
index d2c2ee926..f4943e707 100644
--- a/ui/app/components/send/tests/send-component.test.js
+++ b/ui/app/components/send/tests/send-component.test.js
@@ -289,6 +289,7 @@ describe('Send Component', function () {
           selectedToken: 'mockSelectedToken',
           to: '',
           value: 'mockAmount',
+          data: undefined,
         }
       )
     })
diff --git a/ui/app/components/send/tests/send-container.test.js b/ui/app/components/send/tests/send-container.test.js
index 85eec6a53..6aa4bf826 100644
--- a/ui/app/components/send/tests/send-container.test.js
+++ b/ui/app/components/send/tests/send-container.test.js
@@ -105,6 +105,7 @@ describe('send container', () => {
         selectedToken: { address: '0x1' },
         to: 'mockTo',
         value: 'mockValue',
+        data: undefined,
       }
 
       it('should dispatch a setGasTotal action when editingTransactionId is truthy', () => {
@@ -117,14 +118,14 @@ describe('send container', () => {
       })
 
       it('should dispatch an updateGasData action when editingTransactionId is falsy', () => {
-        const { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value } = mockProps
+        const { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data } = mockProps
         mapDispatchToPropsObject.updateAndSetGasTotal(
           Object.assign({}, mockProps, {editingTransactionId: false})
         )
         assert(dispatchSpy.calledOnce)
         assert.deepEqual(
           actionSpies.updateGasData.getCall(0).args[0],
-          { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value }
+          { selectedAddress, selectedToken, recentBlocks, blockGasLimit, to, value, data }
         )
       })
     })
diff --git a/ui/app/components/send/tests/send-utils.test.js b/ui/app/components/send/tests/send-utils.test.js
index 18dde495a..b72d87eee 100644
--- a/ui/app/components/send/tests/send-utils.test.js
+++ b/ui/app/components/send/tests/send-utils.test.js
@@ -304,10 +304,13 @@ describe('send utils', () => {
       selectedAddress: 'mockAddress',
       to: '0xisContract',
       estimateGasMethod: sinon.stub().callsFake(
-        (data, cb) => cb(
-          data.to.match(/willFailBecauseOf:/) ? { message: data.to.match(/:(.+)$/)[1] } : null,
-          { toString: (n) => `0xabc${n}` }
-        )
+        ({to}, cb) => {
+          const err = typeof to === 'string' && to.match(/willFailBecauseOf:/)
+            ? new Error(to.match(/:(.+)$/)[1])
+            : null
+          const result = { toString: (n) => `0xabc${n}` }
+          return cb(err, result)
+        }
       ),
     }
     const baseExpectedCall = {
@@ -364,6 +367,18 @@ describe('send utils', () => {
       assert.equal(result, '0xabc16')
     })
 
+    it('should call ethQuery.estimateGas without a recipient if the recipient is empty and data passed', async () => {
+      const data = 'mockData'
+      const to = ''
+      const result = await estimateGas({...baseMockParams, data, to})
+      assert.equal(baseMockParams.estimateGasMethod.callCount, 1)
+      assert.deepEqual(
+        baseMockParams.estimateGasMethod.getCall(0).args[0],
+        { gasPrice: undefined, value: undefined, data, from: baseExpectedCall.from, gas: baseExpectedCall.gas},
+      )
+      assert.equal(result, '0xabc16')
+    })
+
     it(`should return ${SIMPLE_GAS_COST} if ethQuery.getCode does not return '0x'`, async () => {
       assert.equal(baseMockParams.estimateGasMethod.callCount, 0)
       const result = await estimateGas(Object.assign({}, baseMockParams, { to: '0x123' }))
@@ -407,7 +422,7 @@ describe('send utils', () => {
           to: 'isContract willFailBecauseOf:some other error',
         }))
       } catch (err) {
-        assert.deepEqual(err, { message: 'some other error' })
+        assert.equal(err.message, 'some other error')
       }
     })
   })
diff --git a/ui/app/components/send/to-autocomplete/to-autocomplete.js b/ui/app/components/send/to-autocomplete/to-autocomplete.js
index 49ebf49d9..39d15dfa7 100644
--- a/ui/app/components/send/to-autocomplete/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete/to-autocomplete.js
@@ -5,6 +5,7 @@ const inherits = require('util').inherits
 const AccountListItem = require('../account-list-item/account-list-item.component').default
 const connect = require('react-redux').connect
 const Tooltip = require('../../tooltip')
+const checksumAddress = require('../../../util').checksumAddress
 
 ToAutoComplete.contextTypes = {
   t: PropTypes.func,
@@ -48,7 +49,7 @@ ToAutoComplete.prototype.renderDropdown = function () {
         account,
         className: 'account-list-item__dropdown',
         handleClick: () => {
-          onChange(account.address)
+          onChange(checksumAddress(account.address))
           closeDropdown()
         },
         icon: this.getListItemIcon(account.address, to),
diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/sender-to-recipient/index.scss
index 656e30ddf..0ab0413be 100644
--- a/ui/app/components/sender-to-recipient/index.scss
+++ b/ui/app/components/sender-to-recipient/index.scss
@@ -80,13 +80,13 @@
     justify-content: center;
     position: relative;
     flex: 0 0 auto;
-    padding: 8px;
 
     .sender-to-recipient {
       &__party {
         display: flex;
         flex-direction: row;
         align-items: center;
+        justify-content: center;
         flex: 1;
         border-radius: 4px;
         box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
@@ -111,7 +111,6 @@
       }
 
       &__arrow-container {
-        padding: 0 2px;
         display: flex;
         justify-content: center;
         align-items: center;
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
index 445a11d8a..e71bd7406 100644
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
@@ -5,6 +5,7 @@ import Identicon from '../identicon'
 import Tooltip from '../tooltip-v2'
 import copyToClipboard from 'copy-to-clipboard'
 import { DEFAULT_VARIANT, CARDS_VARIANT } from './sender-to-recipient.constants'
+import { checksumAddress } from '../../util'
 
 const variantHash = {
   [DEFAULT_VARIANT]: 'sender-to-recipient--default',
@@ -40,7 +41,7 @@ export default class SenderToRecipient extends PureComponent {
     return !this.props.addressOnly && (
       <div className="sender-to-recipient__sender-icon">
         <Identicon
-          address={this.props.senderAddress}
+          address={checksumAddress(this.props.senderAddress)}
           diameter={24}
         />
       </div>
@@ -50,6 +51,7 @@ export default class SenderToRecipient extends PureComponent {
   renderSenderAddress () {
     const { t } = this.context
     const { senderName, senderAddress, addressOnly } = this.props
+    const checksummedSenderAddress = checksumAddress(senderAddress)
 
     return (
       <Tooltip
@@ -60,7 +62,7 @@ export default class SenderToRecipient extends PureComponent {
         onHidden={() => this.setState({ senderAddressCopied: false })}
       >
       <div className="sender-to-recipient__name">
-        { addressOnly ? `${t('from')}: ${senderAddress}` : senderName }
+        { addressOnly ? `${t('from')}: ${checksummedSenderAddress}` : senderName }
       </div>
     </Tooltip>
     )
@@ -68,11 +70,12 @@ export default class SenderToRecipient extends PureComponent {
 
   renderRecipientIdenticon () {
     const { recipientAddress, assetImage } = this.props
+    const checksummedRecipientAddress = checksumAddress(recipientAddress)
 
     return !this.props.addressOnly && (
       <div className="sender-to-recipient__sender-icon">
         <Identicon
-          address={recipientAddress}
+          address={checksummedRecipientAddress}
           diameter={24}
           image={assetImage}
         />
@@ -83,13 +86,14 @@ export default class SenderToRecipient extends PureComponent {
   renderRecipientWithAddress () {
     const { t } = this.context
     const { recipientName, recipientAddress, addressOnly } = this.props
+    const checksummedRecipientAddress = checksumAddress(recipientAddress)
 
     return (
       <div
         className="sender-to-recipient__party sender-to-recipient__party--recipient sender-to-recipient__party--recipient-with-address"
         onClick={() => {
           this.setState({ recipientAddressCopied: true })
-          copyToClipboard(recipientAddress)
+          copyToClipboard(checksummedRecipientAddress)
         }}
       >
         { this.renderRecipientIdenticon() }
@@ -103,7 +107,7 @@ export default class SenderToRecipient extends PureComponent {
           <div className="sender-to-recipient__name">
             {
               addressOnly
-                ? `${t('to')}: ${recipientAddress}`
+                ? `${t('to')}: ${checksummedRecipientAddress}`
                 : (recipientName || this.context.t('newContract'))
             }
           </div>
@@ -115,7 +119,7 @@ export default class SenderToRecipient extends PureComponent {
   renderRecipientWithoutAddress () {
     return (
       <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
-        <i className="fa fa-file-text-o" />
+        { !this.props.addressOnly && <i className="fa fa-file-text-o" /> }
         <div className="sender-to-recipient__name">
           { this.context.t('newContract') }
         </div>
@@ -147,6 +151,7 @@ export default class SenderToRecipient extends PureComponent {
 
   render () {
     const { senderAddress, recipientAddress, variant } = this.props
+    const checksummedSenderAddress = checksumAddress(senderAddress)
 
     return (
       <div className={classnames(variantHash[variant])}>
@@ -154,7 +159,7 @@ export default class SenderToRecipient extends PureComponent {
           className={classnames('sender-to-recipient__party sender-to-recipient__party--sender')}
           onClick={() => {
             this.setState({ senderAddressCopied: true })
-            copyToClipboard(senderAddress)
+            copyToClipboard(checksummedSenderAddress)
           }}
         >
           { this.renderSenderIdenticon() }
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 2c4ba40bf..a842bcc8b 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -9,6 +9,8 @@ const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions
 const { isValidAddress } = require('../util')
 const SimpleDropdown = require('./dropdowns/simple-dropdown')
 
+import Button from './button'
+
 function mapStateToProps (state) {
   const {
     coinOptions,
@@ -242,8 +244,10 @@ ShapeshiftForm.prototype.render = function () {
 
       ]),
 
-      !depositAddress && h('button.btn-primary.btn--large.shapeshift-form__shapeshift-buy-btn', {
-        className: btnClass,
+      !depositAddress && h(Button, {
+        type: 'primary',
+        large: true,
+        className: `${btnClass} shapeshift-form__shapeshift-buy-btn`,
         disabled: !token,
         onClick: () => this.onBuyWithShapeShift(),
       }, [this.context.t('buy')]),
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 2e0102d1a..d76eb5ef8 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -8,6 +8,7 @@ const ethUtil = require('ethereumjs-util')
 const classnames = require('classnames')
 const { compose } = require('recompose')
 const { withRouter } = require('react-router-dom')
+const { ObjectInspector } = require('react-inspector')
 
 const AccountDropdownMini = require('./dropdowns/account-dropdown-mini')
 
@@ -23,6 +24,7 @@ const {
 } = require('../selectors.js')
 
 import { clearConfirmTransaction } from '../ducks/confirm-transaction.duck'
+import Button from './button'
 
 const { DEFAULT_ROUTE } = require('../routes')
 
@@ -168,12 +170,29 @@ SignatureRequest.prototype.msgHexToText = function (hex) {
   }
 }
 
+// eslint-disable-next-line react/display-name
+SignatureRequest.prototype.renderTypedDataV3 = function (data) {
+  const { domain, message } = JSON.parse(data)
+  return [
+    h('div.request-signature__typed-container', [
+      domain ? h('div', [
+        h('h1', 'Domain'),
+        h(ObjectInspector, { data: domain, expandLevel: 1, name: 'domain' }),
+      ]) : '',
+      message ? h('div', [
+        h('h1', 'Message'),
+        h(ObjectInspector, { data: message, expandLevel: 1, name: 'message' }),
+      ]) : '',
+    ]),
+  ]
+}
+
 SignatureRequest.prototype.renderBody = function () {
   let rows
   let notice = this.context.t('youSign') + ':'
 
   const { txData } = this.props
-  const { type, msgParams: { data } } = txData
+  const { type, msgParams: { data, version } } = txData
 
   if (type === 'personal_sign') {
     rows = [{ name: this.context.t('message'), value: this.msgHexToText(data) }]
@@ -185,7 +204,7 @@ SignatureRequest.prototype.renderBody = function () {
       h('span.request-signature__help-link', {
         onClick: () => {
           global.platform.openWindow({
-            url: 'https://consensys.zendesk.com/hc/en-us/articles/360004427792',
+            url: 'https://metamask.zendesk.com/hc/en-us/articles/360015488751',
           })
         },
     }, this.context.t('learnMore'))]
@@ -204,9 +223,9 @@ SignatureRequest.prototype.renderBody = function () {
       }),
     }, [notice]),
 
-    h('div.request-signature__rows', [
-
-      ...rows.map(({ name, value }) => {
+    h('div.request-signature__rows', type === 'eth_signTypedData' && version === 'V3' ?
+      this.renderTypedDataV3(data) :
+      rows.map(({ name, value }) => {
         if (typeof value === 'boolean') {
           value = value.toString()
         }
@@ -215,9 +234,7 @@ SignatureRequest.prototype.renderBody = function () {
           h('div.request-signature__row-value', value),
         ])
       }),
-
-    ]),
-
+    ),
   ])
 }
 
@@ -248,7 +265,10 @@ SignatureRequest.prototype.renderFooter = function () {
   }
 
   return h('div.request-signature__footer', [
-    h('button.btn-default.btn--large.request-signature__footer__cancel-button', {
+    h(Button, {
+      type: 'default',
+      large: true,
+      className: 'request-signature__footer__cancel-button',
       onClick: event => {
         cancel(event).then(() => {
           this.props.clearConfirmTransaction()
@@ -256,7 +276,9 @@ SignatureRequest.prototype.renderFooter = function () {
         })
       },
     }, this.context.t('cancel')),
-    h('button.btn-primary.btn--large', {
+    h(Button, {
+      type: 'primary',
+      large: true,
       onClick: event => {
         sign(event).then(() => {
           this.props.clearConfirmTransaction()
diff --git a/ui/app/components/token-currency-display/token-currency-display.component.js b/ui/app/components/token-currency-display/token-currency-display.component.js
index 957aec376..4bb09a4b6 100644
--- a/ui/app/components/token-currency-display/token-currency-display.component.js
+++ b/ui/app/components/token-currency-display/token-currency-display.component.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import CurrencyDisplay from '../currency-display/currency-display.component'
 import { getTokenData } from '../../helpers/transactions.util'
-import { calcTokenAmount } from '../../token-util'
+import { getTokenValue, calcTokenAmount } from '../../token-util'
 
 export default class TokenCurrencyDisplay extends PureComponent {
   static propTypes = {
@@ -34,8 +34,8 @@ export default class TokenCurrencyDisplay extends PureComponent {
 
     let displayValue
 
-    if (tokenData.params && tokenData.params.length === 2) {
-      const tokenValue = tokenData.params[1].value
+    if (tokenData.params && tokenData.params.length) {
+      const tokenValue = getTokenValue(tokenData.params)
       const tokenAmount = calcTokenAmount(tokenValue, decimals)
       displayValue = `${tokenAmount} ${symbol}`
     }
diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/tooltip-v2.js
index 05a5efc80..054782203 100644
--- a/ui/app/components/tooltip-v2.js
+++ b/ui/app/components/tooltip-v2.js
@@ -1,33 +1,66 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const ReactTippy = require('react-tippy').Tooltip
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+import {Tooltip as ReactTippy} from 'react-tippy'
 
-module.exports = Tooltip
+export default class Tooltip extends PureComponent {
+  static defaultProps = {
+    arrow: true,
+    children: null,
+    containerClassName: '',
+    hideOnClick: false,
+    onHidden: null,
+    position: 'left',
+    size: 'small',
+    title: null,
+    trigger: 'mouseenter',
+    wrapperClassName: '',
+  }
 
-inherits(Tooltip, Component)
-function Tooltip () {
-  Component.call(this)
-}
-
-Tooltip.prototype.render = function () {
-  const props = this.props
-  const { position, title, children, wrapperClassName, containerClassName, onHidden } = props
+  static propTypes = {
+    arrow: PropTypes.bool,
+    children: PropTypes.node,
+    containerClassName: PropTypes.string,
+    onHidden: PropTypes.func,
+    position: PropTypes.oneOf([
+      'top',
+      'right',
+      'bottom',
+      'left',
+    ]),
+    size: PropTypes.oneOf([
+      'small', 'regular', 'big',
+    ]),
+    title: PropTypes.string,
+    trigger: PropTypes.any,
+    wrapperClassName: PropTypes.string,
+  }
 
-  return h('div', {
-      className: wrapperClassName,
-    }, [
+  render () {
+    const {arrow, children, containerClassName, position, size, title, trigger, onHidden, wrapperClassName } = this.props
 
-    h(ReactTippy, {
-      title,
-      position: position || 'left',
-      trigger: 'mouseenter',
-      hideOnClick: false,
-      size: 'small',
-      arrow: true,
-      className: containerClassName,
-      onHidden,
-    }, children),
+    if (!title) {
+      return (
+        <div className={wrapperClassName}>
+          {children}
+        </div>
+      )
+    }
 
-  ])
+    return (
+      <div className={wrapperClassName}>
+        <ReactTippy
+          className={containerClassName}
+          title={title}
+          position={position}
+          trigger={trigger}
+          hideOnClick={false}
+          size={size}
+          arrow={arrow}
+          onHidden={onHidden}
+        >
+          {children}
+        </ReactTippy>
+      </div>
+    )
+  }
 }
diff --git a/ui/app/components/transaction-action/tests/transaction-action.component.test.js b/ui/app/components/transaction-action/tests/transaction-action.component.test.js
index 218792847..b22a9db39 100644
--- a/ui/app/components/transaction-action/tests/transaction-action.component.test.js
+++ b/ui/app/components/transaction-action/tests/transaction-action.component.test.js
@@ -5,16 +5,19 @@ import sinon from 'sinon'
 import TransactionAction from '../transaction-action.component'
 
 describe('TransactionAction Component', () => {
-  const tOrDefault = key => key
-  global.eth = {
-    getCode: sinon.stub().callsFake(address => {
-      console.log('CALLED')
-      const code = address === 'approveAddress' ? 'contract' : '0x'
-      return Promise.resolve(code)
-    }),
-  }
+  const t = key => key
+
 
   describe('Outgoing transaction', () => {
+    beforeEach(() => {
+      global.eth = {
+        getCode: sinon.stub().callsFake(address => {
+          const code = address === 'approveAddress' ? 'contract' : '0x'
+          return Promise.resolve(code)
+        }),
+      }
+    })
+
     it('should render -- when methodData is still fetching', () => {
       const methodData = { data: {}, done: false, error: null }
       const transaction = {
@@ -36,7 +39,7 @@ describe('TransactionAction Component', () => {
         methodData={methodData}
         transaction={transaction}
         className="transaction-action"
-      />, { context: { tOrDefault }})
+      />, { context: { t }})
 
       assert.equal(wrapper.find('.transaction-action').length, 1)
       assert.equal(wrapper.text(), '--')
@@ -63,14 +66,14 @@ describe('TransactionAction Component', () => {
         methodData={methodData}
         transaction={transaction}
         className="transaction-action"
-      />, { context: { tOrDefault }})
+      />, { context: { t }})
 
       assert.equal(wrapper.find('.transaction-action').length, 1)
       wrapper.setState({ transactionAction: 'sentEther' })
       assert.equal(wrapper.text(), 'sentEther')
     })
 
-    it('should render Approved', () => {
+    it('should render Approved', async () => {
       const methodData = {
         data: {
           name: 'Approve',
@@ -98,15 +101,62 @@ describe('TransactionAction Component', () => {
         },
       }
 
-      const wrapper = shallow(<TransactionAction
-        methodData={methodData}
-        transaction={transaction}
-        className="transaction-action"
-      />, { context: { tOrDefault }})
+      const wrapper = shallow(
+        <TransactionAction
+          methodData={methodData}
+          transaction={transaction}
+          className="test-class"
+        />,
+        { context: { t } }
+      )
 
-      assert.equal(wrapper.find('.transaction-action').length, 1)
-      wrapper.setState({ transactionAction: 'approve' })
-      assert.equal(wrapper.text(), 'approve')
+      assert.ok(wrapper)
+      assert.equal(wrapper.find('.test-class').length, 1)
+      await wrapper.instance().getTransactionAction()
+      assert.equal(wrapper.state('transactionAction'), 'approve')
+    })
+
+    it('should render Accept Fulfillment', async () => {
+      const methodData = {
+        data: {
+          name: 'AcceptFulfillment',
+          params: [
+            { type: 'address' },
+            { type: 'uint256' },
+          ],
+        },
+        done: true,
+        error: null,
+      }
+      const transaction = {
+        id: 1,
+        status: 'confirmed',
+        submittedTime: 1534045442919,
+        time: 1534045440641,
+        txParams: {
+          from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+          gas: '0x5208',
+          gasPrice: '0x3b9aca00',
+          nonce: '0x96',
+          to: 'approveAddress',
+          value: '0x2386f26fc10000',
+          data: '0x095ea7b300000000000000000000000050a9d56c2b8ba9a5c7f2c08c3d26e0499f23a7060000000000000000000000000000000000000000000000000000000000000003',
+        },
+      }
+
+      const wrapper = shallow(
+        <TransactionAction
+          methodData={methodData}
+          transaction={transaction}
+          className="test-class"
+        />,
+        { context: { t }}
+      )
+
+      assert.ok(wrapper)
+      assert.equal(wrapper.find('.test-class').length, 1)
+      await wrapper.instance().getTransactionAction()
+      assert.equal(wrapper.state('transactionAction'), ' Accept Fulfillment')
     })
   })
 })
diff --git a/ui/app/components/transaction-action/transaction-action.component.js b/ui/app/components/transaction-action/transaction-action.component.js
index 81a1e96d0..1de91cb71 100644
--- a/ui/app/components/transaction-action/transaction-action.component.js
+++ b/ui/app/components/transaction-action/transaction-action.component.js
@@ -1,10 +1,12 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import { getTransactionActionKey } from '../../helpers/transactions.util'
+import { camelCaseToCapitalize } from '../../helpers/common.util'
 
 export default class TransactionAction extends PureComponent {
   static contextTypes = {
-    tOrDefault: PropTypes.func,
+    t: PropTypes.func,
   }
 
   static propTypes = {
@@ -29,13 +31,17 @@ export default class TransactionAction extends PureComponent {
     const { transactionAction } = this.state
     const { transaction, methodData } = this.props
     const { data, done } = methodData
+    const { name = '' } = data
 
     if (!done || transactionAction) {
       return
     }
 
     const actionKey = await getTransactionActionKey(transaction, data)
-    const action = actionKey && this.context.tOrDefault(actionKey)
+    const action = actionKey
+      ? this.context.t(actionKey)
+      : camelCaseToCapitalize(name)
+
     this.setState({ transactionAction: action })
   }
 
@@ -44,7 +50,7 @@ export default class TransactionAction extends PureComponent {
     const { transactionAction } = this.state
 
     return (
-      <div className={className}>
+      <div className={classnames('transaction-action', className)}>
         { (done && transactionAction) || '--' }
       </div>
     )
diff --git a/ui/app/components/transaction-activity-log/index.js b/ui/app/components/transaction-activity-log/index.js
new file mode 100644
index 000000000..a33da15a3
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-activity-log.container'
diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss
new file mode 100644
index 000000000..27f3006b3
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/index.scss
@@ -0,0 +1,70 @@
+.transaction-activity-log {
+  &__card {
+    background: $white;
+    height: 100%;
+  }
+
+  &__activities-container {
+    padding-top: 8px;
+  }
+
+  &__activity {
+    padding: 4px 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      width: 6px;
+      border-right: 1px solid $scorpion;
+    }
+
+    &:first-child::after {
+      height: 50%;
+      top: 50%;
+    }
+
+    &:last-child::after {
+      height: 50%;
+    }
+
+    &:first-child:last-child::after {
+      display: none;
+    }
+  }
+
+  &__activity-icon {
+    width: 13px;
+    height: 13px;
+    margin-right: 6px;
+    border-radius: 50%;
+    background: $scorpion;
+    flex: 0 0 auto;
+  }
+
+  &__activity-text {
+    color: $scorpion;
+    font-size: .75rem;
+
+    @media screen and (min-width: $break-large) {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__value {
+    display: inline;
+    font-weight: 500;
+  }
+
+  b {
+    font-weight: 500;
+  }
+}
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
new file mode 100644
index 000000000..8687dbbc7
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionActivityLog from '../transaction-activity-log.component'
+import Card from '../../card'
+
+describe('TransactionActivityLog Component', () => {
+  it('should render properly', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const wrapper = shallow(
+      <TransactionActivityLog
+        transaction={transaction}
+        className="test-class"
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-activity-log'))
+    assert.ok(wrapper.hasClass('test-class'))
+    assert.equal(wrapper.find(Card).length, 1)
+  })
+})
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js
new file mode 100644
index 000000000..85d56a6a2
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js
@@ -0,0 +1,27 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../transaction-activity-log.container.js', {
+  'react-redux': {
+    connect: ms => {
+      mapStateToProps = ms
+      return () => ({})
+    },
+  },
+})
+
+describe('TransactionActivityLog container', () => {
+  describe('mapStateToProps()', () => {
+    it('should return the correct props', () => {
+      const mockState = {
+        metamask: {
+          conversionRate: 280.45,
+        },
+      }
+
+      assert.deepEqual(mapStateToProps(mockState), { conversionRate: 280.45 })
+    })
+  })
+})
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
new file mode 100644
index 000000000..586500408
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
@@ -0,0 +1,208 @@
+import assert from 'assert'
+import { getActivities } from '../transaction-activity-log.util'
+
+describe('getActivities', () => {
+  it('should return no activities for an empty history', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    assert.deepEqual(getActivities(transaction), [])
+  })
+
+  it('should return activities for a transaction\'s history', () => {
+    const transaction = {
+      history: [
+        {
+          id: 5559712943815343,
+          loadingDefaults: true,
+          metamaskNetworkId: '3',
+          status: 'unapproved',
+          time: 1535507561452,
+          txParams: {
+            from: '0x1',
+            gas: '0x5208',
+            gasPrice: '0x3b9aca00',
+            nonce: '0xa4',
+            to: '0x2',
+            value: '0x2386f26fc10000',
+          },
+        },
+        [
+          {
+            op: 'replace',
+            path: '/loadingDefaults',
+            timestamp: 1535507561515,
+            value: false,
+          },
+          {
+            op: 'add',
+            path: '/gasPriceSpecified',
+            value: true,
+          },
+          {
+            op: 'add',
+            path: '/gasLimitSpecified',
+            value: true,
+          },
+          {
+            op: 'add',
+            path: '/estimatedGas',
+            value: '0x5208',
+          },
+        ],
+        [
+          {
+            note: '#newUnapprovedTransaction - adding the origin',
+            op: 'add',
+            path: '/origin',
+            timestamp: 1535507561516,
+            value: 'MetaMask',
+          },
+          [],
+        ],
+        [
+          {
+            note: 'confTx: user approved transaction',
+            op: 'replace',
+            path: '/txParams/gasPrice',
+            timestamp: 1535664571504,
+            value: '0x77359400',
+          },
+        ],
+        [
+          {
+            note: 'txStateManager: setting status to approved',
+            op: 'replace',
+            path: '/status',
+            timestamp: 1535507564302,
+            value: 'approved',
+          },
+        ],
+        [
+          {
+            note: 'transactions#approveTransaction',
+            op: 'add',
+            path: '/txParams/nonce',
+            timestamp: 1535507564439,
+            value: '0xa4',
+          },
+          {
+            op: 'add',
+            path: '/nonceDetails',
+            value: {
+              local: {},
+              network: {},
+              params: {},
+            },
+          },
+        ],
+        [
+          {
+            note: 'transactions#publishTransaction',
+            op: 'replace',
+            path: '/status',
+            timestamp: 1535507564518,
+            value: 'signed',
+          },
+          {
+            op: 'add',
+            path: '/rawTx',
+            value: '0xf86b81a4843b9aca008252089450a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706872386f26fc10000802aa007b30119fc4fc5954fad727895b7e3ba80a78d197e95703cc603bcf017879151a01c50beda40ffaee541da9c05b9616247074f25f392800e0ad6c7a835d5366edf',
+          },
+        ],
+        [],
+        [
+          {
+            note: 'transactions#setTxHash',
+            op: 'add',
+            path: '/hash',
+            timestamp: 1535507564658,
+            value: '0x7acc4987b5c0dfa8d423798a8c561138259de1f98a62e3d52e7e83c0e0dd9fb7',
+          },
+        ],
+        [
+          {
+            note: 'txStateManager - add submitted time stamp',
+            op: 'add',
+            path: '/submittedTime',
+            timestamp: 1535507564660,
+            value: 1535507564660,
+          },
+        ],
+        [
+          {
+            note: 'txStateManager: setting status to submitted',
+            op: 'replace',
+            path: '/status',
+            timestamp: 1535507564665,
+            value: 'submitted',
+          },
+        ],
+        [
+          {
+            note: 'transactions/pending-tx-tracker#event: tx:block-update',
+            op: 'add',
+            path: '/firstRetryBlockNumber',
+            timestamp: 1535507575476,
+            value: '0x3bf624',
+          },
+        ],
+        [
+          {
+            note: 'txStateManager: setting status to confirmed',
+            op: 'replace',
+            path: '/status',
+            timestamp: 1535507615993,
+            value: 'confirmed',
+          },
+        ],
+      ],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const expectedResult = [
+      {
+        'eventKey': 'transactionCreated',
+        'timestamp': 1535507561452,
+        'value': '0x2386f26fc10000',
+      },
+      {
+        'eventKey': 'transactionUpdatedGas',
+        'timestamp': 1535664571504,
+        'value': '0x77359400',
+      },
+      {
+        'eventKey': 'transactionSubmitted',
+        'timestamp': 1535507564665,
+        'value': undefined,
+      },
+      {
+        'eventKey': 'transactionConfirmed',
+        'timestamp': 1535507615993,
+        'value': undefined,
+      },
+    ]
+
+    assert.deepEqual(getActivities(transaction), expectedResult)
+  })
+})
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
new file mode 100644
index 000000000..c4cf57d14
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
@@ -0,0 +1,91 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { getActivities } from './transaction-activity-log.util'
+import Card from '../card'
+import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util'
+import { ETH } from '../../constants/common'
+import { formatDate } from '../../util'
+
+export default class TransactionActivityLog extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    transaction: PropTypes.object,
+    className: PropTypes.string,
+    conversionRate: PropTypes.number,
+  }
+
+  state = {
+    activities: [],
+  }
+
+  componentDidMount () {
+    this.setActivites()
+  }
+
+  componentDidUpdate (prevProps) {
+    const { transaction: { history: prevHistory = [] } = {} } = prevProps
+    const { transaction: { history = [] } = {} } = this.props
+
+    if (prevHistory.length !== history.length) {
+      this.setActivites()
+    }
+  }
+
+  setActivites () {
+    const activities = getActivities(this.props.transaction)
+    this.setState({ activities })
+  }
+
+  renderActivity (activity, index) {
+    const { conversionRate } = this.props
+    const { eventKey, value, timestamp } = activity
+    const ethValue = index === 0
+      ? `${getValueFromWeiHex({
+        value,
+        toCurrency: ETH,
+        conversionRate,
+        numberOfDecimals: 6,
+      })} ${ETH}`
+      : getEthConversionFromWeiHex({ value, toCurrency: ETH, conversionRate })
+    const formattedTimestamp = formatDate(timestamp)
+    const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp])
+
+    return (
+      <div
+        key={index}
+        className="transaction-activity-log__activity"
+      >
+        <div className="transaction-activity-log__activity-icon" />
+        <div
+          className="transaction-activity-log__activity-text"
+          title={activityText}
+        >
+          { activityText }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+    const { className } = this.props
+    const { activities } = this.state
+
+    return (
+      <div className={classnames('transaction-activity-log', className)}>
+        <Card
+          title={t('activityLog')}
+          className="transaction-activity-log__card"
+        >
+          <div className="transaction-activity-log__activities-container">
+            { activities.map((activity, index) => this.renderActivity(activity, index)) }
+          </div>
+        </Card>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.container.js b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
new file mode 100644
index 000000000..4c8b6d971
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import TransactionActivityLog from './transaction-activity-log.component'
+import { conversionRateSelector } from '../../selectors'
+
+const mapStateToProps = state => {
+  return {
+    conversionRate: conversionRateSelector(state),
+  }
+}
+
+export default connect(mapStateToProps)(TransactionActivityLog)
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
new file mode 100644
index 000000000..97aa9a8f1
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
@@ -0,0 +1,86 @@
+// path constants
+const STATUS_PATH = '/status'
+const GAS_PRICE_PATH = '/txParams/gasPrice'
+
+// status constants
+const UNAPPROVED_STATUS = 'unapproved'
+const SUBMITTED_STATUS = 'submitted'
+const CONFIRMED_STATUS = 'confirmed'
+const DROPPED_STATUS = 'dropped'
+
+// op constants
+const REPLACE_OP = 'replace'
+
+// event constants
+const TRANSACTION_CREATED_EVENT = 'transactionCreated'
+const TRANSACTION_UPDATED_GAS_EVENT = 'transactionUpdatedGas'
+const TRANSACTION_SUBMITTED_EVENT = 'transactionSubmitted'
+const TRANSACTION_CONFIRMED_EVENT = 'transactionConfirmed'
+const TRANSACTION_DROPPED_EVENT = 'transactionDropped'
+const TRANSACTION_UPDATED_EVENT = 'transactionUpdated'
+
+const eventPathsHash = {
+  [STATUS_PATH]: true,
+  [GAS_PRICE_PATH]: true,
+}
+
+const statusHash = {
+  [SUBMITTED_STATUS]: TRANSACTION_SUBMITTED_EVENT,
+  [CONFIRMED_STATUS]: TRANSACTION_CONFIRMED_EVENT,
+  [DROPPED_STATUS]: TRANSACTION_DROPPED_EVENT,
+}
+
+function eventCreator (eventKey, timestamp, value) {
+  return {
+    eventKey,
+    timestamp,
+    value,
+  }
+}
+
+export function getActivities (transaction) {
+  const { history = [] } = transaction
+
+  return history.reduce((acc, base) => {
+    // First history item should be transaction creation
+    if (!Array.isArray(base) && base.status === UNAPPROVED_STATUS && base.txParams) {
+      const { time, txParams: { value } = {} } = base
+      return acc.concat(eventCreator(TRANSACTION_CREATED_EVENT, time, value))
+      // An entry in the history may be an array of more sub-entries.
+    } else if (Array.isArray(base)) {
+      const events = []
+
+      base.forEach(entry => {
+        const { op, path, value, timestamp: entryTimestamp } = entry
+        // Not all sub-entries in a history entry have a timestamp. If the sub-entry does not have a
+        // timestamp, the first sub-entry in a history entry should.
+        const timestamp = entryTimestamp || base[0] && base[0].timestamp
+
+        if (path in eventPathsHash && op === REPLACE_OP) {
+          switch (path) {
+            case STATUS_PATH: {
+              if (value in statusHash) {
+                events.push(eventCreator(statusHash[value], timestamp))
+              }
+
+              break
+            }
+
+            case GAS_PRICE_PATH: {
+              events.push(eventCreator(TRANSACTION_UPDATED_GAS_EVENT, timestamp, value))
+              break
+            }
+
+            default: {
+              events.push(eventCreator(TRANSACTION_UPDATED_EVENT, timestamp))
+            }
+          }
+        }
+      })
+
+      return acc.concat(events)
+    }
+
+    return acc
+  }, [])
+}
diff --git a/ui/app/components/transaction-breakdown/index.js b/ui/app/components/transaction-breakdown/index.js
new file mode 100644
index 000000000..c887f504f
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-breakdown.component'
diff --git a/ui/app/components/transaction-breakdown/index.scss b/ui/app/components/transaction-breakdown/index.scss
new file mode 100644
index 000000000..1bb108943
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/index.scss
@@ -0,0 +1,23 @@
+@import './transaction-breakdown-row/index';
+
+.transaction-breakdown {
+  &__card {
+    background: $white;
+    height: 100%;
+  }
+
+  &__row-title {
+    text-transform: capitalize;
+  }
+
+  &__value {
+    text-align: end;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &--eth-total {
+      font-weight: 500;
+    }
+  }
+}
diff --git a/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js b/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
new file mode 100644
index 000000000..d18cd420c
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionBreakdown from '../transaction-breakdown.component'
+import TransactionBreakdownRow from '../transaction-breakdown-row'
+import Card from '../../card'
+
+describe('TransactionBreakdown Component', () => {
+  it('should render properly', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const wrapper = shallow(
+      <TransactionBreakdown
+        transaction={transaction}
+        className="test-class"
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-breakdown'))
+    assert.ok(wrapper.hasClass('test-class'))
+    assert.equal(wrapper.find(Card).length, 1)
+    assert.equal(wrapper.find(Card).find(TransactionBreakdownRow).length, 4)
+  })
+})
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js
new file mode 100644
index 000000000..557bf75fb
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-breakdown-row.component'
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss
new file mode 100644
index 000000000..8c73be1a6
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss
@@ -0,0 +1,19 @@
+.transaction-breakdown-row {
+  font-size: .75rem;
+  color: $scorpion;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #d8d8d8;
+  }
+
+  &__title {
+    padding-right: 8px;
+  }
+
+  &__value {
+    min-width: 0;
+  }
+}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
new file mode 100644
index 000000000..c19399dbb
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionBreakdownRow from '../transaction-breakdown-row.component'
+import Button from '../../../button'
+
+describe('TransactionBreakdownRow Component', () => {
+  it('should render text properly', () => {
+    const wrapper = shallow(
+      <TransactionBreakdownRow
+        title="test"
+        className="test-class"
+      >
+        Test
+      </TransactionBreakdownRow>,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-breakdown-row'))
+    assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
+    assert.equal(wrapper.find('.transaction-breakdown-row__value').text(), 'Test')
+  })
+
+  it('should render components properly', () => {
+    const wrapper = shallow(
+      <TransactionBreakdownRow
+        title="test"
+        className="test-class"
+      >
+        <Button onClick={() => {}} >Button</Button>
+      </TransactionBreakdownRow>,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-breakdown-row'))
+    assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
+    assert.ok(wrapper.find('.transaction-breakdown-row__value').find(Button))
+  })
+})
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
new file mode 100644
index 000000000..c11ff8efa
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
@@ -0,0 +1,26 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class TransactionBreakdownRow extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+  }
+
+  render () {
+    const { title, children, className } = this.props
+
+    return (
+      <div className={classnames('transaction-breakdown-row', className)}>
+        <div className="transaction-breakdown-row__title">
+          { title }
+        </div>
+        <div className="transaction-breakdown-row__value">
+          { children }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
new file mode 100644
index 000000000..5a2b4a481
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
@@ -0,0 +1,98 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import TransactionBreakdownRow from './transaction-breakdown-row'
+import Card from '../card'
+import CurrencyDisplay from '../currency-display'
+import HexToDecimal from '../hex-to-decimal'
+import { ETH, GWEI } from '../../constants/common'
+import { getHexGasTotal } from '../../helpers/confirm-transaction/util'
+import { sumHexes } from '../../helpers/transactions.util'
+
+export default class TransactionBreakdown extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    transaction: PropTypes.object,
+    className: PropTypes.string,
+  }
+
+  static defaultProps = {
+    transaction: {},
+  }
+
+  render () {
+    const { t } = this.context
+    const { transaction, className } = this.props
+    const { txParams: { gas, gasPrice, value } = {}, txReceipt: { gasUsed } = {} } = transaction
+
+    const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas
+
+    const hexGasTotal = getHexGasTotal({ gasLimit, gasPrice })
+    const totalInHex = sumHexes(hexGasTotal, value)
+
+    return (
+      <div className={classnames('transaction-breakdown', className)}>
+        <Card
+          title={t('transaction')}
+          className="transaction-breakdown__card"
+        >
+          <TransactionBreakdownRow title={t('amount')}>
+            <CurrencyDisplay
+              className="transaction-breakdown__value"
+              currency={ETH}
+              value={value}
+            />
+          </TransactionBreakdownRow>
+          <TransactionBreakdownRow
+            title={`${t('gasLimit')} (${t('units')})`}
+            className="transaction-breakdown__row-title"
+          >
+            <HexToDecimal
+              className="transaction-breakdown__value"
+              value={gas}
+            />
+          </TransactionBreakdownRow>
+          {
+            typeof gasUsed === 'string' && (
+              <TransactionBreakdownRow
+                title={`${t('gasUsed')} (${t('units')})`}
+                className="transaction-breakdown__row-title"
+              >
+                <HexToDecimal
+                  className="transaction-breakdown__value"
+                  value={gasUsed}
+                />
+              </TransactionBreakdownRow>
+            )
+          }
+          <TransactionBreakdownRow title={t('gasPrice')}>
+            <CurrencyDisplay
+              className="transaction-breakdown__value"
+              currency={ETH}
+              denomination={GWEI}
+              value={gasPrice}
+              hideLabel
+            />
+          </TransactionBreakdownRow>
+          <TransactionBreakdownRow title={t('total')}>
+            <div>
+              <CurrencyDisplay
+                className="transaction-breakdown__value transaction-breakdown__value--eth-total"
+                currency={ETH}
+                value={totalInHex}
+                numberOfDecimals={6}
+              />
+              <CurrencyDisplay
+                className="transaction-breakdown__value"
+                value={totalInHex}
+              />
+            </div>
+          </TransactionBreakdownRow>
+        </Card>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-list-item-details/index.js b/ui/app/components/transaction-list-item-details/index.js
new file mode 100644
index 000000000..0e878d032
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-list-item-details.component'
diff --git a/ui/app/components/transaction-list-item-details/index.scss b/ui/app/components/transaction-list-item-details/index.scss
new file mode 100644
index 000000000..54cf834cc
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/index.scss
@@ -0,0 +1,49 @@
+.transaction-list-item-details {
+  &__header {
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__header-buttons {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &__header-button {
+    font-size: .625rem;
+
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+
+  &__sender-to-recipient-container {
+    margin-bottom: 8px;
+  }
+
+  &__cards-container {
+    display: flex;
+    flex-direction: row;
+
+    @media screen and (max-width: $break-small) {
+      flex-direction: column;
+    }
+  }
+
+  &__transaction-breakdown {
+    flex: 1;
+    margin-right: 8px;
+    min-width: 0;
+
+    @media screen and (max-width: $break-small) {
+      margin: 0 0 8px 0;
+    }
+  }
+
+  &__transaction-activity-log {
+    flex: 2;
+    min-width: 0;
+  }
+}
diff --git a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
new file mode 100644
index 000000000..f2bbe8789
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionListItemDetails from '../transaction-list-item-details.component'
+import Button from '../../button'
+import SenderToRecipient from '../../sender-to-recipient'
+import TransactionBreakdown from '../../transaction-breakdown'
+import TransactionActivityLog from '../../transaction-activity-log'
+
+describe('TransactionListItemDetails Component', () => {
+  it('should render properly', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const wrapper = shallow(
+      <TransactionListItemDetails
+        transaction={transaction}
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-list-item-details'))
+    assert.equal(wrapper.find(Button).length, 1)
+    assert.equal(wrapper.find(SenderToRecipient).length, 1)
+    assert.equal(wrapper.find(TransactionBreakdown).length, 1)
+    assert.equal(wrapper.find(TransactionActivityLog).length, 1)
+  })
+
+  it('should render a retry button', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const wrapper = shallow(
+      <TransactionListItemDetails
+        transaction={transaction}
+        showRetry={true}
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-list-item-details'))
+    assert.equal(wrapper.find(Button).length, 2)
+  })
+})
diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
new file mode 100644
index 000000000..a4f28fd63
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
@@ -0,0 +1,111 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import SenderToRecipient from '../sender-to-recipient'
+import { CARDS_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants'
+import TransactionActivityLog from '../transaction-activity-log'
+import TransactionBreakdown from '../transaction-breakdown'
+import Button from '../button'
+import Tooltip from '../tooltip'
+import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+
+export default class TransactionListItemDetails extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    onCancel: PropTypes.func,
+    onRetry: PropTypes.func,
+    showCancel: PropTypes.bool,
+    showRetry: PropTypes.bool,
+    transaction: PropTypes.object,
+  }
+
+  handleEtherscanClick = () => {
+    const { hash, metamaskNetworkId } = this.props.transaction
+
+    const prefix = prefixForNetwork(metamaskNetworkId)
+    const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
+    global.platform.openWindow({ url: etherscanUrl })
+    this.setState({ showTransactionDetails: true })
+  }
+
+  handleCancel = event => {
+    const { onCancel } = this.props
+
+    event.stopPropagation()
+    onCancel()
+  }
+
+  handleRetry = event => {
+    const { onRetry } = this.props
+
+    event.stopPropagation()
+    onRetry()
+  }
+
+  render () {
+    const { t } = this.context
+    const { transaction, showCancel, showRetry } = this.props
+    const { txParams: { to, from } = {} } = transaction
+
+    return (
+      <div className="transaction-list-item-details">
+        <div className="transaction-list-item-details__header">
+          <div>Details</div>
+          <div className="transaction-list-item-details__header-buttons">
+            {
+              showRetry && (
+                <Button
+                  type="raised"
+                  onClick={this.handleRetry}
+                  className="transaction-list-item-details__header-button"
+                >
+                  { t('speedUp') }
+                </Button>
+              )
+            }
+            {
+              showCancel && (
+                <Button
+                  type="raised"
+                  onClick={this.handleCancel}
+                  className="transaction-list-item-details__header-button"
+                >
+                  { t('cancel') }
+                </Button>
+              )
+            }
+            <Tooltip title={t('viewOnEtherscan')}>
+              <Button
+                type="raised"
+                onClick={this.handleEtherscanClick}
+                className="transaction-list-item-details__header-button"
+                >
+                <img src="/images/arrow-popout.svg" />
+              </Button>
+            </Tooltip>
+          </div>
+        </div>
+        <div className="transaction-list-item-details__sender-to-recipient-container">
+          <SenderToRecipient
+            variant={CARDS_VARIANT}
+            addressOnly
+            recipientAddress={to}
+            senderAddress={from}
+          />
+        </div>
+        <div className="transaction-list-item-details__cards-container">
+          <TransactionBreakdown
+            transaction={transaction}
+            className="transaction-list-item-details__transaction-breakdown"
+          />
+          <TransactionActivityLog
+            transaction={transaction}
+            className="transaction-list-item-details__transaction-activity-log"
+          />
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
index 9c53c8960..9d694546b 100644
--- a/ui/app/components/transaction-list-item/index.scss
+++ b/ui/app/components/transaction-list-item/index.scss
@@ -1,37 +1,35 @@
 .transaction-list-item {
   box-sizing: border-box;
   min-height: 74px;
-  padding: 8px 20px;
   border-bottom: 1px solid $geyser;
-  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-
-  @media screen and (max-width: $break-small) {
-    padding: 8px 20px 12px;
-  }
-
-  &:hover {
-    background: rgba($alto, .2);
-  }
+  background: $white;
 
   &__grid {
+    cursor: pointer;
     width: 100%;
+    padding: 16px 20px;
     display: grid;
     grid-template-columns: 45px 1fr 1fr 1fr;
     grid-template-areas:
       "identicon action status primary-amount"
       "identicon nonce status secondary-amount";
 
-      @media screen and (max-width: $break-small) {
-        grid-template-columns: 45px 5fr 3fr;
-        grid-template-areas:
-          "nonce nonce nonce"
-          "identicon action primary-amount"
-          "identicon status secondary-amount";
-      }
+    @media screen and (max-width: $break-small) {
+      padding: 8px 20px 12px;
+      grid-template-columns: 45px 5fr 3fr;
+      grid-template-areas:
+        "nonce nonce nonce"
+        "identicon action primary-amount"
+        "identicon status secondary-amount";
+    }
+
+    &:hover {
+      background: rgba($alto, .2);
+    }
   }
 
   &__identicon {
@@ -114,4 +112,20 @@
       font-size: .5rem;
     }
   }
+
+  &__details-container {
+    padding: 8px 16px 16px;
+    background: #f3f4f7;
+    width: 100%;
+  }
+
+  &__expander {
+    max-height: 0px;
+    width: 100%;
+
+    &--show {
+      max-height: 1000px;
+      transition: max-height 700ms ease-out;
+    }
+  }
 }
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
index 4fddd45ef..40eef5e15 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -1,45 +1,77 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import Identicon from '../identicon'
 import TransactionStatus from '../transaction-status'
 import TransactionAction from '../transaction-action'
 import CurrencyDisplay from '../currency-display'
 import TokenCurrencyDisplay from '../token-currency-display'
-import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+import TransactionListItemDetails from '../transaction-list-item-details'
 import { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
 import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
 import { ETH } from '../../constants/common'
+import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../app/scripts/lib/enums'
+import { getStatusKey } from '../../helpers/transactions.util'
 
 export default class TransactionListItem extends PureComponent {
   static propTypes = {
+    assetImages: PropTypes.object,
     history: PropTypes.object,
-    transaction: PropTypes.object,
-    value: PropTypes.string,
     methodData: PropTypes.object,
-    showRetry: PropTypes.bool,
+    nonceAndDate: PropTypes.string,
     retryTransaction: PropTypes.func,
     setSelectedToken: PropTypes.func,
-    nonceAndDate: PropTypes.string,
+    showCancelModal: PropTypes.func,
+    showCancel: PropTypes.bool,
+    showRetry: PropTypes.bool,
+    showTransactionDetailsModal: PropTypes.func,
     token: PropTypes.object,
-    assetImages: PropTypes.object,
+    tokenData: PropTypes.object,
+    transaction: PropTypes.object,
+    value: PropTypes.string,
+  }
+
+  state = {
+    showTransactionDetails: false,
   }
 
   handleClick = () => {
-    const { transaction, history } = this.props
-    const { id, status, hash, metamaskNetworkId } = transaction
+    const {
+      transaction,
+      history,
+      showTransactionDetailsModal,
+      methodData,
+      showCancel,
+      showRetry,
+    } = this.props
+    const { id, status } = transaction
+    const { showTransactionDetails } = this.state
+    const windowType = window.METAMASK_UI_TYPE
 
     if (status === UNAPPROVED_STATUS) {
       history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
-    } else if (hash) {
-      const prefix = prefixForNetwork(metamaskNetworkId)
-      const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
-      global.platform.openWindow({ url: etherscanUrl })
+      return
+    }
+
+    if (windowType === ENVIRONMENT_TYPE_FULLSCREEN) {
+      this.setState({ showTransactionDetails: !showTransactionDetails })
+    } else {
+      showTransactionDetailsModal({
+        transaction,
+        onRetry: this.handleRetry,
+        showRetry: showRetry && methodData.done,
+        onCancel: this.handleCancel,
+        showCancel,
+      })
     }
   }
 
-  handleRetryClick = event => {
-    event.stopPropagation()
+  handleCancel = () => {
+    const { transaction: { id, txParams: { gasPrice } } = {}, showCancelModal } = this.props
+    showCancelModal(id, gasPrice)
+  }
 
+  handleRetry = () => {
     const {
       transaction: { txParams: { to } = {} },
       methodData: { name } = {},
@@ -50,12 +82,12 @@ export default class TransactionListItem extends PureComponent {
       setSelectedToken(to)
     }
 
-    this.resubmit()
+    return this.resubmit()
   }
 
   resubmit () {
     const { transaction: { id }, retryTransaction, history } = this.props
-    retryTransaction(id)
+    return retryTransaction(id)
       .then(id => history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`))
   }
 
@@ -75,6 +107,8 @@ export default class TransactionListItem extends PureComponent {
           className="transaction-list-item__amount transaction-list-item__amount--primary"
           value={value}
           prefix="-"
+          numberOfDecimals={2}
+          currency={ETH}
         />
       )
   }
@@ -89,33 +123,37 @@ export default class TransactionListItem extends PureComponent {
           className="transaction-list-item__amount transaction-list-item__amount--secondary"
           prefix="-"
           value={value}
-          numberOfDecimals={2}
-          currency={ETH}
         />
       )
   }
 
   render () {
     const {
-      transaction,
+      assetImages,
       methodData,
-      showRetry,
       nonceAndDate,
-      assetImages,
+      showCancel,
+      showRetry,
+      tokenData,
+      transaction,
     } = this.props
     const { txParams = {} } = transaction
+    const { showTransactionDetails } = this.state
+    const toAddress = tokenData
+      ? tokenData.params && tokenData.params[0] && tokenData.params[0].value || txParams.to
+      : txParams.to
 
     return (
-      <div
-        className="transaction-list-item"
-        onClick={this.handleClick}
-      >
-        <div className="transaction-list-item__grid">
+      <div className="transaction-list-item">
+        <div
+          className="transaction-list-item__grid"
+          onClick={this.handleClick}
+        >
           <Identicon
             className="transaction-list-item__identicon"
-            address={txParams.to}
+            address={toAddress}
             diameter={34}
-            image={assetImages[txParams.to]}
+            image={assetImages[toAddress]}
           />
           <TransactionAction
             transaction={transaction}
@@ -130,21 +168,33 @@ export default class TransactionListItem extends PureComponent {
           </div>
           <TransactionStatus
             className="transaction-list-item__status"
-            statusKey={transaction.status}
+            statusKey={getStatusKey(transaction)}
+            title={(
+              (transaction.err && transaction.err.rpc)
+                ? transaction.err.rpc.message
+                : transaction.err && transaction.err.message
+            )}
           />
           { this.renderPrimaryCurrency() }
           { this.renderSecondaryCurrency() }
         </div>
-        {
-          showRetry && methodData.done && (
-            <div
-              className="transaction-list-item__retry"
-              onClick={this.handleRetryClick}
-            >
-              <span>Taking too long? Increase the gas price on your transaction</span>
-            </div>
-          )
-        }
+        <div className={classnames('transaction-list-item__expander', {
+          'transaction-list-item__expander--show': showTransactionDetails,
+        })}>
+          {
+            showTransactionDetails && (
+              <div className="transaction-list-item__details-container">
+                <TransactionListItemDetails
+                  transaction={transaction}
+                  onRetry={this.handleRetry}
+                  showRetry={showRetry && methodData.done}
+                  onCancel={this.handleCancel}
+                  showCancel={showCancel}
+                />
+              </div>
+            )
+          }
+        </div>
       </div>
     )
   }
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js
index 47644241a..72f5f5d61 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.container.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js
@@ -3,18 +3,21 @@ import { withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
 import withMethodData from '../../higher-order-components/with-method-data'
 import TransactionListItem from './transaction-list-item.component'
-import { setSelectedToken, retryTransaction } from '../../actions'
+import { setSelectedToken, retryTransaction, showModal } from '../../actions'
 import { hexToDecimal } from '../../helpers/conversions.util'
+import { getTokenData } from '../../helpers/transactions.util'
 import { formatDate } from '../../util'
 
 const mapStateToProps = (state, ownProps) => {
-  const { transaction: { txParams: { value, nonce } = {}, time } = {} } = ownProps
+  const { transaction: { txParams: { value, nonce, data } = {}, time } = {} } = ownProps
 
+  const tokenData = data && getTokenData(data)
   const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
 
   return {
     value,
     nonceAndDate,
+    tokenData,
   }
 }
 
@@ -22,6 +25,19 @@ const mapDispatchToProps = dispatch => {
   return {
     setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
     retryTransaction: transactionId => dispatch(retryTransaction(transactionId)),
+    showCancelModal: (transactionId, originalGasPrice) => {
+      return dispatch(showModal({ name: 'CANCEL_TRANSACTION', transactionId, originalGasPrice }))
+    },
+    showTransactionDetailsModal: ({ transaction, onRetry, showRetry, onCancel, showCancel }) => {
+      return dispatch(showModal({
+        name: 'TRANSACTION_DETAILS',
+        transaction,
+        onRetry,
+        showRetry,
+        onCancel,
+        showCancel,
+      }))
+    },
   }
 }
 
diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss
index 0e8db485c..777f701f9 100644
--- a/ui/app/components/transaction-list/index.scss
+++ b/ui/app/components/transaction-list/index.scss
@@ -3,11 +3,13 @@
   flex-direction: column;
   flex: 1;
   overflow-y: hidden;
+  margin-top: 8px;
+  border-top: 1px solid $geyser;
 
   &__completed-transactions {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    flex: 1;
   }
 
   &__header {
@@ -15,7 +17,7 @@
     font-size: .875rem;
     color: $dusty-gray;
     border-bottom: 1px solid $geyser;
-    padding: 16px 0 8px 20px;
+    padding: 8px 0 8px 20px;
 
     @media screen and (max-width: $break-small) {
       padding: 8px 0 8px 16px;
@@ -35,6 +37,7 @@
     flex: 1;
     display: grid;
     grid-template-rows: 35% 1fr;
+    padding-top: 8px;
   }
 
   &__empty-text {
diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
index c864fea3b..eef60186d 100644
--- a/ui/app/components/transaction-list/transaction-list.component.js
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -56,7 +56,7 @@ export default class TransactionList extends PureComponent {
               </div>
               {
                 pendingTransactions.map((transaction, index) => (
-                  this.renderTransaction(transaction, index)
+                  this.renderTransaction(transaction, index, true)
                 ))
               }
             </div>
@@ -78,7 +78,7 @@ export default class TransactionList extends PureComponent {
     )
   }
 
-  renderTransaction (transaction, index) {
+  renderTransaction (transaction, index, showCancel) {
     const { selectedToken, assetImages } = this.props
 
     return transaction.key === TRANSACTION_TYPE_SHAPESHIFT
@@ -92,6 +92,7 @@ export default class TransactionList extends PureComponent {
           transaction={transaction}
           key={transaction.id}
           showRetry={this.shouldShowRetry(transaction)}
+          showCancel={showCancel}
           token={selectedToken}
           assetImages={assetImages}
         />
diff --git a/ui/app/components/transaction-status/index.scss b/ui/app/components/transaction-status/index.scss
index 35be550f7..26a1f5d38 100644
--- a/ui/app/components/transaction-status/index.scss
+++ b/ui/app/components/transaction-status/index.scss
@@ -25,4 +25,9 @@
     background-color: #FFF2DB;
     color: #CA810A;
   }
-}
\ No newline at end of file
+
+  &--failed {
+    background: lighten($monzo, 56%);
+    color: $monzo;
+  }
+}
diff --git a/ui/app/components/transaction-status/transaction-status.component.js b/ui/app/components/transaction-status/transaction-status.component.js
index a4c827ae8..c22baf18a 100644
--- a/ui/app/components/transaction-status/transaction-status.component.js
+++ b/ui/app/components/transaction-status/transaction-status.component.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import Tooltip from '../tooltip-v2'
 import {
   UNAPPROVED_STATUS,
   REJECTED_STATUS,
@@ -29,6 +30,10 @@ const statusToTextHash = {
 }
 
 export default class TransactionStatus extends PureComponent {
+  static defaultProps = {
+    title: null,
+  }
+
   static contextTypes = {
     t: PropTypes.func,
   }
@@ -36,15 +41,18 @@ export default class TransactionStatus extends PureComponent {
   static propTypes = {
     statusKey: PropTypes.string,
     className: PropTypes.string,
+    title: PropTypes.string,
   }
 
   render () {
-    const { className, statusKey } = this.props
+    const { className, statusKey, title } = this.props
     const statusText = this.context.t(statusToTextHash[statusKey] || statusKey)
 
     return (
       <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}>
-        { statusText }
+        <Tooltip position="top" title={title}>
+          { statusText }
+        </Tooltip>
       </div>
     )
   }
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 6de265110..064a6ab55 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -9,7 +9,7 @@ const classnames = require('classnames')
 const { checksumAddress } = require('../util')
 const Identicon = require('./identicon')
 // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
-const Tooltip = require('./tooltip-v2.js')
+const Tooltip = require('./tooltip-v2.js').default
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const BalanceComponent = require('./balance-component')
@@ -17,6 +17,8 @@ const TokenList = require('./token-list')
 const selectors = require('../selectors')
 const { ADD_TOKEN_ROUTE } = require('../routes')
 
+import Button from './button'
+
 module.exports = compose(
   withRouter,
   connect(mapStateToProps, mapDispatchToProps)
@@ -199,7 +201,9 @@ WalletView.prototype.render = function () {
 
     h(TokenList),
 
-    h('button.btn-primary.wallet-view__add-token-button', {
+    h(Button, {
+      type: 'primary',
+      className: 'wallet-view__add-token-button',
       onClick: () => {
         history.push(ADD_TOKEN_ROUTE)
         sidebarOpen && hideSidebar()