diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
index f200cf84c63..21e838964c7 100644
--- a/app/renderer/components/common/browserButton.js
+++ b/app/renderer/components/common/browserButton.js
@@ -237,7 +237,7 @@ const styles = StyleSheet.create({
   },
 
   browserButton_panelItem: {
-    minWidth: '180px'
+    minWidth: globalStyles.button.panel.width
   },
 
   browserButton_iconOnly: {
diff --git a/app/renderer/components/common/dropdown.js b/app/renderer/components/common/dropdown.js
index 1c9ab9cd297..9669b94f0a3 100644
--- a/app/renderer/components/common/dropdown.js
+++ b/app/renderer/components/common/dropdown.js
@@ -16,8 +16,9 @@ class Dropdown extends ImmutableComponent {
       this.props['data-isFormControl'] && commonStyles.formControl,
       styles.dropdown,
       this.props['data-isCommonForm'] && styles.commonForm,
-      this.props['data-isSettings'] && styles.settings,
       this.props['data-isFullWidth'] && styles.fullWidth,
+      this.props['data-isSettings'] && styles.settings,
+      this.props['data-isPanel'] && styles.settings_panel,
       this.props['data-isBraveryPanel'] && styles.braveryPanel
     )
 
@@ -39,6 +40,12 @@ class SettingDropdown extends ImmutableComponent {
   }
 }
 
+class PanelDropdown extends ImmutableComponent {
+  render () {
+    return <FormDropdown data-isPanel {...this.props} />
+  }
+}
+
 class BraveryPanelDropdown extends ImmutableComponent {
   render () {
     return <FormDropdown data-isBraveryPanel {...this.props} />
@@ -75,12 +82,16 @@ const styles = StyleSheet.create({
     fontSize: globalStyles.fontSize.flyoutDialog
   },
 
+  fullWidth: {
+    width: '100%'
+  },
+
   settings: {
     width: '280px'
   },
 
-  fullWidth: {
-    width: '100%'
+  settings_panel: {
+    width: globalStyles.button.panel.width
   },
 
   braveryPanel: {
@@ -93,5 +104,6 @@ module.exports = {
   Dropdown,
   FormDropdown,
   SettingDropdown,
+  PanelDropdown,
   BraveryPanelDropdown
 }
diff --git a/app/renderer/components/preferences/payment/disabledContent.js b/app/renderer/components/preferences/payment/disabledContent.js
index da82dc1cab3..0fc79671cc3 100644
--- a/app/renderer/components/preferences/payment/disabledContent.js
+++ b/app/renderer/components/preferences/payment/disabledContent.js
@@ -11,7 +11,6 @@ const ImmutableComponent = require('../../immutableComponent')
 // style
 const globalStyles = require('../../styles/global')
 const commonStyles = require('../../styles/commonStyles')
-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')
@@ -61,7 +60,7 @@ const styles = StyleSheet.create({
     borderRadius: globalStyles.radius.borderRadiusUIbox,
     boxSizing: 'border-box',
     padding: '40px',
-    fontSize: paymentStyles.font.regular,
+    fontSize: globalStyles.payments.fontSize.regular,
     lineHeight: '1.8em',
     color: globalStyles.color.mediumGray
   },
@@ -92,7 +91,7 @@ const styles = StyleSheet.create({
 
   disabledContent__sidebar__text: {
     opacity: 0.8,
-    fontSize: paymentStyles.font.regular
+    fontSize: globalStyles.payments.fontSize.regular
   },
 
   disabledContent__sidebar__logo: {
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index d78a6c4f0ab..a9fecffc22b 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const moment = require('moment')
 
 // util
@@ -15,13 +15,12 @@ const {changeSetting} = require('../../../lib/settingsUtil')
 const ImmutableComponent = require('../../immutableComponent')
 const BrowserButton = require('../../common/browserButton')
 const {FormTextbox} = require('../../common/textbox')
-const {FormDropdown} = require('../../common/dropdown')
-const {SettingsList, SettingItem} = require('../../common/settings')
+const {PanelDropdown} = require('../../common/dropdown')
 const LedgerTable = require('./ledgerTable')
 
 // style
 const globalStyles = require('../../styles/global')
-const {paymentStyles, paymentStylesVariables} = require('../../styles/payment')
+const {paymentStylesVariables} = require('../../styles/payment')
 const cx = require('../../../../../js/lib/classSet')
 
 // other
@@ -84,13 +83,13 @@ class EnabledContent extends ImmutableComponent {
 
     return <section className={css(styles.balance)}>
       <FormTextbox data-test-id='fundsAmount' readOnly value={btcToCurrencyString(value, ledgerData)} />
-      <a className={css(styles.iconLink)} href='https://brave.com/Payments_FAQ.html' rel='noopener' target='_blank'>
-        <span className={cx({
-          fa: true,
-          'fa-question-circle': true,
-          [css(styles.iconText)]: true
-        })} />
-      </a>
+      <a className={cx({
+        [globalStyles.appIcons.question]: true,
+        [css(styles.balance__iconLink)]: true
+      })}
+        href='https://brave.com/Payments_FAQ.html'
+        target='_blank' rel='noopener'
+      />
     </section>
   }
 
@@ -116,7 +115,7 @@ class EnabledContent extends ImmutableComponent {
       date: prevReconcileDateValue
     }
 
-    return <section className={css(styles.contribution, styles.lastContribution)}>
+    return <section>
       <div data-l10n-id='lastContribution' />
       <div data-l10n-id={text} data-l10n-args={JSON.stringify(l10nDataArgs)} />
     </section>
@@ -157,7 +156,7 @@ class EnabledContent extends ImmutableComponent {
       reconcileDate: nextReconcileDateRelative
     }
 
-    return <section className={css(styles.contribution, styles.nextContribution)}>
+    return <section>
       <div data-l10n-id='nextContribution' />
       <div data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
     </section>
@@ -169,65 +168,46 @@ class EnabledContent extends ImmutableComponent {
 
     return <section>
       <div className={css(styles.walletBar)} data-test-id='walletBar'>
-        <table>
-          <thead>
-            <tr className={css(styles.tableTr)}>
-              <th className={css(styles.walletBar__tableTr__tableTh)} data-l10n-id='monthlyBudget' />
-              <th className={css(styles.walletBar__tableTr__tableTh)} data-l10n-id='accountBalance' />
-              <th className={css(styles.walletBar__tableTr__tableTh)} />
-            </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.lastReconcileMessage()}
-                  </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()}
-                        </SettingItem>
-                        <SettingItem>
-                          {this.nextReconcileMessage()}
-                        </SettingItem>
-                      </SettingsList>
-                    </div>
-                }
-              </td>
-              <td className={css(styles.tableTd)}>
-                {this.walletButton()}
-                <div className={css(styles.walletStatus)}
-                  data-test-id='walletStatus'
-                  data-l10n-id={walletStatusText.id}
-                  data-l10n-args={walletStatusText.args ? JSON.stringify(walletStatusText.args) : null}
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div className={css(gridStyles.row1col1, styles.walletBar__title)} data-l10n-id='monthlyBudget' />
+        <div className={css(gridStyles.row1col2, styles.walletBar__title)} data-l10n-id='accountBalance' />
+        <div className={css(gridStyles.row1col3)} />
+        <div className={css(gridStyles.row2col1)}>
+          <PanelDropdown
+            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>
+              )
+            }
+          </PanelDropdown>
+        </div>
+        <div className={css(gridStyles.row2col2)}>
+          {
+            ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
+              ? <div data-l10n-id='accountBalanceConnectionError' />
+              : <div>{this.fundsAmount()}</div>
+          }
+        </div>
+        <div className={css(gridStyles.row2col3)}>
+          {this.walletButton()}
+        </div>
+        <div className={css(gridStyles.row3col1, styles.walletBar__message)}>
+          {this.lastReconcileMessage()}
+        </div>
+        <div className={css(gridStyles.row3col2, styles.walletBar__message)}>
+          {
+            ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
+              ? <div data-l10n-id={this.ledgerDataErrorText()} />
+              : <div>{this.nextReconcileMessage()}</div>
+          }
+        </div>
+        <div className={css(gridStyles.row3col3, styles.walletBar__message)}
+          data-test-id='walletStatus'
+          data-l10n-id={walletStatusText.id}
+          data-l10n-args={walletStatusText.args ? JSON.stringify(walletStatusText.args) : null}
+        />
       </div>
       <LedgerTable ledgerData={this.props.ledgerData}
         settings={this.props.settings}
@@ -237,85 +217,89 @@ class EnabledContent extends ImmutableComponent {
   }
 }
 
-const styles = StyleSheet.create({
-  walletBar: {
-    background: globalStyles.color.lightGray,
-    borderRadius: globalStyles.radius.borderRadiusUIbox,
-    padding: globalStyles.spacing.panelPadding,
-    margin: `${globalStyles.spacing.panelMargin} 0`
+const gridStyles = StyleSheet.create({
+  row1col1: {
+    gridRow: 1,
+    gridColumn: 1
   },
 
-  listContainer: {
-    marginBottom: 0
+  row1col2: {
+    gridRow: 1,
+    gridColumn: 2
   },
 
-  walletBar__tableTr__tableTh: {
-    color: paymentStylesVariables.tableHeader.fontColor,
-    fontWeight: paymentStylesVariables.tableHeader.fontWeight,
-    textAlign: 'left'
+  row1col3: {
+    gridRow: 1,
+    gridColumn: 3
   },
 
-  tableTr: {
-    height: '1em'
+  row2col1: {
+    gridRow: 2,
+    gridColumn: 1
   },
 
-  tableTd: {
-    fontSize: paymentStyles.font.regular,
-    padding: '10px 30px 0 0',
-    width: 'auto',
-    minWidth: paymentStyles.width.tableRow,
-    verticalAlign: 'top'
+  row2col2: {
+    gridRow: 2,
+    gridColumn: 2
   },
 
-  accountBalanceError: {
-    marginTop: globalStyles.spacing.panelItemMargin
+  row2col3: {
+    gridRow: 2,
+    gridColumn: 3
   },
 
-  settingsListContainer: {
-    marginBottom: 0
+  row3col1: {
+    gridRow: 3,
+    gridColumn: 1
   },
 
-  balance: {
-    display: 'flex',
-    alignItems: 'center',
-    verticalAlign: 0,
-    height: '100%',
-    marginBottom: 0
+  row3col2: {
+    gridRow: 3,
+    gridColumn: 2
   },
 
-  iconLink: {
-    textDecoration: 'none',
+  row3col3: {
+    gridRow: 3,
+    gridColumn: 3
+  }
+})
 
-    ':hover': {
-      textDecoration: 'none'
-    }
+const styles = StyleSheet.create({
+  walletBar: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr 1fr',
+    background: globalStyles.color.lightGray,
+    borderRadius: globalStyles.radius.borderRadiusUIbox,
+    padding: globalStyles.spacing.panelPadding,
+    margin: `${globalStyles.spacing.panelMargin} 0`
   },
 
-  iconText: {
-    color: globalStyles.color.mediumGray,
-    margin: '0 0 0 5px',
-
-    // TODO: refactor preferences.less to remove !important
-    fontSize: `${globalStyles.fontSize.settingItemSubtext} !important`
+  walletBar__title: {
+    color: paymentStylesVariables.tableHeader.fontColor,
+    fontWeight: paymentStylesVariables.tableHeader.fontWeight,
+    marginBottom: `calc(${globalStyles.spacing.panelPadding} / 1.5)`
   },
 
-  contribution: {
-    lineHeight: 1.5
+  walletBar__message: {
+    fontSize: globalStyles.payments.fontSize.regular,
+    lineHeight: 1.5,
+    marginTop: globalStyles.spacing.panelPadding
   },
 
-  lastContribution: {
-    marginTop: '16px',
-    marginBottom: 0
+  balance: {
+    display: 'flex',
+    alignItems: 'center'
   },
 
-  nextContribution: {
-    marginTop: '15px',
-    marginBottom: 0
-  },
+  balance__iconLink: {
+    color: globalStyles.color.mediumGray,
+    fontSize: globalStyles.payments.fontSize.regular,
+    marginLeft: '5px',
+    textDecoration: 'none',
 
-  walletStatus: {
-    marginTop: '15px',
-    lineHeight: 1.5
+    ':hover': {
+      textDecoration: 'none !important'
+    }
   }
 })
 
diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
index 70761a3fa41..a1450ecba0c 100644
--- a/app/renderer/components/preferences/payment/ledgerTable.js
+++ b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -262,13 +262,16 @@ class LedgerTable extends ImmutableComponent {
 
     return <section data-test-id='ledgerTable'>
       <div className={css(styles.hideExcludedSites)}>
-        <div className={css(styles.columnOffset)} />
-        <div className={css(styles.rightColumn)}>
-          <SettingCheckbox small compact
+        <div className={css(gridStyles.row1col1)} />
+        <div className={css(gridStyles.row1col2)}>
+          <SettingCheckbox
+            small
+            compact
             dataL10nId='hideExcluded'
             prefKey={settings.PAYMENTS_SITES_HIDE_EXCLUDED}
             settings={this.props.settings}
             onChangeSetting={this.props.onChangeSetting}
+            switchClassName={css(styles.hideExcludedSites__switchWrap__switchControl)}
           />
         </div>
       </div>
@@ -326,6 +329,18 @@ const verifiedBadge = (icon) => ({
   background: `url(${icon}) center no-repeat`
 })
 
+const gridStyles = StyleSheet.create({
+  row1col1: {
+    gridRow: 1,
+    gridColumn: 1
+  },
+
+  row1col2: {
+    gridRow: 1,
+    gridColumn: 2
+  }
+})
+
 const styles = StyleSheet.create({
   verified: verifiedBadge(verifiedGreenIcon),
   disabled: verifiedBadge(verifiedWhiteIcon),
@@ -388,22 +403,15 @@ const styles = StyleSheet.create({
   },
 
   hideExcludedSites: {
-    display: 'flex',
-    flex: 1,
+    display: 'grid',
     alignItems: 'center',
-    height: '35px'
+    gridTemplateColumns: '2fr 1fr',
+    width: `calc(100% - calc(${globalStyles.spacing.panelPadding} / 2))`,
+    marginBottom: globalStyles.spacing.panelMargin
   },
 
-  columnOffset: {
-    display: 'flex',
-    flexGrow: 8,
-    flexShrink: 8
-  },
-
-  rightColumn: {
-    display: 'flex',
-    flexGrow: 1,
-    flexShrink: 1
+  hideExcludedSites__switchWrap__switchControl: {
+    padding: '0 5px 0 0'
   },
 
   alignRight: {
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 7b8660716a1..e280a57d975 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -29,7 +29,7 @@ const {LedgerRecoveryContent, LedgerRecoveryFooter} = require('./payment/ledgerR
 
 // style
 const globalStyles = require('../styles/global')
-const {paymentStyles, paymentStylesVariables} = require('../styles/payment')
+const {paymentStylesVariables} = require('../styles/payment')
 const settingsIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg')
 const historyIcon = require('../../../extensions/brave/img/ledger/icon_history.svg')
 
@@ -183,24 +183,25 @@ class PaymentsTab extends ImmutableComponent {
       }
 
       <SectionTitleWrapper>
-        { /* Note: This div cannot be replaced with SectionTitleLabelWrapper */ }
-        <div className={cx({
-          [css(styles.titleWrapper)]: true,
-          [css(sectionTitleStyles.beta)]: true
-        })}>
-          <AboutPageSectionTitle>Brave Payments</AboutPageSectionTitle>
-          <SectionLabelTitle>beta</SectionLabelTitle>
-        </div>
-
-        <div className={css(
-          styles.flexAlignCenter,
-          styles.paymentsSwitches
-        )}>
-          <div className={css(styles.flexAlignCenter, styles.switchWrap)} data-test-id='enablePaymentsSwitch'>
+        <section className={css(styles.titleWrapper)}>
+          { /* Note: This div cannot be replaced with SectionTitleLabelWrapper */ }
+          <div className={css(
+            gridStyles.row1col1,
+            styles.titleWrapper__title,
+            sectionTitleStyles.beta
+          )}>
+            <AboutPageSectionTitle>Brave Payments</AboutPageSectionTitle>
+            <SectionLabelTitle>beta</SectionLabelTitle>
+          </div>
+
+          <div data-test-id='enablePaymentsSwitch' className={css(
+            gridStyles.row1col2,
+            styles.titleWrapper__switchWrap
+          )}>
             <span className={css(styles.switchWrap__switchSpan)} data-l10n-id='off' />
             <SettingCheckbox
-              dataL10nId='on'
               compact
+              dataL10nId='on'
               prefKey={settings.PAYMENTS_ENABLED}
               settings={this.props.settings}
               onChangeSetting={this.props.onChangeSetting}
@@ -218,51 +219,52 @@ class PaymentsTab extends ImmutableComponent {
               rel='noopener' target='_blank'
             />
           </div>
-          {
-            this.enabled
-            ? <div className={css(
-                styles.flexAlignCenter,
+
+          <div className={css(gridStyles.row1col3)}>
+            {
+              this.enabled
+              ? <div className={css(
                 styles.switchWrap,
                 styles.switchWrap__right
               )}>
-              <div className={css(styles.switchWrap__autoSuggestSwitch)}>
-                <div className={css(styles.flexAlignCenter, styles.autoSuggestSwitch__subtext)}>
-                  <SettingCheckbox dataL10nId='autoSuggestSites'
-                    compact
-                    prefKey={settings.PAYMENTS_SITES_AUTO_SUGGEST}
-                    settings={this.props.settings}
-                    disabled={!enabled}
-                    onChangeSetting={this.props.onChangeSetting}
-                    switchClassName={css(styles.switchWrap__switchControl)}
-                  />
+                <div className={css(styles.switchWrap__autoSuggestSwitch)}>
+                  <div className={css(styles.flexAlignCenter, styles.autoSuggestSwitch__subtext)}>
+                    <SettingCheckbox
+                      compact
+                      dataL10nId='autoSuggestSites'
+                      prefKey={settings.PAYMENTS_SITES_AUTO_SUGGEST}
+                      settings={this.props.settings}
+                      disabled={!enabled}
+                      onChangeSetting={this.props.onChangeSetting}
+                      switchClassName={css(styles.switchWrap__switchControl)}
+                    />
+                  </div>
                 </div>
-              </div>
-              <div className={css(styles.switchWrap__mainIconsRight)}>
-                <a
-                  data-test-id={this.hasWalletTransaction ? 'paymentHistoryButton' : 'disabledPaymentHistoryButton'}
-                  data-l10n-id='paymentHistoryIcon'
-                  className={css(
+                <div className={css(styles.switchWrap__mainIconsRight)}>
+                  <a className={css(
                     styles.switchWrap__mainIcons,
                     styles.mainIcons__historyIcon,
                     !this.hasWalletTransaction && styles.mainIcons__historyDisabled
                   )}
-                  onClick={(enabled && this.hasWalletTransaction) ? this.props.showOverlay.bind(this, 'paymentHistory') : () => {}}
-                />
-                <a
-                  data-test-id={!enabled ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
-                  data-l10n-id='advancedSettingsIcon'
-                  className={css(
+                    data-test-id={this.hasWalletTransaction ? 'paymentHistoryButton' : 'disabledPaymentHistoryButton'}
+                    data-l10n-id='paymentHistoryIcon'
+                    onClick={(enabled && this.hasWalletTransaction) ? this.props.showOverlay.bind(this, 'paymentHistory') : () => {}}
+                  />
+                  <a className={css(
                     styles.switchWrap__mainIcons,
                     styles.mainIcons__settingsIcon,
                     !enabled && styles.mainIcons__settingsIconDisabled
                   )}
-                  onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
-                />
+                    data-test-id={!enabled ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
+                    data-l10n-id='advancedSettingsIcon'
+                    onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
+                  />
+                </div>
               </div>
-            </div>
-            : null
-          }
-        </div>
+              : null
+            }
+          </div>
+        </section>
       </SectionTitleWrapper>
       {
         this.enabled
@@ -278,6 +280,23 @@ class PaymentsTab extends ImmutableComponent {
   }
 }
 
+const gridStyles = StyleSheet.create({
+  row1col1: {
+    gridRow: 1,
+    gridColumn: 1
+  },
+
+  row1col2: {
+    gridRow: 1,
+    gridColumn: 2
+  },
+
+  row1col3: {
+    gridRow: 1,
+    gridColumn: 3
+  }
+})
+
 const styles = StyleSheet.create({
   flexAlignCenter: {
     display: 'flex',
@@ -290,22 +309,26 @@ const styles = StyleSheet.create({
     width: '805px',
     paddingBottom: '40px' // cf: padding of .prefTabContainer
   },
-  paymentsSwitches: {
-    display: 'flex',
-    position: 'relative',
-    bottom: '2px',
-    minHeight: '29px'
-  },
 
   titleWrapper: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr 1fr',
+    alignItems: 'center',
+    width: '100%',
+    padding: `0 ${globalStyles.spacing.panelPadding}`
+  },
+
+  titleWrapper__title: {
     position: 'relative',
-    marginRight: '49px',
-    minWidth: '240px'
+    right: globalStyles.spacing.panelPadding
   },
 
-  switchWrap: {
-    width: paymentStyles.width.tableCell
+  titleWrapper__switchWrap: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%'
   },
+
   switchWrap__switchSpan: {
     color: '#999',
     fontWeight: 'bold'
@@ -315,8 +338,10 @@ const styles = StyleSheet.create({
     color: globalStyles.color.braveOrange
   },
   switchWrap__right: {
+    display: 'flex',
+    alignItems: 'center',
     justifyContent: 'space-between',
-    position: 'relative'
+    width: `calc(100% + ${globalStyles.spacing.panelPadding})`
   },
 
   // Auto suggest switch
@@ -336,6 +361,7 @@ const styles = StyleSheet.create({
     position: 'relative',
     left: '3px',
     cursor: 'pointer',
+    fontSize: globalStyles.payments.fontSize.regular,
 
     // TODO: refactor preferences.less to remove !important
     ':hover': {
@@ -346,7 +372,6 @@ const styles = StyleSheet.create({
   // History and settings icons
   switchWrap__mainIconsRight: {
     position: 'relative',
-    right: '12px',
     top: '3.5px'
   },
   switchWrap__mainIcons: {
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index ba410e53cff..752fdabc990 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -305,6 +305,10 @@ const globalStyles = {
     action: {
       backgroundColor: '#4099FF',
       hoverColor: '#000'
+    },
+
+    panel: {
+      width: '180px'
     }
   },
 
@@ -329,6 +333,13 @@ const globalStyles = {
         background: '#ccc'
       }
     }
+  },
+
+  // TODO (Suguru): move them to payment.js after style refactoring is done
+  payments: {
+    fontSize: {
+      regular: '14.5px'
+    }
   }
 }
 
diff --git a/app/renderer/components/styles/payment.js b/app/renderer/components/styles/payment.js
index 211d53bb54a..6f39d0112f1 100644
--- a/app/renderer/components/styles/payment.js
+++ b/app/renderer/components/styles/payment.js
@@ -4,16 +4,6 @@
 
 const globalStyles = require('./global')
 
-const paymentStyles = {
-  font: {
-    regular: '14.5px'
-  },
-  width: {
-    tableRow: '235px',
-    tableCell: '265px' // width.tableRow + 30px
-  }
-}
-
 const paymentStylesVariables = {
   spacing: {
     paymentHistoryTablePadding: '30px'
@@ -26,6 +16,5 @@ const paymentStylesVariables = {
 }
 
 module.exports = {
-  paymentStyles,
   paymentStylesVariables
 }
diff --git a/js/about/styles.js b/js/about/styles.js
index d4fe67d9b78..730ae9b5ffc 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -11,7 +11,15 @@ require('../../node_modules/font-awesome/css/font-awesome.css')
 
 const {Textbox, FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/common/textbox')
 const {TextArea, DefaultTextArea} = require('../../app/renderer/components/common/textbox')
-const {Dropdown, FormDropdown, SettingDropdown, BraveryPanelDropdown} = require('../../app/renderer/components/common/dropdown')
+
+const {
+  Dropdown,
+  FormDropdown,
+  SettingDropdown,
+  PanelDropdown,
+  BraveryPanelDropdown
+} = require('../../app/renderer/components/common/dropdown')
+
 const BrowserButton = require('../../app/renderer/components/common/browserButton')
 
 const {
@@ -225,6 +233,23 @@ class AboutStyle extends ImmutableComponent {
           </Code></Pre>
         </Container>
 
+        <Container>
+          <h2>Dropdown used on Brave Payments; has 180px width (same as Panel Item button below)</h2>
+          <PanelDropdown>
+            <option>5 USD</option>
+            <option>10 USD</option>
+            <option>15 USD</option>
+          </PanelDropdown>
+          <Pre><Code>
+            const { '{PanelDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            &lt;PanelDropdown>{'\n'}
+            &nbsp;&nbsp;&lt;option>5 USD&lt;/option>{'\n'}
+            &nbsp;&nbsp;&lt;option>10 USD&lt;/option>{'\n'}
+            &nbsp;&nbsp;&lt;option>15 USD&lt;/option>{'\n'}
+            &lt;/PanelDropdown>
+          </Code></Pre>
+        </Container>
+
         <Container>
           <h2>Dropdown used mostly on Bravery Panel; has 100% width and 13px font size</h2>
           <BraveryPanelDropdown>