diff --git a/app/common/lib/ledgerUtil.js b/app/common/lib/ledgerUtil.js
index 36f2749ea5e..e65a4a9f311 100644
--- a/app/common/lib/ledgerUtil.js
+++ b/app/common/lib/ledgerUtil.js
@@ -74,7 +74,7 @@ module.exports.formattedTimeFromNow = (timestamp) => {
   return moment(new Date(timestamp)).fromNow()
 }
 
-module.exports.formattedDateFromTimestamp = (timestamp) => {
+module.exports.formattedDateFromTimestamp = (timestamp, format) => {
   moment.locale(navigator.language)
-  return moment(new Date(timestamp)).format('YYYY-MM-DD')
+  return moment(new Date(timestamp)).format(format)
 }
diff --git a/app/extensions/brave/img/ledger/icon_history.svg b/app/extensions/brave/img/ledger/icon_history.svg
new file mode 100644
index 00000000000..3fcdef2726e
--- /dev/null
+++ b/app/extensions/brave/img/ledger/icon_history.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.2" baseProfile="tiny" id="Layer_1_copy"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48"
+	 xml:space="preserve">
+<path fill="#FF5000" d="M26.2,4C15.3,4,6.4,12.7,6,23.5H1.8l5.7,5.7l5.7-5.7H9.2c0.4-9.2,7.9-16.3,17-16.3c9.4,0,17,7.6,17,17
+	s-7.6,17-17,17c-4.5,0-8.8-1.8-12-4.9c-0.6-0.6-1.6-0.6-2.2,0s-0.6,1.6,0,2.2c3.8,3.8,8.8,5.9,14.2,5.9c11.1,0,20.2-9,20.2-20.1
+	S37.3,4,26.2,4z"/>
+<path fill="#FF5000" d="M34.1,31.4c-0.3,0-0.5-0.1-0.8-0.2l-9.5-5.8V14.3c0-0.9,0.7-1.6,1.6-1.6c0.9,0,1.6,0.7,1.6,1.6v9.3l8,4.9
+	c0.8,0.4,1,1.4,0.5,2.2C35.1,31.1,34.6,31.4,34.1,31.4z"/>
+</svg>
diff --git a/app/extensions/brave/img/ledger/icon_settings.svg b/app/extensions/brave/img/ledger/icon_settings.svg
new file mode 100644
index 00000000000..22206ab8ae6
--- /dev/null
+++ b/app/extensions/brave/img/ledger/icon_settings.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.2" baseProfile="tiny" id="Layer_1_copy"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48"
+	 xml:space="preserve">
+<path fill="#FF5000" d="M39.1,26c0.1-0.7,0.2-1.3,0.2-2s-0.1-1.3-0.2-2l4.2-3.3c0.4-0.3,0.5-0.9,0.2-1.3l-4-6.9
+	c-0.3-0.4-0.8-0.6-1.2-0.4l-4.9,2c-1-0.8-2.2-1.5-3.4-2l-0.8-5.3c-0.1-0.5-0.5-0.9-1-0.9h-8c-0.5,0-0.9,0.4-1,0.9l-0.8,5.3
+	c-1.2,0.5-2.3,1.2-3.4,2l-5-2c-0.4-0.2-1,0-1.2,0.4l-4,6.9c-0.2,0.4-0.1,1,0.3,1.3l4.2,3.3c-0.1,0.7-0.2,1.3-0.2,2
+	c0,0.7,0.1,1.3,0.2,2l-4.2,3.3c-0.4,0.3-0.5,0.9-0.2,1.3l4,6.9c0.2,0.4,0.8,0.7,1.2,0.4l5-2c1,0.8,2.2,1.5,3.4,2l0.8,5.3
+	c0.1,0.5,0.5,0.9,1,0.9h8c0.5,0,0.9-0.4,1-0.9l0.8-5.3c1.2-0.5,2.3-1.1,3.4-2l5,2c0.4,0.2,1,0,1.2-0.4l4-6.9c0.3-0.4,0.2-1-0.2-1.3
+	L39.1,26z M24.2,35.4c-6.3,0-11.4-5.1-11.4-11.4s5.1-11.4,11.4-11.4S35.6,17.7,35.6,24S30.5,35.4,24.2,35.4z"/>
+</svg>
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index 2ad893c0595..5f22e1e886a 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -63,8 +63,9 @@ accountBalanceLoading=loading…
 monthlyBudget=monthly budget
 status=status
 statusOnError=Brave Wallet can't be reached.
-statusNextReconcileDate=Contribution due date is {{reconcileDate}}.
-statusNextReconcileToday=Contribution due date is today.
+statusNextReconcileDate={{reconcileDate}}
+statusNextReconcileToday=Today
+statusNextReconcileOverdue=Overdue
 createWallet=create wallet
 createWalletStatus=Click the Create Wallet button to get started.
 creatingWallet=creating…
@@ -79,8 +80,10 @@ bitcoin=Bitcoin
 bitcoinAdd=Use your existing Bitcoin wallet/account
 bitcoinAddDescription=Use any BTC wallet that can transfer Bitcoin to your Brave wallet.
 bitcoinBuy=Buy Bitcoin
-noPaymentHistory=Your first contribution will be {{reconcileDate}}
-viewPaymentHistory=View Payment History…
+lastContribution=Last contribution:
+nextContribution=Next contribution:
+noPaymentHistory=No previous contributions
+viewPaymentHistory= {{date}}
 paymentHistoryTitle=Your Payment History
 paymentHistoryFooterText=Your next contribution is {{reconcileDate}}.
 paymentHistoryDueFooterText=Your next contribution is due.
@@ -189,7 +192,6 @@ doNotTrackTitle=Do Not Track
 doNotTrack=Send a 'Do Not Track' header with browsing requests *
 fullscreenContent=Full Screen Content
 blockCanvasFingerprinting=Fingerprinting Protection (may break some sites)
-advancedSettings=Advanced Settings…
 advancedSettingsTitle=Advanced Settings for Brave Payments
 ledgerRecoveryTitle=Recover your Brave wallet
 ledgerRecoverySubtitle=Enter your recovery keys below
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index b69105b378c..4c4f5163d79 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -6,7 +6,7 @@ const React = require('react')
 const {StyleSheet, css} = require('aphrodite')
 
 // util
-const {btcToCurrencyString, formattedTimeFromNow} = require('../../../../common/lib/ledgerUtil')
+const {btcToCurrencyString, formattedDateFromTimestamp} = require('../../../../common/lib/ledgerUtil')
 const {l10nErrorText} = require('../../../../common/lib/httpUtil')
 const {changeSetting} = require('../../../lib/settingsUtil')
 
@@ -51,38 +51,6 @@ class EnabledContent extends ImmutableComponent {
     />
   }
 
-  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'
-    } 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')
@@ -158,13 +126,46 @@ class EnabledContent extends ImmutableComponent {
     </div>
   }
 
