diff --git a/js/about/preferences.js b/js/about/preferences.js
index 1a2667e97ac..59f4ede89b4 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -285,7 +285,7 @@ class LedgerTable extends ImmutableComponent {
     if (!this.synopsis || !this.synopsis.size) {
       return null
     }
-    return <div id='ledgerTable'>
+    return <div className='ledgerTable'>
       <SortableTable
         headings={['rank', 'publisher', 'include', 'views', 'timeSpent', 'percentage']}
         defaultHeading='rank'
@@ -339,7 +339,7 @@ class BitcoinDashboard extends ImmutableComponent {
   }
   get qrcodeOverlayFooter () {
     if (coinbaseCountries.indexOf(this.props.ledgerData.get('countryCode')) > -1) {
-      return <div>
+      return <div className='qrcodeOverlayFooter'>
         <div id='coinbaseLogo' />
         <a href='https://itunes.apple.com/us/app/coinbase-bitcoin-wallet/id886427730?mt=8' target='_blank' id='appstoreLogo' />
         <a href='https://play.google.com/store/apps/details?id=com.coinbase.android' target='_blank' id='playstoreLogo' />
@@ -384,11 +384,11 @@ class BitcoinDashboard extends ImmutableComponent {
         <div className='settingsPanelDivider'>
           <span className='fa fa-credit-card' />
           <div className='settingsListTitle' data-l10n-id='moneyAdd' />
-          <div className='settingsListSubTitle' data-l10n-id='moneyAddSubTitle' />
+          <div className='settingsListTitle subTitle' data-l10n-id='moneyAddSubTitle' />
         </div>
         <div className='settingsPanelDivider'>
           {this.bitcoinPurchaseButton}
-          <div className='settingsListSubTitle' data-l10n-id='transferTime' />
+          <div className='settingsListTitle subTitle' data-l10n-id='transferTime' />
         </div>
       </div>
     } else {
@@ -396,7 +396,7 @@ class BitcoinDashboard extends ImmutableComponent {
         <div className='settingsPanelDivider'>
           <span className='fa fa-credit-card' />
           <div className='settingsListTitle' data-l10n-id='moneyAdd' />
-          <div className='settingsListSubTitle' data-l10n-id='moneyAddSubTitle' />
+          <div className='settingsListTitle subTitle' data-l10n-id='moneyAddSubTitle' />
         </div>
         <div className='settingsPanelDivider'>
           <div data-l10n-id='coinbaseNotAvailable' />
@@ -473,7 +473,7 @@ class BitcoinDashboard extends ImmutableComponent {
   render () {
     window.addEventListener('message', this.onMessage.bind(this), false)
     var emptyDialog = true
-    return <div id='bitcoinDashboard'>
+    return <div className='bitcoinDashboard'>
       {
       this.props.bitcoinOverlayVisible
         ? <ModalOverlay title={'bitcoinBuy'} content={this.bitcoinOverlayContent} customTitleClasses={'coinbaseOverlay'} emptyDialog={emptyDialog} onHide={this.props.hideOverlay.bind(this)} />
@@ -497,7 +497,7 @@ class BitcoinDashboard extends ImmutableComponent {
               <span className='fa fa-bitcoin fa-stack-1x' />
             </span>
             <div className='settingsListTitle' data-l10n-id='bitcoinAdd' />
-            <div className='settingsListSubTitle' data-l10n-id='bitcoinAddDescription' />
+            <div className='settingsListTitle subTitle' data-l10n-id='bitcoinAddDescription' />
           </div>
           {
             this.ledgerData.get('address')
@@ -908,7 +908,7 @@ class PaymentsTab extends ImmutableComponent {
       return null
     }
 
-    return <div>
+    return <div className='balance'>
       {
       !(this.props.ledgerData.get('balance') === undefined || this.props.ledgerData.get('balance') === null)
         ? <input className='form-control fundsAmount' readOnly value={this.btcToCurrencyString(this.props.ledgerData.get('balance'))} />
@@ -927,7 +927,7 @@ class PaymentsTab extends ImmutableComponent {
     const onButtonClick = this.props.ledgerData.get('created')
       ? this.props.showOverlay.bind(this, 'addFunds')
       : (this.props.ledgerData.get('creating') ? () => {} : this.createWallet)
-    return <Button l10nId={buttonText} className='primaryButton wideButton' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
+    return <Button l10nId={buttonText} className='primaryButton wideButton addFunds' onClick={onButtonClick.bind(this)} disabled={this.props.ledgerData.get('creating')} />
   }
 
   get paymentHistoryButton () {
@@ -1224,7 +1224,7 @@ class PaymentsTab extends ImmutableComponent {
               <td>
                 <SettingsList>
                   <SettingItem>
-                    <select className='form-control' id='fundsSelectBox'
+                    <select className='form-control fundsSelectBox'
                       value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT,
                         this.props.settings)}
                       onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)} >
@@ -1235,6 +1235,9 @@ class PaymentsTab extends ImmutableComponent {
                       }
                     </select>
                   </SettingItem>
+                  <SettingItem>
+                    {this.paymentHistoryButton}
+                  </SettingItem>
                 </SettingsList>
               </td>
               <td>
@@ -1249,14 +1252,13 @@ class PaymentsTab extends ImmutableComponent {
                         <SettingItem>
                           {this.fundsAmount}
                           {this.walletButton}
-                          {this.paymentHistoryButton}
                         </SettingItem>
                       </SettingsList>
                     </div>
                 }
               </td>
               <td>
-                <div id='walletStatus' data-l10n-id={this.walletStatus.id} data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
+                <div className='walletStatus' data-l10n-id={this.walletStatus.id} data-l10n-args={this.walletStatus.args ? JSON.stringify(this.walletStatus.args) : null} />
                 {this.nextReconcileDate}
               </td>
             </tr>
@@ -1268,7 +1270,7 @@ class PaymentsTab extends ImmutableComponent {
   }
 
   render () {
-    return <div id='paymentsContainer'>
+    return <div className='paymentsContainer'>
       {
       this.enabled && this.props.addFundsOverlayVisible
         ? <ModalOverlay title={this.overlayTitle} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'addFunds')} />
@@ -1299,7 +1301,7 @@ class PaymentsTab extends ImmutableComponent {
           <span className='sectionTitle'>Brave Payments</span>
           <span className='sectionSubTitle'>beta</span>
         </div>
-        <div className='pull-left' id='paymentsSwitches'>
+        <div className='paymentsSwitches'>
           <div className='enablePaymentsSwitch'>
             <span data-l10n-id='off' />
             <SettingCheckbox dataL10nId='on' prefKey={settings.PAYMENTS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
diff --git a/js/components/modalOverlay.js b/js/components/modalOverlay.js
index 8b8a709c503..0a751d9e2fe 100644
--- a/js/components/modalOverlay.js
+++ b/js/components/modalOverlay.js
@@ -15,7 +15,7 @@ class ModalOverlay extends ImmutableComponent {
     var button = null
     var title = null
     if (!this.props.emptyDialog) {
-      close = (this.props.onHide ? <button type='button' className='close pull-right' onClick={this.props.onHide}><span>&times;</span></button> : null)
+      close = (this.props.onHide ? <button type='button' className='close pull-right' onClick={this.props.onHide} /> : null)
       title = (this.props.title ? <div className='sectionTitle' data-l10n-id={this.props.title} /> : null)
     }
     let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')
diff --git a/less/about/preferences.less b/less/about/preferences.less
index c034cb69517..36286d57aae 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -13,33 +13,6 @@ body {
   display: none !important; /* for testing/debug only */
 }
 
-#paymentsSwitches {
-  display: flex;
-  align-items: center;
-  min-height: 40px;
-
-  .enablePaymentsSwitch {
-    float: left;
-    min-width: 215px;
-    margin-right: 30px;
-
-    span {
-      font-weight: bold;
-      color: @gray;
-    }
-
-    label {
-      font-weight: bold;
-      color: @braveOrange;
-    }
-  }
-
-  .settingItem {
-    display: inline;
-    margin-right: 30px;
-  }
-}
-
 #coinbaseLogo {
   width: 40px;
   height: 40px;
@@ -69,12 +42,6 @@ body {
   display: inline-block;
 }
 
-.bitcoinQRTitle {
-  color: @braveOrange;
-  margin-bottom: 70px;
-  text-align: center;
-}
-
 .sectionTitle {
   color: @darkGray;
   cursor: default;
@@ -516,37 +483,18 @@ table.sortableTable {
   }
 }
 
-.paymentsMessage {
-  background-color: @lightGray;
-  border-radius: @borderRadiusUIbox;
-  margin: 1em 0;
-  padding: 40px;
-  font-size: 1.3em;
-  line-height: 1.3em;
-  color: @mediumGray;
-  width: 500px;
-  float: left;
-  > div {
-    padding: 0.5em 0;
-    font-size: 14px;
-  }
-  > h3 {
-    font-weight: 200;
-    font-size: 18px;
-    padding-bottom: 0.5em;
-  }
-  .boldText {
-    font-weight: bold;
-  }
-}
-
-#ledgerTable {
+.ledgerTable {
 
   tr {
     th,
     td {
       padding: 0 15px;
     }
+
+    td {
+      position: relative;
+    }
+
     .th-inner {
       font-weight: bold;
 
@@ -563,13 +511,6 @@ table.sortableTable {
   text-align: left;
 }
 
-span.paymentHistoryButton.browserButton {
-  display: block;
-  color: @braveOrange;
-  font-size: 14px;
-  white-space: nowrap;
-}
-
 .paymentHistoryFooter span.okButton.primaryButton {
   background-color: gray;
   float: right;
@@ -621,13 +562,38 @@ div.nextPaymentSubmission {
 }
 
 
-#paymentsContainer {
+.paymentsContainer {
+  @walletTableData: 235px + 30px; // .walletBar td (min-width + padding)
+  @barMargin: 15px 0 30px;
+
   position: relative;
   overflow-x: hidden;
   width: 805px;
 
   .titleBar {
     overflow: hidden;
+    display: flex;
+    align-items: center;
+
+    .paymentsSwitches {
+      display: flex;
+
+      .enablePaymentsSwitch {
+        display: flex;
+        align-items: center;
+        width: @walletTableData;
+
+        span {
+          font-weight: bold;
+          color: @gray;
+        }
+
+        label {
+          font-weight: bold;
+          color: @braveOrange;
+        }
+      }
+    }
   }
 
   & > table,
@@ -638,22 +604,107 @@ div.nextPaymentSubmission {
     width: 80%;
   }
 
+  .paymentsMessage {
+    background-color: @lightGray;
+    border-radius: @borderRadiusUIbox;
+    margin: @barMargin;
+    padding: 40px;
+    font-size: 1.3em;
+    line-height: 1.3em;
+    color: @mediumGray;
+    width: 500px;
+    float: left;
+
+    > div {
+      padding: 0.5em 0;
+      font-size: 14px;
+    }
+
+    > h3 {
+      font-weight: 200;
+      font-size: 18px;
+      padding-bottom: 0.5em;
+    }
+
+    .boldText {
+      font-weight: bold;
+    }
+  }
+
   .walletBar {
     padding: 20px;
     padding-bottom: 10px;
     background: @lightGray;
     border-radius: @borderRadiusUIbox;
-    margin: 30px 0px;
+    margin: @barMargin;
+
+    .settingsList .settingItem {
+      .paymentHistoryButton {
+        display: block;
+        color: @braveOrange;
+        font-size: 14px;
+        margin: 0;
+        padding: 0;
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .balance {
+        display: flex;
+        align-items: center;
+        vertical-align: 0;
+        height: 100%;
+        margin-bottom: 0;
+
+        > 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: 12px; // .nextReconcileDate
+        }
+
+        .fundsFAQ {
+          color: @gray;
+          margin: 0 0 0 5px;
+        }
+      }
+    }
+
     th {
       text-align: left;
     }
+
     tr {
       height: 1em;
     }
+
     td {
       padding: 15px 30px 0 0;
       width: auto;
       min-width: 235px;
+      vertical-align: top;
+
+      .settingsListContainer {
+        margin-bottom: 0;
+
+        .fundsSelectBox {
+          width: auto;
+        }
+      }
+
+      .walletStatus {
+        font-size: 14.5px; // .form-control
+      }
     }
 
     .fundsAmount {
@@ -661,13 +712,9 @@ div.nextPaymentSubmission {
       margin: 0;
       width: auto;
     }
-    .fundsFAQ {
-      display: inline;
-      position: relative;
-      top: 1px;
-      left: 5px;
-    }
-    .accountBalanceError, .nextReconcileDate {
+
+    .accountBalanceError,
+    .nextReconcileDate {
       font-size: 14px;
       margin: 10px 0;
     }
@@ -712,11 +759,6 @@ div.nextPaymentSubmission {
     }
 
     td {
-      color: @mediumGray;
-      -webkit-font-smoothing: antialiased;
-      text-align: left;
-      vertical-align: top;
-      position: relative;
 
       a {
         vertical-align: middle;
@@ -782,10 +824,61 @@ div.nextPaymentSubmission {
   }
 }
 
-#bitcoinDashboard {
+.bitcoinDashboard {
+
+  .modal {
+    .qrcodeOverlay {
+      border: 0;
+      width: 350px;
+      height: auto;
+      margin: 100px auto 0 auto;
+      background: white;
+      box-shadow: @dialogShadow;
+
+      &.fade {
+        transition: @transitionFast;
+      }
+
+      button.close span {
+        color: @gray;
+        font-size: 2.5em;
+      }
+
+      img {
+        clear: both;
+        display: block;
+        margin: 0 auto;
+      }
+
+      .dialog-header {}
+
+      .dialog-body {
+        padding: 30px;
+
+        .bitcoinQRTitle {
+          color: @braveOrange;
+          text-align: center;
+        }
+      }
+
+      .dialog-footer {
+        .qrcodeOverlayFooter {
+          display: flex;
+          justify-content: center;
+          background: @gray;
+          padding: 15px 0;
+        }
+      }
+    }
+  }
+
   .board {
     .panel {
       padding-left: 100px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
@@ -799,7 +892,7 @@ div.nextPaymentSubmission {
     position: relative;
     margin-top: 8px;
     margin-bottom: 8px;
-    padding: 20px;
+    padding: 25px 20px;
 
     &.advancedSettings {
       padding-left: 50px;
@@ -815,10 +908,6 @@ div.nextPaymentSubmission {
       position: relative;
       float: left;
 
-      .settingsListTitle {
-        margin-top: 0;
-      }
-
       &:nth-child(1) {
         text-align: left;
       }
@@ -862,17 +951,18 @@ div.nextPaymentSubmission {
       color: @darkGray;
       font-weight: bold;
       font-size: 15px;
-      margin-bottom: 15px;
-      padding-right: 25px;
-    }
-    .settingsListSubTitle {
-      color: @darkGray;
-      clear: both;
-      font-weight: normal;
-      font-size: 14px;
-      font-style: italic;
-      line-height: 1.3em;
+      margin: 0;
+
+      &.subTitle {
+        clear: both;
+        font-weight: normal;
+        font-size: 14px;
+        font-style: italic;
+        line-height: 1.3em;
+        margin-top: 20px;
+      }
     }
+
     span {
       display: inline;
     }
@@ -929,7 +1019,6 @@ div.nextPaymentSubmission {
           font-size: 14px;
           margin: 0;
         }
-
       }
 
       .keyContainer {
@@ -1143,11 +1232,6 @@ div.nextPaymentSubmission {
   }
 }
 
-#fundsSelectBox {
-  margin-top: 0px;
-  width: auto;
-}
-
 .moreExtensionsComingSoon {
   padding-top: 10px;
   font-style: italic;
diff --git a/less/modalOverlay.less b/less/modalOverlay.less
index 5cc3fe609bd..200e103d330 100644
--- a/less/modalOverlay.less
+++ b/less/modalOverlay.less
@@ -38,15 +38,6 @@
       box-shadow: none;
       border: none;
 
-      button.close {
-        margin-top: -8px;
-        margin-right: -8px;
-        span {
-          font-size: 1.5em;
-          color: @highlightBlue;
-        }
-      }
-
       iframe {
         display: block;
         width: 100%;
@@ -58,35 +49,6 @@
         overflow: hidden;
       }
     }
-
-    .qrcodeOverlay {
-      width: 350px;
-      height: auto;
-      margin: 100px auto 0 auto;
-      background: white;
-      box-shadow: @dialogShadow;
-
-      button.close span {
-        color: @gray;
-        font-size: 2.5em;
-      }
-
-      img {
-        clear: both;
-        display: block;
-        margin: 0 auto;
-        padding: 20px 0 0 0;
-      }
-
-      .dialog-header {
-        padding: 15px;
-      }
-
-      .dialog-footer {
-        background: @gray;
-        padding: 15px;
-      }
-    }
   }
 
   .dialog {
@@ -141,14 +103,19 @@
   button {
     &.close {
       display: inline-block;
-      background: none;
-      height: 2em;
-      width: 2em;
-      min-width: 2em;
+      background: url('../img/toolbar/stoploading_btn.svg') center no-repeat;
+      background-size: 15px 15px;
+      height: 15px;
+      width: 15px;
       cursor: pointer;
       border: none;
-      box-shadow: none;
-      margin: 5px;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+
+      &:focus {
+        outline: none;
+      }
 
       span {
         font-size: 2.5em;
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 2fd9aefce1e..6ac91bc0f65 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -59,10 +59,10 @@ module.exports = {
   walletSwitch: '.enablePaymentsSwitch .switchBackground',
   addFundsButton: '.addFunds',
   advancedSettings: '.advancedSettings',
-  fundsSelectBox: '#fundsSelectBox',
-  paymentsStatus: '#walletStatus',
-  ledgerTable: '#ledgerTable',
-  bitcoinDashboard: '#bitcoinDashboard',
+  fundsSelectBox: '.fundsSelectBox',
+  paymentsStatus: '.walletStatus',
+  ledgerTable: '.ledgerTable',
+  bitcoinDashboard: '.bitcoinDashboard',
   modalCloseButton: 'button.close',
   coinbaseBuyButton: '[data-l10n-id="add"]',
   paymentQRCode: '[title="Brave wallet QR code"]',