diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index f8106077f5e..c3cfba58c9b 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -53,7 +53,7 @@ class EnabledContent extends ImmutableComponent {
       />
       <a className={cx({
         [globalStyles.appIcons.question]: true,
-        [css(styles.balance__iconLink)]: true
+        [css(styles.iconLink)]: true
       })}
         href='https://brave.com/faq-payments/#brave-payments'
         target='_blank' rel='noopener'
@@ -86,16 +86,11 @@ class EnabledContent extends ImmutableComponent {
   fundsAmount () {
     const ledgerData = this.props.ledgerData
 
-    return <section className={css(styles.balance)}>
-      <FormTextbox data-test-id='fundsAmount' readOnly value={formatCurrentBalance(ledgerData)} />
-      <a className={cx({
-        [globalStyles.appIcons.question]: true,
-        [css(styles.balance__iconLink)]: true
-      })}
-        href='https://brave.com/Payments_FAQ.html'
-        target='_blank' rel='noopener'
-      />
-    </section>
+    return <FormTextbox
+      readOnly
+      data-test-id='fundsAmount'
+      value={formatCurrentBalance(ledgerData)}
+    />
   }
 
   lastReconcileMessage () {
@@ -254,57 +249,84 @@ class EnabledContent extends ImmutableComponent {
 const gridStyles = StyleSheet.create({
   row1col1: {
     gridRow: 1,
-    gridColumn: 1
+    gridColumn: 1,
+    marginTop: globalStyles.spacing.panelPadding,
+    marginLeft: globalStyles.spacing.panelPadding
   },
 
   row1col2: {
     gridRow: 1,
-    gridColumn: 2
+    gridColumn: 2,
+    marginTop: globalStyles.spacing.panelPadding,
+    marginRight: `calc(${globalStyles.spacing.panelPadding} / 2)`,
+    marginLeft: `calc(${globalStyles.spacing.panelPadding} / 2)`
   },
 
   row1col3: {
     gridRow: 1,
-    gridColumn: 3
+    gridColumn: 3,
+    marginRight: globalStyles.spacing.panelPadding
   },
 
   row2col1: {
     gridRow: 2,
-    gridColumn: 1
+    gridColumn: 1,
+    marginLeft: globalStyles.spacing.panelPadding
   },
 
   row2col2: {
     gridRow: 2,
-    gridColumn: 2
+    gridColumn: 2,
+    marginRight: `calc(${globalStyles.spacing.panelPadding} / 2)`,
+    marginLeft: `calc(${globalStyles.spacing.panelPadding} / 2)`
   },
 
   row2col3: {
     gridRow: 2,
-    gridColumn: 3
+    gridColumn: 3,
+    marginRight: globalStyles.spacing.panelPadding
   },
 
   row3col1: {
     gridRow: 3,
-    gridColumn: 1
+    gridColumn: 1,
+    marginBottom: globalStyles.spacing.panelPadding,
+    marginLeft: globalStyles.spacing.panelPadding
   },
 
   row3col2: {
     gridRow: 3,
-    gridColumn: 2
+    gridColumn: 2,
+    marginRight: `calc(${globalStyles.spacing.panelPadding} / 2)`,
+    marginBottom: globalStyles.spacing.panelPadding,
+    marginLeft: `calc(${globalStyles.spacing.panelPadding} / 2)`
   },
 
   row3col3: {
     gridRow: 3,
-    gridColumn: 3
+    gridColumn: 3,
+    marginRight: globalStyles.spacing.panelPadding,
+    marginBottom: globalStyles.spacing.panelPadding
   }
 })
 
 const styles = StyleSheet.create({
+  iconLink: {
+    color: globalStyles.color.mediumGray,
+    fontSize: globalStyles.payments.fontSize.regular,
+    marginLeft: '10px',
+    textDecoration: 'none',
+
+    ':hover': {
+      textDecoration: 'none !important'
+    }
+  },
+
   enabledContent__walletBar: {
     display: 'grid',
     gridTemplateColumns: '1fr 1fr 1fr',
     background: globalStyles.color.lightGray,
     borderRadius: globalStyles.radius.borderRadiusUIbox,
-    padding: globalStyles.spacing.panelPadding,
     margin: `${globalStyles.spacing.panelMargin} 0`
   },
 
@@ -320,22 +342,6 @@ const styles = StyleSheet.create({
     marginTop: globalStyles.spacing.panelPadding
   },
 
-  balance: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-
-  balance__iconLink: {
-    color: globalStyles.color.mediumGray,
-    fontSize: globalStyles.payments.fontSize.regular,
-    marginLeft: '5px',
-    textDecoration: 'none',
-
-    ':hover': {
-      textDecoration: 'none !important'
-    }
-  },
-
   enabledContent: {
     position: 'relative',
     zIndex: 2
diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
index 9797655a479..d33654ca1bc 100644
--- a/app/renderer/components/preferences/payment/ledgerTable.js
+++ b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -166,14 +166,14 @@ class LedgerTable extends ImmutableComponent {
         value: ''
       },
       {
-        html: <div>
-          <a className={css(styles.siteData)} href={publisherURL} rel='noopener' target='_blank' tabIndex={-1}>
+        html: <div className={css(styles.siteData)}>
+          <a className={css(styles.siteData__anchor)} href={publisherURL} rel='noopener' target='_blank' tabIndex={-1}>
             {
               faviconURL
-                ? <img className={css(styles.siteData__icon_favicon)} src={faviconURL} alt={siteName} />
-                : <span className={css(styles.siteData__icon_default)}><span className={globalStyles.appIcons.defaultIcon} /></span>
+                ? <img className={css(styles.siteData__anchor__icon_favicon)} src={faviconURL} alt={siteName} />
+                : <span className={css(styles.siteData__anchor__icon_default)}><span className={globalStyles.appIcons.defaultIcon} /></span>
             }
-            <span className={css(styles.siteData__url)} data-test-id='siteName'>{siteName}</span>
+            <span className={css(styles.siteData__anchor__url)} data-test-id='siteName'>{siteName}</span>
           </a>
         </div>,
         value: publisherKey
@@ -184,7 +184,7 @@ class LedgerTable extends ImmutableComponent {
             small
             disabled
             checkedOn
-            switchClassName={css(styles.switchControl_center)}
+            customWrapperClassName={css(styles.switchControl_center)}
             indicatorClassName={css(styles.pinnedToggle)}
             testId='pinnedDisabled'
             onClick={() => {}}
@@ -276,16 +276,17 @@ class LedgerTable extends ImmutableComponent {
     return <section data-test-id='ledgerTable'>
       <div className={css(styles.hideExcludedSites)}>
         <div className={css(gridStyles.row1col1)} />
-        <div className={css(gridStyles.row1col2)}>
-          <SettingCheckbox
-            small
-            dataL10nId='hideExcluded'
-            prefKey={settings.PAYMENTS_SITES_HIDE_EXCLUDED}
-            settings={this.props.settings}
-            onChangeSetting={this.props.onChangeSetting}
-            switchClassName={css(styles.hideExcludedSites__switchWrap__switchControl)}
-          />
-        </div>
+        <SettingCheckbox
+          small
+          dataL10nId='hideExcluded'
+          prefKey={settings.PAYMENTS_SITES_HIDE_EXCLUDED}
+          settings={this.props.settings}
+          onChangeSetting={this.props.onChangeSetting}
+          switchClassName={css(
+            gridStyles.row1col2,
+            styles.hideExcludedSites__settingCheckbox
+          )}
+        />
       </div>
       <SortableTable
         fillAvailable
@@ -401,19 +402,20 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
 
-  siteData__icon_favicon: {
+  siteData__anchor__icon_favicon: {
     width: globalStyles.spacing.iconSize,
     height: globalStyles.spacing.iconSize
   },
 
-  siteData__icon_default: {
+  siteData__anchor__icon_default: {
     fontSize: '15px',
     width: globalStyles.spacing.iconSize,
     textAlign: 'center'
   },
 
-  siteData__url: {
-    padding: '0 6px'
+  siteData__anchor__url: {
+    // See table__tbody__tr_smallRow__td on sortableTable.js
+    paddingLeft: globalStyles.sortableTable.cell.small.padding
   },
 
   switchControl_center: {
@@ -424,12 +426,14 @@ const styles = StyleSheet.create({
     display: 'grid',
     alignItems: 'center',
     gridTemplateColumns: '2fr 1fr',
-    width: `calc(100% - calc(${globalStyles.spacing.panelPadding} / 2))`,
+    width: '100%',
     marginBottom: globalStyles.spacing.panelMargin
   },
 
-  hideExcludedSites__switchWrap__switchControl: {
-    padding: '0 5px 0 0'
+  hideExcludedSites__settingCheckbox: {
+    padding: '0 !important',
+    position: 'relative',
+    whiteSpace: 'nowrap' // Disable line wrap
   },
 
   alignRight: {
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 2e2aafebdb0..09faafea2d4 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -118,12 +118,9 @@ class PaymentsTab extends ImmutableComponent {
     const inTransition = this.props.ledgerData.getIn(['migration', 'btc2BatTransitionPending']) === true
     const enableSettings = enabled && !inTransition
 
-    return <div className={cx({
-      paymentsContainer: true,
-      [css(styles.paymentsContainer)]: true
-    })} data-test-id='paymentsContainer'>
+    return <div className={css(styles.payments)} data-test-id='paymentsContainer'>
       {
-      this.enabled && this.props.addFundsOverlayVisible
+        this.enabled && this.props.addFundsOverlayVisible
         ? <ModalOverlay
           title={'addFundsHeader'}
           subTitle={'balance'}
@@ -136,23 +133,23 @@ class PaymentsTab extends ImmutableComponent {
       }
       {
         this.enabled && this.props.paymentHistoryOverlayVisible
-          ? <ModalOverlay
-            title={'paymentHistoryTitle'}
-            customDialogClasses={'paymentHistory'}
-            customDialogHeaderClasses={css(styles.paymentHistoryOverlay__header)}
-            customDialogBodyClasses={css(styles.paymentHistoryOverlay__body)}
-            customDialogFooterClasses={css(styles.paymentHistoryOverlay__footer)}
-            customTitleClasses={css(styles.paymentHistoryOverlay__title)}
-            content={<HistoryContent
-              ledgerData={this.props.ledgerData}
-            />}
-            footer={<HistoryFooter
-              ledgerData={this.props.ledgerData}
-              hideOverlay={this.props.hideOverlay}
-            />}
-            onHide={this.props.hideOverlay.bind(this, 'paymentHistory')}
-          />
-          : null
+        ? <ModalOverlay
+          title={'paymentHistoryTitle'}
+          customDialogClasses={'paymentHistory'}
+          customDialogHeaderClasses={css(styles.payments__history__header)}
+          customDialogBodyClasses={css(styles.payments__history__body)}
+          customDialogFooterClasses={css(styles.payments__history__footer)}
+          customTitleClasses={css(styles.payments__history__title)}
+          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
@@ -181,7 +178,8 @@ class PaymentsTab extends ImmutableComponent {
           footer={<LedgerBackupFooter
             hideOverlay={this.props.hideOverlay}
           />}
-          onHide={this.props.hideOverlay.bind(this, 'ledgerBackup')} />
+          onHide={this.props.hideOverlay.bind(this, 'ledgerBackup')}
+        />
         : null
       }
       {
@@ -202,36 +200,42 @@ class PaymentsTab extends ImmutableComponent {
       }
 
       <SectionTitleWrapper>
-        <section className={css(styles.titleWrapper)}>
+        <section className={css(styles.payments__title)}>
           { /* Note: This div cannot be replaced with SectionTitleLabelWrapper */ }
           <div className={css(
             gridStyles.row1col1,
-            styles.titleWrapper__title,
             sectionTitleStyles.beta
           )}>
-            <img className={css(styles.titleWrapper__logo)} src={batIcon} />
+            <img className={css(styles.payments__title__icon_bat)} src={batIcon} />
             <AboutPageSectionTitle>Brave Payments</AboutPageSectionTitle>
             <SectionLabelTitle>beta</SectionLabelTitle>
           </div>
 
           <div data-test-id='enablePaymentsSwitch' className={css(
             gridStyles.row1col2,
-            styles.titleWrapper__switchWrap
+            styles.payments__title__switch
           )}>
             <SettingCheckbox
-              dataL10nId='on'
               dataL10nIdLeft='off'
+              dataL10nId='on'
               prefKey={settings.PAYMENTS_ENABLED}
               settings={this.props.settings}
               onChangeSetting={this.props.onChangeSetting}
-              switchClassName={css(styles.switchWrap__switchControl)}
-              leftLabelClassName={css(styles.switchWrap__label, styles.switchWrap__label_left)}
-              rightLabelClassName={css(styles.switchWrap__label, styles.switchWrap__label_right)}
+              switchClassName={css(styles.switch__switchControl)}
+              leftLabelClassName={css(
+                styles.switch__label,
+                styles.switch__label_left,
+                styles.switch__label_left_off
+              )}
+              rightLabelClassName={css(
+                styles.switch__label,
+                styles.switch__label_right
+              )}
             />
             <a className={cx({
               fa: true,
               'fa-question-circle': true,
-              [css(styles.autoSuggestSwitch__moreInfo, styles.autoSuggestSwitch__moreInfoBtnSuggest)]: true
+              [css(styles.payments__title__switch__moreInfo)]: true
             })}
               href='https://brave.com/Payments_FAQ.html'
               data-l10n-id='paymentsFAQLink'
@@ -242,36 +246,32 @@ class PaymentsTab extends ImmutableComponent {
           <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'
-                      prefKey={settings.PAYMENTS_SITES_AUTO_SUGGEST}
-                      settings={this.props.settings}
-                      disabled={!enabled}
-                      onChangeSetting={this.props.onChangeSetting}
-                      switchClassName={css(styles.switchWrap__switchControl)}
-                    />
-                  </div>
-                </div>
-                <div className={css(styles.switchWrap__mainIconsRight)}>
+              ? <div className={css(styles.payments__title__actions)}>
+                <SettingCheckbox
+                  dataL10nId='autoSuggestSites'
+                  prefKey={settings.PAYMENTS_SITES_AUTO_SUGGEST}
+                  settings={this.props.settings}
+                  disabled={!enabled}
+                  onChangeSetting={this.props.onChangeSetting}
+                  switchClassName={css(
+                    styles.payments__title__actions__autoSuggest,
+                    styles.switch__switchControl
+                  )}
+                />
+                <div className={css(styles.payments__title__actions__icons)}>
                   <a className={css(
-                    styles.switchWrap__mainIcons,
-                    styles.mainIcons__historyIcon,
-                    !this.hasWalletTransaction && styles.mainIcons__historyDisabled
+                    styles.payments__title__actions__icons__icon,
+                    styles.payments__title__actions__icons__icon_history,
+                    !this.hasWalletTransaction && styles.payments__title__actions__icons__icon_disabled
                   )}
                     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,
-                    !enableSettings && styles.mainIcons__settingsIconDisabled
+                    styles.payments__title__actions__icons__icon,
+                    styles.payments__title__actions__icons__icon_settings,
+                    !enableSettings && styles.payments__title__actions__icons__icon_disabled
                   )}
                     data-test-id={!enableSettings ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
                     data-l10n-id='advancedSettingsIcon'
@@ -286,13 +286,13 @@ class PaymentsTab extends ImmutableComponent {
       </SectionTitleWrapper>
       {
         this.enabled
-          ? <EnabledContent settings={this.props.settings}
-            onChangeSetting={this.props.onChangeSetting}
-            ledgerData={this.props.ledgerData}
-            showOverlay={this.props.showOverlay}
-            siteSettings={this.props.siteSettings}
-          />
-          : <DisabledContent />
+        ? <EnabledContent settings={this.props.settings}
+          onChangeSetting={this.props.onChangeSetting}
+          ledgerData={this.props.ledgerData}
+          showOverlay={this.props.showOverlay}
+          siteSettings={this.props.siteSettings}
+        />
+        : <DisabledContent />
       }
     </div>
   }
@@ -301,7 +301,10 @@ class PaymentsTab extends ImmutableComponent {
 const gridStyles = StyleSheet.create({
   row1col1: {
     gridRow: 1,
-    gridColumn: 1
+    gridColumn: 1,
+
+    // Ensure the spacing between switch__label on a small viewport
+    paddingRight: globalStyles.spacing.panelPadding
   },
 
   row1col2: {
@@ -316,89 +319,90 @@ const gridStyles = StyleSheet.create({
 })
 
 const styles = StyleSheet.create({
-  flexAlignCenter: {
-    display: 'flex',
-    alignItems: 'center'
+  payments: {
+    width: '805px',
+
+    // cf: padding of .prefTabContainer
+    paddingBottom: '40px'
   },
 
-  paymentsContainer: {
-    position: 'relative',
-    overflowX: 'hidden',
-    width: '805px',
-    paddingBottom: '40px' // cf: padding of .prefTabContainer
+  payments__history__header: {
+    paddingLeft: `${paymentStylesVariables.spacing.paymentHistoryTablePadding} !important`
   },
 
-  titleWrapper: {
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr 1fr',
-    alignItems: 'center',
-    width: '100%',
-    padding: `0 ${globalStyles.spacing.panelPadding}`
+  payments__history__body: {
+    height: '300px',
+    overflowY: 'auto',
+    padding: '0 !important'
   },
 
-  titleWrapper__title: {
-    position: 'relative',
-    right: globalStyles.spacing.panelPadding
+  payments__history__footer: {
+    display: 'block !important',
+    paddingLeft: `${paymentStylesVariables.spacing.paymentHistoryTablePadding} !important`,
+    paddingTop: '10px !important',
+    paddingBottom: '10px !important'
   },
 
-  titleWrapper__logo: {
-    width: '40px'
+  payments__history__title: {
+    // TODO: refactor preferences.less to remove !important
+    color: `${globalStyles.color.braveMediumOrange} !important`,
+    textIndent: '0 !important'
   },
 
-  titleWrapper__switchWrap: {
-    display: 'flex',
+  payments__title: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr 1fr',
     alignItems: 'center',
     width: '100%'
   },
 
-  switchWrap__label: {
-    color: '#999',
-    fontWeight: 'bold'
+  payments__title__icon_bat: {
+    width: globalStyles.spacing.batIconWidth
   },
 
-  switchWrap__label_left: {
-    paddingRight: '.75ch !important'
+  payments__title__switch: {
+    display: 'flex',
+    alignItems: 'center'
   },
 
-  switchWrap__label_right: {
-    // TODO: Add 'position: relative' and 'bottom: 1px' for macOS (en_US) only.
-    paddingLeft: '.75ch !important',
-    color: globalStyles.color.braveOrange
+  payments__title__switch__moreInfo: {
+    color: globalStyles.color.commonTextColor,
+    position: 'relative',
+    left: '3px',
+    cursor: 'pointer',
+    fontSize: globalStyles.payments.fontSize.regular,
+
+    // TODO: refactor preferences.less to remove !important
+    ':hover': {
+      textDecoration: 'none !important'
+    }
   },
 
-  switchWrap__right: {
+  payments__title__actions: {
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    width: `calc(100% + ${globalStyles.spacing.panelPadding})`
+    justifyContent: 'space-between'
   },
 
-  // Auto suggest switch
-  switchWrap__autoSuggestSwitch: {
+  payments__title__actions__autoSuggest: {
+    fontSize: globalStyles.fontSize.settingItemSubtext,
+    display: 'flex',
+    alignItems: 'center',
+
     // TODO: Refactor switchControls.less
     position: 'relative',
-    right: '5px',
     top: '1px'
   },
-  autoSuggestSwitch__subtext: {
-    fontSize: globalStyles.fontSize.settingItemSubtext
-  },
-  autoSuggestSwitch__moreInfo: {
-    color: globalStyles.color.commonTextColor
-  },
-  autoSuggestSwitch__moreInfoBtnSuggest: {
-    // TODO: refactor preferences.less to remove !important
-    ':hover': {
-      textDecoration: 'none !important'
-    }
-  },
 
-  // History and settings icons
-  switchWrap__mainIconsRight: {
+  payments__title__actions__icons: {
     position: 'relative',
-    top: '3.5px'
+    top: '3.5px',
+
+    // See: #11580
+    whiteSpace: 'nowrap'
   },
-  switchWrap__mainIcons: {
+
+  payments__title__actions__icons__icon: {
     backgroundColor: globalStyles.color.braveOrange,
     width: '25px',
     height: '26px',
@@ -409,15 +413,17 @@ const styles = StyleSheet.create({
       backgroundColor: globalStyles.color.braveDarkOrange
     }
   },
-  mainIcons__historyIcon: {
+
+  payments__title__actions__icons__icon_history: {
     right: '5px',
-    WebkitMaskImage: `url(${historyIcon})`,
+    WebkitMaskImage: `url(${historyIcon})`
+  },
 
-    ':hover': {
-      backgroundColor: globalStyles.color.braveDarkOrange
-    }
+  payments__title__actions__icons__icon_settings: {
+    WebkitMaskImage: `url(${settingsIcon})`
   },
-  mainIcons__historyDisabled: {
+
+  payments__title__actions__icons__icon_disabled: {
     backgroundColor: globalStyles.color.chromeTertiary,
     cursor: 'default',
 
@@ -425,42 +431,29 @@ const styles = StyleSheet.create({
       backgroundColor: globalStyles.color.chromeTertiary
     }
   },
-  mainIcons__settingsIcon: {
-    WebkitMaskImage: `url(${settingsIcon})`,
 
-    ':hover': {
-      backgroundColor: globalStyles.color.braveDarkOrange
-    }
+  switch__switchControl: {
+    // TODO: Refactor switchControls.less
+    padding: '0 !important'
   },
-  mainIcons__settingsIconDisabled: {
-    backgroundColor: globalStyles.color.chromeTertiary,
-    cursor: 'default',
 
-    ':hover': {
-      backgroundColor: globalStyles.color.chromeTertiary
-    }
+  switch__label: {
+    fontWeight: 'bold',
+    color: globalStyles.color.braveOrange
   },
 
-  paymentHistoryOverlay__header: {
-    paddingLeft: `${paymentStylesVariables.spacing.paymentHistoryTablePadding} !important`
-  },
-  paymentHistoryOverlay__body: {
-    background: '#fff',
-    height: '300px',
-    overflowY: 'auto',
-    padding: '0 !important'
+  switch__label_left: {
+    paddingRight: '.75ch !important'
   },
-  paymentHistoryOverlay__footer: {
-    display: 'block !important',
-    paddingLeft: `${paymentStylesVariables.spacing.paymentHistoryTablePadding} !important`,
-    paddingTop: '10px !important',
-    paddingBottom: '10px !important'
+
+  switch__label_left_off: {
+    color: '#999'
   },
-  paymentHistoryOverlay__title: {
-    // TODO: refactor preferences.less to remove !important
 
-    color: `${globalStyles.color.braveMediumOrange} !important`,
-    textIndent: '0 !important'
+  switch__label_right: {
+    // TODO: Add 'position: relative' and 'bottom: 1px' for macOS (en_US) only.
+    paddingLeft: '.75ch !important',
+    color: globalStyles.color.braveOrange
   }
 })
 
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index fc95d8c63ba..68ea04f0dfc 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -176,7 +176,8 @@ const globalStyles = {
     panelMargin: '15px',
     panelItemMargin: '12px',
     panelPadding: '18px',
-    addFundsDialogMinHeight: '250px'
+    addFundsDialogMinHeight: '250px',
+    batIconWidth: '40px'
   },
   shadow: {
     switchShadow: 'inset 0 1px 4px rgba(0, 0, 0, 0.35)',