diff --git a/app/common/lib/ledgerUtil.js b/app/common/lib/ledgerUtil.js
index e442536b21c..6f3b7fb7a58 100644
--- a/app/common/lib/ledgerUtil.js
+++ b/app/common/lib/ledgerUtil.js
@@ -5,6 +5,7 @@
 'use strict'
 
 const {responseHasContent} = require('./httpUtil')
+const moment = require('moment')
 
 /**
  * Is page an actual page being viewed by the user? (not an error page, etc)
@@ -39,3 +40,69 @@ module.exports.shouldTrackView = (view, responseList) => {
   }
   return false
 }
+
+module.exports.btcToCurrencyString = (btc, ledgerData) => {
+  const balance = Number(btc || 0)
+  const currency = ledgerData.get('currency') || 'USD'
+
+  if (balance === 0) {
+    return `0 ${currency}`
+  }
+
+  if (ledgerData.get('btc') && typeof ledgerData.get('amount') === 'number') {
+    const btcValue = ledgerData.get('btc') / ledgerData.get('amount')
+    const fiatValue = (balance / btcValue).toFixed(2)
+    let roundedValue = Math.floor(fiatValue)
+    const diff = fiatValue - roundedValue
+
+    if (diff > 0.74) {
+      roundedValue += 0.75
+    } else if (diff > 0.49) {
+      roundedValue += 0.50
+    } else if (diff > 0.24) {
+      roundedValue += 0.25
+    }
+
+    return `${roundedValue.toFixed(2)} ${currency}`
+  }
+
+  return `${balance} BTC`
+}
+
+module.exports.formattedTimeFromNow = (timestamp) => {
+  moment.locale(navigator.language)
+  return moment(new Date(timestamp)).fromNow()
+}
+
+module.exports.formattedDateFromTimestamp = (timestamp) => {
+  moment.locale(navigator.language)
+  return moment(new Date(timestamp)).format('YYYY-MM-DD')
+}
+
+module.exports.walletStatus = (ledgerData) => {
+  let status = {}
+
+  if (ledgerData.get('error')) {
+    status.id = 'statusOnError'
+  } else if (ledgerData.get('created')) {
+    const transactions = ledgerData.get('transactions')
+    const pendingFunds = Number(ledgerData.get('unconfirmed') || 0)
+
+    if (pendingFunds + Number(ledgerData.get('balance') || 0) <
+      0.9 * Number(ledgerData.get('btc') || 0)) {
+      status.id = 'insufficientFundsStatus'
+    } else if (pendingFunds > 0) {
+      status.id = 'pendingFundsStatus'
+      status.args = {funds: module.exports.btcToCurrencyString(pendingFunds, ledgerData)}
+    } else if (transactions && transactions.size > 0) {
+      status.id = 'defaultWalletStatus'
+    } else {
+      status.id = 'createdWalletStatus'
+    }
+  } else if (ledgerData.get('creating')) {
+    status.id = 'creatingWalletStatus'
+  } else {
+    status.id = 'createWalletStatus'
+  }
+  return status
+}
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index b856f2e03dd..03d8f9c1cc7 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -205,6 +205,12 @@ ledgerBackupTitle=Backup your Brave wallet
 ledgerBackupContent=Below, you will find the anonymized recovery keys that are required if you ever lose access to this computer.
 minimumPageTimeSetting=Minimum page time before logging a visit
 minimumVisitsSetting=Minimum visits for publisher relevancy
+minimumPageTimeLow=5 seconds
+minimumPageTimeMedium=8 seconds
+minimumPageTimeHigh=1 minute
+minimumVisitsLow=1 visit
+minimumVisitsMedium=5 visits
+minimumVisitsHigh=10 visits
 backupLedger=Backup your wallet
 balanceRecovered={{balance}} was recovered and transferred to your Brave wallet.
 recoverLedger=Recover your wallet
diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
new file mode 100644
index 00000000000..fb81cc9bf07
--- /dev/null
+++ b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -0,0 +1,147 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const {StyleSheet, css} = require('aphrodite')
+
+// util
+const {changeSetting} = require('../../../lib/settingsUtil')
+
+// components
+const Button = require('../../../../../js/components/button')
+const {SettingsList, SettingItem, SettingCheckbox} = require('../../settings')
+const {SettingDropdown} = require('../../dropdown')
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+
+// style
+const commonStyles = require('../../styles/commonStyles')
+const globalStyles = require('../../styles/global')
+const {paymentCommon} = require('../../styles/payment')
+
+// other
+const settings = require('../../../../../js/constants/settings')
+
+class AdvancedSettingsContent extends ImmutableComponent {
+  render () {
+    const minDuration = this.props.ledgerData.getIn(['synopsisOptions', 'minDuration'])
+    const minPublisherVisits = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherVisits'])
+
+    return <div className={css(paymentCommon.board)}>
+      <div className={css(paymentCommon.panel, styles.advancedSettings, commonStyles.noMarginTop, commonStyles.noMarginBottom)} data-test-id='advancedSettings'>
+        <div className={css(styles.settingsPanelDivider, styles.deviderFirst)}>
+          <div className={css(styles.minimumSetting)} data-l10n-id='minimumPageTimeSetting' />
+          <SettingsList>
+            <SettingItem>
+              <SettingDropdown
+                data-test-id='durationSelector'
+                defaultValue={minDuration || 8000}
+                onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISIT_TIME)}>
+                <option data-l10n-id='minimumPageTimeLow' value='5000' />
+                <option data-l10n-id='minimumPageTimeMedium' value='8000' />
+                <option data-l10n-id='minimumPageTimeHigh' value='60000' />
+              </SettingDropdown>
+            </SettingItem>
+          </SettingsList>
+          <div className={css(styles.minimumSetting)} data-l10n-id='minimumVisitsSetting' />
+          <SettingsList className={css(commonStyles.noMarginBottom)}>
+            <SettingItem>
+              <SettingDropdown
+                data-test-id='visitSelector'
+                defaultValue={minPublisherVisits || 1}
+                onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISITS)}>
+                <option data-l10n-id='minimumVisitsLow' value='1' />
+                <option data-l10n-id='minimumVisitsMedium' value='5' />
+                <option data-l10n-id='minimumVisitsHigh' value='10' />
+              </SettingDropdown>
+            </SettingItem>
+          </SettingsList>
+        </div>
+        <div className={css(styles.settingsPanelDivider, styles.lastDivider)}>
+          <SettingsList className={css(commonStyles.noMarginBottom)}
+            listClassName={css(styles.list)}
+          >
+            <SettingCheckbox
+              dataL10nId='minimumPercentage'
+              prefKey={settings.MINIMUM_PERCENTAGE}
+              settings={this.props.settings}
+              onChangeSetting={this.props.onChangeSetting}
+              className={css(styles.listItem)}
+              switchClassName={css(styles.checkboxSwitch)}
+              labelClassName={css(commonStyles.noMarginBottom)}
+            />
+            <SettingCheckbox
+              dataL10nId='notifications'
+              prefKey={settings.PAYMENTS_NOTIFICATIONS}
+              settings={this.props.settings}
+              onChangeSetting={this.props.onChangeSetting}
+              className={css(styles.listItem, commonStyles.noMarginBottom)}
+              switchClassName={css(styles.checkboxSwitch)}
+              labelClassName={css(commonStyles.noMarginBottom)}
+            />
+          </SettingsList>
+        </div>
+      </div>
+    </div>
+  }
+}
+
+class AdvancedSettingsFooter extends ImmutableComponent {
+  render () {
+    return <div className={css(paymentCommon.advanceFooter)}>
+      <Button l10nId='backupLedger'
+        className={css(commonStyles.buttonPrimary)}
+        onClick={this.props.showOverlay.bind(this, 'ledgerBackup')}
+      />
+      <Button l10nId='recoverLedger'
+        className={css(commonStyles.buttonPrimary, paymentCommon.marginButtons)}
+        onClick={this.props.showOverlay.bind(this, 'ledgerRecovery')}
+      />
+      <Button l10nId='done'
+        className={css(commonStyles.whiteButton, commonStyles.inlineButton, paymentCommon.marginButtons)}
+        onClick={this.props.hideOverlay.bind(this, 'advancedSettings')}
+      />
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  advancedSettings: {
+    paddingLeft: '50px',
+    paddingRight: '50px',
+    display: 'flex',
+    flexWrap: 'nowrap'
+  },
+  settingsPanelDivider: {
+    width: '100%'
+  },
+  minimumSetting: {
+    marginBottom: globalStyles.spacing.modalPanelHeaderMarginBottom
+  },
+  lastDivider: {
+    display: 'flex',
+    alignItems: 'center',
+    width: 'auto',
+    position: 'relative',
+    left: '1em'
+  },
+  list: {
+    display: 'flex',
+    flexFlow: 'column nowrap',
+    justifyContent: 'space-between'
+  },
+  listItem: {
+    display: 'flex',
+    marginBottom: '1em'
+  },
+  checkboxSwitch: {
+    marginTop: '2px',
+    paddingTop: 0,
+    paddingBottom: 0
+  }
+})
+
+module.exports = {
+  AdvancedSettingsContent,
+  AdvancedSettingsFooter
+}
diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
new file mode 100644
index 00000000000..5e1b9f53942
--- /dev/null
+++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -0,0 +1,465 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const {StyleSheet, css} = require('aphrodite')
+
+// components
+const Button = require('../../../../../js/components/button')
+const ModalOverlay = require('../../../../../js/components/modalOverlay')
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+
+// styles
+const commonStyles = require('../../styles/commonStyles')
+const globalStyles = require('../../styles/global')
+const {paymentCommon} = require('../../styles/payment')
+const cx = require('../../../../../js/lib/classSet')
+const CoinBase = require('../../../../extensions/brave/img/coinbase_logo.png')
+const Andorid = require('../../../../extensions/brave/img/android_download.svg')
+const IOS = require('../../../../extensions/brave/img/ios_download.svg')
+
+// other
+const coinbaseCountries = require('../../../../../js/constants/coinbaseCountries')
+const config = require('../../../../../js/constants/config')
+const getSetting = require('../../../../../js/settings').getSetting
+const settings = require('../../../../../js/constants/settings')
+const aboutActions = require('../../../../../js/about/aboutActions')
+
+class BitcoinDashboard extends ImmutableComponent {
+  constructor () {
+    super()
+    this.buyCompleted = false
+    this.openBuyURLTab = this.openBuyURLTab.bind(this)
+  }
+
+  get currency () {
+    return this.props.ledgerData.get('currency') || 'USD'
+  }
+
+  get amount () {
+    return getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings) || 0
+  }
+
+  get canUseCoinbase () {
+    if (!this.props.ledgerData.get('buyMaximumUSD')) return true
+
+    return this.currency === 'USD' && this.amount < this.props.ledgerData.get('buyMaximumUSD')
+  }
+
+  get userInAmerica () {
+    const countryCode = this.props.ledgerData.get('countryCode')
+    return !(countryCode && countryCode !== 'US')
+  }
+
+  bitcoinPurchaseButton () {
+    if (!this.props.ledgerData.get('buyURLFrame')) {
+      return <Button l10nId='add' className={css(commonStyles.buttonPrimary, styles.panelButton)} onClick={this.props.showOverlay.bind(this)} />
+    }
+
+    return <a href={this.props.ledgerData.get('buyURL')} target='_blank' onClick={this.openBuyURLTab}>
+      <Button l10nId='add' className={css(commonStyles.buttonPrimary, styles.panelButton)} />
+    </a>
+  }
+
+  qrcodeOverlayContent () {
+    return <div>
+      <img className={css(styles.qrcodeImage)} src={this.props.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
+      <div className={css(styles.bitcoinQRTitle)} data-l10n-id='bitcoinQR' />
+    </div>
+  }
+
+  qrcodeOverlayFooter () {
+    if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
+      return <div className={css(styles.qrcodeOverlayFooter)}>
+        <div className={css(styles.coinbaseLogo)} />
+        <a target='_blank' className={css(styles.qrcodeLogo, styles.appstoreLogo)} href='https://itunes.apple.com/us/app/coinbase-bitcoin-wallet/id886427730?mt=8' />
+        <a target='_blank' className={css(styles.qrcodeLogo, styles.playstoreLogo)} href='https://play.google.com/store/apps/details?id=com.coinbase.android' />
+      </div>
+    }
+
+    return null
+  }
+
+  coinbasePanel () {
+    if (this.canUseCoinbase) {
+      return <div className={css(paymentCommon.panel, styles.panel, commonStyles.noMarginTop)}>
+        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
+          <span className={cx({
+            fa: true,
+            'fa-credit-card': true,
+            [css(styles.fa)]: true,
+            [css(styles.faCreditCard)]: true
+          })} />
+          <div className={css(styles.settingsListTitle)} data-l10n-id='moneyAdd' />
+          <div className={css(styles.settingsListTitle, styles.subTitle)} data-l10n-id='moneyAddSubTitle' />
+        </div>
+        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
+          {this.bitcoinPurchaseButton}
+          <div className={css(styles.settingsListTitle, styles.subTitle)} data-l10n-id='transferTime' />
+        </div>
+      </div>
+    } else {
+      return <div className={css(paymentCommon.panel, styles.panel)}>
+        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
+          <span className={cx({
+            fa: true,
+            'fa-credit-card': true,
+            [css(styles.fa)]: true,
+            [css(styles.faCreditCard)]: true
+          })} />
+          <div className={css(styles.settingsListTitle)} data-l10n-id='moneyAdd' />
+          <div className={css(styles.settingsListTitle, styles.subTitle)} data-l10n-id='moneyAddSubTitle' />
+        </div>
+        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
+          <div data-l10n-id='coinbaseNotAvailable' />
+        </div>
+      </div>
+    }
+  }
+
+  exchangePanel () {
+    const url = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeURL'])
+    const name = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeName'])
+    // Call worldWidePanel if we don't have the URL or Name
+    if (!url || !name) {
+      return this.worldWidePanel()
+    } else {
+      return <div className={css(paymentCommon.panel, styles.panel, commonStyles.noMarginTop)}>
+        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
+          <span className={cx({
+            fa: true,
+            'fa-credit-card': true,
+            [css(styles.fa)]: true,
+            [css(styles.faCreditCard)]: true
+          })} />
+          <div className={css(styles.settingsListTitle)} data-l10n-id='outsideUSAPayment' />
+        </div>
+        <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
+          <a target='_blank' href={url}>
+            <button className={css(commonStyles.browserButton, commonStyles.buttonPrimary, styles.panelButton)}>{name}</button>
+          </a>
+        </div>
+      </div>
+    }
+  }
+
+  smartphonePanel () {
+    return <div className={css(paymentCommon.panel, styles.panel, commonStyles.noMarginBottom)}>
+      <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst, styles.alignMiddle)}>
+        <span className={cx({
+          fa: true,
+          'fa-mobile': true,
+          [css(styles.faMobile)]: true,
+          [css(styles.fa)]: true
+        })} />
+        <div className={css(styles.settingsListTitle)} data-l10n-id='smartphoneTitle' />
+      </div>
+      <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast, styles.alignMiddle)}>
+        <Button className={css(commonStyles.buttonPrimary, styles.panelButton)} l10nId='displayQRCode' onClick={this.props.showQRcode.bind(this)} />
+      </div>
+    </div>
+  }
+
+  panelFooter () {
+    if (this.props.ledgerData.get('buyURLFrame')) {
+      return <div className={css(paymentCommon.panelFooter, styles.panelFooter)}>
+        <Button l10nId='done' className={css(commonStyles.whiteButton)} onClick={this.props.hideParentOverlay} />
+      </div>
+    } else if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
+      return <div className={css(paymentCommon.panelFooter, styles.panelFooter, styles.coinbaseFooter)}>
+        <div className={css(styles.coinbase)}>
+          <div className={css(styles.coinbaseLogo)} />
+          <span className={css(styles.coinbaseMessage)} data-l10n-id='coinbaseMessage' />
+        </div>
+        <Button l10nId='done' className={css(commonStyles.whiteButton)} onClick={this.props.hideParentOverlay} />
+      </div>
+    } else {
+      return <div className={css(paymentCommon.panelFooter, styles.panelFooter)}>
+        <Button l10nId='done' className={css(commonStyles.whiteButton)} onClick={this.props.hideParentOverlay} />
+      </div>
+    }
+  }
+
+  openBuyURLTab () {
+    // close parent dialog
+    this.props.hideParentOverlay()
+  }
+
+  bitcoinOverlayContent () {
+    return <iframe src={this.props.ledgerData.get('buyURL')} />
+  }
+
+  worldWidePanel () {
+    return <div className={css(paymentCommon.panel, styles.panel)}>
+      <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
+        <span className={cx({
+          fa: true,
+          'fa-credit-card': true,
+          [css(styles.fa)]: true,
+          [css(styles.faCreditCard)]: true
+        })} />
+        <div className={css(styles.settingsListTitle)} data-l10n-id='outsideUSAPayment' />
+      </div>
+      <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
+        <a target='_blank' href='https://www.buybitcoinworldwide.com/'>
+          <button className={cx({
+            browserButton: true,
+            [css(commonStyles.buttonPrimary)]: true,
+            [css(styles.panelButton)]: true
+          })}>buybitcoinworldwide.com</button>
+        </a>
+      </div>
+    </div>
+  }
+
+  copyToClipboard (text) {
+    aboutActions.setClipboard(text)
+  }
+
+  onMessage (e) {
+    if (!e.data || e.origin !== config.coinbaseOrigin) {
+      return
+    }
+    if (e.data.event === 'modal_closed') {
+      if (this.buyCompleted) {
+        this.props.hideParentOverlay()
+        this.buyCompleted = false
+      } else {
+        this.props.hideOverlay()
+      }
+    } else if (e.data.event === 'buy_completed') {
+      this.buyCompleted = true
+    }
+  }
+
+  render () {
+    window.addEventListener('message', this.onMessage.bind(this), false)
+    const ledgerData = this.props.ledgerData
+
+    // TODO remove bitcoinDashboard class
+    return <div className='bitcoinDashboard' data-test-id='bitcoinDashboard'>
+      {
+        this.props.bitcoinOverlayVisible
+          ? <ModalOverlay
+            title={'bitcoinBuy'}
+            content={this.bitcoinOverlayContent()}
+            customTitleClasses={'coinbaseOverlay'}
+            emptyDialog
+            onHide={this.props.hideOverlay.bind(this)}
+          />
+          : null
+      }
+      {
+        this.props.qrcodeOverlayVisible
+          ? <ModalOverlay
+            content={this.qrcodeOverlayContent()}
+            customTitleClasses={'qrcodeOverlay'}
+            footer={this.qrcodeOverlayFooter()}
+            onHide={this.props.hideQRcode.bind(this)}
+          />
+          : null
+      }
+      <div className={css(paymentCommon.board)}>
+        {
+          (this.userInAmerica || ledgerData.get('buyURLFrame'))
+            ? this.coinbasePanel()
+            : this.exchangePanel()
+        }
+        <div className={css(paymentCommon.panel, styles.panel)}>
+          <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerFirst)}>
+            <span className={cx({
+              'fa-stack': true,
+              'fa-lg': true,
+              [css(styles.bitcoinIcon)]: true
+            })}>
+              <span className={cx({
+                fa: true,
+                'fa-circle': true,
+                'fa-stack-2x': true,
+                [css(styles.faCircle)]: true,
+                [css(styles.fa)]: true
+              })} />
+              <span className={cx({
+                fa: true,
+                'fa-bitcoin': true,
+                'fa-stack-1x': true,
+                [css(styles.faBitcoin)]: true,
+                [css(styles.fa)]: true
+              })} />
+            </span>
+            <div className={css(styles.settingsListTitle)} data-l10n-id='bitcoinAdd' />
+            <div className={css(styles.settingsListTitle, styles.subTitle)} data-l10n-id='bitcoinAddDescription' />
+          </div>
+          {
+            ledgerData.get('address')
+              ? <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
+                {
+                  ledgerData.get('hasBitcoinHandler') && ledgerData.get('paymentURL')
+                    ? <div className={css(styles.hasBitcoinHandler)}>
+                      <a href={ledgerData.get('paymentURL')} target='_blank'>
+                        <Button l10nId='bitcoinVisitAccount'
+                          className={css(commonStyles.buttonPrimary, styles.bitcoinAddressButton)}
+                        />
+                      </a>
+                      <div data-l10n-id='bitcoinAddress' className={css(styles.walletLabelText)} />
+                    </div>
+                    : <div>
+                      <div data-l10n-id='bitcoinPaymentURL' className={css(styles.walletLabelText)} />
+                    </div>
+                }
+                <div className={css(styles.walletAddressText)}>{ledgerData.get('address')}</div>
+                <Button className={css(commonStyles.buttonPrimary, styles.panelButton)}
+                  l10nId='copyToClipboard'
+                  onClick={this.copyToClipboard.bind(this, ledgerData.get('address'))}
+                />
+              </div>
+              : <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
+                <div data-l10n-id='bitcoinWalletNotAvailable' />
+              </div>
+          }
+        </div>
+        {this.smartphonePanel()}
+        {this.panelFooter()}
+      </div>
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  panel: {
+    display: 'flex',
+    paddingLeft: '100px'
+  },
+  panelFooter: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
+  disabledPanel: {
+    padding: '15px 0'
+  },
+  panelButton: {
+    minWidth: '180px'
+  },
+  settingsPanelDivider: {
+    width: '50%',
+    position: 'relative',
+    display: 'flex',
+    flexFlow: 'column'
+  },
+  settingsPanelDividerFirst: {
+    alignItems: 'flex-start'
+  },
+  settingsPanelDividerLast: {
+    alignItems: 'flex-end'
+  },
+  bitcoinQRTitle: {
+    color: globalStyles.color.braveOrange,
+    textAlign: 'center'
+  },
+  qrcodeOverlayFooter: {
+    display: 'flex',
+    justifyContent: 'center',
+    background: globalStyles.color.gray,
+    padding: '15px 0'
+  },
+  qrcodeLogo: {
+    width: '130.5px',
+    height: '42.75px',
+    display: 'inline-block'
+  },
+  qrcodeImage: {
+    clear: 'both',
+    display: 'block',
+    margin: '0 auto'
+  },
+  appstoreLogo: {
+    background: `url(${IOS})`,
+    backgroundSize: '130.5px 42.75px',
+    marginRight: '5px'
+  },
+  playstoreLogo: {
+    background: `url(${Andorid})`,
+    backgroundSize: '130.5px 42.75px'
+  },
+  coinbaseLogo: {
+    width: '40px',
+    height: '40px',
+    display: 'inlineBlock',
+    marginTop: '1px',
+    marginRight: '10px',
+    background: `url(${CoinBase}) 0 0 / contain no-repeat`
+  },
+  settingsListTitle: {
+    color: '#444444',
+    fontWeight: 'bold',
+    fontSize: '15px',
+    margin: '0'
+  },
+  subTitle: {
+    clear: 'both',
+    fontWeight: 'normal',
+    fontSize: '14px',
+    fontStyle: 'italic',
+    lineHeight: '1.3em',
+    marginTop: '20px'
+  },
+  coinbaseFooter: {
+    justifyContent: 'space-between'
+  },
+  coinbase: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  coinbaseMessage: {
+    display: 'inline-block',
+    maxWidth: '450px'
+  },
+  bitcoinIcon: {
+    position: 'absolute',
+    left: '-5px',
+    top: 0
+  },
+  bitcoinAddressButton: {
+    marginBottom: '15px'
+  },
+  walletLabelText: {
+    fontSize: '1em',
+    color: globalStyles.color.braveOrange,
+    marginBottom: '5px'
+  },
+  walletAddressText: {
+    fontSize: '12px',
+    color: 'black',
+    marginBottom: '15px'
+  },
+  hasBitcoinHandler: {
+    display: 'flex',
+    flexFlow: 'column',
+    alignItems: 'flex-end'
+  },
+  alignMiddle: {
+    justifyContent: 'center'
+  },
+  faCircle: {
+    color: globalStyles.color.bitcoinOrange
+  },
+  faBitcoin: {
+    color: 'white',
+    transform: 'rotate(12deg)'
+  },
+  faCreditCard: {
+    fontSize: '30px'
+  },
+  faMobile: {
+    fontSize: '50px',
+    left: '-40px'
+  },
+  fa: {
+    position: 'absolute',
+    left: '-45px'
+  }
+})
+
+module.exports = BitcoinDashboard
diff --git a/app/renderer/components/preferences/payment/disabledContent.js b/app/renderer/components/preferences/payment/disabledContent.js
new file mode 100644
index 00000000000..89d205af725
--- /dev/null
+++ b/app/renderer/components/preferences/payment/disabledContent.js
@@ -0,0 +1,121 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const {StyleSheet, css} = require('aphrodite/no-important')
+
+// components
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+
+// style
+const globalStyles = require('../../styles/global')
+const {paymentStyles} = require('../../styles/payment')
+const PIA = require('../../../../extensions/brave/img/private_internet_access.png')
+const PIA2 = require('../../../../extensions/brave/img/private_internet_access_2x.png')
+const BitGo = require('../../../../extensions/brave/img/bitgo.png')
+const BitGo2 = require('../../../../extensions/brave/img/bitgo_2x.png')
+const CoinBase = require('../../../../extensions/brave/img/coinbase.png')
+const CoinBase2 = require('../../../../extensions/brave/img/coinbase_2x.png')
+
+class DisabledContent extends ImmutableComponent {
+  render () {
+    return <div data-test-id='disabledContent'>
+      <div className={css(styles.paymentsMessage, styles.walletBarMargin)} data-test-id='paymentsMessage'>
+        <h3 className={css(styles.h3)} data-l10n-id='paymentsWelcomeTitle' />
+        <div className={css(styles.text)} data-l10n-id='paymentsWelcomeText1' />
+        <div className={css(styles.boldText, styles.text)} data-l10n-id='paymentsWelcomeText2' />
+        <div className={css(styles.text)} data-l10n-id='paymentsWelcomeText3' />
+        <div className={css(styles.text)} data-l10n-id='paymentsWelcomeText4' />
+        <div className={css(styles.text)}data-l10n-id='paymentsWelcomeText5' />
+        <div className={css(styles.text)}>
+          <span data-l10n-id='paymentsWelcomeText6' />&nbsp;
+          <a href='https://brave.com/Payments_FAQ.html' target='_blank' data-l10n-id='paymentsWelcomeLink' />&nbsp;
+          <span data-l10n-id='paymentsWelcomeText7' />
+        </div>
+      </div>
+      <div className={css(styles.paymentsSidebar)}>
+        <h2 className={css(styles.sideH2)} data-l10n-id='paymentsSidebarText1' />
+        <div className={css(styles.textSide)} data-l10n-id='paymentsSidebarText2' />
+        <a href='https://www.privateinternetaccess.com/' target='_blank'><span className={css(styles.paymentsSidebarPIA)} /></a>
+        <div className={css(styles.textSide)} data-l10n-id='paymentsSidebarText3' />
+        <a href='https://www.bitgo.com/' target='_blank'><span className={css(styles.paymentsSidebarBitgo)} /></a>
+        <div className={css(styles.textSide)} data-l10n-id='paymentsSidebarText4' />
+        <a href='https://www.coinbase.com/' target='_blank'><span className={css(styles.paymentsSidebarCoinbase)} /></a>
+      </div>
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  paymentsMessage: {
+    backgroundColor: globalStyles.color.lightGray,
+    borderRadius: globalStyles.radius.borderRadiusUIbox,
+    padding: '40px',
+    fontSize: paymentStyles.font.regular,
+    lineHeight: '1.8em',
+    color: globalStyles.color.mediumGray,
+    width: '500px',
+    float: 'left'
+  },
+
+  text: {
+    padding: '0.5em 0'
+  },
+
+  textSide: {
+    fontSize: paymentStyles.font.regular,
+    margin: '50px 0 20px 12px'
+  },
+
+  walletBarMargin: {
+    marginTop: paymentStyles.margin.bar
+  },
+
+  h3: {
+    fontSize: '18px',
+    paddingBottom: '0.5em'
+  },
+
+  sideH2: {
+    fontSize: '18px',
+    margin: '70px 0 -15px 12px'
+  },
+
+  boldText: {
+    fontWeight: 'bold'
+  },
+
+  paymentsSidebar: {
+    opacity: 0.8,
+    width: '200px',
+    float: 'left',
+    marginLeft: '23px'
+  },
+
+  paymentsSidebarPIA: {
+    backgroundImage: `-webkit-image-set(url(${PIA}) 1x, url(${PIA2}) 2x)`,
+    width: '195px',
+    height: '20px',
+    margin: '0 0 20px 12px',
+    display: 'block'
+  },
+
+  paymentsSidebarBitgo: {
+    backgroundImage: `-webkit-image-set(url(${BitGo}) 1x, url(${BitGo2}) 2x)`,
+    width: '100px',
+    height: '25px',
+    margin: '0 0 20px 12px',
+    display: 'block'
+  },
+
+  paymentsSidebarCoinbase: {
+    backgroundImage: `-webkit-image-set(url(${CoinBase}) 1x, url(${CoinBase2}) 2x)`,
+    width: '100px',
+    height: '35px',
+    margin: '0 0 20px 12px',
+    display: 'block'
+  }
+})
+
+module.exports = DisabledContent
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
new file mode 100644
index 00000000000..fe7966def6b
--- /dev/null
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -0,0 +1,337 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const {StyleSheet, css} = require('aphrodite')
+
+// util
+const {btcToCurrencyString, formattedTimeFromNow, walletStatus} = require('../../../../common/lib/ledgerUtil')
+const {l10nErrorText} = require('../../../../common/lib/httpUtil')
+const {changeSetting} = require('../../../lib/settingsUtil')
+
+// components
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+const Button = require('../../../../../js/components/button')
+const {FormTextbox} = require('../../textbox')
+const {FormDropdown} = require('../../dropdown')
+const {SettingsList, SettingItem} = require('../../settings')
+const LedgerTable = require('./ledgerTable')
+
+// style
+const globalStyles = require('../../styles/global')
+const {paymentStyles} = require('../../styles/payment')
+const commonStyles = require('../../styles/commonStyles')
+const cx = require('../../../../../js/lib/classSet')
+
+// other
+const getSetting = require('../../../../../js/settings').getSetting
+const settings = require('../../../../../js/constants/settings')
+const aboutActions = require('../../../../../js/about/aboutActions')
+
+// TODO: report when funds are too low
+// TODO: support non-USD currency
+class EnabledContent extends ImmutableComponent {
+  walletButton () {
+    const ledgerData = this.props.ledgerData
+    const buttonText = ledgerData.get('created')
+      ? 'addFundsTitle'
+      : (ledgerData.get('creating') ? 'creatingWallet' : 'createWallet')
+    const onButtonClick = ledgerData.get('created')
+      ? this.props.showOverlay.bind(this, 'addFunds')
+      : (ledgerData.get('creating') ? () => {} : this.createWallet())
+
+    return <Button
+      testId={buttonText}
+      test2Id={'addFunds'}
+      l10nId={buttonText}
+      className={css(commonStyles.buttonPrimary, styles.addFunds)}
+      onClick={onButtonClick.bind(this)}
+      disabled={ledgerData.get('creating')}
+    />
+  }
+
+  paymentHistoryButton () {
+    const ledgerData = this.props.ledgerData
+    const walletCreated = ledgerData.get('created') && !ledgerData.get('creating')
+    const walletTransactions = ledgerData.get('transactions')
+    const walletHasTransactions = walletTransactions && walletTransactions.size
+    const nextReconcileDateValue = this.nextReconcileDate()
+    let buttonText
+
+    if (!walletCreated || !nextReconcileDateValue) {
+      return null
+    } else if (!walletHasTransactions) {
+      buttonText = 'noPaymentHistory'
+      const now = new Date().getTime()
+      const timestamp = this.props.ledgerData.get('reconcileStamp')
+      if (timestamp <= now) {
+        buttonText = (timestamp <= (now - (24 * 60 * 60 * 1000)))
+          ? 'noPaymentOverDueHistory' : 'noPaymentDueHistory'
+      }
+    } else {
+      buttonText = 'viewPaymentHistory'
+    }
+
+    const l10nDataArgs = {
+      reconcileDate: nextReconcileDateValue
+    }
+
+    const onButtonClick = this.props.showOverlay.bind(this, 'paymentHistory')
+
+    return <Button
+      testId='paymentHistoryButton'
+      className={css(styles.paymentHistoryButton)}
+      l10nId={buttonText}
+      l10nArgs={l10nDataArgs}
+      onClick={onButtonClick.bind(this)}
+      disabled={ledgerData.get('creating')}
+    />
+  }
+
+  ledgerDataErrorText () {
+    const ledgerData = this.props.ledgerData
+    const ledgerError = ledgerData.get('error')
+
+    if (!ledgerError) {
+      return null
+    }
+
+    // 'error' here is a chromium webRequest error as returned by request.js
+    const errorCode = ledgerError.get('error').get('errorCode')
+    return l10nErrorText(errorCode)
+  }
+
+  createWallet () {
+    const ledgerData = this.props.ledgerData
+    if (!ledgerData.get('created')) {
+      aboutActions.createWallet()
+    }
+
+    return () => {}
+  }
+
+  fundsAmount () {
+    const ledgerData = this.props.ledgerData
+    if (!ledgerData.get('created')) {
+      return null
+    }
+
+    return <div className={css(styles.balance)}>
+      {
+        !(ledgerData.get('balance') === undefined || ledgerData.get('balance') === null)
+          ? <FormTextbox data-test-id='fundsAmount' readOnly value={btcToCurrencyString(ledgerData.get('balance'), ledgerData)} />
+          : <span className={css(styles.loading)}>
+            <span className={css(styles.loadingText)} data-test-id='accountBalanceLoading' data-l10n-id='accountBalanceLoading' />
+          </span>
+      }
+      <a className={css(styles.iconLink)} href='https://brave.com/Payments_FAQ.html' target='_blank'>
+        <span className={cx({
+          fa: true,
+          'fa-question-circle': true,
+          [css(styles.iconText)]: true
+        })} />
+      </a>
+    </div>
+  }
+
+  nextReconcileDate () {
+    const ledgerData = this.props.ledgerData
+    if ((ledgerData.get('error')) || (!ledgerData.get('reconcileStamp'))) {
+      return null
+    }
+    const timestamp = ledgerData.get('reconcileStamp')
+    return formattedTimeFromNow(timestamp)
+  }
+
+  nextReconcileMessage () {
+    const ledgerData = this.props.ledgerData
+    const nextReconcileDateRelative = this.nextReconcileDate()
+    if (!nextReconcileDateRelative) {
+      return null
+    }
+
+    const timestamp = ledgerData.get('reconcileStamp')
+    const now = new Date().getTime()
+    let l10nDataId = 'statusNextReconcileDate'
+    if (timestamp <= now) {
+      l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
+        ? 'paymentHistoryOverdueFooterText' : 'statusNextReconcileToday'
+    }
+
+    const l10nDataArgs = {
+      reconcileDate: nextReconcileDateRelative
+    }
+
+    return <div className={css(styles.nextReconcileDate)} data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
+  }
+
+  render () {
+    const ledgerData = this.props.ledgerData
+    const walletStatusText = walletStatus(ledgerData)
+
+    return <div>
+      <div className={css(styles.walletBar)} data-test-id='walletBar'>
+        <table>
+          <thead>
+            <tr className={css(styles.tableTr)}>
+              <th className={css(styles.tableTh)} data-l10n-id='monthlyBudget' />
+              <th className={css(styles.tableTh)} data-l10n-id='accountBalance' />
+              <th className={css(styles.tableTh)} data-l10n-id='status' />
+            </tr>
+          </thead>
+          <tbody>
+            <tr className={css(styles.tableTr)}>
+              <td className={css(styles.tableTd)}>
+                <SettingsList className={css(styles.listContainer)}>
+                  <SettingItem>
+                    <FormDropdown
+                      data-test-id='fundsSelectBox'
+                      value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings)}
+                      onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)}>
+                      {
+                        [5, 10, 15, 20].map((amount) =>
+                          <option value={amount}>{amount} {ledgerData.get('currency') || 'USD'}</option>
+                        )
+                      }
+                    </FormDropdown>
+                  </SettingItem>
+                  <SettingItem>
+                    {this.paymentHistoryButton()}
+                  </SettingItem>
+                </SettingsList>
+              </td>
+              <td className={css(styles.tableTd)}>
+                {
+                  ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
+                    ? <div>
+                      <div data-l10n-id='accountBalanceConnectionError' />
+                      <div className={css(styles.accountBalanceError)} data-l10n-id={this.ledgerDataErrorText()} />
+                    </div>
+                    : <div>
+                      <SettingsList className={css(styles.listContainer)}>
+                        <SettingItem>
+                          {this.fundsAmount()}
+                          {this.walletButton()}
+                        </SettingItem>
+                      </SettingsList>
+                    </div>
+                }
+              </td>
+              <td className={css(styles.tableTd)}>
+                <div data-test-id='walletStatus'
+                  data-l10n-id={walletStatusText.id}
+                  data-l10n-args={walletStatusText.args ? JSON.stringify(walletStatusText.args) : null}
+                />
+                {this.nextReconcileMessage()}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <LedgerTable ledgerData={this.props.ledgerData}
+        settings={this.props.settings}
+        onChangeSetting={this.props.onChangeSetting}
+        siteSettings={this.props.siteSettings} />
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  walletBar: {
+    background: globalStyles.color.lightGray,
+    borderRadius: globalStyles.radius.borderRadiusUIbox,
+    padding: paymentStyles.padding.bar,
+    margin: `${paymentStyles.margin.bar} 0`
+  },
+
+  listContainer: {
+    marginBottom: 0
+  },
+
+  tableTh: {
+    textAlign: 'left'
+  },
+
+  tableTr: {
+    height: '1em'
+  },
+
+  tableTd: {
+    fontSize: paymentStyles.font.regular,
+    padding: '10px 30px 0 0',
+    width: 'auto',
+    minWidth: paymentStyles.width.tableRow,
+    verticalAlign: 'top'
+  },
+
+  accountBalanceError: {
+    marginTop: paymentStyles.margin.barItem
+  },
+
+  nextReconcileDate: {
+    marginTop: paymentStyles.margin.barItem,
+    marginBottom: 0
+  },
+
+  settingsListContainer: {
+    marginBottom: 0
+  },
+
+  paymentHistoryButton: {
+    display: 'block',
+    fontSize: paymentStyles.font.regular,
+    lineHeight: '18px',
+    color: globalStyles.color.braveOrange,
+    height: 'auto',
+    marginTop: paymentStyles.margin.barItem,
+    padding: 0,
+    textAlign: 'left',
+    cursor: 'pointer',
+    whiteSpace: 'normal'
+  },
+
+  addFunds: {
+    minWidth: '180px',
+    width: 'auto',
+    marginTop: paymentStyles.margin.barItem
+  },
+
+  balance: {
+    display: 'flex',
+    alignItems: 'center',
+    verticalAlign: 0,
+    height: '100%',
+    marginBottom: 0
+  },
+
+  loading: {
+    height: '2.25em',
+    display: 'flex',
+    alignItems: 'center',
+    margin: 0,
+    padding: 0
+  },
+
+  loadingText: {
+    fontSize: paymentStyles.font.regular,
+    margin: 0,
+    padding: 0
+  },
+
+  iconLink: {
+    textDecoration: 'none',
+
+    ':hover': {
+      textDecoration: 'none'
+    }
+  },
+
+  iconText: {
+    color: globalStyles.color.gray,
+    margin: '0 0 0 5px',
+    fontSize: paymentStyles.font.regular
+  }
+})
+
+module.exports = EnabledContent
diff --git a/app/renderer/components/preferences/paymentHistory.js b/app/renderer/components/preferences/payment/history.js
similarity index 64%
rename from app/renderer/components/preferences/paymentHistory.js
rename to app/renderer/components/preferences/payment/history.js
index 5a6ae218cbd..f571dedccea 100644
--- a/app/renderer/components/preferences/paymentHistory.js
+++ b/app/renderer/components/preferences/payment/history.js
@@ -4,20 +4,31 @@
 
 const React = require('react')
 const Immutable = require('immutable')
-const ImmutableComponent = require('../../../../js/components/immutableComponent')
 const {StyleSheet, css} = require('aphrodite')
-const globalStyles = require('../styles/global')
-const {addExportFilenamePrefixToTransactions} = require('../../../common/lib/ledgerExportUtil')
-const appUrlUtil = require('../../../../js/lib/appUrlUtil')
+
+// util
+const {addExportFilenamePrefixToTransactions} = require('../../../../common/lib/ledgerExportUtil')
+const {formattedTimeFromNow} = require('../../../../common/lib/ledgerUtil')
+const appUrlUtil = require('../../../../../js/lib/appUrlUtil')
+
+// components
+const Button = require('../../../../../js/components/button')
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+
+// style
+const globalStyles = require('../../styles/global')
+const commonStyles = require('../../styles/commonStyles')
+
+// other
 const aboutUrls = appUrlUtil.aboutUrls
 const aboutContributionsUrl = aboutUrls.get('about:contributions')
 const moment = require('moment')
 moment.locale(navigator.language)
 
-class PaymentHistory extends ImmutableComponent {
+class HistoryContent extends ImmutableComponent {
   render () {
     const transactions = Immutable.fromJS(
-        addExportFilenamePrefixToTransactions(this.props.ledgerData.get('transactions').toJS())
+      addExportFilenamePrefixToTransactions(this.props.ledgerData.get('transactions').toJS())
     )
 
     return <table className={css(styles.paymentHistoryTable)}>
@@ -30,14 +41,14 @@ class PaymentHistory extends ImmutableComponent {
       </thead>
       <tbody>
         {
-          transactions.map(row => <PaymentHistoryRow transaction={row} ledgerData={this.props.ledgerData} />)
+          transactions.map(row => <HistoryRow transaction={row} ledgerData={this.props.ledgerData} />)
         }
       </tbody>
     </table>
   }
 }
 
-class PaymentHistoryRow extends ImmutableComponent {
+class HistoryRow extends ImmutableComponent {
   get transaction () {
     return this.props.transaction
   }
@@ -83,6 +94,37 @@ class PaymentHistoryRow extends ImmutableComponent {
   }
 }
 
+class HistoryFooter extends ImmutableComponent {
+  render () {
+    const ledgerData = this.props.ledgerData
+    if (!ledgerData.get('reconcileStamp')) {
+      return null
+    }
+
+    const timestamp = ledgerData.get('reconcileStamp')
+    const now = new Date().getTime()
+    let l10nDataId = 'paymentHistoryFooterText'
+    if (timestamp <= now) {
+      l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
+        ? 'paymentHistoryOverdueFooterText' : 'paymentHistoryDueFooterText'
+    }
+
+    const l10nDataArgs = {
+      reconcileDate: formattedTimeFromNow(timestamp)
+    }
+
+    return <div className={css(styles.historyFooter)}>
+      <div className={css(styles.nextPayment)}>
+        <span data-l10n-id={l10nDataId} data-l10n-args={JSON.stringify(l10nDataArgs)} />
+      </div>
+      <Button l10nId='paymentHistoryOKText'
+        className={css(commonStyles.buttonPrimary)}
+        onClick={this.props.hideOverlay.bind(this, 'paymentHistory')}
+      />
+    </div>
+  }
+}
+
 const styles = StyleSheet.create({
   paymentHistoryTable: {
     display: 'flex',
@@ -139,7 +181,18 @@ const styles = StyleSheet.create({
   wide: {
     color: '#777',
     flex: '4'
+  },
+  historyFooter: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  nextPayment: {
+    fontSize: '14px'
   }
 })
 
-module.exports = PaymentHistory
+module.exports = {
+  HistoryContent,
+  HistoryFooter
+}
diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/app/renderer/components/preferences/payment/ledgerBackup.js
new file mode 100644
index 00000000000..57f3bac547b
--- /dev/null
+++ b/app/renderer/components/preferences/payment/ledgerBackup.js
@@ -0,0 +1,128 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const {StyleSheet, css} = require('aphrodite')
+
+// components
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+const Button = require('../../../../../js/components/button')
+
+// style
+const globalStyles = require('../../styles/global')
+const commonStyles = require('../../styles/commonStyles')
+const {paymentCommon} = require('../../styles/payment')
+
+// other
+const aboutActions = require('../../../../../js/about/aboutActions')
+
+class LedgerBackupContent extends ImmutableComponent {
+  copyToClipboard (text) {
+    aboutActions.setClipboard(text)
+  }
+
+  render () {
+    const paymentId = this.props.ledgerData.get('paymentId')
+    const passphrase = this.props.ledgerData.get('passphrase')
+
+    return <div className={css(paymentCommon.board)}>
+      <div className={css(paymentCommon.panel, styles.ledgerBackupContent)}>
+        <span data-l10n-id='ledgerBackupContent' />
+        <div className={css(styles.copyKeyContainer)}>
+          <Button l10nId='copy'
+            className={css(commonStyles.whiteButton, styles.copyButton)}
+            onClick={this.copyToClipboard.bind(this, paymentId)}
+          />
+          <div className={css(styles.keyContainer)}>
+            <h3 className={css(styles.keyContainer__h3)} data-l10n-id='firstKey' />
+            <span className={css(styles.keyContainer__span)}>{paymentId}</span>
+          </div>
+        </div>
+        <div className={css(styles.copyKeyContainer)}>
+          <Button l10nId='copy'
+            className={css(commonStyles.whiteButton, styles.copyButton)}
+            onClick={this.copyToClipboard.bind(this, passphrase)}
+          />
+          <div className={css(styles.keyContainer)}>
+            <h3 className={css(styles.keyContainer__h3)} data-l10n-id='secondKey' />
+            <span className={css(styles.keyContainer__span)}>{passphrase}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+}
+
+class LedgerBackupFooter extends ImmutableComponent {
+  constructor () {
+    super()
+    this.printKeys = this.printKeys.bind(this)
+    this.saveKeys = this.saveKeys.bind(this)
+  }
+
+  generateKeyFile (backupAction) {
+    aboutActions.ledgerGenerateKeyFile(backupAction)
+  }
+
+  printKeys () {
+    this.generateKeyFile('print')
+  }
+
+  saveKeys () {
+    this.generateKeyFile('save')
+  }
+
+  render () {
+    return <div className={css(paymentCommon.advanceFooter)}>
+      <Button l10nId='printKeys'
+        className={css(commonStyles.buttonPrimary)}
+        onClick={this.printKeys}
+      />
+      <Button l10nId='saveRecoveryFile'
+        className={css(commonStyles.buttonPrimary, paymentCommon.marginButtons)}
+        onClick={this.saveKeys}
+      />
+      <Button l10nId='done'
+        className={css(commonStyles.whiteButton, commonStyles.inlineButton, paymentCommon.marginButtons)}
+        onClick={this.props.hideOverlay.bind(this, 'ledgerBackup')}
+      />
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  copyKeyContainer: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    width: '75%',
+    margin: `${globalStyles.spacing.paymentsMargin} auto`
+  },
+
+  keyContainer: {
+    marginLeft: '2em'
+  },
+
+  keyContainer__h3: {
+    marginBottom: globalStyles.spacing.modalPanelHeaderMarginBottom
+  },
+
+  keyContainer__span: {
+    whiteSpace: 'nowrap'
+  },
+  ledgerBackupContent: {
+    paddingLeft: '50px',
+    paddingRight: '50px',
+    marginTop: 0,
+    marginBottom: 0
+  },
+  copyButton: {
+    fontSize: '14px',
+    margin: 0
+  }
+})
+
+module.exports = {
+  LedgerBackupContent,
+  LedgerBackupFooter
+}
diff --git a/app/renderer/components/preferences/payment/ledgerRecovery.js b/app/renderer/components/preferences/payment/ledgerRecovery.js
new file mode 100644
index 00000000000..7874b2e16a7
--- /dev/null
+++ b/app/renderer/components/preferences/payment/ledgerRecovery.js
@@ -0,0 +1,193 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const {StyleSheet, css} = require('aphrodite')
+
+// util
+const {btcToCurrencyString} = require('../../../../common/lib/ledgerUtil')
+
+// components
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+const Button = require('../../../../../js/components/button')
+const {RecoveryKeyTextbox} = require('../../textbox')
+const {SettingsList, SettingItem} = require('../../settings')
+
+// style
+const globalStyles = require('../../styles/global')
+const commonStyles = require('../../styles/commonStyles')
+const {paymentCommon} = require('../../styles/payment')
+
+// other
+const aboutActions = require('../../../../../js/about/aboutActions')
+
+class LedgerRecoveryContent extends ImmutableComponent {
+  constructor () {
+    super()
+    this.handleFirstRecoveryKeyChange = this.handleFirstRecoveryKeyChange.bind(this)
+    this.handleSecondRecoveryKeyChange = this.handleSecondRecoveryKeyChange.bind(this)
+  }
+
+  handleFirstRecoveryKeyChange (e) {
+    this.props.handleFirstRecoveryKeyChange(e.target.value)
+  }
+
+  handleSecondRecoveryKeyChange (e) {
+    this.props.handleSecondRecoveryKeyChange(e.target.value)
+  }
+
+  clearRecoveryStatus () {
+    aboutActions.clearRecoveryStatus()
+    this.props.hideAdvancedOverlays()
+  }
+
+  render () {
+    const l10nDataArgs = {
+      balance: btcToCurrencyString(this.props.ledgerData.get('balance'), this.props.ledgerData)
+    }
+    const recoverySucceeded = this.props.ledgerData.get('recoverySucceeded')
+    const recoveryError = this.props.ledgerData.getIn(['error', 'error'])
+    const isNetworkError = typeof recoveryError === 'object'
+
+    return <div className={css(paymentCommon.board)}>
+      {
+        recoverySucceeded === true
+          ? <div className={css(styles.recoveryOverlay)}>
+            <h1 className={css(styles.recoveryOverlay__h1)} data-l10n-id='ledgerRecoverySucceeded' />
+            <p className={css(styles.recoveryOverlay__p, styles.spaceAround)}
+              data-l10n-id='balanceRecovered'
+              data-l10n-args={JSON.stringify(l10nDataArgs)}
+            />
+            <Button l10nId='ok'
+              className={css(commonStyles.whiteButton, commonStyles.inlineButton)}
+              onClick={this.clearRecoveryStatus.bind(this)}
+            />
+          </div>
+          : null
+      }
+      {
+        (recoverySucceeded === false && recoveryError && isNetworkError)
+          ? <div className={css(styles.recoveryOverlay)}>
+            <h1 className={css(styles.recoveryOverlay__h1)} data-l10n-id='ledgerRecoveryNetworkFailedTitle' data-test-id='recoveryError' />
+            <p className={css(styles.recoveryOverlay__p, styles.spaceAround)}
+              data-l10n-id='ledgerRecoveryNetworkFailedMessage'
+            />
+            <Button l10nId='ok'
+              className={css(commonStyles.whiteButton, commonStyles.inlineButton)}
+              onClick={this.clearRecoveryStatus.bind(this)}
+            />
+          </div>
+          : null
+      }
+      {
+        (recoverySucceeded === false && recoveryError && !isNetworkError)
+          ? <div className={css(styles.recoveryOverlay)}>
+            <h1 className={css(styles.recoveryOverlay__h1)} data-l10n-id='ledgerRecoveryFailedTitle' />
+            <p className={css(styles.recoveryOverlay__p, styles.spaceAround)}
+              data-l10n-id='ledgerRecoveryFailedMessage'
+            />
+            <Button l10nId='ok'
+              className={css(commonStyles.whiteButton, commonStyles.inlineButton)}
+              onClick={this.clearRecoveryStatus.bind(this)}
+            />
+          </div>
+          : null
+      }
+      <div className={css(paymentCommon.panel, styles.recoveryContent)}>
+        <h4 className={css(styles.recoveryContent__h4)} data-l10n-id='ledgerRecoverySubtitle' />
+        <div className={css(styles.ledgerRecoveryContent)} data-l10n-id='ledgerRecoveryContent' />
+        <SettingsList className={css(commonStyles.noMarginBottom)}>
+          <SettingItem>
+            <h3 data-l10n-id='firstRecoveryKey' />
+            <RecoveryKeyTextbox id='firstRecoveryKey' onChange={this.handleFirstRecoveryKeyChange} />
+            <h3 className={css(styles.recoveryContent__h3)} data-l10n-id='secondRecoveryKey' />
+            <RecoveryKeyTextbox id='secondRecoveryKey' onChange={this.handleSecondRecoveryKeyChange} />
+          </SettingItem>
+        </SettingsList>
+      </div>
+    </div>
+  }
+}
+
+class LedgerRecoveryFooter extends ImmutableComponent {
+  constructor () {
+    super()
+    this.recoverWallet = this.recoverWallet.bind(this)
+  }
+
+  recoverWallet () {
+    aboutActions.ledgerRecoverWallet(this.props.state.FirstRecoveryKey, this.props.state.SecondRecoveryKey)
+  }
+
+  recoverWalletFromFile () {
+    aboutActions.ledgerRecoverWalletFromFile()
+  }
+
+  render () {
+    return <div className={css(paymentCommon.advanceFooter)}>
+      <div className={css(styles.recoveryFooterButtons)}>
+        <Button l10nId='recover'
+          className={css(commonStyles.buttonPrimary)}
+          onClick={this.recoverWallet}
+        />
+        <Button l10nId='recoverFromFile'
+          className={css(commonStyles.buttonPrimary, paymentCommon.marginButtons)}
+          onClick={this.recoverWalletFromFile}
+        />
+        <Button l10nId='cancel'
+          className={css(commonStyles.whiteButton, commonStyles.inlineButton, paymentCommon.marginButtons)}
+          onClick={this.props.hideOverlay.bind(this, 'ledgerRecovery')}
+        />
+      </div>
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  recoveryContent: {
+    paddingLeft: '50px',
+    paddingRight: '50px',
+    marginTop: 0,
+    marginBottom: 0
+  },
+  recoveryContent__h4: {
+    marginBottom: globalStyles.spacing.paymentsMargin
+  },
+  recoveryContent__h3: {
+    marginBottom: globalStyles.spacing.modalPanelHeaderMarginBottom
+  },
+  ledgerRecoveryContent: {
+    marginBottom: globalStyles.spacing.paymentsMargin
+  },
+
+  recoveryOverlay: {
+    backgroundColor: globalStyles.color.black75,
+    border: `1px solid ${globalStyles.color.black75}`,
+    position: 'absolute',
+    top: '-1px',
+    left: '-1px',
+    width: '100%',
+    height: '100%',
+    textAlign: 'center',
+    zIndex: 999
+  },
+  recoveryOverlay__h1: {
+    color: '#fff',
+    marginTop: '120px'
+  },
+  recoveryOverlay__p: {
+    color: '#fff'
+  },
+  spaceAround: {
+    margin: '50px auto'
+  },
+  recoveryFooterButtons: {
+    float: 'right'
+  }
+})
+
+module.exports = {
+  LedgerRecoveryContent,
+  LedgerRecoveryFooter
+}
diff --git a/app/renderer/components/preferences/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
similarity index 88%
rename from app/renderer/components/preferences/ledgerTable.js
rename to app/renderer/components/preferences/payment/ledgerTable.js
index 32021f759e7..122a8cef12b 100644
--- a/app/renderer/components/preferences/ledgerTable.js
+++ b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -3,19 +3,22 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('../../../../js/components/immutableComponent')
 const {StyleSheet, css} = require('aphrodite')
-const globalStyles = require('../styles/global')
 
-const settings = require('../../../../js/constants/settings')
-const getSetting = require('../../../../js/settings').getSetting
-const aboutActions = require('../../../../js/about/aboutActions')
-const {SettingCheckbox, SiteSettingCheckbox} = require('../settings')
-const SortableTable = require('../../../../js/components/sortableTable')
+// components
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+const SortableTable = require('../../../../../js/components/sortableTable')
 
-// icons
-const verifiedGreenIcon = require('../../../extensions/brave/img/ledger/verified_green_icon.svg')
-const verifiedWhiteIcon = require('../../../extensions/brave/img/ledger/verified_white_icon.svg')
+// style
+const globalStyles = require('../../styles/global')
+const verifiedGreenIcon = require('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
+const verifiedWhiteIcon = require('../../../../extensions/brave/img/ledger/verified_white_icon.svg')
+
+// other
+const settings = require('../../../../../js/constants/settings')
+const getSetting = require('../../../../../js/settings').getSetting
+const aboutActions = require('../../../../../js/about/aboutActions')
+const {SettingCheckbox, SiteSettingCheckbox} = require('../../settings')
 
 class LedgerTable extends ImmutableComponent {
   get synopsis () {
@@ -147,7 +150,7 @@ class LedgerTable extends ImmutableComponent {
     if (!this.synopsis || !this.synopsis.size) {
       return null
     }
-    return <div>
+    return <div data-test-id='ledgerTable'>
       <div className={css(styles.hideExcludedSites)}>
         <div className={css(styles.columnOffset)} />
         <div className={css(styles.rightColumn)}>
@@ -199,12 +202,12 @@ const styles = StyleSheet.create({
   disabled: verifiedBadge(verifiedWhiteIcon),
 
   neverShowSiteIcon: {
-    opacity: '0',
+    opacity: 0,
     fontSize: '20px',
     textAlign: 'center',
 
     ':hover': {
-      opacity: '1'
+      opacity: 1
     }
   },
 
@@ -254,21 +257,21 @@ const styles = StyleSheet.create({
 
   hideExcludedSites: {
     display: 'flex',
-    flex: '1',
+    flex: 1,
     alignItems: 'center',
     height: '35px'
   },
 
   columnOffset: {
     display: 'flex',
-    flexGrow: '8',
-    flexShrink: '8'
+    flexGrow: 8,
+    flexShrink: 8
   },
 
   rightColumn: {
     display: 'flex',
-    flexGrow: '1',
-    flexShrink: '1'
+    flexGrow: 1,
+    flexShrink: 1
   },
 
   alignRight: {
@@ -276,7 +279,7 @@ const styles = StyleSheet.create({
   },
 
   paymentsDisabled: {
-    opacity: '0.6'
+    opacity: 0.6
   }
 })
 
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 5204f57d3c5..6ac2abc1fd5 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -4,27 +4,31 @@
 
 // Note that these are webpack requires, not CommonJS node requiring requires
 const React = require('react')
+const {StyleSheet, css} = require('aphrodite')
+
+// Components
 const ImmutableComponent = require('../../../../js/components/immutableComponent')
-const {l10nErrorText} = require('../../../common/lib/httpUtil')
-const aboutActions = require('../../../../js/about/aboutActions')
-const getSetting = require('../../../../js/settings').getSetting
-const settings = require('../../../../js/constants/settings')
+const Button = require('../../../../js/components/button')
 const ModalOverlay = require('../../../../js/components/modalOverlay')
-const coinbaseCountries = require('../../../../js/constants/coinbaseCountries')
-const {changeSetting} = require('../../lib/settingsUtil')
-const moment = require('moment')
-moment.locale(navigator.language)
-
-const {StyleSheet, css} = require('aphrodite/no-important')
+const {SettingCheckbox} = require('../settings')
+const DisabledContent = require('./payment/disabledContent')
+const EnabledContent = require('./payment/enabledContent')
+const BitcoinDashboard = require('./payment/bitcoinDashboard')
+const {AdvancedSettingsContent, AdvancedSettingsFooter} = require('./payment/advancedSettings')
+const {HistoryContent, HistoryFooter} = require('./payment/history')
+const {LedgerBackupContent, LedgerBackupFooter} = require('./payment/ledgerBackup')
+const {LedgerRecoveryContent, LedgerRecoveryFooter} = require('./payment/ledgerRecovery')
+
+// style
+const cx = require('../../../../js/lib/classSet')
 const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
+const {paymentStyles} = require('../styles/payment')
 
-// Components
-const Button = require('../../../../js/components/button')
-const {FormTextbox, RecoveryKeyTextbox} = require('../textbox')
-const {FormDropdown, SettingDropdown} = require('../dropdown')
-const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
-const LedgerTable = require('./ledgerTable')
-const PaymentHistory = require('./paymentHistory')
+// other
+const getSetting = require('../../../../js/settings').getSetting
+const settings = require('../../../../js/constants/settings')
+const coinbaseCountries = require('../../../../js/constants/coinbaseCountries')
 
 class PaymentsTab extends ImmutableComponent {
   constructor () {
@@ -34,158 +38,24 @@ class PaymentsTab extends ImmutableComponent {
       SecondRecoveryKey: ''
     }
 
-    this.printKeys = this.printKeys.bind(this)
-    this.saveKeys = this.saveKeys.bind(this)
-    this.createWallet = this.createWallet.bind(this)
-    this.recoverWallet = this.recoverWallet.bind(this)
     this.handleFirstRecoveryKeyChange = this.handleFirstRecoveryKeyChange.bind(this)
     this.handleSecondRecoveryKeyChange = this.handleSecondRecoveryKeyChange.bind(this)
   }
 
-  createWallet () {
-    if (!this.props.ledgerData.get('created')) {
-      aboutActions.createWallet()
-    }
-  }
-
-  handleFirstRecoveryKeyChange (e) {
-    this.setState({FirstRecoveryKey: e.target.value})
-  }
-
-  handleSecondRecoveryKeyChange (e) {
-    this.setState({SecondRecoveryKey: e.target.value})
-  }
-
-  recoverWallet () {
-    aboutActions.ledgerRecoverWallet(this.state.FirstRecoveryKey, this.state.SecondRecoveryKey)
-  }
-
-  recoverWalletFromFile () {
-    aboutActions.ledgerRecoverWalletFromFile()
-  }
-
-  copyToClipboard (text) {
-    aboutActions.setClipboard(text)
-  }
-
-  generateKeyFile (backupAction) {
-    aboutActions.ledgerGenerateKeyFile(backupAction)
+  handleFirstRecoveryKeyChange (key) {
+    this.setState({FirstRecoveryKey: key})
+    this.forceUpdate()
   }
 
-  clearRecoveryStatus () {
-    aboutActions.clearRecoveryStatus()
-    this.props.hideAdvancedOverlays()
-  }
-
-  printKeys () {
-    this.generateKeyFile('print')
-  }
-
-  saveKeys () {
-    this.generateKeyFile('save')
+  handleSecondRecoveryKeyChange (key) {
+    this.setState({SecondRecoveryKey: key})
+    this.forceUpdate()
   }
 
   get enabled () {
     return getSetting(settings.PAYMENTS_ENABLED, this.props.settings)
   }
 
-  get fundsAmount () {
-    if (!this.props.ledgerData.get('created')) {
-      return null
-    }
-
-    return <div className='balance'>
-      {
-      !(this.props.ledgerData.get('balance') === undefined || this.props.ledgerData.get('balance') === null)
-        ? <FormTextbox data-test-id='fundsAmount' readOnly value={this.btcToCurrencyString(this.props.ledgerData.get('balance'))} />
-        : <span><span data-test-id='accountBalanceLoading' data-l10n-id='accountBalanceLoading' /></span>
-      }
-      <a href='https://brave.com/Payments_FAQ.html' target='_blank'>
-        <span className='fa fa-question-circle fundsFAQ' />
-      </a>
-    </div>
-  }
-
-  get walletButton () {
-    const buttonText = this.props.ledgerData.get('created')
-      ? 'addFundsTitle'
-      : (this.props.ledgerData.get('creating') ? 'creatingWallet' : 'createWallet')
-    const onButtonClick = this.props.ledgerData.get('created')
-      ? this.props.showOverlay.bind(this, 'addFunds')
-      : (this.props.ledgerData.get('creating') ? () => {} : this.createWallet)
-    return <Button data-test-id={buttonText} l10nId={buttonText} className='primaryButton addFunds' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
-  }
-
-  get paymentHistoryButton () {
-    const walletCreated = this.props.ledgerData.get('created') && !this.props.ledgerData.get('creating')
-    const walletTransactions = this.props.ledgerData.get('transactions')
-    const walletHasTransactions = walletTransactions && walletTransactions.size
-    let buttonText
-
-    if ((!walletCreated) || (!this.nextReconcileDate)) {
-      return null
-    } else if (!walletHasTransactions) {
-      buttonText = 'noPaymentHistory'
-      const now = new Date().getTime()
-      const timestamp = this.props.ledgerData.get('reconcileStamp')
-      if (timestamp <= now) {
-        buttonText = (timestamp <= (now - (24 * 60 * 60 * 1000)))
-                       ? 'noPaymentOverDueHistory' : 'noPaymentDueHistory'
-      }
-    } else {
-      buttonText = 'viewPaymentHistory'
-    }
-
-    const l10nDataArgs = {
-      reconcileDate: this.nextReconcileDate
-    }
-
-    const onButtonClick = this.props.showOverlay.bind(this, 'paymentHistory')
-
-    return <Button
-      className='paymentHistoryButton'
-      l10nId={buttonText}
-      l10nArgs={l10nDataArgs}
-      onClick={onButtonClick.bind(this)}
-      disabled={this.props.ledgerData.get('creating')}
-      />
-  }
-
-  get walletStatus () {
-    const ledgerData = this.props.ledgerData
-    let status = {}
-    if (ledgerData.get('error')) {
-      status.id = 'statusOnError'
-    } else if (ledgerData.get('created')) {
-      const transactions = ledgerData.get('transactions')
-      const pendingFunds = Number(ledgerData.get('unconfirmed') || 0)
-      if (pendingFunds + Number(ledgerData.get('balance') || 0) <
-          0.9 * Number(ledgerData.get('btc') || 0)) {
-        status.id = 'insufficientFundsStatus'
-      } else if (pendingFunds > 0) {
-        status.id = 'pendingFundsStatus'
-        status.args = {funds: this.btcToCurrencyString(pendingFunds)}
-      } else if (transactions && transactions.size > 0) {
-        status.id = 'defaultWalletStatus'
-      } else {
-        status.id = 'createdWalletStatus'
-      }
-    } else if (ledgerData.get('creating')) {
-      status.id = 'creatingWalletStatus'
-    } else {
-      status.id = 'createWalletStatus'
-    }
-    return status
-  }
-
-  get tableContent () {
-    // TODO: This should be sortable. #2497
-    return <LedgerTable ledgerData={this.props.ledgerData}
-      settings={this.props.settings}
-      onChangeSetting={this.props.onChangeSetting}
-      siteSettings={this.props.siteSettings} />
-  }
-
   get overlayTitle () {
     if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
       return 'addFunds'
@@ -195,7 +65,6 @@ class PaymentsTab extends ImmutableComponent {
   }
 
   get overlayContent () {
-    const {BitcoinDashboard} = require('../../../../js/about/preferences')
     return <BitcoinDashboard ledgerData={this.props.ledgerData}
       settings={this.props.settings}
       bitcoinOverlayVisible={this.props.bitcoinOverlayVisible}
@@ -207,348 +76,11 @@ class PaymentsTab extends ImmutableComponent {
       hideParentOverlay={this.props.hideOverlay.bind(this, 'addFunds')} />
   }
 
-  get paymentHistoryContent () {
-    return <PaymentHistory ledgerData={this.props.ledgerData} />
-  }
-
-  get paymentHistoryFooter () {
-    let ledgerData = this.props.ledgerData
-    if (!ledgerData.get('reconcileStamp')) {
-      return null
-    }
-    const timestamp = ledgerData.get('reconcileStamp')
-    const now = new Date().getTime()
-    let l10nDataId = 'paymentHistoryFooterText'
-    if (timestamp <= now) {
-      l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
-                     ? 'paymentHistoryOverdueFooterText' : 'paymentHistoryDueFooterText'
-    }
-
-    const nextReconcileDateRelative = formattedTimeFromNow(timestamp)
-    const l10nDataArgs = {
-      reconcileDate: nextReconcileDateRelative
-    }
-    return <div className='paymentHistoryFooter'>
-      <div className='nextPaymentSubmission'>
-        <span data-l10n-id={l10nDataId} data-l10n-args={JSON.stringify(l10nDataArgs)} />
-      </div>
-      <Button l10nId='paymentHistoryOKText' className='okButton primaryButton' onClick={this.props.hideOverlay.bind(this, 'paymentHistory')} />
-    </div>
-  }
-
-  get advancedSettingsContent () {
-    const minDuration = this.props.ledgerData.getIn(['synopsisOptions', 'minDuration'])
-    const minPublisherVisits = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherVisits'])
-
-    return <div className='board'>
-      <div className='panel advancedSettings'>
-        <div className='settingsPanelDivider'>
-          <div className='minimumPageTimeSetting' data-l10n-id='minimumPageTimeSetting' />
-          <SettingsList>
-            <SettingItem>
-              <SettingDropdown
-                data-test-id='durationSelector'
-                defaultValue={minDuration || 8000}
-                onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISIT_TIME)}>>
-                <option value='5000'>5 seconds</option>
-                <option value='8000'>8 seconds</option>
-                <option value='60000'>1 minute</option>
-              </SettingDropdown>
-            </SettingItem>
-          </SettingsList>
-          <div className='minimumVisitsSetting' data-l10n-id='minimumVisitsSetting' />
-          <SettingsList>
-            <SettingItem>
-              <SettingDropdown
-                data-test-id='visitSelector'
-                defaultValue={minPublisherVisits || 1}
-                onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.MINIMUM_VISITS)}>>>
-                <option value='1'>1 visits</option>
-                <option value='5'>5 visits</option>
-                <option value='10'>10 visits</option>
-              </SettingDropdown>
-            </SettingItem>
-          </SettingsList>
-        </div>
-        <div className='settingsPanelDivider'>
-          {this.enabled
-            ? <SettingsList>
-              <SettingCheckbox
-                dataL10nId='minimumPercentage'
-                prefKey={settings.MINIMUM_PERCENTAGE}
-                settings={this.props.settings}
-                onChangeSetting={this.props.onChangeSetting} />
-              <SettingCheckbox
-                dataL10nId='notifications'
-                prefKey={settings.PAYMENTS_NOTIFICATIONS}
-                settings={this.props.settings}
-                onChangeSetting={this.props.onChangeSetting} />
-            </SettingsList>
-            : null}
-        </div>
-      </div>
-    </div>
-  }
-
-  get advancedSettingsFooter () {
-    return <div className='panel advancedSettingsFooter'>
-      <Button l10nId='backupLedger' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'ledgerBackup')} />
-      <Button l10nId='recoverLedger' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'ledgerRecovery')} />
-      <Button l10nId='done' className='whiteButton inlineButton' onClick={this.props.hideOverlay.bind(this, 'advancedSettings')} />
-    </div>
-  }
-
-  get ledgerBackupContent () {
-    const paymentId = this.props.ledgerData.get('paymentId')
-    const passphrase = this.props.ledgerData.get('passphrase')
-
-    return <div className='board'>
-      <div className='panel ledgerBackupContent'>
-        <span data-l10n-id='ledgerBackupContent' />
-        <div className={css(styles.copyKeyContainer)}>
-          <div className='copyContainer'>
-            <Button l10nId='copy' className='copyButton whiteButton' onClick={this.copyToClipboard.bind(this, paymentId)} />
-          </div>
-          <div className={css(styles.keyContainer)}>
-            <h3 className={css(styles.keyContainer__h3)} data-l10n-id='firstKey' />
-            <span className={css(styles.keyContainer__span)}>{paymentId}</span>
-          </div>
-        </div>
-        <div className={css(styles.copyKeyContainer)}>
-          <div className='copyContainer'>
-            <Button l10nId='copy' className='copyButton whiteButton' onClick={this.copyToClipboard.bind(this, passphrase)} />
-          </div>
-          <div className={css(styles.keyContainer)}>
-            <h3 className={css(styles.keyContainer__h3)} data-l10n-id='secondKey' />
-            <span className={css(styles.keyContainer__span)}>{passphrase}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  }
-
-  get ledgerBackupFooter () {
-    return <div className='panel advancedSettingsFooter'>
-      <Button l10nId='printKeys' className='primaryButton' onClick={this.printKeys} />
-      <Button l10nId='saveRecoveryFile' className='primaryButton' onClick={this.saveKeys} />
-      <Button l10nId='done' className='whiteButton inlineButton' onClick={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
-    </div>
-  }
-
-  get ledgerRecoveryContent () {
-    const l10nDataArgs = {
-      balance: this.btcToCurrencyString(this.props.ledgerData.get('balance'))
-    }
-    const recoverySucceeded = this.props.ledgerData.get('recoverySucceeded')
-    const recoveryError = this.props.ledgerData.getIn(['error', 'error'])
-    const isNetworkError = typeof recoveryError === 'object'
-
-    return <div className='board'>
-      {
-        recoverySucceeded === true
-        ? <div className='recoveryOverlay'>
-          <h1 data-l10n-id='ledgerRecoverySucceeded' />
-          <p className='spaceAround' data-l10n-id='balanceRecovered' data-l10n-args={JSON.stringify(l10nDataArgs)} />
-          <Button l10nId='ok' className='whiteButton inlineButton' onClick={this.clearRecoveryStatus.bind(this)} />
-        </div>
-        : null
-      }
-      {
-        (recoverySucceeded === false && recoveryError && isNetworkError)
-        ? <div className='recoveryOverlay'>
-          <h1 data-l10n-id='ledgerRecoveryNetworkFailedTitle' className='recoveryError' />
-          <p data-l10n-id='ledgerRecoveryNetworkFailedMessage' className='spaceAround' />
-          <Button l10nId='ok' className='whiteButton inlineButton' onClick={this.clearRecoveryStatus.bind(this)} />
-        </div>
-        : null
-      }
-      {
-        (recoverySucceeded === false && recoveryError && !isNetworkError)
-        ? <div className='recoveryOverlay'>
-          <h1 data-l10n-id='ledgerRecoveryFailedTitle' />
-          <p data-l10n-id='ledgerRecoveryFailedMessage' className='spaceAround' />
-          <Button l10nId='ok' className='whiteButton inlineButton' onClick={this.clearRecoveryStatus.bind(this)} />
-        </div>
-        : null
-      }
-      <div className='panel recoveryContent'>
-        <h4 className={css(styles.recoveryContent__h4)} data-l10n-id='ledgerRecoverySubtitle' />
-        <div className={css(styles.ledgerRecoveryContent)} data-l10n-id='ledgerRecoveryContent' />
-        <SettingsList>
-          <SettingItem>
-            <h3 data-l10n-id='firstRecoveryKey' />
-            <RecoveryKeyTextbox id='firstRecoveryKey' onChange={this.handleFirstRecoveryKeyChange} />
-            <h3 data-l10n-id='secondRecoveryKey' />
-            <RecoveryKeyTextbox id='secondRecoveryKey' onChange={this.handleSecondRecoveryKeyChange} />
-          </SettingItem>
-        </SettingsList>
-      </div>
-    </div>
-  }
-
-  get ledgerRecoveryFooter () {
-    return <div className='panel advancedSettingsFooter'>
-      <div className='recoveryFooterButtons'>
-        <Button l10nId='recover' className='primaryButton' onClick={this.recoverWallet} />
-        <Button l10nId='recoverFromFile' className='primaryButton' onClick={this.recoverWalletFromFile} />
-        <Button l10nId='cancel' className='whiteButton' onClick={this.props.hideOverlay.bind(this, 'ledgerRecovery')} />
-      </div>
-    </div>
-  }
-
-  get nextReconcileDate () {
-    const ledgerData = this.props.ledgerData
-    if ((ledgerData.get('error')) || (!ledgerData.get('reconcileStamp'))) {
-      return null
-    }
-    const timestamp = ledgerData.get('reconcileStamp')
-    return formattedTimeFromNow(timestamp)
-  }
-
-  get nextReconcileMessage () {
-    const ledgerData = this.props.ledgerData
-    const nextReconcileDateRelative = this.nextReconcileDate
-    if (!nextReconcileDateRelative) {
-      return null
-    }
-
-    const timestamp = ledgerData.get('reconcileStamp')
-    const now = new Date().getTime()
-    let l10nDataId = 'statusNextReconcileDate'
-    if (timestamp <= now) {
-      l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
-                     ? 'paymentHistoryOverdueFooterText' : 'statusNextReconcileToday'
-    }
-
-    const l10nDataArgs = {
-      reconcileDate: nextReconcileDateRelative
-    }
-    return <div className='nextReconcileDate' data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
-  }
-
-  get ledgerDataErrorText () {
-    const ledgerError = this.props.ledgerData.get('error')
-    if (!ledgerError) {
-      return null
-    }
-    // 'error' here is a chromium webRequest error as returned by request.js
-    const errorCode = ledgerError.get('error').get('errorCode')
-    return l10nErrorText(errorCode)
-  }
-
-  btcToCurrencyString (btc) {
-    const balance = Number(btc || 0)
-    const currency = this.props.ledgerData.get('currency') || 'USD'
-    if (balance === 0) {
-      return `0 ${currency}`
-    }
-    if (this.props.ledgerData.get('btc') && typeof this.props.ledgerData.get('amount') === 'number') {
-      const btcValue = this.props.ledgerData.get('btc') / this.props.ledgerData.get('amount')
-      const fiatValue = (balance / btcValue).toFixed(2)
-      let roundedValue = Math.floor(fiatValue)
-      const diff = fiatValue - roundedValue
-
-      if (diff > 0.74) roundedValue += 0.75
-      else if (diff > 0.49) roundedValue += 0.50
-      else if (diff > 0.24) roundedValue += 0.25
-      return `${roundedValue.toFixed(2)} ${currency}`
-    }
-    return `${balance} BTC`
-  }
-
-  get disabledContent () {
-    return <div className='disabledContent'>
-      <div className='paymentsMessage'>
-        <h3 data-l10n-id='paymentsWelcomeTitle' />
-        <div data-l10n-id='paymentsWelcomeText1' />
-        <div className='boldText' data-l10n-id='paymentsWelcomeText2' />
-        <div data-l10n-id='paymentsWelcomeText3' />
-        <div data-l10n-id='paymentsWelcomeText4' />
-        <div data-l10n-id='paymentsWelcomeText5' />
-        <div>
-          <span data-l10n-id='paymentsWelcomeText6' />&nbsp;
-          <a href='https://brave.com/Payments_FAQ.html' target='_blank' data-l10n-id='paymentsWelcomeLink' />&nbsp;
-          <span data-l10n-id='paymentsWelcomeText7' />
-        </div>
-      </div>
-      <div className='paymentsSidebar'>
-        <h2 data-l10n-id='paymentsSidebarText1' />
-        <div data-l10n-id='paymentsSidebarText2' />
-        <a href='https://www.privateinternetaccess.com/' target='_blank'><div className='paymentsSidebarPIA' /></a>
-        <div data-l10n-id='paymentsSidebarText3' />
-        <a href='https://www.bitgo.com/' target='_blank'><div className='paymentsSidebarBitgo' /></a>
-        <div data-l10n-id='paymentsSidebarText4' />
-        <a href='https://www.coinbase.com/' target='_blank'><div className='paymentsSidebarCoinbase' /></a>
-      </div>
-    </div>
-  }
-
-  get enabledContent () {
-    // TODO: report when funds are too low
-    // TODO: support non-USD currency
-    return <div>
-      <div className='walletBar'>
-        <table>
-          <thead>
-            <tr>
-              <th data-l10n-id='monthlyBudget' />
-              <th data-l10n-id='accountBalance' />
-              <th data-l10n-id='status' />
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <SettingsList>
-                  <SettingItem>
-                    <FormDropdown
-                      data-test-id='fundsSelectBox'
-                      value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT,
-                        this.props.settings)}
-                      onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)}>
-                      {
-                        [5, 10, 15, 20].map((amount) =>
-                          <option value={amount}>{amount} {this.props.ledgerData.get('currency') || 'USD'}</option>
-                        )
-                      }
-                    </FormDropdown>
-                  </SettingItem>
-                  <SettingItem>
-                    {this.paymentHistoryButton}
-                  </SettingItem>
-                </SettingsList>
-              </td>
-              <td>
-                {
-                  this.props.ledgerData.get('error') && this.props.ledgerData.get('error').get('caller') === 'getWalletProperties'
-                    ? <div>
-                      <div data-l10n-id='accountBalanceConnectionError' />
-                      <div className='accountBalanceError' data-l10n-id={this.ledgerDataErrorText} />
-                    </div>
-                    : <div>
-                      <SettingsList>
-                        <SettingItem>
-                          {this.fundsAmount}
-                          {this.walletButton}
-                        </SettingItem>
-                      </SettingsList>
-                    </div>
-                }
-              </td>
-              <td>
-                <div className='walletStatus' data-l10n-id={this.walletStatus.id} data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
-                {this.nextReconcileMessage}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      {this.tableContent}
-    </div>
-  }
-
   render () {
-    return <div className='paymentsContainer'>
+    return <div className={cx({
+      paymentsContainer: true,
+      [css(styles.paymentsContainer)]: true
+    })} data-test-id='paymentsContainer'>
       {
       this.enabled && this.props.addFundsOverlayVisible
         ? <ModalOverlay title={this.overlayTitle} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
@@ -556,49 +88,114 @@ class PaymentsTab extends ImmutableComponent {
       }
       {
         this.enabled && this.props.paymentHistoryOverlayVisible
-        ? <ModalOverlay title={'paymentHistoryTitle'} customTitleClasses={'paymentHistory'} content={this.paymentHistoryContent} footer={this.paymentHistoryFooter} onHide={this.props.hideOverlay.bind(this, 'paymentHistory')} />
-        : null
+          ? <ModalOverlay
+            title={'paymentHistoryTitle'}
+            customTitleClasses={'paymentHistory'}
+            content={<HistoryContent
+              ledgerData={this.props.ledgerData}
+            />}
+            footer={<HistoryFooter
+              ledgerData={this.props.ledgerData}
+              hideOverlay={this.props.hideOverlay}
+            />}
+            onHide={this.props.hideOverlay.bind(this, 'paymentHistory')}
+          />
+          : null
       }
       {
         this.enabled && this.props.advancedSettingsOverlayVisible
-        ? <ModalOverlay title={'advancedSettingsTitle'} content={this.advancedSettingsContent} footer={this.advancedSettingsFooter} onHide={this.props.hideOverlay.bind(this, 'advancedSettings')} />
+        ? <ModalOverlay
+          title={'advancedSettingsTitle'}
+          content={<AdvancedSettingsContent
+            ledgerData={this.props.ledgerData}
+            settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+          />}
+          footer={<AdvancedSettingsFooter
+            showOverlay={this.props.showOverlay}
+            hideOverlay={this.props.hideOverlay}
+          />}
+          onHide={this.props.hideOverlay.bind(this, 'advancedSettings')}
+        />
         : null
       }
       {
         this.enabled && this.props.ledgerBackupOverlayVisible
-        ? <ModalOverlay title={'ledgerBackupTitle'} content={this.ledgerBackupContent} footer={this.ledgerBackupFooter} onHide={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
+        ? <ModalOverlay
+          title={'ledgerBackupTitle'}
+          content={<LedgerBackupContent
+            ledgerData={this.props.ledgerData}
+          />}
+          footer={<LedgerBackupFooter
+            hideOverlay={this.props.hideOverlay}
+          />}
+          onHide={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
         : null
       }
       {
         this.enabled && this.props.ledgerRecoveryOverlayVisible
-        ? <ModalOverlay title={'ledgerRecoveryTitle'} content={this.ledgerRecoveryContent} footer={this.ledgerRecoveryFooter} onHide={this.props.hideOverlay.bind(this, 'ledgerRecovery')} />
+        ? <ModalOverlay title={'ledgerRecoveryTitle'}
+          content={<LedgerRecoveryContent
+            ledgerData={this.props.ledgerData}
+            hideAdvancedOverlays={this.props.hideAdvancedOverlays.bind(this)}
+            handleFirstRecoveryKeyChange={this.handleFirstRecoveryKeyChange.bind(this)}
+            handleSecondRecoveryKeyChange={this.handleSecondRecoveryKeyChange.bind(this)}
+          />}
+          footer={<LedgerRecoveryFooter
+            state={this.state}
+            hideOverlay={this.props.hideOverlay}
+          />}
+          onHide={this.props.hideOverlay.bind(this, 'ledgerRecovery')}
+        />
         : null
       }
-      <div className='advancedSettingsWrapper'>
+      <div className={css(styles.advancedSettingsWrapper)}>
         {
           this.props.ledgerData.get('created') && this.enabled
           ? <Button
             l10nId='advancedSettings'
-            className='advancedSettings whiteButton'
-            onClick={this.props.showOverlay.bind(this, 'advancedSettings')} />
+            className={css(commonStyles.whiteButton, styles.button)}
+            onClick={this.props.showOverlay.bind(this, 'advancedSettings')}
+          />
           : null
         }
       </div>
-      <div className='titleBar'>
+      <div className={css(styles.titleBar)}>
         <div className='sectionTitleWrapper pull-left'>
           <span className='sectionTitle'>Brave Payments</span>
           <span className='sectionSubTitle'>beta</span>
         </div>
-        <div className='paymentsSwitches'>
-          <div className='enablePaymentsSwitch'>
+        <div className={css(styles.paymentsSwitches)}>
+          <div className={css(styles.switchWrap)} data-test-id='enablePaymentsSwitch'>
             <span data-l10n-id='off' />
-            <SettingCheckbox dataL10nId='on' prefKey={settings.PAYMENTS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+            <SettingCheckbox dataL10nId='on'
+              prefKey={settings.PAYMENTS_ENABLED}
+              settings={this.props.settings}
+              onChangeSetting={this.props.onChangeSetting}
+              switchClassName={css(styles.switchControl)}
+              labelClassName={css(styles.label)}
+            />
           </div>
           {
             this.props.ledgerData.get('created') && this.enabled
-            ? <div className='autoSuggestSwitch'>
-              <SettingCheckbox dataL10nId='autoSuggestSites' prefKey={settings.AUTO_SUGGEST_SITES} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-              <a className='moreInfoBtn fa fa-question-circle' href='https://brave.com/Payments_FAQ.html' target='_blank' data-l10n-id='paymentsFAQLink' />
+            ? <div className={css(styles.switchWrap, styles.autoSuggestSwitch)}>
+              <SettingCheckbox dataL10nId='autoSuggestSites'
+                prefKey={settings.AUTO_SUGGEST_SITES}
+                settings={this.props.settings}
+                onChangeSetting={this.props.onChangeSetting}
+                switchClassName={css(styles.switchControl)}
+                labelClassName={css(styles.label)}
+              />
+              <a className={cx({
+                fa: true,
+                'fa-question-circle': true,
+                [css(styles.moreInfo)]: true,
+                [css(styles.moreInfoBtnSuggest)]: true
+              })}
+                href='https://brave.com/Payments_FAQ.html'
+                target='_blank'
+                data-l10n-id='paymentsFAQLink'
+              />
             </div>
             : null
           }
@@ -606,43 +203,67 @@ class PaymentsTab extends ImmutableComponent {
       </div>
       {
         this.enabled
-          ? this.enabledContent
-          : this.disabledContent
+          ? <EnabledContent settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+            ledgerData={this.props.ledgerData}
+            showOverlay={this.props.showOverlay}
+            siteSettings={this.props.siteSettings}
+          />
+          : <DisabledContent />
       }
     </div>
   }
 }
 
-function formattedTimeFromNow (timestamp) {
-  return moment(new Date(timestamp)).fromNow()
-}
-
 const styles = StyleSheet.create({
-  copyKeyContainer: {
+  paymentsContainer: {
+    position: 'relative',
+    overflowX: 'hidden',
+    width: '805px'
+  },
+  advancedSettingsWrapper: {
+    textAlign: 'right',
+    marginRight: '15px',
+    marginBottom: '7.5px',
+    position: 'relative',
+    left: '3px'
+  },
+  button: {
+    minWidth: '235px'
+  },
+  titleBar: {
+    overflow: 'hidden',
     display: 'flex',
-    alignItems: 'flex-end',
-    width: '75%',
-    margin: `${globalStyles.spacing.paymentsMargin} auto`
+    alignItems: 'center'
   },
-
-  keyContainer: {
-    marginLeft: '2em'
+  paymentsSwitches: {
+    display: 'flex'
   },
-
-  keyContainer__h3: {
-    marginBottom: globalStyles.spacing.modalPanelHeaderMarginBottom
+  switchWrap: {
+    display: 'flex',
+    alignItems: 'center',
+    width: paymentStyles.width.tableCell
   },
-
-  keyContainer__span: {
-    whiteSpace: 'nowrap'
+  switchControl: {
+    paddingTop: 0,
+    paddingBottom: 0
   },
-
-  recoveryContent__h4: {
-    marginBottom: globalStyles.spacing.paymentsMargin
+  autoSuggestSwitch: {
+    position: 'relative',
+    left: '-5px'
   },
-
-  ledgerRecoveryContent: {
-    marginBottom: globalStyles.spacing.paymentsMargin
+  moreInfo: {
+    fontWeight: 'bold',
+    fontSize: paymentStyles.font.regular,
+    color: globalStyles.color.gray
+  },
+  moreInfoBtnSuggest: {
+    marginLeft: '7px',
+    cursor: 'pointer',
+    textDecoration: 'none'
+  },
+  label: {
+    fontWeight: 'bold'
   }
 })
 
diff --git a/app/renderer/components/publisherToggle.js b/app/renderer/components/publisherToggle.js
index 87826742594..050b3d8fad2 100644
--- a/app/renderer/components/publisherToggle.js
+++ b/app/renderer/components/publisherToggle.js
@@ -140,23 +140,27 @@ const styles = StyleSheet.create({
   },
 
   noFundVerified: {
+    border: 'none',
     backgroundImage: `url(${noFundVerifiedPublisherImage})`,
     backgroundSize: '18px',
     marginLeft: '2px'
   },
 
   fundVerified: {
+    border: 'none',
     backgroundImage: `url(${fundVerifiedPublisherImage})`,
     backgroundSize: '18px',
     marginLeft: '2px'
   },
 
   noFundUnverified: {
+    border: 'none',
     backgroundImage: `url(${noFundUnverifiedPublisherImage})`,
     backgroundSize: '18px'
   },
 
   fundUnverified: {
+    border: 'none',
     backgroundImage: `url(${fundUnverifiedPublisherImage})`,
     backgroundSize: '18px'
   }
diff --git a/app/renderer/components/settings.js b/app/renderer/components/settings.js
index 5d4d474dbac..156b32ba898 100644
--- a/app/renderer/components/settings.js
+++ b/app/renderer/components/settings.js
@@ -9,16 +9,26 @@ const aboutActions = require('../../../js/about/aboutActions')
 const getSetting = require('../../../js/settings').getSetting
 const {changeSetting} = require('../lib/settingsUtil')
 const SwitchControl = require('../../../js/components/switchControl')
+const cx = require('../../../js/lib/classSet')
 
 class SettingsList extends ImmutableComponent {
   render () {
-    return <div className='settingsListContainer'>
+    return <div className={cx({
+      settingsListContainer: true,
+      [this.props.className]: !!this.props.className
+    })}>
       {
         this.props.dataL10nId
-        ? <div className='settingsListTitle' data-l10n-id={this.props.dataL10nId} />
+        ? <div className={cx({
+          settingsListTitle: true,
+          [this.props.titleClassName]: !!this.props.titleClassName
+        })} data-l10n-id={this.props.dataL10nId} />
         : null
       }
-      <div className='settingsList'>
+      <div className={cx({
+        settingsList: true,
+        [this.props.listClassName]: !!this.props.listClassName
+      })}>
         {this.props.children}
       </div>
     </div>
@@ -27,7 +37,10 @@ class SettingsList extends ImmutableComponent {
 
 class SettingItem extends ImmutableComponent {
   render () {
-    return <div className='settingItem'>
+    return <div className={cx({
+      settingItem: true,
+      [this.props.itemClassName]: !!this.props.itemClassName
+    })}>
       {
         this.props.dataL10nId
           ? <span data-l10n-id={this.props.dataL10nId} />
@@ -54,18 +67,34 @@ class SettingCheckbox extends ImmutableComponent {
   render () {
     const props = {
       style: this.props.style,
-      className: 'settingItem'
+      className: cx({
+        settingItem: true,
+        [this.props.className]: !!this.props.className
+      })
     }
+
     if (this.props.id) {
       props.id = this.props.id
     }
+
+    const labelClass = cx({
+      [css(settingCheckboxStyles.label)]: this.props.small,
+      [this.props.labelClassName]: !!this.props.labelClassName
+
+    })
+
     return <div {...props}>
       <SwitchControl id={this.props.prefKey}
         small={this.props.small}
         disabled={this.props.disabled}
         onClick={this.onClick}
-        checkedOn={this.props.checked !== undefined ? this.props.checked : getSetting(this.props.prefKey, this.props.settings)} />
-      <label className={css(this.props.small && settingCheckboxStyles.label)} data-l10n-id={this.props.dataL10nId} htmlFor={this.props.prefKey} />
+        checkedOn={this.props.checked !== undefined ? this.props.checked : getSetting(this.props.prefKey, this.props.settings)}
+        className={this.props.switchClassName}
+      />
+      <label className={labelClass}
+        data-l10n-id={this.props.dataL10nId}
+        htmlFor={this.props.prefKey}
+      />
       {this.props.options}
     </div>
   }
@@ -97,12 +126,18 @@ class SiteSettingCheckbox extends ImmutableComponent {
   }
 
   render () {
-    return <div style={this.props.style} className='settingItem siteSettingItem'>
+    return <div style={this.props.style} className={cx({
+      settingItem: true,
+      siteSettingItem: true,
+      [this.props.className]: !!this.props.className
+    })}>
       <SwitchControl
         small={this.props.small}
         disabled={this.props.disabled}
         onClick={this.onClick}
-        checkedOn={this.props.checked} />
+        checkedOn={this.props.checked}
+        className={this.props.switchClassName}
+      />
     </div>
   }
 }
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 7df6af3a60a..e95ab2d217c 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -32,7 +32,6 @@ const styles = StyleSheet.create({
     top: globalStyles.spacing.dialogTopOffset
   },
   browserButton: {
-    border: 'none',
     margin: '0',
     whiteSpace: 'nowrap',
     outline: 'none',
@@ -81,6 +80,77 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
+  },
+  // Buttons
+  buttonPrimary: {
+    background: 'linear-gradient(#FF7A1D, #ff5000)',
+    borderLeft: '2px solid transparent',
+    borderRight: '2px solid transparent',
+    borderTop: '2px solid #FF7A1D',
+    borderBottom: '2px solid #ff5000',
+    boxShadow: '0px 1px 5px -1px rgba(0, 0, 0, 0.5)',
+    fontWeight: '500',
+    fontSize: '0.9rem',
+    padding: '8px 20px',
+    margin: 0,
+    color: '#fff',
+    lineHeight: '1.25',
+    width: 'auto',
+    height: 'auto',
+    minWidth: '78px',
+
+    ':hover': {
+      border: '2px solid white',
+      color: 'white',
+      cursor: 'pointer'
+    }
+  },
+  whiteButton: {
+    background: 'linear-gradient(white, #ececec)',
+    border: '1px solid white',
+    boxShadow: '0px 1px 5px -1px rgba(0, 0, 0, 0.5)',
+    cursor: 'pointer',
+    color: '#444444',
+    lineHeight: 1.25,
+    width: 'auto',
+    height: 'auto',
+    minWidth: '78px',
+    fontSize: '0.9rem',
+    padding: '8px 20px',
+    margin: 0,
+
+    ':hover': {
+      border: `1px solid ${globalStyles.color.gray}`,
+      color: '#000'
+    }
+  },
+  inlineButton: {
+    display: 'inline'
+  },
+  // margin/padding
+  noMarginTop: {
+    marginTop: 0
+  },
+  noMarginBottom: {
+    marginBottom: 0
+  },
+  noMarginLeft: {
+    marginLeft: 0
+  },
+  noMarginRight: {
+    marginRight: 0
+  },
+  noPaddingTop: {
+    paddingTop: 0
+  },
+  noPaddingBottom: {
+    paddingBottom: 0
+  },
+  noPaddingLeft: {
+    paddingLeft: 0
+  },
+  noPaddingRight: {
+    paddingRight: 0
   }
 })
 
diff --git a/app/renderer/components/styles/payment.js b/app/renderer/components/styles/payment.js
new file mode 100644
index 00000000000..33f6eaf1718
--- /dev/null
+++ b/app/renderer/components/styles/payment.js
@@ -0,0 +1,57 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const {StyleSheet} = require('aphrodite')
+const globalStyles = require('./global')
+
+const paymentStyles = {
+  font: {
+    regular: '14.5px'
+  },
+  margin: {
+    bar: '15px',
+    barItem: '12px'
+  },
+  padding: {
+    bar: '18px' // margin.barItem * 1.5
+  },
+  width: {
+    tableRow: '235px',
+    tableCell: '265px' // width.tableRow + 30px
+  }
+}
+
+const paymentCommon = StyleSheet.create({
+  board: {
+    overflowX: 'hidden',
+    clear: 'both'
+  },
+  panel: {
+    background: '#FFFFFF',
+    position: 'relative',
+    marginTop: '8px',
+    marginBottom: '8px',
+    padding: '25px 20px'
+  },
+  panelFooter: {
+    color: globalStyles.color.darkGray,
+    fontSize: '13px',
+    fontStyle: 'italic',
+    padding: '20px 20px 20px 50px'
+  },
+  marginButtons: {
+    marginLeft: '8px'
+  },
+  advanceFooter: {
+    padding: '20px',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
+  }
+})
+
+module.exports = {
+  paymentStyles,
+  paymentCommon
+}
diff --git a/js/about/preferences.js b/js/about/preferences.js
index f937827bb42..63d9063566a 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -10,7 +10,6 @@ const UrlUtil = require('../lib/urlutil')
 
 // Components
 const PreferenceNavigation = require('../../app/renderer/components/preferences/preferenceNavigation')
-const ModalOverlay = require('../components/modalOverlay')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../../app/renderer/components/settings')
 const {SettingTextbox} = require('../../app/renderer/components/textbox')
 const {SettingDropdown} = require('../../app/renderer/components/dropdown')
@@ -29,7 +28,6 @@ const preferenceTabs = require('../constants/preferenceTabs')
 const messages = require('../constants/messages')
 const settings = require('../constants/settings')
 const {changeSetting} = require('../../app/renderer/lib/settingsUtil')
-const coinbaseCountries = require('../constants/coinbaseCountries')
 const {passwordManagers, extensionIds} = require('../constants/passwordManagers')
 const {startsWithOption, newTabMode, bookmarksToolbarMode, tabCloseAction, fullscreenOption} = require('../../app/common/constants/settingsEnums')
 
@@ -85,224 +83,6 @@ const braveryPermissionNames = {
   'noScript': ['boolean', 'number']
 }
 
-class BitcoinDashboard extends ImmutableComponent {
-  constructor () {
-    super()
-    this.buyCompleted = false
-    this.openBuyURLTab = this.openBuyURLTab.bind(this)
-  }
-  openBuyURLTab () {
-    // close parent dialog
-    this.props.hideParentOverlay()
-  }
-  get ledgerData () {
-    return this.props.ledgerData
-  }
-  get bitcoinOverlayContent () {
-    return <iframe src={this.ledgerData.get('buyURL')} />
-  }
-  get bitcoinPurchaseButton () {
-    if (!this.ledgerData.get('buyURLFrame')) return <Button l10nId='add' className='primaryButton' onClick={this.props.showOverlay.bind(this)} />
-    return <a href={this.ledgerData.get('buyURL')} target='_blank' onClick={this.openBuyURLTab}><Button l10nId='add' className='primaryButton' /></a>
-  }
-  get qrcodeOverlayContent () {
-    return <div>
-      <img src={this.ledgerData.get('paymentIMG')} title='Brave wallet QR code' />
-      <div className='bitcoinQRTitle' data-l10n-id='bitcoinQR' />
-    </div>
-  }
-  get qrcodeOverlayFooter () {
-    if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
-      return <div className='qrcodeOverlayFooter'>
-        <div className='coinbaseLogo' />
-        <a target='_blank' className='appstoreLogo' href='https://itunes.apple.com/us/app/coinbase-bitcoin-wallet/id886427730?mt=8' />
-        <a target='_blank' className='playstoreLogo' href='https://play.google.com/store/apps/details?id=com.coinbase.android' />
-      </div>
-    } else {
-      return null
-    }
-  }
-  get currency () {
-    return this.props.ledgerData.get('currency') || 'USD'
-  }
-  get amount () {
-    return getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings) || 0
-  }
-  get canUseCoinbase () {
-    if (!this.props.ledgerData.get('buyMaximumUSD')) return true
-
-    return this.currency === 'USD' && this.amount < this.props.ledgerData.get('buyMaximumUSD')
-  }
-  get userInAmerica () {
-    const countryCode = this.props.ledgerData.get('countryCode')
-    return !(countryCode && countryCode !== 'US')
-  }
-  get worldWidePanel () {
-    return <div className='panel'>
-      <div className='settingsPanelDivider'>
-        <span className='fa fa-credit-card' />
-        <div className='settingsListTitle' data-l10n-id='outsideUSAPayment' />
-      </div>
-      <div className='settingsPanelDivider'>
-        <a target='_blank' href='https://www.buybitcoinworldwide.com/'>
-          <button className='browserButton primaryButton'>buybitcoinworldwide.com</button>
-        </a>
-      </div>
-    </div>
-  }
-  get coinbasePanel () {
-    if (this.canUseCoinbase) {
-      return <div className='panel'>
-        <div className='settingsPanelDivider'>
-          <span className='fa fa-credit-card' />
-          <div className='settingsListTitle' data-l10n-id='moneyAdd' />
-          <div className='settingsListTitle subTitle' data-l10n-id='moneyAddSubTitle' />
-        </div>
-        <div className='settingsPanelDivider'>
-          {this.bitcoinPurchaseButton}
-          <div className='settingsListTitle subTitle' data-l10n-id='transferTime' />
-        </div>
-      </div>
-    } else {
-      return <div className='panel disabledPanel'>
-        <div className='settingsPanelDivider'>
-          <span className='fa fa-credit-card' />
-          <div className='settingsListTitle' data-l10n-id='moneyAdd' />
-          <div className='settingsListTitle subTitle' data-l10n-id='moneyAddSubTitle' />
-        </div>
-        <div className='settingsPanelDivider'>
-          <div data-l10n-id='coinbaseNotAvailable' />
-        </div>
-      </div>
-    }
-  }
-  get exchangePanel () {
-    const url = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeURL'])
-    const name = this.props.ledgerData.getIn(['exchangeInfo', 'exchangeName'])
-    // Call worldWidePanel if we don't have the URL or Name
-    if (!url || !name) {
-      return this.worldWidePanel
-    } else {
-      return <div className='panel'>
-        <div className='settingsPanelDivider'>
-          <span className='fa fa-credit-card' />
-          <div className='settingsListTitle' data-l10n-id='outsideUSAPayment' />
-        </div>
-        <div className='settingsPanelDivider'>
-          <a target='_blank' href={url}>
-            <button className='browserButton primaryButton'>{name}</button>
-          </a>
-        </div>
-      </div>
-    }
-  }
-  get smartphonePanel () {
-    return <div className='panel'>
-      <div className='settingsPanelDivider'>
-        <span className='fa fa-mobile' />
-        <div className='settingsListTitle' data-l10n-id='smartphoneTitle' />
-      </div>
-      <div className='settingsPanelDivider'>
-        <Button l10nId='displayQRCode' className='primaryButton' onClick={this.props.showQRcode.bind(this)} />
-      </div>
-    </div>
-  }
-  get panelFooter () {
-    if (this.ledgerData.get('buyURLFrame')) {
-      return <div className='panelFooter'>
-        <Button l10nId='done' className='whiteButton' onClick={this.props.hideParentOverlay} />
-      </div>
-    } else if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
-      return <div className='panelFooter coinbaseFooter'>
-        <div className='coinbase'>
-          <div className='coinbaseLogo' />
-          <span className='coinbaseMessage' data-l10n-id='coinbaseMessage' />
-        </div>
-        <Button l10nId='done' className='whiteButton' onClick={this.props.hideParentOverlay} />
-      </div>
-    } else {
-      return <div className='panelFooter'>
-        <Button l10nId='done' className='whiteButton' onClick={this.props.hideParentOverlay} />
-      </div>
-    }
-  }
-  copyToClipboard (text) {
-    aboutActions.setClipboard(text)
-  }
-  onMessage (e) {
-    if (!e.data || e.origin !== config.coinbaseOrigin) {
-      return
-    }
-    if (e.data.event === 'modal_closed') {
-      if (this.buyCompleted) {
-        this.props.hideParentOverlay()
-        this.buyCompleted = false
-      } else {
-        this.props.hideOverlay()
-      }
-    } else if (e.data.event === 'buy_completed') {
-      this.buyCompleted = true
-    }
-  }
-  render () {
-    window.addEventListener('message', this.onMessage.bind(this), false)
-    var emptyDialog = true
-    return <div className='bitcoinDashboard'>
-      {
-      this.props.bitcoinOverlayVisible
-        ? <ModalOverlay title={'bitcoinBuy'} content={this.bitcoinOverlayContent} customTitleClasses={'coinbaseOverlay'} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
-        : null
-      }
-      {
-        this.props.qrcodeOverlayVisible
-        ? <ModalOverlay content={this.qrcodeOverlayContent} customTitleClasses={'qrcodeOverlay'} footer={this.qrcodeOverlayFooter} onHide={this.props.hideQRcode.bind(this)} />
-        : null
-      }
-      <div className='board addFundsBoard'>
-        {
-          (this.userInAmerica || this.ledgerData.get('buyURLFrame'))
-          ? this.coinbasePanel
-          : this.exchangePanel
-        }
-        <div className='panel'>
-          <div className='settingsPanelDivider'>
-            <span className='bitcoinIcon fa-stack fa-lg'>
-              <span className='fa fa-circle fa-stack-2x' />
-              <span className='fa fa-bitcoin fa-stack-1x' />
-            </span>
-            <div className='settingsListTitle' data-l10n-id='bitcoinAdd' />
-            <div className='settingsListTitle subTitle' data-l10n-id='bitcoinAddDescription' />
-          </div>
-          {
-            this.ledgerData.get('address')
-              ? <div className='settingsPanelDivider'>
-                {
-                  this.ledgerData.get('hasBitcoinHandler') && this.ledgerData.get('paymentURL')
-                    ? <div className='hasBitcoinHandler'>
-                      <a href={this.ledgerData.get('paymentURL')} target='_blank'>
-                        <Button l10nId='bitcoinVisitAccount' className='primaryButton bitcoinAddressButton' />
-                      </a>
-                      <div data-l10n-id='bitcoinAddress' className='walletLabelText' />
-                    </div>
-                    : <div>
-                      <div data-l10n-id='bitcoinPaymentURL' className='walletLabelText' />
-                    </div>
-                }
-                <div className='walletAddressText'>{this.ledgerData.get('address')}</div>
-                <Button className='primaryButton' l10nId='copyToClipboard' onClick={this.copyToClipboard.bind(this, this.ledgerData.get('address'))} />
-              </div>
-            : <div className='settingsPanelDivider'>
-              <div data-l10n-id='bitcoinWalletNotAvailable' />
-            </div>
-          }
-        </div>
-        {this.smartphonePanel}
-        {this.panelFooter}
-      </div>
-    </div>
-  }
-}
-
 class GeneralTab extends ImmutableComponent {
   constructor (e) {
     super()
@@ -1138,6 +918,5 @@ class AboutPreferences extends React.Component {
 }
 
 module.exports = {
-  AboutPreferences: <AboutPreferences />,
-  BitcoinDashboard
+  AboutPreferences: <AboutPreferences />
 }
diff --git a/js/components/button.js b/js/components/button.js
index cb8bf46f114..a2083b40e81 100644
--- a/js/components/button.js
+++ b/js/components/button.js
@@ -11,6 +11,8 @@ class Button extends ImmutableComponent {
     if (this.props.iconClass) {
       return <button disabled={this.props.disabled}
         data-l10n-id={this.props.l10nId}
+        data-test-id={this.props.testId}
+        data-test2-id={this.props.test2Id}
         style={this.props.inlineStyles}
         data-button-value={this.props.dataButtonValue}
         className={cx({
@@ -23,6 +25,8 @@ class Button extends ImmutableComponent {
     }
     return <button disabled={this.props.disabled}
       data-l10n-id={this.props.l10nId}
+      data-test-id={this.props.testId}
+      data-test2-id={this.props.test2Id}
       data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
       style={this.props.inlineStyles}
       className={cx({
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 9eab419e6b1..42b2539dcaf 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -293,18 +293,6 @@ table.sortableTable {
 
 // about:preferences#payments
 .paymentsContainer {
-  @fontSize: 14.5px; // .form-control
-
-  @walletBarTableRowWidth: 235px;
-  @walletBarTableData: @walletBarTableRowWidth + 30px; // .walletBar td (min-width + padding)
-  @walletBarMargin: 15px;
-  @walletBarItemMargin: 12px;
-  @walletBarPadding: @walletBarItemMargin * 1.5;
-
-  position: relative;
-  overflow-x: hidden;
-  width: 805px;
-
   // General properties on about:preferences#payments.
   // Make sure any change here could cause unexpected regressions.
   a {
@@ -346,27 +334,14 @@ table.sortableTable {
 
       // Specific properties of the Payment History
       &.paymentHistory {
-        @padding-horizontal: 30px;
-
-        .dialog-header,
         .dialog-footer {
-          padding: 20px @padding-horizontal;
-        }
-
-        .dialog-header {
-
-          .sectionTitle {
-            margin-bottom: 0;
-            padding: 0;
-            color: @braveMediumOrange;
-            text-indent: 0;
-          }
+          padding: 20px 30px;
         }
 
         .dialog-body {
           background: #FFF;
           height: 300px;
-          overflow-y: scroll;
+          overflow-y: auto;
           padding-right: 0;
           padding-left: 0;
         }
@@ -374,16 +349,6 @@ table.sortableTable {
         .dialog-footer {
           padding-top: 10px;
           padding-bottom: 10px;
-
-          .paymentHistoryFooter {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .nextPaymentSubmission {
-              font-size: 14px;
-            }
-          }
         }
       }
 
@@ -397,158 +362,7 @@ table.sortableTable {
 
       // General properties of the body on the modal dialogs
       .dialog-body {
-        .board {
-          .panel {
-            // globalStyles.spacing.modalPanelHeaderMarginBottom in global.js
-            @margin-bottom-header: .5em;
-
-            // This removes the margin which increases the size of the dialog-header
-            &:first-child {
-              margin-top: 0;
-            }
-
-            // This removes the margin which increases the size of the dialog-footer
-            &:last-child {
-              margin-bottom: 0;
-            }
-
-            // This makes the width of the content on Advanced Settings consistent
-            &.advancedSettings,
-            &.ledgerBackupContent,
-            &.recoveryContent {
-              padding-left: 50px;
-              padding-right: 50px;
-            }
-
-            &.advancedSettings {
-              display: flex;
-              flex-wrap: nowrap;
-
-              select {
-                width: 100%;
-              }
-
-              .settingsPanelDivider {
-                width: 100%;
-
-                // This defines select elements on Advanced Settings (left side)
-                &:first-child {
-                  .minimumPageTimeSetting,
-                  .minimumVisitsSetting {
-                    margin-bottom: @margin-bottom-header;
-                  }
-
-                  .settingsListContainer:last-child {
-                    margin-bottom: 0;
-                  }
-                }
-
-                // This defines switches on Advanced Settings (right side)
-                // "position: relative" and "left: 1em" create the margin between select elements and switches.
-                // "margin-left: 1em" decreases the width of the left side, so it should not be used here.
-                &:last-child {
-                  display: flex;
-                  align-items: center;
-                  width: auto;
-                  position: relative;
-                  left: 1em;
-
-                  .settingsListContainer:last-child {
-                    margin-bottom: 0;
-
-                    .settingsList {
-                      display: flex;
-                      flex-flow: column nowrap;
-                      justify-content: space-between;
-
-                      .settingItem {
-                        display: flex;
-                        margin-bottom: 1em;
-
-                        &:last-child {
-                          margin-bottom: 0;
-                        }
-
-                        label {
-                          margin-bottom: 0;
-                        }
-
-                        .switchControl {
-                          margin-top: 2px;
-                          padding-top: 0;
-                          padding-bottom: 0;
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-
-            &.ledgerBackupContent {
-              // TODO: Refactor button.less
-              div[class^='copyKeyContainer'] {
-                .copyContainer {
-                  .copyButton {
-                    font-size: 14px;
-                    margin: 0;
-                  }
-                }
-              }
-            }
-
-            &.recoveryContent {
-              h4,
-              .ledgerRecoveryContent {
-                margin-bottom: 20px;
-
-                & + .settingsListContainer {
-                  margin-bottom: 0;
-
-                  h3 {
-                    margin-bottom: @margin-bottom-header;
-                  }
-                }
-              }
-            }
-          }
-
-          // This defines styling of the overlay on "Recover your wallet"
-          .recoveryOverlay {
-            background-color: @black75;
-            border: 1px solid @black75;
-            position: absolute;
-            top: -1px;
-            left: -1px;
-            width: 100%;
-            height: 100%;
-            text-align: center;
-            z-index: 999;
-
-            h1,
-            p {
-              color: white;
-            }
-
-            h1 {
-              margin-top: 120px;
-            }
-
-            .spaceAround {
-              margin: 50px auto;
-            }
-          }
-        }
-
         .bitcoinDashboard {
-          .coinbaseLogo {
-            width: 40px;
-            height: 40px;
-            display: inline-block;
-            margin-right: 10px;
-            background: url('../../app/extensions/brave/img/coinbase_logo.png') 0 0 / contain no-repeat;
-          }
-
           .modal {
             .qrcodeOverlay {
               border: 0;
@@ -562,438 +376,14 @@ table.sortableTable {
                 transition: @transitionFast;
               }
 
-              img {
-                clear: both;
-                display: block;
-                margin: 0 auto;
-              }
-
-              .dialog-header {}
-
               .dialog-body {
                 padding: 30px;
-
-                .bitcoinQRTitle {
-                  color: @braveOrange;
-                  text-align: center;
-                }
-              }
-
-              .dialog-footer {
-
-                // This defines styling of the footer on the modal dialog of "Display QR code"
-                .qrcodeOverlayFooter {
-                  display: flex;
-                  justify-content: center;
-                  background: @gray;
-                  padding: 15px 0;
-
-                  .appstoreLogo,
-                  .playstoreLogo {
-                    width: 130.5px;
-                    height: 42.75px;
-                    display: inline-block;
-                  }
-
-                  .appstoreLogo {
-                    background: url('../../app/extensions/brave/img/ios_download.svg');
-                    background-size: 130.5px 42.75px;
-                    margin-right: 5px;
-                  }
-
-                  .playstoreLogo {
-                    background: url('../../app/extensions/brave/img/android_download.svg');
-                    background-size: 130.5px 42.75px;
-                  }
-                }
               }
             }
           }
-
-          .board {
-
-            // This defines styling of the three rows on the dialog of "Add funds..."
-            &.addFundsBoard {
-              .panel {
-                display: flex;
-                padding-left: 100px;
-
-                // 1st row (credit card)
-                &:nth-child(1) {
-                  margin-top: 0;
-                }
-
-                // 2nd row (bitcoin address)
-                &:nth-child(2) {
-
-                  .settingsPanelDivider {
-                    .hasBitcoinHandler {
-                      display: flex;
-                      flex-flow: column;
-                      align-items: flex-end;
-                    }
-                  }
-                }
-
-                // 3rd row (mobile phone)
-                &:nth-child(3) {
-                  margin-bottom: 0;
-
-                  .settingsPanelDivider {
-                    justify-content: center; // align the mobile phone icon and the label vertically
-                  }
-                }
-
-                // This defines the styling inside each of those rows
-                .settingsPanelDivider {
-                  width: 50%;
-                  position: relative;
-                  display: flex;
-                  flex-flow: column;
-
-                  // left side (descriptions)
-                  &:first-child {
-                    align-items: flex-start; // to align the icons and texts left
-
-                    .fa {
-                      position: absolute;
-                      left: -45px;
-
-                      &.fa-credit-card {
-                        font-size: 30px;
-                      }
-
-                      &.fa-mobile {
-                        font-size: 50px;
-                        left: -40px;
-                      }
-                    }
-
-                    .bitcoinIcon {
-                      position: absolute;
-                      left: -5px;
-                      top: 0;
-
-                      .fa-circle {
-                        color: @bitcoinOrange;
-                      }
-                      .fa-bitcoin {
-                        color: white;
-                        transform: rotate(12deg);
-                      }
-                    }
-                  }
-
-                  // right side (buttons)
-                  &:last-child {
-                    align-items: flex-end; // to align the buttons right
-
-                    .bitcoinAddressButton {
-                      margin-bottom: 15px; // .walletAddressText
-                    }
-
-                    .walletLabelText {
-                      font-size: 1em;
-                      color: @braveOrange;
-                      margin-bottom: 5px;
-                    }
-
-                    .walletAddressText {
-                      font-size: 12px;
-                      color: black;
-                      margin-bottom: 15px; // .bitcoinAddressButton
-                    }
-                  }
-                }
-              }
-
-              // This defines styling of the panel footer of "Add funds..."
-              .panelFooter {
-                display: flex;
-                align-items: center;
-                justify-content: flex-end;
-
-                &.coinbaseFooter {
-                  justify-content: space-between;
-
-                  .coinbase {
-                    display: flex;
-                    align-items: center;
-
-                    .coinbaseMessage {
-                      display: inline-block;
-                      max-width: 450px;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      .dialog-footer {
-        .advancedSettingsFooter {
-          padding: 20px;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-end;
-
-          .recoveryFooterButtons {
-            float: right;
-          }
-        }
-      }
-    }
-  }
-
-  .advancedSettingsWrapper {
-    // cf: .hideExcludedSites
-    @margin-bottom: @walletBarMargin / 2;
-
-    text-align: right;
-    margin-right: @walletBarPadding;
-    margin-bottom: @margin-bottom;
-
-    // align the button with .autoSuggestSwitch
-    position: relative;
-    left: 3px;
-
-    button {
-      min-width: 235px; // PR #6287
-    }
-  }
-
-  // This defines the styling of the title row (1st) on about:preferences#payments
-  .titleBar {
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-
-    .paymentsSwitches {
-      display: flex;
-
-      .enablePaymentsSwitch,
-      .autoSuggestSwitch {
-        display: flex;
-        align-items: center;
-        width: @walletBarTableData;
-
-        .settingItem .switchControl {
-          padding-top: 0;
-          padding-bottom: 0;
-        }
-
-        span,
-        .moreInfoBtn {
-          font-weight: bold;
-          font-size: @fontSize;
-          color: @gray;
-        }
-
-        label {
-          font-weight: bold;
-        }
-      }
-
-      .autoSuggestSwitch {
-        position: relative;
-        left: -5px; // .prefTabContainer .switchControl
-
-        .moreInfoBtn {
-          margin-left: 7px;
-          cursor: pointer;
-          text-decoration: none;
-        }
-      }
-    }
-  }
-
-  // PR #6370
-  .disabledContent {
-    .paymentsMessage {
-      background-color: @lightGray;
-      border-radius: @borderRadiusUIbox;
-      margin-top: @walletBarMargin;
-      padding: 40px;
-      font-size: @fontSize;
-      line-height: 1.8em;
-      color: @mediumGray;
-      width: 500px;
-      float: left;
-
-      > div {
-        padding: 0.5em 0;
-      }
-
-      > h3 {
-        font-size: 18px;
-        padding-bottom: 0.5em;
-      }
-
-      .boldText {
-        font-weight: bold;
-      }
-    }
-
-    .paymentsSidebar {
-      opacity: 0.8;
-      width: 200px;
-      float: left;
-      margin-left: 23px;
-
-      .paymentsSidebarPIA {
-        background-image: -webkit-image-set(url(../../app/extensions/brave/img/private_internet_access.png) 1x,
-                                            url(../../app/extensions/brave/img/private_internet_access_2x.png) 2x);
-        width: 195px;
-        height: 20px;
-      }
-
-      .paymentsSidebarBitgo {
-        background-image: -webkit-image-set(url(../../app/extensions/brave/img/bitgo.png) 1x,
-                                            url(../../app/extensions/brave/img/bitgo_2x.png) 2x);
-        width: 100px;
-        height: 25px;
-      }
-
-      .paymentsSidebarCoinbase {
-        background-image: -webkit-image-set(url(../../app/extensions/brave/img/coinbase.png) 1x,
-                                            url(../../app/extensions/brave/img/coinbase_2x.png) 2x);
-        width: 100px;
-        height: 35px;
-      }
-
-      div {
-        font-size: 12px;
-        margin: 50px 0 20px 12px;
-      }
-
-      a {
-        div {
-          margin-top: 0;
-        }
-      }
-
-      h2 {
-        font-size: 18px;
-        margin: 70px 0 -15px 12px;
-      }
-    }
-  }
-
-  // This defines the styling of the control panel (2nd) on about:preferences#payments
-  .walletBar {
-
-    background: @lightGray;
-    border-radius: @borderRadiusUIbox;
-    padding: @walletBarPadding;
-    margin: @walletBarMargin 0;
-
-    th {
-      text-align: left;
-    }
-
-    tr {
-      height: 1em;
-    }
-
-    td {
-      font-size: @fontSize;
-      padding: 10px 30px 0 0; // .settingsList .settingItem > *:not(.switchControl) 10px
-      width: auto;
-      min-width: @walletBarTableRowWidth;
-      vertical-align: top;
-
-      .settingsListContainer {
-        margin-bottom: 0;
-
-        .settingsList {
-          .settingItem {
-            .fundsAmount,
-            .fundsSelectBox,
-            .addFunds {
-              min-width: 180px;
-              width: auto;
-            }
-
-            .fundsSelectBox {
-              margin-bottom: 0;
-            }
-          }
         }
       }
     }
-
-    .settingsList .settingItem {
-
-      .paymentHistoryButton {
-        display: block;
-        font-size: @fontSize;
-        line-height: 18px;
-        color: @braveOrange;
-        height: auto;
-        margin-top: @walletBarItemMargin;
-        padding: 0;
-        text-align: left;
-        cursor: pointer;
-        white-space: normal;
-      }
-
-      .balance {
-        display: flex;
-        align-items: center;
-        vertical-align: 0;
-        height: 100%;
-        margin-bottom: 0;
-
-        span {
-          font-size: @fontSize; // for "Loading..." and .fundsFAQ
-        }
-
-        > span {
-          height: 2.25em; // .form-control
-          display: flex;
-          align-items: center;
-          margin: 0;
-          padding: 0; // .fundsFAQ
-
-          > span {
-            margin: 0; // for "Loading..."
-            padding: 0; // .fundsFAQ
-          }
-        }
-
-        + button {
-          margin-top: @walletBarItemMargin;
-        }
-
-        a {
-          &:hover {
-            text-decoration: none;
-          }
-
-          .fundsFAQ {
-            color: @gray;
-            margin: 0 0 0 5px;
-          }
-        }
-      }
-    }
-
-    .fundsAmount {
-      display: inline;
-      margin: 0;
-      width: auto;
-    }
-
-    .accountBalanceError,
-    .nextReconcileDate {
-      margin-top: @walletBarItemMargin;
-    }
-
-    .nextReconcileDate {
-      margin-bottom: 0;
-    }
   }
 }
 
@@ -1093,10 +483,6 @@ table.sortableTable {
   }
 }
 
-#coinbaseLogo {
-  background: url('../../app/extensions/brave/img/coinbase_logo.png') 0 0 / contain no-repeat;
-}
-
 #searchSelectIcon {
   width: 16px;
   height: 16px;
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index e0c0db8641d..b7f980bd3e0 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -66,14 +66,14 @@ module.exports = {
   doneButton: '[data-l10n-id="done"]',
   homepageInput: '[data-l10n-id="homepageInput"]',
   syncSwitch: '.syncContainer .switchBackground',
-  walletSwitch: '.enablePaymentsSwitch .switchBackground',
-  addFundsButton: '.addFunds',
-  advancedSettings: '.advancedSettings',
+  walletSwitch: '[data-test-id="enablePaymentsSwitch"] .switchBackground',
+  addFundsButton: '[data-test2-id="addFunds"]',
+  advancedSettings: '[data-l10n-id="advancedSettings"]',
   fundsSelectBox: '[data-test-id="fundsSelectBox"]',
-  paymentsStatus: '.walletStatus',
+  paymentsStatus: '[data-test-id="walletStatus"]',
   siteSettingItem: '.siteSettingItem',
-  ledgerTable: '.ledgerTable',
-  bitcoinDashboard: '.bitcoinDashboard',
+  ledgerTable: '[data-test-id="ledgerTable"]',
+  bitcoinDashboard: '[data-test-id="bitcoinDashboard"]',
   advancedSettingsButton: '[data-l10n-id="advancedSettings"]',
   backupWallet: '[data-l10n-id="backupLedger"]',
   recoverWallet: '[data-l10n-id="recoverLedger"]',
@@ -81,13 +81,13 @@ module.exports = {
   recoveryOverlayOkButton: '.recoveryOverlay [data-l10n-id="ok"]',
   saveWalletFile: '[data-l10n-id="saveRecoveryFile"]',
   balanceRecovered: '[data-l10n-id="balanceRecovered"]',
-  balanceNotRecovered: '.recoveryError',
+  balanceNotRecovered: '[data-test-id="recoveryError"]',
   modalCloseButton: 'button.close',
   coinbaseBuyButton: '[data-l10n-id="add"]',
   paymentQRCode: '[title="Brave wallet QR code"]',
   removeButton: '[data-l10n-id="remove"]',
-  paymentHistoryButton: '.paymentHistoryButton',
-  paymentsWelcomePage: '.paymentsMessage',
+  paymentHistoryButton: '[data-test-id="paymentHistoryButton"]',
+  paymentsWelcomePage: '[data-test-id="paymentsMessage"',
   autofillAddressPanel: '.autofillAddressPanel',
   autofillCreditCardPanel: '.autofillCreditCardPanel',
   allowRunInsecureContentButton: '.allowRunInsecureContentButton',
diff --git a/test/unit/about/preferencesTest.js b/test/unit/about/preferencesTest.js
index 369b2e6027e..5df9d1193b3 100644
--- a/test/unit/about/preferencesTest.js
+++ b/test/unit/about/preferencesTest.js
@@ -33,8 +33,17 @@ describe('Preferences component', function () {
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_payments.svg', 'browser_prefs_payments.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_sync.svg', 'browser_prefs_sync.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_advanced.svg', 'browser_prefs_advanced.svg')
-    mockery.registerMock('../../../extensions/brave/img/ledger/verified_green_icon.svg')
-    mockery.registerMock('../../../extensions/brave/img/ledger/verified_white_icon.svg')
+    mockery.registerMock('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
+    mockery.registerMock('../../../../extensions/brave/img/ledger/verified_white_icon.svg')
+    mockery.registerMock('../../../../extensions/brave/img/private_internet_access.png')
+    mockery.registerMock('../../../../extensions/brave/img/private_internet_access_2x.png')
+    mockery.registerMock('../../../../extensions/brave/img/bitgo.png')
+    mockery.registerMock('../../../../extensions/brave/img/bitgo_2x.png')
+    mockery.registerMock('../../../../extensions/brave/img/coinbase.png')
+    mockery.registerMock('../../../../extensions/brave/img/coinbase_2x.png')
+    mockery.registerMock('../../../../extensions/brave/img/coinbase_logo.png')
+    mockery.registerMock('../../../../extensions/brave/img/android_download.svg')
+    mockery.registerMock('../../../../extensions/brave/img/ios_download.svg')
 
     window.chrome = fakeElectron
     window.CustomEvent = {}
diff --git a/test/unit/app/renderer/paymentsTabTest.js b/test/unit/app/renderer/paymentsTabTest.js
index 0591eb683b4..e22c1c3e891 100644
--- a/test/unit/app/renderer/paymentsTabTest.js
+++ b/test/unit/app/renderer/paymentsTabTest.js
@@ -4,12 +4,13 @@
 /* global describe, before, after, it */
 
 const mockery = require('mockery')
