diff --git a/app/renderer/components/preferences/payment/disabledContent.js b/app/renderer/components/preferences/payment/disabledContent.js
new file mode 100644
index 00000000000..7896191937b
--- /dev/null
+++ b/app/renderer/components/preferences/payment/disabledContent.js
@@ -0,0 +1,115 @@
+const React = require('react')
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
+const globalStyles = require('../../styles/global')
+const {StyleSheet, css} = require('aphrodite/no-important')
+
+// icons
+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 className='disabledContent'>
+      <div className={css(styles.paymentsMessage, styles.walletBarMargin)}>
+        <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: globalStyles.fontSize.paymentsContent,
+    lineHeight: '1.8em',
+    color: globalStyles.color.mediumGray,
+    width: '500px',
+    float: 'left'
+  },
+
+  text: {
+    padding: '0.5em 0'
+  },
+
+  textSide: {
+    fontSize: '12px',
+    margin: '50px 0 20px 12px'
+  },
+
+  h3: {
+    fontSize: '18px',
+    paddingBottom: '0.5em'
+  },
+
+  sideH2: {
+    fontSize: '18px',
+    margin: '70px 0 -15px 12px'
+  },
+
+  boldText: {
+    fontWeight: 'bold'
+  },
+
+  walletBarMargin: {
+    marginTop: '15px'
+  },
+
+  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/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
similarity index 90%
rename from app/renderer/components/preferences/ledgerTable.js
rename to app/renderer/components/preferences/payment/ledgerTable.js
index 32021f759e7..8ee0a7dcbba 100644
--- a/app/renderer/components/preferences/ledgerTable.js
+++ b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -3,19 +3,19 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('../../../../js/components/immutableComponent')
+const ImmutableComponent = require('../../../../../js/components/immutableComponent')
 const {StyleSheet, css} = require('aphrodite')
-const globalStyles = require('../styles/global')
+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')
+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')
 
 // icons
-const verifiedGreenIcon = require('../../../extensions/brave/img/ledger/verified_green_icon.svg')
-const verifiedWhiteIcon = require('../../../extensions/brave/img/ledger/verified_white_icon.svg')
+const verifiedGreenIcon = require('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
+const verifiedWhiteIcon = require('../../../../extensions/brave/img/ledger/verified_white_icon.svg')
 
 class LedgerTable extends ImmutableComponent {
   get synopsis () {
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 5204f57d3c5..ed54b1608e5 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -23,7 +23,9 @@ 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 LedgerTable = require('./payment/ledgerTable')
+const DisabledContent = require('./payment/disabledContent')
+// const EnabledContent = require('./payment/enabledContent')
 const PaymentHistory = require('./paymentHistory')
 
 class PaymentsTab extends ImmutableComponent {
@@ -456,33 +458,6 @@ class PaymentsTab extends ImmutableComponent {
     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
@@ -607,7 +582,7 @@ class PaymentsTab extends ImmutableComponent {
       {
         this.enabled
           ? this.enabledContent
-          : this.disabledContent
+          : <DisabledContent />
       }
     </div>
   }
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 11368431acf..7b7dcf33c31 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -159,7 +159,8 @@ const globalStyles = {
   },
   fontSize: {
     tabIcon: '14px',
-    tabTitle: '12px'
+    tabTitle: '12px',
+    paymentsContent: '14.5px'
   },
   appIcons: {
     clipboard: 'fa fa-clipboard',
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 9eab419e6b1..e700cc4dc62 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -809,78 +809,6 @@ table.sortableTable {
     }
   }
 
-  // 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 {