diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index 015fd191dd5..4b6b0cffe6d 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -49,18 +49,19 @@ syncReset=Reset Sync
 syncResetMessageWhat=Resetting Sync clears data stored on the Sync server and resets this device's Sync settings.
 syncResetMessageWhatNot=You will keep any bookmarks, history and other browsing data currently on this device.
 syncResetMessageOtherDevices=If you've synced other devices, they will continue to sync their future browsing data. If you don't want that, you should reset Sync on those devices as well.
-syncStart=I am new to sync
-syncAdd=I have an existing sync code
+syncStart=I am new to Sync
+syncAdd=I have an existing Sync code
 syncNewDevice1=Open Brave on your new device and go to Preferences > Sync > 'I have an existing synced device'.
 syncNewDevice2=If it asks you to scan a QR code, click the button below and point your camera at the QR code.
+syncQRImg.title=Brave sync QR code
 syncShowQR=Show secret QR code. (Do not share!)
 syncHideQR=Hide QR code
 syncNewDevice3=If asks you to enter code words, type in the words below.
 syncShowPassphrase=Show secret code words. (Do not share!)
 syncHidePassphrase=Hide code words
 syncDeviceNameInput=Enter an optional name for this device:
-syncCreate=Set up sync
-syncEnterPassphrase=Enter your sync code words:
+syncCreate=Set up Sync
+syncEnterPassphrase=Enter your Sync code words:
 accountBalance=account balance
 accountBalanceConnectionError=Please check your Internet connection.
 monthlyBudget=monthly budget
diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
index a364c0192d8..1102ec16eb9 100644
--- a/app/renderer/components/preferences/payment/advancedSettings.js
+++ b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -91,7 +91,7 @@ class AdvancedSettingsContent extends ImmutableComponent {
 
 class AdvancedSettingsFooter extends ImmutableComponent {
   render () {
-    return <div className={css(paymentCommon.advanceFooter)}>
+    return <div className={css(commonStyles.modalOverlay__footer, commonStyles.modalOverlay__footerButton)}>
       <Button l10nId='backupLedger'
         className={css(commonStyles.primaryButton)}
         onClick={this.props.showOverlay.bind(this, 'ledgerBackup')}
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index b8300a243b2..0866a6661f6 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -241,8 +241,8 @@ const styles = StyleSheet.create({
   walletBar: {
     background: globalStyles.color.lightGray,
     borderRadius: globalStyles.radius.borderRadiusUIbox,
-    padding: paymentStyles.padding.bar,
-    margin: `${paymentStyles.margin.bar} 0`
+    padding: globalStyles.spacing.panelPadding,
+    margin: `${globalStyles.spacing.panelMargin} 0`
   },
 
   listContainer: {
@@ -266,7 +266,7 @@ const styles = StyleSheet.create({
   },
 
   accountBalanceError: {
-    marginTop: paymentStyles.margin.barItem
+    marginTop: globalStyles.spacing.panelItemMargin
   },
 
   settingsListContainer: {
diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/app/renderer/components/preferences/payment/ledgerBackup.js
index c8e8686ddb8..197a2a27868 100644
--- a/app/renderer/components/preferences/payment/ledgerBackup.js
+++ b/app/renderer/components/preferences/payment/ledgerBackup.js
@@ -74,7 +74,7 @@ class LedgerBackupFooter extends ImmutableComponent {
   }
 
   render () {
-    return <div className={css(paymentCommon.advanceFooter)}>
+    return <div className={css(commonStyles.modalOverlay__footer, commonStyles.modalOverlay__footerButton)}>
       <Button l10nId='printKeys'
         className={css(commonStyles.primaryButton)}
         onClick={this.printKeys}
diff --git a/app/renderer/components/preferences/payment/ledgerRecovery.js b/app/renderer/components/preferences/payment/ledgerRecovery.js
index 1ef9e6e1f55..37876acbf43 100644
--- a/app/renderer/components/preferences/payment/ledgerRecovery.js
+++ b/app/renderer/components/preferences/payment/ledgerRecovery.js
@@ -125,7 +125,7 @@ class LedgerRecoveryFooter extends ImmutableComponent {
   }
 
   render () {
-    return <div className={css(paymentCommon.advanceFooter)}>
+    return <div className={css(commonStyles.modalOverlay__footer, commonStyles.modalOverlay__footerButton)}>
       <div className={css(styles.recoveryFooterButtons)}>
         <Button l10nId='recover'
           className={css(commonStyles.primaryButton)}
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index ed5d1f53b07..f42380bee3f 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -30,7 +30,7 @@ const {LedgerRecoveryContent, LedgerRecoveryFooter} = require('./payment/ledgerR
 // style
 const globalStyles = require('../styles/global')
 const {paymentStyles, paymentStylesVariables} = require('../styles/payment')
-const settingIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg')
+const settingsIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg')
 const historyIcon = require('../../../extensions/brave/img/ledger/icon_history.svg')
 
 // other
@@ -238,8 +238,8 @@ class PaymentsTab extends ImmutableComponent {
                   data-l10n-id='advancedSettingsIcon'
                   className={css(
                     styles.switchWrap__mainIcons,
-                    styles.mainIcons__settingIcon,
-                    !enabled && styles.mainIcons__settingIconDisabled
+                    styles.mainIcons__settingsIcon,
+                    !enabled && styles.mainIcons__settingsIconDisabled
                   )}
                   onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
                 />
@@ -312,6 +312,7 @@ const styles = StyleSheet.create({
     position: 'relative'
   },
 
+  // Auto suggest switch
   switchWrap__autoSuggestSwitch: {
     // TODO: Refactor switchControls.less
     position: 'relative',
@@ -336,6 +337,7 @@ const styles = StyleSheet.create({
     }
   },
 
+  // History and settings icons
   switchWrap__mainIconsRight: {
     position: 'relative',
     right: '12px',
@@ -352,7 +354,6 @@ const styles = StyleSheet.create({
       backgroundColor: globalStyles.color.braveDarkOrange
     }
   },
-
   mainIcons__historyIcon: {
     right: '5px',
     WebkitMaskImage: `url(${historyIcon})`,
@@ -369,14 +370,14 @@ const styles = StyleSheet.create({
       backgroundColor: globalStyles.color.chromeTertiary
     }
   },
-  mainIcons__settingIcon: {
-    WebkitMaskImage: `url(${settingIcon})`,
+  mainIcons__settingsIcon: {
+    WebkitMaskImage: `url(${settingsIcon})`,
 
     ':hover': {
       backgroundColor: globalStyles.color.braveDarkOrange
     }
   },
-  mainIcons__settingIconDisabled: {
+  mainIcons__settingsIconDisabled: {
     backgroundColor: globalStyles.color.chromeTertiary,
     cursor: 'default',
 
diff --git a/app/renderer/components/preferences/syncTab.js b/app/renderer/components/preferences/syncTab.js
index b4c20d7d130..fd2f1dd5095 100644
--- a/app/renderer/components/preferences/syncTab.js
+++ b/app/renderer/components/preferences/syncTab.js
@@ -25,6 +25,12 @@ const aboutActions = require('../../../../js/about/aboutActions')
 const getSetting = require('../../../../js/settings').getSetting
 const settings = require('../../../../js/constants/settings')
 
+const cx = require('../../../../js/lib/classSet')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('../styles/commonStyles')
+const globalStyles = require('../styles/global')
+
 class SyncTab extends ImmutableComponent {
   constructor () {
     super()
@@ -48,24 +54,36 @@ class SyncTab extends ImmutableComponent {
   }
 
   get errorContent () {
-    return <div className='errorContainer'>
-      <div className='setupError'>{this.setupError}</div>
-      <Button l10nId='syncRetryButton' className='primaryButton' onClick={this.retry.bind(this)} />
-    </div>
+    return <section className={css(styles.settingsListContainerMargin__bottom)}>
+      <div className={css(styles.errorContent__setupError)} data-test-id='syncSetupError'>{this.setupError}</div>
+      <Button className='primaryButton'
+        l10nId='syncRetryButton'
+        testId='syncRetryButton'
+        onClick={this.retry.bind(this)}
+      />
+    </section>
   }
 
   get clearDataContent () {
-    return <div className='syncClearData'>
+    return <section className={css(styles.settingsListContainerMargin__bottom)}>
       <DefaultSectionTitle data-l10n-id='syncClearData' />
       {
         this.enabled
-          ? <button data-l10n-id='syncResetButton' className='linkButton' onClick={this.props.showOverlay.bind(this, 'syncReset')} />
+          ? <Button className='primaryButton'
+            l10nId='syncResetButton'
+            testId='clearDataButton'
+            onClick={this.props.showOverlay.bind(this, 'syncReset')}
+          />
           : <div>
-            <button disabled data-l10n-id='syncResetButton' className='linkButton' />
+            <Button className='primaryButton'
+              disabled
+              l10nId='syncResetButton'
+              testId='clearDataButton'
+            />
             <div data-l10n-id='syncResetDataDisabled' className='settingsListTitle' />
           </div>
       }
-    </div>
+    </section>
   }
 
   get setupContent () {
@@ -73,27 +91,43 @@ class SyncTab extends ImmutableComponent {
       return null
     }
     // displayed before a sync userId has been created
-    return <div className='setupContent'>
-      <Button l10nId='syncStart' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'syncStart')} />
-      <Button l10nId='syncAdd' className='whiteButton' onClick={this.props.showOverlay.bind(this, 'syncAdd')} />
+    return <div className={css(styles.setupContent)}>
+      <Button className='primaryButton'
+        l10nId='syncStart'
+        testId='syncStartButton'
+        onClick={this.props.showOverlay.bind(this, 'syncStart')}
+      />
+      <Button className='whiteButton'
+        l10nId='syncAdd'
+        testId='syncAddButton'
+        onClick={this.props.showOverlay.bind(this, 'syncAdd')}
+      />
     </div>
   }
 
   get postSetupContent () {
     return <SettingsList>
-      <div className='device'>
-        <SettingCheckbox dataL10nId='syncEnable' id='syncEnableSwitch' prefKey={settings.SYNC_ENABLED} settings={this.props.settings} onChangeSetting={this.toggleSync} />
-        <div>
-          <span className='syncDeviceLabel' data-l10n-id='syncDeviceName' />
-          <div className='deviceName'>
+      <div className={css(styles.device__box)}>
+        <SettingCheckbox
+          className={css(styles.device__item)}
+          dataL10nId='syncEnable'
+          prefKey={settings.SYNC_ENABLED}
+          settings={this.props.settings}
+          onChangeSetting={this.toggleSync}
+        />
+        <div className={css(styles.device__item)}>
+          <span className={css(styles.device__syncDeviceLabel)} data-l10n-id='syncDeviceName' />
+          <div className={css(styles.device__deviceName)}>
             {getSetting(settings.SYNC_DEVICE_NAME, this.props.settings)}
           </div>
         </div>
       </div>
       {this.enabled ? this.devicesContent : null}
-      <SettingItem>
-        <Button l10nId='syncNewDevice' className='primaryButton' onClick={this.props.showOverlay.bind(this, 'syncNewDevice')} />
-      </SettingItem>
+      <Button className='primaryButton'
+        l10nId='syncNewDevice'
+        testId='syncNewDeviceButton'
+        onClick={this.props.showOverlay.bind(this, 'syncNewDevice')}
+      />
     </SettingsList>
   }
 
@@ -117,14 +151,15 @@ class SyncTab extends ImmutableComponent {
   }
 
   get devicesContent () {
-    return <div className='devices'>
+    return <div className={css(styles.settingsListContainerMargin__top)}>
       <DefaultSectionTitle data-l10n-id='syncDevices' data-test-id='syncDevices' />
       <SortableTable
         headings={['id', 'syncDeviceName', 'syncDeviceLastActive']}
         defaultHeading='syncDeviceLastActive'
         defaultHeadingSortOrder='desc'
         rows={this.devicesTableRows}
-        tableClassNames='devicesList'
+        customCellClasses={css(styles.devices__devicesListCell)}
+        tableClassNames={css(styles.devices__devicesList)}
       />
     </div>
   }
@@ -135,10 +170,36 @@ class SyncTab extends ImmutableComponent {
     }
     return this.props.syncQRVisible
       ? <div>
-        <div><Button l10nId='syncHideQR' className='whiteButton wideButton syncToggleButton' onClick={this.props.hideQR} /></div>
-        <img id='syncQR' title='Brave sync QR code' src={this.props.syncData.get('seedQr')} />
+        <ul className={css(styles.syncOverlayBody__listWrapper)}>
+          <li className={css(
+            styles.syncOverlayBody__listItem,
+            commonStyles.noMarginLeft
+          )}>
+            <Button className='whiteButton'
+              l10nId='syncHideQR'
+              testId='syncHideQRButton'
+              onClick={this.props.hideQR}
+            />
+          </li>
+        </ul>
+        <img className={css(styles.syncOverlayBody__syncQRImg)}
+          src={this.props.syncData.get('seedQr')}
+          data-l10n-id='syncQRImg'
+          data-test-id='syncQRImg'
+        />
       </div>
-    : <Button l10nId='syncShowQR' className='whiteButton syncToggleButton' onClick={this.props.showQR} />
+    : <ul className={css(styles.syncOverlayBody__listWrapper)}>
+      <li className={css(
+        styles.syncOverlayBody__listItem,
+        commonStyles.noMarginLeft
+      )}>
+        <Button className='whiteButton'
+          l10nId='syncShowQR'
+          testId='syncShowQRButton'
+          onClick={this.props.showQR}
+        />
+      </li>
+    </ul>
   }
 
   get passphraseContent () {
@@ -154,24 +215,65 @@ class SyncTab extends ImmutableComponent {
       passphrase.slice(12, 16).join(' ')
     ]
     return this.props.syncPassphraseVisible
-      ? <div>
-        <Button l10nId='syncHidePassphrase' className='whiteButton wideButton syncToggleButton' onClick={this.props.hidePassphrase} />
-        <pre id='syncPassphrase'>{words.join('\n')}</pre>
-      </div>
-      : <Button l10nId='syncShowPassphrase' className='whiteButton syncToggleButton' onClick={this.props.showPassphrase} />
+      ? <ul className={css(styles.syncOverlayBody__listWrapper)}>
+        <li className={css(
+          styles.syncOverlayBody__listItem,
+          commonStyles.noMarginBottom,
+          commonStyles.noMarginLeft
+        )}>
+          <Button className='whiteButton'
+            l10nId='syncHidePassphrase'
+            testId='syncHidePassphraseButton'
+            onClick={this.props.hidePassphrase}
+          />
+          <pre data-test-id='syncPassphrase'
+            className={css(
+              styles.passphrase,
+              styles.listItem__passphrase,
+              commonStyles.noMarginBottom
+            )}>{words.join('\n')}</pre>
+        </li>
+      </ul>
+      : <ul className={css(styles.syncOverlayBody__listWrapper)}>
+        <li className={css(
+          styles.syncOverlayBody__listItem,
+          commonStyles.noMarginBottom,
+          commonStyles.noMarginLeft
+        )}>
+          <Button className='whiteButton'
+            l10nId='syncShowPassphrase'
+            testId='syncShowPassphraseButton'
+            onClick={this.props.showPassphrase}
+          />
+        </li>
+      </ul>
   }
 
   get overlayContent () {
     return <div className='syncOverlay'>
-      <div>
+      <div className={css(styles.syncOverlayBody__wrapper)}>
         <ol>
-          <li data-l10n-id='syncNewDevice1' />
-          <li data-l10n-id='syncNewDevice2' />
-          {this.qrcodeContent}
-          <li data-l10n-id='syncNewDevice3' />
-          {this.passphraseContent}
+          <li className={css(styles.syncOverlayBody__listItem, commonStyles.noMarginTop)} data-l10n-id='syncNewDevice1' />
+          <li className={css(styles.syncOverlayBody__listItem)}>
+            <div data-l10n-id='syncNewDevice2' />
+            {this.qrcodeContent}
+          </li>
+          <li className={css(styles.syncOverlayBody__listItem)}>
+            <div data-l10n-id='syncNewDevice3' />
+            {this.passphraseContent}
+          </li>
         </ol>
       </div>
+      <div className={css(
+        commonStyles.modalOverlay__footer,
+        commonStyles.modalOverlay__footerButton
+      )}>
+        <Button className='whiteButton'
+          l10nId='done'
+          testId='doneButton'
+          onClick={this.props.hideOverlay.bind(this, 'syncNewDevice')}
+        />
+      </div>
     </div>
   }
 
@@ -189,62 +291,111 @@ class SyncTab extends ImmutableComponent {
 
   get deviceNameInputContent () {
     return <SettingItem>
-      <span data-l10n-id='syncDeviceNameInput' />
-      <input className='deviceNameInput formControl' spellCheck='false'
-        ref={(node) => { this.deviceNameInput = node }}
-        placeholder={this.defaultDeviceName} />
+      <div className={css(styles.syncOverlayBody__label)} data-l10n-id='syncDeviceNameInput' />
+      <div>
+        <input className={css(
+          commonStyles.formControl,
+          commonStyles.textbox,
+          commonStyles.textbox__outlineable,
+          commonStyles.textbox__isSettings
+        )}
+          spellCheck='false'
+          ref={(node) => { this.deviceNameInput = node }}
+          placeholder={this.defaultDeviceName} />
+      </div>
     </SettingItem>
   }
 
-  get addOverlayContent () {
-    return <div className='syncOverlay'>
-      <SettingsList>
-        <SettingItem>
-          <span data-l10n-id='syncEnterPassphrase' />
-          <textarea spellCheck='false'
-            ref={(node) => { this.passphraseInput = node }}
-            onChange={this.enableRestore}
-            className='form-control' />
-        </SettingItem>
+  get startOverlayContent () {
+    return <div className={css(styles.syncOverlayBody__wrapper)}>
+      <div className={css(styles.syncOverlayBody__formBottomMargin)}>
         {this.deviceNameInputContent}
-      </SettingsList>
+      </div>
     </div>
   }
 
-  get addOverlayFooter () {
-    return <Button l10nId='syncCreate' className='primaryButton'
-      onClick={this.onRestore}
-      disabled={this.props.syncRestoreEnabled === false} />
+  get startOverlayFooter () {
+    return <div className={css(
+      commonStyles.modalOverlay__footer,
+      commonStyles.modalOverlay__footerButton
+    )}>
+      <Button className='primaryButton'
+        l10nId='syncCreate'
+        testId='syncCreateButton'
+        onClick={this.onSetup}
+      />
+    </div>
   }
 
-  get resetOverlayContent () {
-    return <div className='syncOverlay'>
-      <ul>
-        <li data-l10n-id='syncResetMessageWhat' />
-        <li data-l10n-id='syncResetMessageWhatNot' />
-        <li data-l10n-id='syncResetMessageOtherDevices' />
-      </ul>
+  get addOverlayContent () {
+    return <div className={css(styles.syncOverlayBody__wrapper)}>
+      <div className={css(styles.syncOverlayBody__label)} data-l10n-id='syncEnterPassphrase' />
+      <div className={css(styles.syncOverlayBody__form)}>
+        <textarea className={css(
+          commonStyles.formControl,
+          commonStyles.textArea,
+          styles.passphrase,
+          styles.textArea__passphrase
+        )}
+          spellCheck='false'
+          ref={(node) => { this.passphraseInput = node }}
+          onChange={this.enableRestore}
+        />
+      </div>
+      <div className={css(styles.syncOverlayBody__formBottomMargin)}>
+        {this.deviceNameInputContent}
+      </div>
     </div>
   }
 
-  get resetOverlayFooter () {
-    return <div className='panel'>
-      <Button l10nId='syncReset' className='primaryButton' onClick={this.onReset} />
-      <Button l10nId='cancel' className='whiteButton' onClick={this.props.hideOverlay.bind(this, 'syncReset')} />
+  get addOverlayFooter () {
+    return <div className={css(
+      commonStyles.modalOverlay__footer,
+      commonStyles.modalOverlay__footerButton
+    )}>
+      <Button className='primaryButton'
+        l10nId='syncCreate'
+        testId='syncCreateButton'
+        onClick={this.onRestore}
+        disabled={this.props.syncRestoreEnabled === false}
+      />
     </div>
   }
 
-  get startOverlayContent () {
-    return <div className='syncOverlay'>
-      <SettingsList>
-        {this.deviceNameInputContent}
-      </SettingsList>
+  get resetOverlayContent () {
+    return <div className={css(styles.syncOverlayBody__wrapper)}>
+      <ul>
+        <li className={css(
+          styles.syncOverlayBody__listItem,
+          commonStyles.noMarginTop
+        )} data-l10n-id='syncResetMessageWhat' />
+        <li className={css(styles.syncOverlayBody__listItem)} data-l10n-id='syncResetMessageWhatNot' />
+        <li className={css(
+          styles.syncOverlayBody__listItem,
+          commonStyles.noMarginBottom
+        )} data-l10n-id='syncResetMessageOtherDevices' />
+      </ul>
     </div>
   }
 
-  get startOverlayFooter () {
-    return <div className='panel'>
-      <Button l10nId='syncCreate' className='primaryButton' onClick={this.onSetup} />
+  get resetOverlayFooter () {
+    return <div className={css(
+      commonStyles.modalOverlay__footer,
+      commonStyles.modalOverlay__footerButton
+    )}>
+      <Button className='whiteButton'
+        l10nId='cancel'
+        testId='cancelButton'
+        onClick={this.props.hideOverlay.bind(this, 'syncReset')}
+      />
+      <Button className={cx({
+        primaryButton: true,
+        [css(styles.marginButton)]: true
+      })}
+        l10nId='syncReset'
+        testId='syncResetButton'
+        onClick={this.onReset}
+      />
     </div>
   }
 
@@ -307,52 +458,99 @@ class SyncTab extends ImmutableComponent {
     return <div className='syncContainer'>
       {
       this.isSetup && this.props.syncNewDeviceOverlayVisible
-        ? <ModalOverlay title={'syncNewDevice'} content={this.overlayContent} onHide={this.props.hideOverlay.bind(this, 'syncNewDevice')} />
+        ? <ModalOverlay
+          title={'syncNewDevice'}
+          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
+          customTitleClasses={css(commonStyles.modalOverlay__title)}
+          content={this.overlayContent}
+          onHide={this.props.hideOverlay.bind(this, 'syncNewDevice')} />
         : null
       }
       {
       !this.isSetup && this.props.syncStartOverlayVisible
-        ? <ModalOverlay title={'syncStart'} content={this.startOverlayContent} footer={this.startOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncStart')} />
+        ? <ModalOverlay
+          title={'syncStart'}
+          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
+          customTitleClasses={css(commonStyles.modalOverlay__title)}
+          content={this.startOverlayContent}
+          footer={this.startOverlayFooter}
+          onHide={this.props.hideOverlay.bind(this, 'syncStart')} />
         : null
       }
       {
       !this.isSetup && this.props.syncAddOverlayVisible
-        ? <ModalOverlay title={'syncAdd'} content={this.addOverlayContent} footer={this.addOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncAdd')} />
+        ? <ModalOverlay
+          title={'syncAdd'}
+          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
+          customTitleClasses={css(commonStyles.modalOverlay__title)}
+          content={this.addOverlayContent}
+          footer={this.addOverlayFooter}
+          onHide={this.props.hideOverlay.bind(this, 'syncAdd')} />
         : null
       }
       {
       this.isSetup && this.props.syncResetOverlayVisible
-        ? <ModalOverlay title={'syncReset'} content={this.resetOverlayContent} footer={this.resetOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncReset')} />
+        ? <ModalOverlay
+          title={'syncReset'}
+          customDialogClasses={css(commonStyles.modalOverlay__dialog)}
+          customTitleClasses={css(commonStyles.modalOverlay__title)}
+          content={this.resetOverlayContent}
+          footer={this.resetOverlayFooter}
+          onHide={this.props.hideOverlay.bind(this, 'syncReset')} />
         : null
       }
-      <SectionTitleLabelWrapper>
-        <AboutPageSectionTitle data-l10n-id='syncTitle' />
-        <SectionLabelTitle>beta</SectionLabelTitle>
-      </SectionTitleLabelWrapper>
-      <div className='settingsListContainer'>
-        <span className='settingsListTitle syncTitleMessage' data-l10n-id='syncTitleMessage' />
-        <a href='https://github.com/brave/sync/wiki/Design' target='_blank'>
-          <span className='fa fa-question-circle' />
-        </a>
-        <div className='settingsListTitle syncBetaMessage' data-l10n-id='syncBetaMessage' />
-        {
-          this.setupError
-          ? this.errorContent
-          : this.isSetup
-            ? this.postSetupContent
-            : this.setupContent
-        }
-      </div>
+      <section className={css(styles.settingsListContainerMargin__bottom)}>
+        <SectionTitleLabelWrapper>
+          <AboutPageSectionTitle data-l10n-id='syncTitle' />
+          <SectionLabelTitle>beta</SectionLabelTitle>
+        </SectionTitleLabelWrapper>
+
+        <div className={css(styles.settingsListContainerMargin__bottom)}>
+          <span className='settingsListTitle' data-l10n-id='syncTitleMessage' />
+          <a href='https://github.com/brave/sync/wiki/Design' target='_blank'>
+            <span className={cx({
+              fa: true,
+              'fa-question-circle': true
+            })} />
+          </a>
+          <div className={cx({
+            settingsListTitle: true,
+            [css(styles.subText)]: true
+          })} data-l10n-id='syncBetaMessage' />
+          {
+            this.setupError
+            ? this.errorContent
+            : this.isSetup
+              ? this.postSetupContent
+              : this.setupContent
+          }
+        </div>
+      </section>
       {
         this.isSetup && this.enabled
-          ? <div id='syncData'>
+          ? <section data-test-id='syncDataSection' className={css(styles.settingsListContainerMargin__bottom)}>
             <DefaultSectionTitle data-l10n-id='syncData' />
             <SettingsList dataL10nId='syncDataMessage'>
-              <SettingCheckbox dataL10nId='syncBookmarks' prefKey={settings.SYNC_TYPE_BOOKMARK} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-              <SettingCheckbox dataL10nId='syncSiteSettings' prefKey={settings.SYNC_TYPE_SITE_SETTING} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-              <SettingCheckbox dataL10nId='syncHistory' prefKey={settings.SYNC_TYPE_HISTORY} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+              <SettingCheckbox
+                dataL10nId='syncBookmarks'
+                prefKey={settings.SYNC_TYPE_BOOKMARK}
+                settings={this.props.settings}
+                onChangeSetting={this.props.onChangeSetting}
+              />
+              <SettingCheckbox
+                dataL10nId='syncSiteSettings'
+                prefKey={settings.SYNC_TYPE_SITE_SETTING}
+                settings={this.props.settings}
+                onChangeSetting={this.props.onChangeSetting}
+              />
+              <SettingCheckbox
+                dataL10nId='syncHistory'
+                prefKey={settings.SYNC_TYPE_HISTORY}
+                settings={this.props.settings}
+                onChangeSetting={this.props.onChangeSetting}
+              />
             </SettingsList>
-          </div>
+          </section>
           : null
       }
       {
@@ -364,4 +562,99 @@ class SyncTab extends ImmutableComponent {
   }
 }
 
+const styles = StyleSheet.create({
+  marginButton: {
+    marginLeft: globalStyles.spacing.overlayButtonMargin
+  },
+  settingsListContainerMargin__top: {
+    marginTop: globalStyles.spacing.settingsListContainerMargin
+  },
+  settingsListContainerMargin__bottom: {
+    marginBottom: globalStyles.spacing.settingsListContainerMargin
+  },
+  passphrase: {
+    font: '18px monospace'
+  },
+  subText: {
+    color: globalStyles.color.gray,
+    fontSize: '.9rem',
+    marginTop: '.5rem'
+  },
+
+  setupContent: {
+    marginTop: globalStyles.spacing.dialogInsideMargin
+  },
+  errorContent__setupError: {
+    color: globalStyles.color.braveDarkOrange,
+    fontWeight: 'bold',
+    margin: `calc(${globalStyles.spacing.panelPadding} / 2) 0 ${globalStyles.spacing.dialogInsideMargin}`
+  },
+
+  device__box: {
+    display: 'flex',
+    alignItems: 'center',
+    background: globalStyles.color.lightGray,
+    borderRadius: globalStyles.radius.borderRadiusUIbox,
+    color: globalStyles.color.mediumGray,
+    margin: `${globalStyles.spacing.panelMargin} 0`,
+    padding: globalStyles.spacing.panelPadding,
+    width: '500px'
+  },
+  device__item: {
+    flex: 1
+  },
+  device__syncDeviceLabel: {
+    fontSize: '.9rem'
+  },
+  device__deviceName: {
+    marginTop: `calc(${globalStyles.spacing.panelPadding} / 2)`
+  },
+
+  devices__devicesList: {
+    // TODO: refactor sortableTable to remove !important
+    marginBottom: `${globalStyles.spacing.dialogInsideMargin} !important`,
+    width: '34em !important'
+  },
+  devices__devicesListCell: {
+    padding: '4px 8px'
+  },
+
+  textArea__passphrase: {
+    width: '80%',
+    height: '100px'
+  },
+
+  listItem__passphrase: {
+    margin: `${globalStyles.spacing.dialogInsideMargin} 0`,
+    color: globalStyles.color.braveDarkOrange
+  },
+
+  syncOverlayBody__wrapper: {
+    padding: `${globalStyles.spacing.dialogInsideMargin} 50px`,
+    background: '#fff'
+  },
+  syncOverlayBody__listWrapper: {
+    listStyle: 'none'
+  },
+  syncOverlayBody__listItem: {
+    margin: globalStyles.spacing.dialogInsideMargin
+  },
+
+  syncOverlayBody__syncQRImg: {
+    position: 'relative',
+    right: globalStyles.spacing.dialogInsideMargin
+  },
+  syncOverlayBody__label: {
+    // TODO: refactor preferences.less
+    // See: .settingsList .settingItem > *:not(.switchControl)
+    marginBottom: `${globalStyles.spacing.modalPanelHeaderMarginBottom} !important`
+  },
+  syncOverlayBody__form: {
+    marginBottom: globalStyles.spacing.settingsListContainerMargin
+  },
+  syncOverlayBody__formBottomMargin: {
+    marginBottom: globalStyles.spacing.dialogInsideMargin
+  }
+})
+
 module.exports = SyncTab
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 2f720accfd8..f8793b5e53f 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -34,6 +34,17 @@ const styles = StyleSheet.create({
       outlineWidth: '1px'
     }
   },
+  textbox__isSettings: {
+    width: '280px'
+  },
+
+  // TextArea -- copied from textbox.js
+  textArea: {
+    padding: '5px'
+  },
+  textArea__isDefault: {
+    fontSize: globalStyles.spacing.textAreaFontSize
+  },
 
   // Dialogs
   flyoutDialog: {
@@ -52,6 +63,29 @@ const styles = StyleSheet.create({
     maxHeight: `calc(80vh - ${globalStyles.spacing.downloadsBarHeight})`
   },
 
+  // modalOverlay
+  // TODO: refactor modalOverlay
+  modalOverlay__dialog: {
+    // TODO: refactor preferences.less to remove !important
+    background: `linear-gradient(${globalStyles.color.modalVeryLightGray}, ${globalStyles.color.modalLightGray}) !important`,
+    borderRadius: `${globalStyles.radius.borderRadiusModal} !important`
+  },
+  modalOverlay__title: {
+    marginBottom: 0,
+
+    // TODO: refactor modalOverlay.less to remove !important
+    padding: '25px 0 !important'
+  },
+
+  modalOverlay__footer: {
+    padding: '20px'
+  },
+  modalOverlay__footerButton: {
+    display: 'flex',
+    flexFlow: 'nowrap',
+    justifyContent: 'flex-end'
+  },
+
   // itemList.less
   listItem: {
     cursor: 'default',
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 4acee7ec816..775073f9af2 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -58,6 +58,8 @@ const globalStyles = {
     gray: 'rgb(153, 153, 153)',
     mediumGray: 'rgb(101, 101, 101)',
     darkGray: 'rgb(68, 68, 68)',
+    modalVeryLightGray: 'rgb(247, 247, 247)',
+    modalLightGray: 'rgb(231, 231, 231)',
     white25: 'rgba(255, 255, 255, 0.25)',
     white50: 'rgba(255, 255, 255, 0.5)',
     white100: 'rgba(255, 255, 255, 1)',
@@ -90,6 +92,7 @@ const globalStyles = {
     borderRadiusTabs: '4px',
     borderRadiusURL: '4px',
     borderRadiusUIbox: '8px',
+    borderRadiusModal: '8px',
     bigBorderRadius: '14px',
     switchRadius: '10px',
     carotRadius: '8px'
@@ -140,9 +143,14 @@ const globalStyles = {
     dialogTopOffset: '30px',
     dialogInsideMargin: '18px',
     paymentsMargin: '20px',
-    modalPanelHeaderMarginBottom: '.5em',
-    paddingHorizontal: '30px',
-    privateTabPadding: '40px'
+    privateTabPaddingHorizontal: '30px',
+    privateTabPadding: '40px',
+    settingsListContainerMargin: '2rem',
+    modalPanelHeaderMarginBottom: '.5rem',
+    overlayButtonMargin: '8px',
+    panelMargin: '15px',
+    panelItemMargin: '12px',
+    panelPadding: '18px'
   },
   shadow: {
     switchShadow: 'inset 0 1px 4px rgba(0, 0, 0, 0.35)',
diff --git a/app/renderer/components/styles/payment.js b/app/renderer/components/styles/payment.js
index 83b54186408..427d4744d6b 100644
--- a/app/renderer/components/styles/payment.js
+++ b/app/renderer/components/styles/payment.js
@@ -9,16 +9,18 @@ const paymentStyles = {
   font: {
     regular: '14.5px'
   },
+  width: {
+    tableRow: '235px',
+    tableCell: '265px' // width.tableRow + 30px
+  },
+
+  // Copied to global.js
   margin: {
     bar: '15px',
     barItem: '12px'
   },
   padding: {
     bar: '18px' // margin.barItem * 1.5
-  },
-  width: {
-    tableRow: '235px',
-    tableCell: '265px' // width.tableRow + 30px
   }
 }
 
@@ -41,13 +43,7 @@ const paymentCommon = StyleSheet.create({
     padding: '20px 20px 20px 50px'
   },
   marginButtons: {
-    marginLeft: '8px'
-  },
-  advanceFooter: {
-    padding: '20px',
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-end'
+    marginLeft: globalStyles.spacing.overlayButtonMargin
   }
 })
 
diff --git a/js/about/newprivatetab.js b/js/about/newprivatetab.js
index fc907af84b7..20878a06609 100644
--- a/js/about/newprivatetab.js
+++ b/js/about/newprivatetab.js
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
     display: 'flex',
     alignSelf: 'center',
     maxWidth: '780px',
-    padding: `${globalStyles.spacing.paddingHorizontal} 0`,
+    padding: `${globalStyles.spacing.privateTabPaddingHorizontal} 0`,
 
     [atBreakpoint]: {
       flexDirection: 'column'
diff --git a/js/components/sortableTable.js b/js/components/sortableTable.js
index 27ad94b1e44..8dd3b32bb9c 100644
--- a/js/components/sortableTable.js
+++ b/js/components/sortableTable.js
@@ -360,7 +360,15 @@ class SortableTable extends React.Component {
         const value = typeof item === 'object' ? item.value : item
         const html = typeof item === 'object' ? item.html : item
         const cell = typeof item === 'object' ? item.cell : item
-        return <td className={this.hasColumnClassNames ? this.props.columnClassNames[j] : undefined} data-sort={value} data-td-index={`${j}`}>
+
+        let hasColumnClassNames = (this.hasColumnClassNames ? this.props.columnClassNames[j] : '')
+        let customCellClassesStr = (this.props.customCellClasses ? this.props.customCellClasses : '')
+
+        return <td className={cx({
+          [hasColumnClassNames]: true,
+          [customCellClassesStr]: true
+        })}
+          data-sort={value} data-td-index={`${j}`}>
           {
             cell || (value === true ? '✕' : html)
           }
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 1c6bbbfb61c..3ede8c061e5 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -56,7 +56,7 @@ a {
 }
 
 .settingsListContainer {
-  margin-bottom: 2em;
+  margin-bottom: @settingsListContainerMargin;
 }
 
 .settingsListTitle,
@@ -286,6 +286,7 @@ table.sortableTable {
   }
 
   // This defines the styling of modal dialogs on "Add funds..." and "Advanced Settings..."
+  // TODO: Use modalOverlay in commonStyles.js
   .modal {
     .dialog {
       background: linear-gradient(@modalVeryLightGray, @modalLightGray);
@@ -565,96 +566,3 @@ table.sortableTable {
     cursor: pointer;
   }
 }
-
-.syncContainer {
-  .modal {
-    textarea {
-      width: 80%;
-      height: 100px;
-      font-size: 18px;
-      font-family: monospace;
-    }
-    li {
-      margin: 1em;
-    }
-    .settingsListContainer {
-      margin-bottom: 1.5em;
-    }
-    .dialog-body, .dialog-footer {
-      padding-left: 50px;
-      padding-right: 50px;
-    }
-    .dialog-footer {
-      margin-top: 1.5em;
-      padding-bottom: 2em;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-    }
-  }
-  .browserButton + .browserButton {
-    margin-left: 0.75em;
-  }
-  .setupContent, .setupError {
-    margin: 1em 0;
-  }
-  .setupError {
-    color: red;
-    font-weight: bold;
-  }
-  .deviceNameInput {
-    width: 50%;
-  }
-  .syncBetaMessage {
-    color: grey;
-    margin-top: 8px;
-  }
-  .device {
-    background-color: @lightGray;
-    border-radius: @borderRadiusUIbox;
-    color: @mediumGray;
-    display: table;
-    line-height: 1.8em;
-    margin: 1em 0;
-    padding: 0.5em 1em;
-    width: 32em;
-    & > div, .settingItem {
-      display: table-cell;
-      vertical-align: middle;
-    }
-    #syncEnableSwitch {
-      width: 50%;
-    }
-    .syncDeviceLabel {
-      font-size: 0.9em;
-      margin: 0;
-    }
-    .deviceName {
-      margin-bottom: 0.5em;
-    }
-  }
-  .devices {
-    margin: 1em 0;
-  }
-  .devicesList {
-    width: 34em;
-    margin-bottom: 1em;
-    td {
-      padding: 4px 8px;
-    }
-  }
-  .settingsListContainer {
-    margin-bottom: 1.5em;
-  }
-}
-
-#syncPassphrase {
-  margin: 1em;
-  color: #ff0400;
-  font-size: 15px;
-  font-family: monospace;
-}
-
-#syncQR {
-  margin: 1em;
-}
diff --git a/less/button.less b/less/button.less
index 694a7af583d..b167aa2ac29 100644
--- a/less/button.less
+++ b/less/button.less
@@ -140,19 +140,6 @@ span.buttonSeparator {
   }
 }
 
-.linkButton {
-  color: @braveOrange;
-  cursor: pointer;
-  font-size: 0.9rem;
-
-  &:not([disabled]):hover {
-    color: black;
-  }
-  &[disabled] {
-    color: @gray;
-  }
-}
-
 // for about:preferences
 .prefBody {
   .settingsList > .settingItem + button,
@@ -177,7 +164,9 @@ span.buttonSeparator {
     margin-top: 5px;
   }
 
-  .paymentsContainer {
+  .paymentsContainer,
+  // TODO: refactor button.less to remove this and apply overlayButtonMargin in global.js
+  .syncContainer {
     .browserButton + .browserButton {
       margin-left: 8px;
     }
diff --git a/less/forms.less b/less/forms.less
index aef79b23eb2..3bf6a0bbece 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -348,19 +348,3 @@ select {
     }
   }
 }
-
-// From commonStyles.js
-.formControl {
-  background: white;
-  border: solid 1px @black10;
-  border-radius: @borderRadius;
-  box-shadow: inset 0 1px 1px @black10;
-  box-sizing: border-box;
-  display: block;
-  color: @darkGray;
-  font-size: 14.5px;
-  height: 2.25em;
-  outline: none;
-  padding: 0.4em;
-  width: 100%;
-}
diff --git a/less/variables.less b/less/variables.less
index 7e0074c006f..dac97f1d620 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -89,6 +89,8 @@
 @bookmarksFileIconSize: 13px;
 @bookmarksFolderIconSize: 15px;
 
+@settingsListContainerMargin: 2rem;
+
 @navbarMenubarMargin: 7px;
 @navbarButtonSpacing: 4px;
 @navbarButtonWidth: 20px;
diff --git a/test/misc-components/syncTest.js b/test/misc-components/syncTest.js
index 2487d5e92c6..e9e9731b0bc 100644
--- a/test/misc-components/syncTest.js
+++ b/test/misc-components/syncTest.js
@@ -12,10 +12,10 @@ const aboutBookmarksUrl = getTargetAboutUrl('about:bookmarks')
 const aboutHistoryUrl = getTargetAboutUrl('about:history')
 
 const prefsUrl = 'about:preferences'
-const startButton = '[data-l10n-id="syncStart"]'
-const addButton = '[data-l10n-id="syncAdd"]'
-const createButton = '[data-l10n-id="syncCreate"]'
-const newDeviceButton = '[data-l10n-id="syncNewDevice"]'
+const startButton = '[data-test-id="syncStartButton"]'
+const addButton = '[data-test-id="syncAddButton"]'
+const createButton = '[data-test-id="syncCreateButton"]'
+const newDeviceButton = '[data-test-id="syncNewDeviceButton"]'
 
 const PANEL_SEED = Immutable.fromJS(Array(32).fill(0))
 
@@ -187,8 +187,8 @@ describe('Sync Panel', function () {
         .click(syncTab)
         .waitForExist(newDeviceButton)
         .click(newDeviceButton)
-        .click('[data-l10n-id="syncShowPassphrase"]')
-        .waitForTextValue('#syncPassphrase', 'idyllic undergrowth sheepman chez\nwishy undergrounder verseman plyer\na a a a\na a a a')
+        .click('[data-test-id="syncShowPassphraseButton"]')
+        .waitForTextValue('[data-test-id="syncPassphrase"]', 'idyllic undergrowth sheepman chez\nwishy undergrounder verseman plyer\na a a a\na a a a')
     })
   })
 
@@ -210,7 +210,7 @@ describe('Sync Panel', function () {
         .waitForVisible(createButton)
         .click(createButton)
         .waitUntil(function () {
-          return this.getText('.setupError').then((val) => {
+          return this.getText('[data-test-id="syncSetupError"]').then((val) => {
             return val.includes('connection failed')
           })
         })
@@ -276,8 +276,8 @@ describe('Sync Panel', function () {
         .click(syncTab)
         .waitForVisible(syncSwitch)
         .click(syncSwitch)
-        .waitForExist('#syncData .switchBackground')
-        .click('#syncData .switchBackground')
+        .waitForExist('[data-test-id="syncDataSection"] .switchBackground')
+        .click('[data-test-id="syncDataSection"] .switchBackground')
         .windowByUrl(Brave.browserWindowUrl)
         .waitUntil(function () {
           return this.getAppState().then((val) => {
@@ -296,11 +296,11 @@ describe('Sync Panel', function () {
         .click(syncSwitch)
         .waitForExist(newDeviceButton)
         .click(newDeviceButton)
-        .click('[data-l10n-id="syncShowPassphrase"]')
-        .waitForTextValue('#syncPassphrase', 'a a a a\na a a a\na a a a\na a a a')
-        .click('[data-l10n-id="syncShowQR"]')
+        .click('[data-test-id="syncShowPassphraseButton"]')
+        .waitForTextValue('[data-test-id="syncPassphrase"]', 'a a a a\na a a a\na a a a\na a a a')
+        .click('[data-test-id="syncShowQRButton"]')
         .waitUntil(function () {
-          return this.getAttribute('#syncQR', 'src').then((text) => {
+          return this.getAttribute('[data-test-id="syncQRImg"]', 'src').then((text) => {
             return text === 'data:image/png;base64,foo'
           })
         })