+  lastReconcileMessage () {
+    const ledgerData = this.props.ledgerData
+    const walletCreated = ledgerData.get('created') && !ledgerData.get('creating')
+    const walletTransactions = ledgerData.get('transactions')
+    const walletHasTransactions = walletTransactions && walletTransactions.size
+    const walletHasReconcile = ledgerData.get('reconcileStamp')
+    let prevReconcileDateValue
+    let text
+
+    if (!walletCreated || !walletHasReconcile) {
+      return null
+    } else if (!walletHasTransactions) {
+      text = 'noPaymentHistory'
+    } else {
+      text = 'viewPaymentHistory'
+      prevReconcileDateValue = this.lastReconcileDate(walletTransactions.last())
+    }
+
+    const l10nDataArgs = {
+      date: prevReconcileDateValue
+    }
+
+    return <div className={css(styles.contribution, styles.lastContribution)}>
+      <div data-l10n-id='lastContribution' />
+      <div data-l10n-id={text} data-l10n-args={JSON.stringify(l10nDataArgs)} />
+    </div>
+  }
+
+  lastReconcileDate (transaction) {
+    const timestamp = transaction.get('submissionStamp')
+    return formattedDateFromTimestamp(timestamp, 'MMMM Do')
+  }
+
   nextReconcileDate () {
     const ledgerData = this.props.ledgerData
     if ((ledgerData.get('error')) || (!ledgerData.get('reconcileStamp'))) {
       return null
     }
     const timestamp = ledgerData.get('reconcileStamp')
-    return formattedTimeFromNow(timestamp)
+    return formattedDateFromTimestamp(timestamp, 'MMMM Do')
   }
 
   nextReconcileMessage () {
@@ -179,14 +180,17 @@ class EnabledContent extends ImmutableComponent {
     let l10nDataId = 'statusNextReconcileDate'
     if (timestamp <= now) {
       l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
-        ? 'paymentHistoryOverdueFooterText' : 'statusNextReconcileToday'
+        ? 'statusNextReconcileOverdue' : 'statusNextReconcileToday'
     }
 
     const l10nDataArgs = {
       reconcileDate: nextReconcileDateRelative
     }
 
-    return <div className={css(styles.nextReconcileDate)} data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
+    return <div className={css(styles.contribution, styles.nextContribution)}>
+      <div data-l10n-id='nextContribution' />
+      <div data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
+    </div>
   }
 
   render () {
@@ -200,7 +204,7 @@ class EnabledContent extends ImmutableComponent {
             <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' />
+              <th className={css(styles.tableTh)} />
             </tr>
           </thead>
           <tbody>
@@ -220,7 +224,7 @@ class EnabledContent extends ImmutableComponent {
                     </FormDropdown>
                   </SettingItem>
                   <SettingItem>
-                    {this.paymentHistoryButton()}
+                    {this.lastReconcileMessage()}
                   </SettingItem>
                 </SettingsList>
               </td>
@@ -235,18 +239,21 @@ class EnabledContent extends ImmutableComponent {
                       <SettingsList className={css(styles.listContainer)}>
                         <SettingItem>
                           {this.fundsAmount()}
-                          {this.walletButton()}
+                        </SettingItem>
+                        <SettingItem>
+                          {this.nextReconcileMessage()}
                         </SettingItem>
                       </SettingsList>
                     </div>
                 }
               </td>
               <td className={css(styles.tableTd)}>
-                <div data-test-id='walletStatus'
+                {this.walletButton()}
+                <div className={css(styles.walletStatus)}
+                  data-test-id='walletStatus'
                   data-l10n-id={walletStatus.id}
                   data-l10n-args={walletStatus.args ? JSON.stringify(walletStatus.args) : null}
                 />
-                {this.nextReconcileMessage()}
               </td>
             </tr>
           </tbody>
@@ -292,32 +299,16 @@ const styles = StyleSheet.create({
     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
+    marginTop: 0,
+    paddingTop: '6px',
+    paddingBottom: '6px'
   },
 
   balance: {
@@ -354,6 +345,25 @@ const styles = StyleSheet.create({
     color: globalStyles.color.gray,
     margin: '0 0 0 5px',
     fontSize: paymentStyles.font.regular
+  },
+
+  contribution: {
+    lineHeight: 1.5
+  },
+
+  lastContribution: {
+    marginTop: '16px',
+    marginBottom: 0
+  },
+
+  nextContribution: {
+    marginTop: '15px',
+    marginBottom: 0
+  },
+
+  walletStatus: {
+    marginTop: '15px',
+    lineHeight: 1.5
   }
 })
 
diff --git a/app/renderer/components/preferences/payment/history.js b/app/renderer/components/preferences/payment/history.js
index 165a48c5ff8..b5ca11b54a3 100644
--- a/app/renderer/components/preferences/payment/history.js
+++ b/app/renderer/components/preferences/payment/history.js
@@ -8,7 +8,7 @@ const {StyleSheet, css} = require('aphrodite')
 
 // util
 const {addExportFilenamePrefixToTransactions} = require('../../../../common/lib/ledgerExportUtil')
-const {formattedTimeFromNow} = require('../../../../common/lib/ledgerUtil')
+const {formattedTimeFromNow, formattedDateFromTimestamp} = require('../../../../common/lib/ledgerUtil')
 const appUrlUtil = require('../../../../../js/lib/appUrlUtil')
 
 // components
@@ -55,7 +55,7 @@ class HistoryRow extends ImmutableComponent {
 
   get formattedDate () {
     const timestamp = this.transaction.get('submissionStamp')
-    return moment(new Date(timestamp)).format('YYYY-MM-DD')
+    return formattedDateFromTimestamp(timestamp, 'YYYY-MM-DD')
   }
 
   get satoshis () {
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 8f233cf1387..402f6919fe9 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -8,7 +8,6 @@ const {StyleSheet, css} = require('aphrodite')
 
 // Components
 const ImmutableComponent = require('../../../../js/components/immutableComponent')
-const Button = require('../../../../js/components/button')
 const ModalOverlay = require('../../../../js/components/modalOverlay')
 const {SettingCheckbox} = require('../settings')
 const DisabledContent = require('./payment/disabledContent')
@@ -22,8 +21,9 @@ const {LedgerRecoveryContent, LedgerRecoveryFooter} = require('./payment/ledgerR
 // style
 const cx = require('../../../../js/lib/classSet')
 const globalStyles = require('../styles/global')
-const commonStyles = require('../styles/commonStyles')
 const {paymentStyles} = require('../styles/payment')
+const advanceIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg')
+const historyIcon = require('../../../extensions/brave/img/ledger/icon_history.svg')
 
 // other
 const getSetting = require('../../../../js/settings').getSetting
@@ -52,6 +52,16 @@ class PaymentsTab extends ImmutableComponent {
     this.forceUpdate()
   }
 
+  get hasWalletTransaction () {
+    const ledgerData = this.props.ledgerData
+    const walletCreated = ledgerData.get('created') && !ledgerData.get('creating')
+    const walletTransactions = ledgerData.get('transactions')
+    const walletHasReconcile = ledgerData.get('reconcileStamp')
+    const walletHasTransactions = walletTransactions && walletTransactions.size
+
+    return !(!walletCreated || !walletHasTransactions || !walletHasReconcile)
+  }
+
   get enabled () {
     return getSetting(settings.PAYMENTS_ENABLED, this.props.settings)
   }
@@ -149,17 +159,6 @@ class PaymentsTab extends ImmutableComponent {
         />
         : null
       }
-      <div className={css(styles.advancedSettingsWrapper)}>
-        {
-          this.props.ledgerData.get('created') && this.enabled
-          ? <Button
-            l10nId='advancedSettings'
-            className={css(commonStyles.whiteButton, styles.button)}
-            onClick={this.props.showOverlay.bind(this, 'advancedSettings')}
-          />
-          : null
-        }
-      </div>
       <div className={css(styles.titleBar)}>
         <div className='sectionTitleWrapper pull-left'>
           <span className='sectionTitle'>Brave Payments</span>
@@ -179,23 +178,45 @@ class PaymentsTab extends ImmutableComponent {
           {
             this.props.ledgerData.get('created') && this.enabled
             ? <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 className={css(styles.mainIconsLeft)}>
+                <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>
+              <div className={css(styles.mainIconsRight)}>
+                {
+                  this.hasWalletTransaction && this.enabled
+                    ? <a
+                      data-test-id='paymentHistoryButton'
+                      className={css(styles.mainIcons, styles.historyIcon)}
+                      onClick={this.props.showOverlay.bind(this, 'paymentHistory')}
+                    />
+                    : null
+                }
+                {
+                  this.props.ledgerData.get('created') && this.enabled
+                    ? <a
+                      className={css(styles.mainIcons, styles.advanceIcon)}
+                      data-test-id='advancedSettingsButton'
+                      onClick={this.props.showOverlay.bind(this, 'advancedSettings')}
+                    />
+                    : null
+                }
+              </div>
             </div>
             : null
           }
@@ -221,27 +242,19 @@ const styles = StyleSheet.create({
     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: 'center'
+    alignItems: 'center',
+    marginTop: '15px'
   },
   paymentsSwitches: {
-    display: 'flex'
+    display: 'flex',
+    marginTop: '2px'
   },
   switchWrap: {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     width: paymentStyles.width.tableCell
   },
   switchControl: {
@@ -250,7 +263,9 @@ const styles = StyleSheet.create({
   },
   autoSuggestSwitch: {
     position: 'relative',
-    left: '-5px'
+    left: '-5px',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between'
   },
   moreInfo: {
     fontWeight: 'bold',
@@ -259,11 +274,37 @@ const styles = StyleSheet.create({
   },
   moreInfoBtnSuggest: {
     marginLeft: '7px',
+    marginTop: '4px',
     cursor: 'pointer',
     textDecoration: 'none'
   },
   label: {
     fontWeight: 'bold'
+  },
+  mainIcons: {
+    backgroundColor: globalStyles.color.braveOrange,
+    width: '25px',
+    height: '26px',
+    display: 'inline-block',
+    marginLeft: '7px',
+    position: 'relative',
+    top: '7px',
+
+    ':hover': {
+      backgroundColor: globalStyles.color.braveDarkOrange
+    }
+  },
+  mainIconsLeft: {
+    display: 'flex'
+  },
+  mainIconsRight: {
+    paddingRight: '10px'
+  },
+  historyIcon: {
+    '-webkit-mask-image': `url(${historyIcon})`
+  },
+  advanceIcon: {
+    '-webkit-mask-image': `url(${advanceIcon})`
   }
 })
 
diff --git a/app/renderer/components/textbox.js b/app/renderer/components/textbox.js
index 6edce3bb122..6049252dedc 100644
--- a/app/renderer/components/textbox.js
+++ b/app/renderer/components/textbox.js
@@ -77,7 +77,7 @@ const styles = StyleSheet.create({
     width: '280px'
   },
   readOnly: {
-    background: globalStyles.color.veryLightGray,
+    background: globalStyles.color.lightGray,
     boxShadow: 'none',
     outline: 'none'
   },
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 6afc7fb5194..e4386b6462a 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -38,7 +38,7 @@ body {
     }
 
     .sectionSubTitle {
-      color: @braveOrange;
+      color: #999;
       font-size: 15px;
       position: absolute;
       bottom: 25px;
diff --git a/test/components/ledgerPanelTest.js b/test/components/ledgerPanelTest.js
index ae2396ace14..a976cf41cf8 100644
--- a/test/components/ledgerPanelTest.js
+++ b/test/components/ledgerPanelTest.js
@@ -1,7 +1,7 @@
 /* global describe, it, beforeEach, before */
 
 const Brave = require('../lib/brave')
-const {urlInput, advancedSettings, addFundsButton, paymentsWelcomePage, paymentsTab, walletSwitch, siteSettingItem, ledgerTable} = require('../lib/selectors')
+const {urlInput, advancedSettingsButton, addFundsButton, paymentsWelcomePage, paymentsTab, walletSwitch, siteSettingItem, ledgerTable} = require('../lib/selectors')
 const assert = require('assert')
 
 const prefsUrl = 'about:preferences'
@@ -86,7 +86,7 @@ describe('Regular payment panel tests', function () {
         .click(paymentsTab)
         .waitForVisible(paymentsWelcomePage)
         .waitForVisible(walletSwitch)
-        .waitForVisible(advancedSettings, 100, true)
+        .waitForVisible(advancedSettingsButton, 100, true)
     })
 
     it('advanced settings is visible when payments are enabled', function * () {
@@ -98,7 +98,7 @@ describe('Regular payment panel tests', function () {
         .waitForVisible(paymentsWelcomePage)
         .waitForVisible(walletSwitch)
         .click(walletSwitch)
-        .waitForVisible(advancedSettings, ledgerAPIWaitTimeout)
+        .waitForVisible(advancedSettingsButton, ledgerAPIWaitTimeout)
     })
 
     it('can create wallet', function * () {
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index b7f980bd3e0..8948ae57296 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -74,7 +74,7 @@ module.exports = {
   siteSettingItem: '.siteSettingItem',
   ledgerTable: '[data-test-id="ledgerTable"]',
   bitcoinDashboard: '[data-test-id="bitcoinDashboard"]',
-  advancedSettingsButton: '[data-l10n-id="advancedSettings"]',
+  advancedSettingsButton: '[data-test-id="advancedSettingsButton"]',
   backupWallet: '[data-l10n-id="backupLedger"]',
   recoverWallet: '[data-l10n-id="recoverLedger"]',
   recoverWalletFromFileButton: '[data-l10n-id="recoverFromFile"]',
diff --git a/test/unit/about/preferencesTest.js b/test/unit/about/preferencesTest.js
index 5df9d1193b3..6c1fa572843 100644
--- a/test/unit/about/preferencesTest.js
+++ b/test/unit/about/preferencesTest.js
@@ -33,6 +33,8 @@ 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/icon_settings.svg')
+    mockery.registerMock('../../../extensions/brave/img/ledger/icon_history.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')
diff --git a/test/unit/app/renderer/paymentsTabTest.js b/test/unit/app/renderer/paymentsTabTest.js
index e22c1c3e891..c9da506ae4b 100644
--- a/test/unit/app/renderer/paymentsTabTest.js
+++ b/test/unit/app/renderer/paymentsTabTest.js
@@ -35,6 +35,8 @@ 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/icon_settings.svg')
+    mockery.registerMock('../../../extensions/brave/img/ledger/icon_history.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')
@@ -128,11 +130,12 @@ describe('PaymentsTab component', function () {
     })
 
     it('renders payment history button (requires wallet and reconcileStamp)', function () {
+      const transactions = new Immutable.List().push(Immutable.Map({submissionStamp: '1'}))
       const wrapper = mount(
         <PaymentsTab
           showOverlay={function () {}}
           hideOverlay={function () {}}
-          ledgerData={Immutable.Map({created: true, transactions: {size: 3}, reconcileStamp: 1})} />
+          ledgerData={Immutable.Map({created: true, transactions: transactions, reconcileStamp: 1})} />
       )
       assert.equal(wrapper.find('[data-test-id="paymentHistoryButton"]').length, 1)
     })