-const {mount, shallow} = require('enzyme')
+const {mount} = require('enzyme')
 const assert = require('assert')
 const Immutable = require('immutable')
 const fakeElectron = require('../../lib/fakeElectron')
 const fakeSettings = require('../../lib/fakeSettings')
-let PaymentsTab
+const {btcToCurrencyString} = require('../../../../app/common/lib/ledgerUtil')
+let PaymentsTab, EnabledContent
 require('../../braveUnit')
 
 describe('PaymentsTab component', function () {
@@ -34,12 +35,24 @@ describe('PaymentsTab component', function () {
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_payments.svg', 'browser_prefs_payments.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_sync.svg', 'browser_prefs_sync.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_advanced.svg', 'browser_prefs_advanced.svg')
+    mockery.registerMock('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
+    mockery.registerMock('../../../../extensions/brave/img/ledger/verified_white_icon.svg')
+    mockery.registerMock('../../../../extensions/brave/img/private_internet_access.png')
+    mockery.registerMock('../../../../extensions/brave/img/private_internet_access_2x.png')
+    mockery.registerMock('../../../../extensions/brave/img/bitgo.png')
+    mockery.registerMock('../../../../extensions/brave/img/bitgo_2x.png')
+    mockery.registerMock('../../../../extensions/brave/img/coinbase.png')
+    mockery.registerMock('../../../../extensions/brave/img/coinbase_2x.png')
+    mockery.registerMock('../../../../extensions/brave/img/coinbase_logo.png')
+    mockery.registerMock('../../../../extensions/brave/img/android_download.svg')
+    mockery.registerMock('../../../../extensions/brave/img/ios_download.svg')
 
     mockery.registerMock('electron', fakeElectron)
     mockery.registerMock('../../../../js/settings', fakeSettings)
     fakeSettings.mockReturnValue = false
     window.chrome = fakeElectron
     PaymentsTab = require('../../../../app/renderer/components/preferences/paymentsTab')
+    EnabledContent = require('../../../../app/renderer/components/preferences/payment/enabledContent')
   })
   after(function () {
     mockery.disable()
@@ -47,35 +60,35 @@ describe('PaymentsTab component', function () {
 
   describe('wallet enabled and disabled state', function () {
     it('renders disabled content by default', function () {
-      const wrapper = shallow(<PaymentsTab ledgerData={Immutable.Map()} />)
-      assert.equal(wrapper.find('.disabledContent').length, 1)
+      const wrapper = mount(<PaymentsTab ledgerData={Immutable.Map()} />)
+      assert.equal(wrapper.find('[data-test-id="disabledContent"]').length, 1)
     })
 
     it('renders enabled content when enabled', function () {
       fakeSettings.mockReturnValue = true
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           ledgerData={Immutable.Map()}
           showOverlay={function () {}} />
       )
-      assert.equal(wrapper.find('.disabledContent').length, 0)
-      assert.equal(wrapper.find('.walletBar').length, 1)
+      assert.equal(wrapper.find('[data-test-id="disabledContent"]').length, 0)
+      assert.equal(wrapper.find('[data-test-id="walletBar"]').length, 1)
     })
   })
 
   describe('rendering functions', function () {
     it('renders a paymentsContainer', function () {
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           ledgerData={Immutable.Map()}
           showOverlay={function () {}} />
       )
-      assert(wrapper.find('.paymentsContainer'))
-      assert.equal(wrapper.find('.paymentsContainer').length, 1)
+      assert(wrapper.find('[data-test-id="paymentsContainer"]'))
+      assert.equal(wrapper.find('[data-test-id="paymentsContainer"]').length, 1)
     })
 
     it('does not render any dialogs by default', function () {
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           ledgerData={Immutable.Map()}
           showOverlay={function () {}} />
@@ -84,7 +97,7 @@ describe('PaymentsTab component', function () {
     })
 
     it('renders the create wallet button by default', function () {
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           ledgerData={Immutable.Map()}
           showOverlay={function () {}} />
@@ -93,7 +106,7 @@ describe('PaymentsTab component', function () {
     })
 
     it('renders the add funds button when wallet is created', function () {
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           showOverlay={function () {}}
           hideOverlay={function () {}}
@@ -104,7 +117,7 @@ describe('PaymentsTab component', function () {
     })
 
     it('renders the creating wallet button when wallet is still being created', function () {
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           showOverlay={function () {}}
           hideOverlay={function () {}}
@@ -115,40 +128,40 @@ describe('PaymentsTab component', function () {
     })
 
     it('renders payment history button (requires wallet and reconcileStamp)', function () {
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           showOverlay={function () {}}
           hideOverlay={function () {}}
           ledgerData={Immutable.Map({created: true, transactions: {size: 3}, reconcileStamp: 1})} />
       )
-      assert.equal(wrapper.find('.paymentHistoryButton').length, 1)
+      assert.equal(wrapper.find('[data-test-id="paymentHistoryButton"]').length, 1)
     })
 
     it('does not render payment history button when wallet is not created', function () {
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           showOverlay={function () {}}
           hideOverlay={function () {}}
           ledgerData={Immutable.Map({created: false, balance: null})} />
       )
-      assert.equal(wrapper.find('.paymentHistoryButton').length, 0)
+      assert.equal(wrapper.find('[data-test-id="paymentHistoryButton"]').length, 0)
     })
 
     it('does not render payment history button when reconcileStamp is not set', function () {
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           showOverlay={function () {}}
           hideOverlay={function () {}}
           ledgerData={Immutable.Map({created: true, transactions: {size: 3}})} />
       )
-      assert.equal(wrapper.find('.paymentHistoryButton').length, 0)
+      assert.equal(wrapper.find('[data-test-id="paymentHistoryButton"]').length, 0)
     })
   })
 
   describe('fundsamount functionality', function () {
     it('does not display if wallet not created', function () {
       fakeSettings.mockReturnValue = true
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           showOverlay={function () {}}
           hideOverlay={function () {}}
@@ -160,7 +173,7 @@ describe('PaymentsTab component', function () {
 
     it('handles missing balance', function () {
       fakeSettings.mockReturnValue = true
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           showOverlay={function () {}}
           hideOverlay={function () {}}
@@ -171,7 +184,7 @@ describe('PaymentsTab component', function () {
 
     it('handles expected balance', function () {
       fakeSettings.mockReturnValue = true
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           showOverlay={function () {}}
           hideOverlay={function () {}}
@@ -182,26 +195,24 @@ describe('PaymentsTab component', function () {
 
     it('renders full balance correctly', function () {
       fakeSettings.mockReturnValue = true
-      const wrapper = shallow(
+      const wrapper = mount(
         <PaymentsTab
           showOverlay={function () {}}
           hideOverlay={function () {}}
           ledgerData={Immutable.Map({created: false, btc: 10, amount: 10})} />
       )
       const inst = wrapper.instance()
-      assert.equal(inst.btcToCurrencyString(10), '10.00 USD')
+      assert.equal(btcToCurrencyString(10, inst.props.ledgerData), '10.00 USD')
     })
 
     it('renders partial balance correctly', function () {
       fakeSettings.mockReturnValue = true
-      const wrapper = shallow(
-        <PaymentsTab
-          showOverlay={function () {}}
-          hideOverlay={function () {}}
+      const wrapper = mount(
+        <EnabledContent
           ledgerData={Immutable.Map({created: false, btc: 10, amount: 2})} />
       )
       const inst = wrapper.instance()
-      assert.equal(inst.btcToCurrencyString(10), '2.00 USD')
+      assert.equal(btcToCurrencyString(10, inst.props.ledgerData), '2.00 USD')
     })
   })
 
@@ -215,7 +226,7 @@ describe('PaymentsTab component', function () {
           hideOverlay={function () {}}
           ledgerData={Immutable.Map()} />
       )
-      assert.equal(wrapper.find('.advancedSettings').length, 1)
+      assert.equal(wrapper.find('[data-test-id="advancedSettings"]').length, 1)
       assert.equal(wrapper.find('[data-test-id="durationSelector"]').node.value, 8000)
     })
 
@@ -228,7 +239,7 @@ describe('PaymentsTab component', function () {
           hideOverlay={function () {}}
           ledgerData={Immutable.Map()} />
       )
-      assert.equal(wrapper.find('.advancedSettings').length, 1)
+      assert.equal(wrapper.find('[data-test-id="advancedSettings"]').length, 1)
       assert.equal(wrapper.find('[data-test-id="visitSelector"]').node.value, 1)
     })
   })