diff --git a/app/renderer/components/common/sectionTitle.js b/app/renderer/components/common/sectionTitle.js
new file mode 100644
index 00000000000..d8a6ab0e6a1
--- /dev/null
+++ b/app/renderer/components/common/sectionTitle.js
@@ -0,0 +1,121 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../immutableComponent')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
+
+class SectionTitleWrapper extends ImmutableComponent {
+  render () {
+    return <div className={css(
+      commonStyles.userSelectNone,
+      styles.sectionTitleWrapper,
+      this.props['data-beta'] && sectionTitleStyles.beta
+    )} {...this.props} />
+  }
+}
+
+class SectionTitleLabelWrapper extends ImmutableComponent {
+  render () {
+    return <SectionTitleWrapper data-beta='true' {...this.props} />
+  }
+}
+
+class DefaultSectionTitle extends ImmutableComponent {
+  render () {
+    return <header className={css(styles.sectionTitleWrapper)}>
+      <h1 className={css(
+        commonStyles.userSelectNone,
+        styles.sectionTitle
+      )} {...this.props} />
+    </header>
+  }
+}
+
+class AboutPageSectionTitle extends ImmutableComponent {
+  render () {
+    return <div className={css(
+      commonStyles.userSelectNone,
+      styles.sectionTitle,
+      styles.prefSectionTitle,
+      styles.aboutPageSectionTitle,
+      this.props['data-subTitle'] && styles.aboutPageSectionSubTitle
+    )} {...this.props} />
+  }
+}
+
+class AboutPageSectionSubTitle extends ImmutableComponent {
+  render () {
+    return <AboutPageSectionTitle data-subTitle='true' {...this.props} />
+  }
+}
+
+class SectionLabelTitle extends ImmutableComponent {
+  render () {
+    return <sup className={css(
+      commonStyles.userSelectNone,
+      styles.sectionLabelTitle
+    )} {...this.props} />
+  }
+}
+
+const styles = StyleSheet.create({
+  sectionTitleWrapper: {
+    marginBottom: '0.7rem',
+    display: 'flex',
+    alignItems: 'flex-end'
+  },
+
+  sectionTitle: {
+    color: globalStyles.color.darkGray,
+    cursor: 'default',
+    fontSize: '1.2rem',
+    margin: 0,
+
+    // Copied from common.less
+    fontWeight: 400,
+    WebkitFontSmoothing: 'antialiased'
+  },
+  prefSectionTitle: {
+    color: globalStyles.color.braveOrange,
+    fontSize: '1.75rem'
+  },
+  sectionLabelTitle: {
+    color: '#999',
+    fontSize: '15px'
+  },
+
+  aboutPageSectionTitle: {
+    display: 'inline-block'
+  },
+  aboutPageSectionSubTitle: {
+    fontSize: '16px',
+    marginBottom: '12px',
+
+    // cf: .siteDetailsPage .siteDetailsPageContent
+    marginTop: '24px'
+  }
+})
+
+const sectionTitleStyles = StyleSheet.create({
+  beta: {
+    display: 'flex',
+    alignItems: 'flex-start'
+  }
+})
+
+module.exports = {
+  sectionTitleStyles,
+
+  SectionTitleWrapper,
+  SectionTitleLabelWrapper,
+
+  DefaultSectionTitle,
+  SectionLabelTitle,
+  AboutPageSectionTitle,
+  AboutPageSectionSubTitle
+}
diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/commonForm.js
index 74d17a1cbb3..b3bef6a68de 100644
--- a/app/renderer/components/commonForm.js
+++ b/app/renderer/components/commonForm.js
@@ -99,7 +99,7 @@ const styles = StyleSheet.create({
   },
 
   CommonFormSubSection: {
-    margin: `0 0 0 ${globalStyles.spacing.dialogInsideMargin}`
+    margin: `0 0 ${globalStyles.spacing.dialogInsideMargin} ${globalStyles.spacing.dialogInsideMargin}`
   },
 
   CommonFormBottomWrapper: {
diff --git a/app/renderer/components/importBrowserDataPanel.js b/app/renderer/components/importBrowserDataPanel.js
index 5372bb8d488..2bdfee948d0 100644
--- a/app/renderer/components/importBrowserDataPanel.js
+++ b/app/renderer/components/importBrowserDataPanel.js
@@ -18,7 +18,6 @@ const {
   CommonFormDropdown,
   CommonFormSection,
   CommonFormTitle,
-  CommonFormSubSection,
   CommonFormButtonWrapper,
   CommonFormBottomWrapper
 } = require('./commonForm')
@@ -150,14 +149,14 @@ class ImportBrowserDataPanel extends ImmutableComponent {
             onClick={this.onToggleFavorites}
             disabled={!this.supportFavorites}
           />
-          <CommonFormSubSection data-test-id='importBrowserSubDataOptions'>
+          <div className={css(styles.subSectionMargin)} data-test-id='importBrowserSubDataOptions'>
             <SwitchControl
               rightl10nId='mergeIntoBookmarksToolbar'
               checkedOn={this.props.importBrowserDataSelected.get('mergeFavorites')}
               onClick={this.onToggleMergeFavorites}
               disabled={!this.props.importBrowserDataSelected.get('favorites')}
             />
-          </CommonFormSubSection>
+          </div>
           <SwitchControl
             rightl10nId='cookies'
             checkedOn={this.props.importBrowserDataSelected.get('cookies')}
@@ -183,6 +182,9 @@ class ImportBrowserDataPanel extends ImmutableComponent {
 const styles = StyleSheet.create({
   dropdownWrapper: {
     marginBottom: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
+  },
+  subSectionMargin: {
+    marginLeft: globalStyles.spacing.dialogInsideMargin
   }
 })
 
diff --git a/app/renderer/components/preferences/extensionsTab.js b/app/renderer/components/preferences/extensionsTab.js
index 8dae148d333..a2a34789723 100644
--- a/app/renderer/components/preferences/extensionsTab.js
+++ b/app/renderer/components/preferences/extensionsTab.js
@@ -15,6 +15,8 @@ const {getSetting} = require('../../../../js/settings')
 const {SettingCheckbox} = require('../settings')
 const {isPasswordManager, getExtensionKey, isBuiltInExtension, bravifyText} = require('../../lib/extensionsUtil')
 
+const {DefaultSectionTitle} = require('../common/sectionTitle')
+
 const HelpfulText = require('../helpfulText')
 const SortableTable = require('../../../../js/components/sortableTable')
 
@@ -104,9 +106,7 @@ class ExtensionsTab extends ImmutableComponent {
     }
     return <div className={css(styles.extensionsContainer)}>
       <main className={css(styles.extensionsMain)}>
-        <header className={css(styles.extensionsOption)}>
-          <h1 className={css(styles.extensionsHeading)} data-l10n-id='extensions' />
-        </header>
+        <DefaultSectionTitle data-l10n-id='extensions' />
         <SortableTable
           sortingDisabled
           tableClassNames={css(styles.extensionsTable)}
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 50b256eaa2d..ed5d1f53b07 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -10,7 +10,15 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 const cx = require('../../../../js/lib/classSet')
 const ImmutableComponent = require('../immutableComponent')
 const ModalOverlay = require('../../../../js/components/modalOverlay')
+
 const {SettingCheckbox} = require('../settings')
+const {
+  sectionTitleStyles,
+  SectionTitleWrapper,
+  AboutPageSectionTitle,
+  SectionLabelTitle
+} = require('../common/sectionTitle')
+
 const DisabledContent = require('./payment/disabledContent')
 const EnabledContent = require('./payment/enabledContent')
 const BitcoinDashboard = require('./payment/bitcoinDashboard')
@@ -162,10 +170,14 @@ class PaymentsTab extends ImmutableComponent {
         : null
       }
 
-      <div className={css(styles.flexAlignEnd)}>
-        <div className='sectionTitleWrapper'>
-          <span className='sectionTitle'>Brave Payments</span>
-          <span className='sectionSubTitle'>beta</span>
+      <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(
@@ -236,7 +248,7 @@ class PaymentsTab extends ImmutableComponent {
             : null
           }
         </div>
-      </div>
+      </SectionTitleWrapper>
       {
         this.enabled
           ? <EnabledContent settings={this.props.settings}
@@ -264,8 +276,7 @@ const styles = StyleSheet.create({
   paymentsContainer: {
     position: 'relative',
     overflowX: 'hidden',
-    width: '805px',
-    marginTop: '15px'
+    width: '805px'
   },
   paymentsSwitches: {
     display: 'flex',
@@ -274,6 +285,12 @@ const styles = StyleSheet.create({
     minHeight: '29px'
   },
 
+  titleWrapper: {
+    position: 'relative',
+    marginRight: '49px',
+    minWidth: '240px'
+  },
+
   switchWrap: {
     width: paymentStyles.width.tableCell
   },
diff --git a/app/renderer/components/preferences/pluginsTab.js b/app/renderer/components/preferences/pluginsTab.js
index 212620ce3a9..c27ef29964d 100644
--- a/app/renderer/components/preferences/pluginsTab.js
+++ b/app/renderer/components/preferences/pluginsTab.js
@@ -9,11 +9,14 @@ const getSetting = require('../../../../js/settings').getSetting
 const settings = require('../../../../js/constants/settings')
 const appConfig = require('../../../../js/constants/appConfig')
 const {isWindows, isDarwin, isLinux} = require('../../../common/lib/platformUtil')
-const {SettingsList, SettingCheckbox} = require('../../components/settings')
+
 const WidevineInfo = require('../../components/widevineInfo')
 const flash = appConfig.resourceNames.FLASH
 const widevine = appConfig.resourceNames.WIDEVINE
 
+const {SettingsList, SettingCheckbox} = require('../../components/settings')
+const {DefaultSectionTitle} = require('../common/sectionTitle')
+
 class PluginsTab extends ImmutableComponent {
   get flashInstalled () {
     return getSetting(settings.FLASH_INSTALLED, this.props.settings)
@@ -47,7 +50,7 @@ class PluginsTab extends ImmutableComponent {
     const braveWikiLink = 'https://github.com/brave/browser-laptop/wiki'
     const flashInfoLink = `${braveWikiLink}/Flash-Support-Deprecation-Proposal#troubleshooting-flash-issues`
     return <div>
-      <div className='sectionTitle' data-l10n-id='pluginSettings' />
+      <DefaultSectionTitle data-l10n-id='pluginSettings' />
       <SettingsList>
         <SettingCheckbox checked={this.flashInstalled ? this.props.braveryDefaults.get('flash') : false} dataL10nId='enableFlash' onChange={this.onToggleFlash} disabled={!this.flashInstalled} />
         <div className='subtext flashText'>
@@ -80,7 +83,7 @@ class PluginsTab extends ImmutableComponent {
       {
         !isLinux()
           ? <div>
-            <div className='sectionTitle' data-l10n-id='widevineSection' />
+            <DefaultSectionTitle data-l10n-id='widevineSection' />
             <SettingsList>
               <WidevineInfo createTabRequestedAction={aboutActions.createTabRequested} />
               <SettingCheckbox checked={this.props.braveryDefaults.get('widevine')} dataL10nId='enableWidevine' onChange={this.onToggleWidevine} />
diff --git a/app/renderer/components/preferences/syncTab.js b/app/renderer/components/preferences/syncTab.js
index 0d9750961c9..b4c20d7d130 100644
--- a/app/renderer/components/preferences/syncTab.js
+++ b/app/renderer/components/preferences/syncTab.js
@@ -14,6 +14,13 @@ const Button = require('../../../../js/components/button')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
 const SortableTable = require('../../../../js/components/sortableTable')
 
+const {
+  SectionTitleLabelWrapper,
+  AboutPageSectionTitle,
+  DefaultSectionTitle,
+  SectionLabelTitle
+} = require('../common/sectionTitle')
+
 const aboutActions = require('../../../../js/about/aboutActions')
 const getSetting = require('../../../../js/settings').getSetting
 const settings = require('../../../../js/constants/settings')
@@ -49,7 +56,7 @@ class SyncTab extends ImmutableComponent {
 
   get clearDataContent () {
     return <div className='syncClearData'>
-      <div className='sectionTitle' data-l10n-id='syncClearData' />
+      <DefaultSectionTitle data-l10n-id='syncClearData' />
       {
         this.enabled
           ? <button data-l10n-id='syncResetButton' className='linkButton' onClick={this.props.showOverlay.bind(this, 'syncReset')} />
@@ -111,7 +118,7 @@ class SyncTab extends ImmutableComponent {
 
   get devicesContent () {
     return <div className='devices'>
-      <div className='sectionTitle' data-l10n-id='syncDevices' data-test-id='syncDevices' />
+      <DefaultSectionTitle data-l10n-id='syncDevices' data-test-id='syncDevices' />
       <SortableTable
         headings={['id', 'syncDeviceName', 'syncDeviceLastActive']}
         defaultHeading='syncDeviceLastActive'
@@ -318,10 +325,10 @@ class SyncTab extends ImmutableComponent {
         ? <ModalOverlay title={'syncReset'} content={this.resetOverlayContent} footer={this.resetOverlayFooter} onHide={this.props.hideOverlay.bind(this, 'syncReset')} />
         : null
       }
-      <div className='sectionTitleWrapper'>
-        <span className='sectionTitle' data-l10n-id='syncTitle' />
-        <span className='sectionSubTitle'>beta</span>
-      </div>
+      <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'>
@@ -338,7 +345,8 @@ class SyncTab extends ImmutableComponent {
       </div>
       {
         this.isSetup && this.enabled
-          ? <div id='syncData'><div className='sectionTitle' data-l10n-id='syncData' />
+          ? <div id='syncData'>
+            <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} />
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index a0014ec8cc1..e236134ac51 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -221,6 +221,12 @@ const styles = StyleSheet.create({
     padding: '2px 15px',
     textTransform: 'capitalize',
     width: 'auto'
+  },
+
+  siteDetailsPageContent: {
+    /* TODO: refactor siteDetails.less */
+    marginTop: '0 !important',
+    marginLeft: globalStyles.spacing.aboutPageSectionPadding
   }
 })
 
diff --git a/js/about/about.js b/js/about/about.js
index 0fafda8ac0a..5dbde03b4ab 100644
--- a/js/about/about.js
+++ b/js/about/about.js
@@ -6,8 +6,16 @@ const React = require('react')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
 const {aboutUrls, isNavigatableAboutPage} = require('../lib/appUrlUtil')
 
+const cx = require('../lib/classSet')
+
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../../app/renderer/components/styles/global')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
+const {
+  AboutPageSectionTitle,
+  AboutPageSectionSubTitle
+} = require('../../app/renderer/components/common/sectionTitle')
 
 require('../../less/about/history.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
@@ -16,11 +24,14 @@ class AboutAbout extends ImmutableComponent {
   render () {
     return <div className='siteDetailsPage'>
       <div className='siteDetailsPageHeader'>
-        <div data-l10n-id='aboutPages' className='sectionTitle' />
+        <AboutPageSectionTitle data-l10n-id='aboutPages' />
       </div>
 
-      <div className='siteDetailsPageContent'>
-        <div className='sectionTitle' data-l10n-id='listOfAboutPages' />
+      <div className={cx({
+        siteDetailsPageContent: true,
+        [css(commonStyles.siteDetailsPageContent)]: true
+      })}>
+        <AboutPageSectionSubTitle data-l10n-id='listOfAboutPages' />
         <ul className={css(styles.list)}>
           {
             aboutUrls.keySeq().sort().filter((aboutSourceUrl) => isNavigatableAboutPage(aboutSourceUrl)).map((aboutSourceUrl) =>
@@ -38,7 +49,7 @@ class AboutAbout extends ImmutableComponent {
 
 const styles = StyleSheet.create({
   list: {
-    marginLeft: `calc(${globalStyles.spacing.aboutPageSectionPadding} * 2)`
+    marginLeft: globalStyles.spacing.aboutPageSectionPadding
   }
 })
 
diff --git a/js/about/bookmarks.js b/js/about/bookmarks.js
index 45dfd35317c..0cf2869cc75 100644
--- a/js/about/bookmarks.js
+++ b/js/about/bookmarks.js
@@ -19,6 +19,8 @@ const iconSize = require('../../app/common/lib/faviconUtil').iconSize
 
 const ipc = window.chrome.ipcRenderer
 
+const {AboutPageSectionTitle} = require('../../app/renderer/components/common/sectionTitle')
+
 // Stylesheets
 require('../../less/about/bookmarks.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
@@ -448,7 +450,7 @@ class AboutBookmarks extends React.Component {
   render () {
     return <div className='siteDetailsPage' onClick={this.onClick}>
       <div className='siteDetailsPageHeader'>
-        <div data-l10n-id='bookmarkManager' className='sectionTitle' />
+        <AboutPageSectionTitle data-l10n-id='bookmarkManager' />
         <div className='headerActions'>
           <div className='searchWrapper'>
             <span data-l10n-id='importBrowserData' className='importBrowserData' onClick={this.importBrowserData} />
diff --git a/js/about/brave.js b/js/about/brave.js
index 5af543df6b9..88b557aaefa 100644
--- a/js/about/brave.js
+++ b/js/about/brave.js
@@ -11,8 +11,16 @@ const aboutActions = require('./aboutActions')
 
 const ipc = window.chrome.ipcRenderer
 
+const cx = require('../lib/classSet')
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
+const {
+  AboutPageSectionTitle,
+  AboutPageSectionSubTitle
+} = require('../../app/renderer/components/common/sectionTitle')
+
 require('../../less/about/history.less')
-require('../../less/about/brave.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
 
 const tranformVersionInfoToString = (versionInformation) =>
@@ -38,27 +46,27 @@ class AboutBrave extends React.Component {
   render () {
     return <div className='siteDetailsPage'>
       <div className='siteDetailsPageHeader'>
-        <div data-l10n-id='aboutBrave' className='sectionTitle' />
-        <div data-l10n-id='braveInfo' className='title' />
+        <AboutPageSectionTitle data-l10n-id='aboutBrave' />
+        <div data-l10n-id='braveInfo' />
       </div>
 
-      <div className='siteDetailsPageContent aboutBrave'>
-        <div>
-          <div className='title'>
-            <div data-l10n-id='releaseNotes' className='sectionTitle' />
-          </div>
+      <div className={cx({
+        siteDetailsPageContent: true,
+        aboutBrave: true,
+        [css(commonStyles.siteDetailsPageContent)]: true
+      })}>
+        <AboutPageSectionSubTitle data-l10n-id='releaseNotes' />
 
-          <div className='title releaseNotes'>
-            <span data-l10n-id='relNotesInfo1' />
-            &nbsp;
-            <a className='linkText' href={`https://github.com/brave/browser-laptop/releases/tag/v${this.state.versionInformation.getIn([0, 'version'])}dev`} target='_blank' data-l10n-id='relNotesInfo2' />
-            &nbsp;
-            <span data-l10n-id='relNotesInfo3' />
-          </div>
+        <div>
+          <span data-l10n-id='relNotesInfo1' />
+          &nbsp;
+          <a className='linkText' href={`https://github.com/brave/browser-laptop/releases/tag/v${this.state.versionInformation.getIn([0, 'version'])}dev`} target='_blank' data-l10n-id='relNotesInfo2' />
+          &nbsp;
+          <span data-l10n-id='relNotesInfo3' />
         </div>
 
-        <div className='title'>
-          <span className='sectionTitle' data-l10n-id='versionInformation' />
+        <div className={css(styles.versionInformationWrapper)}>
+          <AboutPageSectionSubTitle data-l10n-id='versionInformation' />
           <ClipboardButton
             dataL10nId='copyToClipboard'
             className='fa fa-clipboard'
@@ -86,4 +94,13 @@ class AboutBrave extends React.Component {
   }
 }
 
+const styles = StyleSheet.create({
+  versionInformationWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'baseline',
+    width: '400px'
+  }
+})
+
 module.exports = <AboutBrave />
diff --git a/js/about/history.js b/js/about/history.js
index 65d9c9eecc9..6b9ac7e5a8c 100644
--- a/js/about/history.js
+++ b/js/about/history.js
@@ -16,8 +16,19 @@ const Button = require('../components/button')
 const {makeImmutable} = require('../../app/common/state/immutableUtil')
 const historyUtil = require('../../app/common/lib/historyUtil')
 
+const cx = require('../lib/classSet')
+
 const ipc = window.chrome.ipcRenderer
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../app/renderer/components/styles/global')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
+const {
+  AboutPageSectionTitle,
+  AboutPageSectionSubTitle
+} = require('../../app/renderer/components/common/sectionTitle')
+
 // Stylesheets
 require('../../less/about/history.less')
 require('../../node_modules/font-awesome/css/font-awesome.css')
@@ -64,7 +75,9 @@ class HistoryDay extends ImmutableComponent {
   }
   render () {
     return <div>
-      <div className='sectionTitle historyDayName'>{this.props.date}</div>
+      <div className={css(styles.subTitleMargin)}>
+        <AboutPageSectionSubTitle>{this.props.date}</AboutPageSectionSubTitle>
+      </div>
       <SortableTable headings={['time', 'title', 'domain']}
         defaultHeading='time'
         defaultHeadingSortOrder='desc'
@@ -193,7 +206,7 @@ class AboutHistory extends React.Component {
   render () {
     return <div className='siteDetailsPage' onClick={this.onClick}>
       <div className='siteDetailsPageHeader'>
-        <div data-l10n-id='history' className='sectionTitle' />
+        <AboutPageSectionTitle data-l10n-id='history' />
         <div className='headerActions'>
           <div className='searchWrapper'>
             <input type='text' className='searchInput' ref='historySearch' id='historySearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='historySearch' />
@@ -207,7 +220,11 @@ class AboutHistory extends React.Component {
         </div>
       </div>
 
-      <div className='siteDetailsPageContent'>
+      <div className={cx({
+        siteDetailsPageContent: true,
+        [css(commonStyles.siteDetailsPageContent)]: true,
+        [css(commonStyles.noMarginLeft)]: true
+      })}>
         <GroupedHistoryList
           languageCodes={this.state.languageCodes}
           settings={this.state.settings}
@@ -222,4 +239,10 @@ class AboutHistory extends React.Component {
   }
 }
 
+const styles = StyleSheet.create({
+  subTitleMargin: {
+    marginLeft: globalStyles.spacing.aboutPageSectionPadding
+  }
+})
+
 module.exports = <AboutHistory />
diff --git a/js/about/preferences.js b/js/about/preferences.js
index c0a1b035201..4f4bb67aab8 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -13,6 +13,7 @@ const PreferenceNavigation = require('../../app/renderer/components/preferences/
 const {SettingsList, SettingItem, SettingCheckbox, SettingItemIcon} = require('../../app/renderer/components/settings')
 const {SettingTextbox} = require('../../app/renderer/components/textbox')
 const {SettingDropdown} = require('../../app/renderer/components/dropdown')
+const {DefaultSectionTitle} = require('../../app/renderer/components/common/sectionTitle')
 const Button = require('../components/button')
 
 // Tabs
@@ -150,7 +151,7 @@ class GeneralTab extends ImmutableComponent {
 
     const defaultZoomSetting = getSetting(settings.DEFAULT_ZOOM_LEVEL, this.props.settings)
     return <SettingsList>
-      <div className='sectionTitle' data-l10n-id='generalSettings' />
+      <DefaultSectionTitle data-l10n-id='generalSettings' />
       <SettingsList>
         <SettingItem dataL10nId='startsWith'>
           <SettingDropdown value={getSetting(settings.STARTUP_MODE, this.props.settings)}
@@ -309,12 +310,12 @@ class SearchTab extends ImmutableComponent {
 
   render () {
     return <div>
-      <div className='sectionTitle' data-l10n-id='searchSettings' />
+      <DefaultSectionTitle data-l10n-id='searchSettings' />
       <SortableTable headings={['default', 'searchEngine', 'engineGoKey']} rows={this.searchProviders}
         defaultHeading='searchEngine'
         addHoverClass onClick={this.hoverCallback.bind(this)}
         columnClassNames={['default', 'searchEngine', 'engineGoKey']} />
-      <div className='sectionTitle' data-l10n-id='locationBarSettings' />
+      <DefaultSectionTitle data-l10n-id='locationBarSettings' />
       <SettingsList>
         <SettingCheckbox dataL10nId='showOpenedTabMatches' prefKey={settings.OPENED_TAB_SUGGESTIONS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='showHistoryMatches' prefKey={settings.HISTORY_SUGGESTIONS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
@@ -328,7 +329,7 @@ class SearchTab extends ImmutableComponent {
 class TabsTab extends ImmutableComponent {
   render () {
     return <div>
-      <div className='sectionTitle' data-l10n-id='tabSettings' />
+      <DefaultSectionTitle data-l10n-id='tabSettings' />
       <SettingsList>
         <SettingItem dataL10nId='tabsPerTabPage'>
           <SettingDropdown
@@ -399,8 +400,7 @@ class SitePermissionsPage extends React.Component {
   render () {
     return this.isPermissionsNonEmpty()
     ? <div id='sitePermissionsPage'>
-      <div className='sectionTitle'
-        data-l10n-id={this.props.defaults ? 'sitePermissionsExceptions' : 'sitePermissions'} />
+      <DefaultSectionTitle data-l10n-id={this.props.defaults ? 'sitePermissionsExceptions' : 'sitePermissions'} />
       <ul className='sitePermissions'>
         {
           Object.keys(this.props.names).map((name) =>
@@ -519,7 +519,7 @@ class ShieldsTab extends ImmutableComponent {
   }
   render () {
     return <div id='shieldsContainer'>
-      <div className='sectionTitle' data-l10n-id='braveryDefaults' />
+      <DefaultSectionTitle data-l10n-id='braveryDefaults' />
       <SettingsList>
         <SettingItem dataL10nId='adControl'>
           <SettingDropdown
@@ -581,7 +581,7 @@ class SecurityTab extends ImmutableComponent {
     const lastPassPreferencesUrl = ('chrome-extension://' + extensionIds[passwordManagers.LAST_PASS] + '/tabDialog.html?dialog=preferences&cmd=open')
 
     return <div>
-      <div className='sectionTitle' data-l10n-id='privateData' />
+      <DefaultSectionTitle data-l10n-id='privateData' />
       <SettingsList dataL10nId='privateDataMessage'>
         <SettingCheckbox dataL10nId='browsingHistory' prefKey={settings.SHUTDOWN_CLEAR_HISTORY} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='downloadHistory' prefKey={settings.SHUTDOWN_CLEAR_DOWNLOADS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
@@ -592,7 +592,7 @@ class SecurityTab extends ImmutableComponent {
         <SettingCheckbox dataL10nId='savedSiteSettings' prefKey={settings.SHUTDOWN_CLEAR_SITE_SETTINGS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <Button l10nId='clearBrowsingDataNow' className='primaryButton clearBrowsingDataButton' onClick={this.clearBrowsingDataNow} />
       </SettingsList>
-      <div className='sectionTitle' data-l10n-id='passwordsAndForms' />
+      <DefaultSectionTitle data-l10n-id='passwordsAndForms' />
       <SettingsList>
         <SettingItem dataL10nId='passwordManager'>
           <SettingDropdown
@@ -624,7 +624,7 @@ class SecurityTab extends ImmutableComponent {
           : null
         }
       </SettingsList>
-      <div className='sectionTitle' data-l10n-id='autofillSettings' />
+      <DefaultSectionTitle data-l10n-id='autofillSettings' />
       <SettingsList>
         <SettingCheckbox dataL10nId='enableAutofill' prefKey={settings.AUTOFILL_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <Button l10nId='manageAutofillData' className='primaryButton manageAutofillDataButton'
@@ -632,7 +632,7 @@ class SecurityTab extends ImmutableComponent {
             url: 'about:autofill'
           })} disabled={!getSetting(settings.AUTOFILL_ENABLED, this.props.settings)} />
       </SettingsList>
-      <div className='sectionTitle' data-l10n-id='fullscreenContent' />
+      <DefaultSectionTitle data-l10n-id='fullscreenContent' />
       <SettingsList>
         <SettingItem>
           <SettingDropdown
@@ -643,7 +643,7 @@ class SecurityTab extends ImmutableComponent {
           </SettingDropdown>
         </SettingItem>
       </SettingsList>
-      <div className='sectionTitle' data-l10n-id='doNotTrackTitle' />
+      <DefaultSectionTitle data-l10n-id='doNotTrackTitle' />
       <SettingsList>
         <SettingCheckbox dataL10nId='doNotTrack' prefKey={settings.DO_NOT_TRACK} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
       </SettingsList>
@@ -656,7 +656,7 @@ class SecurityTab extends ImmutableComponent {
 class AdvancedTab extends ImmutableComponent {
   render () {
     return <div>
-      <div className='sectionTitle' data-l10n-id='contentSettings' />
+      <DefaultSectionTitle data-l10n-id='contentSettings' />
       <SettingsList>
         <SettingCheckbox dataL10nId='useHardwareAcceleration' prefKey={settings.HARDWARE_ACCELERATION_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='useSmoothScroll' prefKey={settings.SMOOTH_SCROLL_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
diff --git a/js/about/styles.js b/js/about/styles.js
index 60463002c56..69423aaddf2 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -15,6 +15,26 @@ const {Textbox, FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../.
 const {TextArea, DefaultTextArea} = require('../../app/renderer/components/textbox')
 const {Dropdown, FormDropdown, SettingDropdown} = require('../../app/renderer/components/dropdown')
 
+const {
+  SectionTitleWrapper,
+  SectionTitleLabelWrapper,
+  DefaultSectionTitle,
+  AboutPageSectionTitle,
+  AboutPageSectionSubTitle,
+  SectionLabelTitle
+} = require('../../app/renderer/components/common/sectionTitle')
+
+const {
+  CommonForm,
+  CommonFormTitle,
+  CommonFormSection,
+  CommonFormDropdown,
+  CommonFormClickable,
+  CommonFormSubSection,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper
+} = require('../../app/renderer/components/commonForm')
+
 class Container extends ImmutableComponent {
   render () {
     return <div className={css(styles.container)} {...this.props} />
@@ -33,195 +53,612 @@ class Code extends ImmutableComponent {
   }
 }
 
+class GoTop extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.flexJustifyEnd, styles.goTop)}><a href='#top' {...this.props}>Go back to top</a></div>
+  }
+}
+
+class Tab extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.tab)} {...this.props} />
+  }
+}
+
+class Tab2 extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.tab2)} {...this.props} />
+  }
+}
+
+class Tab3 extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.tab3)} {...this.props} />
+  }
+}
+
+class Tab4 extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.tab4)} {...this.props} />
+  }
+}
+
 class AboutStyle extends ImmutableComponent {
   render () {
     return <div className={css(styles.wrapper)}>
       <h1 data-l10n-id='introTitle' />
-      <p data-l10n-id='intro' />
+      <p className={css(styles.fontSizeInitial)} data-l10n-id='intro' />
+
+      <ul className={css(styles.fontSizeInitial)}>
+        <li className={css(styles.toc__marginBottom)}><a href='#typography'>typography</a></li>
+        <li className={css(styles.toc__marginBottom)}><a href='#textboxes'>textboxes</a></li>
+        <li className={css(styles.toc__marginBottom)}><a href='#dropdowns'>dropdowns</a></li>
+        <li className={css(styles.toc__marginBottom)}><a href='#buttons'>buttons</a></li>
+        <li className={css(styles.toc__marginBottom)}><a href='#commonForm'>commonForm</a></li>
+        <li className={css(styles.toc__marginBottom)}><a href='#sectionTitle'>sectionTitle</a></li>
+      </ul>
 
       <hr />
 
-      <h1 className='typography' data-l10n-id='typography' />
-      <h1 data-l10n-id='h1' />
-      <h2 data-l10n-id='h2' />
-      <h3 data-l10n-id='h3' />
-      <h4 data-l10n-id='h4' />
+      <div id='typography'>
+        <h1 className='typography' data-l10n-id='typography' />
+        <h1 data-l10n-id='h1' />
+        <h2 data-l10n-id='h2' />
+        <h3 data-l10n-id='h3' />
+        <h4 data-l10n-id='h4' />
+
+        <GoTop />
+      </div>
 
       <hr />
 
-      <h1 data-l10n-id='textboxes' />
+      <div id='textboxes'>
+        <h1 data-l10n-id='textboxes' />
+        <Container>
+          <h2>Plain textbox</h2>
+          <Textbox placeholder='Textbox' />
+          <Pre><Code>
+            const { '{Textbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+            &lt;Textbox />
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Textbox for use in forms</h2>
+          <FormTextbox placeholder='FormTextbox' />
+          <Pre><Code>
+            const { '{FormTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+            &lt;FormTextbox />
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Texbox used mostly in Preferences; has a fixed width</h2>
+          <SettingTextbox placeholder='SettingTextbox' />
+          <Pre><Code>
+            const { '{SettingTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+            &lt;SettingTextbox />
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Textbox used on wallet recovery screen in Brave Payments</h2>
+          <RecoveryKeyTextbox placeholder='RecoveryKeyTextbox' />
+          <Pre><Code>
+            const { '{RecoveryKeyTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+            &lt;RecoveryKeyTextbox />
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Plain textarea</h2>
+          <TextArea placeholder='TextArea' />
+          <Pre><Code>
+            const { '{TextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+            &lt;TextArea />
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Default textarea; font size is specified</h2>
+          <DefaultTextArea placeholder='DefaultTextArea' />
+          <Pre><Code>
+            const { '{DefaultTextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+            &lt;DefaultTextArea />
+          </Code></Pre>
+        </Container>
+
+        <GoTop />
+      </div>
+
+      <hr />
 
-      <Container>
-        <h2>Plain textbox</h2>
-        <Textbox placeholder='Textbox' />
+      <div id='dropdowns'>
+        <h1 data-l10n-id='dropdowns' />
+        <Container>
+          <h2>Plain dropdown</h2>
+          <Dropdown>
+            <option>Select Box</option>
+            <option>Second Choice</option>
+            <option>Third Choice</option>
+          </Dropdown>
+          <Pre><Code>
+            const { '{Dropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
+            &lt;Dropdown>{'\n'}
+            &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
+            &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
+            &nbsp;&nbsp;&lt;option>Third Choice&lt;/option>{'\n'}
+            &lt;/Dropdown>
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Dropdown for use in forms</h2>
+          <FormDropdown>
+            <option>Select Box</option>
+            <option>Second Choice</option>
+            <option>Third Choice</option>
+          </FormDropdown>
+          <Pre><Code>
+            const { '{FormDropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
+            &lt;FormDropdown>{'\n'}
+            &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
+            &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
+            &nbsp;&nbsp;&lt;option>Third Choice&lt;/option>{'\n'}
+            &lt;/FormDropdown>
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Dropdown used mostly in Preferences; has a fixed width</h2>
+          <SettingDropdown>
+            <option>Select Box</option>
+            <option>Second Choice</option>
+            <option>Third Choice</option>
+          </SettingDropdown>
+          <Pre><Code>
+            const { '{SettingDropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
+            &lt;SettingDropdown>{'\n'}
+            &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
+            &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
+            &nbsp;&nbsp;&lt;option>Third Choice&lt;/option>{'\n'}
+            &lt;/SettingDropdown>
+          </Code></Pre>
+        </Container>
+
+        <GoTop />
+      </div>
+
+      <hr />
+
+      <div id='buttons'>
+        <h1 data-l10n-id='buttons' />
+        <button data-l10n-id='browserButton' className='browserButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          const { '{Textbox}' } = require('../../app/renderer/components/textbox'){'\n'}
-          &lt;Textbox />
+          &lt;button data-l10n-id='done' className='browserButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
-      </Container>
 
-      <Container>
-        <h2>Textbox for use in forms</h2>
-        <FormTextbox placeholder='FormTextbox' />
+        <button data-l10n-id='whiteButton' className='browserButton whiteButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          const { '{FormTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
-          &lt;FormTextbox />
+          &lt;button data-l10n-id='cancel' className='browserButton whiteButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
-      </Container>
 
-      <Container>
-        <h2>Texbox used mostly in Preferences; has a fixed width</h2>
-        <SettingTextbox placeholder='SettingTextbox' />
+        <button data-l10n-id='inlineButton' className='browserButton whiteButton inlineButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          const { '{SettingTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
-          &lt;SettingTextbox />
+          &lt;button data-l10n-id='done' className='browserButton whiteButton inlineButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
-      </Container>
 
-      <Container>
-        <h2>Textbox used on wallet recovery screen in Brave Payments</h2>
-        <RecoveryKeyTextbox placeholder='RecoveryKeyTextbox' />
+        <button data-l10n-id='wideButton' className='browserButton whiteButton wideButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          const { '{RecoveryKeyTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
-          &lt;RecoveryKeyTextbox />
+          &lt;button data-l10n-id='cancel' className='browserButton whiteButton wideButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
-      </Container>
 
-      <Container>
-        <h2>Plain textarea</h2>
-        <TextArea placeholder='TextArea' />
+        <button data-l10n-id='smallButton' className='browserButton whiteButton smallButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          const { '{TextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
-          &lt;TextArea />
+          &lt;button data-l10n-id='done' className='browserButton whiteButton smallButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
-      </Container>
 
-      <Container>
-        <h2>Default textarea; font size is specified</h2>
-        <DefaultTextArea placeholder='DefaultTextArea' />
+        <button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          const { '{DefaultTextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
-          &lt;DefaultTextArea />
+          &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
-      </Container>
-
-      <hr />
-
-      <h1 data-l10n-id='dropdowns' />
 
-      <Container>
-        <h2>Plain dropdown</h2>
-        <Dropdown>
-          <option>Select Box</option>
-          <option>Second Choice</option>
-          <option>Third Choice</option>
-        </Dropdown>
+        <button data-l10n-id='actionButton' className='browserButton actionButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          const { '{Dropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
-          &lt;Dropdown>{'\n'}
-          &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
-          &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
-          &nbsp;&nbsp;&lt;option>Third Choice&lt;/option>{'\n'}
-          &lt;/Dropdown>
+          &lt;button data-l10n-id='done' className='browserButton actionButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
-      </Container>
-
-      <Container>
-        <h2>Dropdown for use in forms</h2>
-        <FormDropdown>
-          <option>Select Box</option>
-          <option>Second Choice</option>
-          <option>Third Choice</option>
-        </FormDropdown>
+
+        <button data-l10n-id='subtleButton' className='browserButton subtleButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          const { '{FormDropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
-          &lt;FormDropdown>{'\n'}
-          &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
-          &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
-          &nbsp;&nbsp;&lt;option>Third Choice&lt;/option>{'\n'}
-          &lt;/FormDropdown>
+          &lt;button data-l10n-id='cancel' className='browserButton subtleButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
-      </Container>
-
-      <Container>
-        <h2>Dropdown used mostly in Preferences; has a fixed width</h2>
-        <SettingDropdown>
-          <option>Select Box</option>
-          <option>Second Choice</option>
-          <option>Third Choice</option>
-        </SettingDropdown>
+
+        <button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='whiteButton' className='browserButton whiteButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='wideButton' className='browserButton whiteButton wideButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          const { '{SettingDropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
-          &lt;SettingDropdown>{'\n'}
-          &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
-          &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
-          &nbsp;&nbsp;&lt;option>Third Choice&lt;/option>{'\n'}
-          &lt;/SettingDropdown>
+          &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />{'\n'}
+          &lt;button data-l10n-id='cancel' className='browserButton whiteButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />{'\n'}
+          &lt;button data-l10n-id='cancel' className='browserButton whiteButton wideButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />{'\n'}
+          &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
+          onClick={'{this.onRemoveBookmark}'} />{'\n'}
         </Code></Pre>
-      </Container>
+
+        <GoTop />
+      </div>
+
+      <hr />
+
+      <div id='commonForm'>
+        <h1>CommonForm</h1>
+
+        <Container>
+          <div style={{
+            height: '430px',
+            position: 'relative',
+            bottom: '40px'
+          }}>
+            <CommonForm>
+              <CommonFormTitle>CommonFormTitle</CommonFormTitle>
+              <CommonFormSection>
+                CommonFormSection - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.
+              </CommonFormSection>
+              <CommonFormSection>
+                <CommonFormDropdown>
+                  <option value='CommonFormDropdown'>CommonFormDropdown</option>
+                </CommonFormDropdown>
+              </CommonFormSection>
+              <CommonFormSection>
+                <CommonFormSubSection>CommonFormSubSection</CommonFormSubSection>
+                <CommonFormSubSection>
+                  <CommonFormDropdown>
+                    <option value='CommonFormDropdown'>CommonFormDropdown</option>
+                  </CommonFormDropdown>
+                </CommonFormSubSection>
+              </CommonFormSection>
+              <CommonFormSection>
+                CommonFormSection - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.
+              </CommonFormSection>
+              <CommonFormButtonWrapper>
+                <button data-l10n-id='Cancel' className='browserButton whiteButton' />
+                <button data-l10n-id='Done' className='browserButton primaryButton' />
+              </CommonFormButtonWrapper>
+              <CommonFormBottomWrapper>
+                <CommonFormClickable>CommonFormClickable</CommonFormClickable>
+              </CommonFormBottomWrapper>
+            </CommonForm>
+          </div>
+
+          <Pre><Code>
+            const &#123;{'\n'}
+            <Tab>CommonForm,{'\n'}</Tab>
+            <Tab>CommonFormTitle,{'\n'}</Tab>
+            <Tab>CommonFormSection,{'\n'}</Tab>
+            <Tab>CommonFormDropdown,{'\n'}</Tab>
+            <Tab>CommonFormClickable,{'\n'}</Tab>
+            <Tab>CommonFormSubSection,{'\n'}</Tab>
+            <Tab>CommonFormButtonWrapper,{'\n'}</Tab>
+            <Tab>CommonFormBottomWrapper{'\n'}</Tab>
+            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            {'\n'}
+            &lt;CommonForm&gt;{'\n'}
+            <Tab>&lt;CommonFormTitle&gt;CommonFormTitle&lt;/CommonFormTitle&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
+            <Tab2>CommonFormSection - Lorem ipsum dolor sit amet, consectetur adipisicing elit,{'\n'}</Tab2>
+            <Tab2>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
+            <Tab2>&lt;CommonFormDropdown&gt;{'\n'}</Tab2>
+            <Tab3>&lt;option value='CommonFormDropdown'&gt;CommonFormDropdown&lt;/option&gt;{'\n'}</Tab3>
+            <Tab2>&lt;/CommonFormDropdown&gt;{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
+            <Tab2>&lt;CommonFormSubSection&gt;CommonFormSubSection&lt;/CommonFormSubSection&gt;{'\n'}</Tab2>
+            <Tab2>&lt;CommonFormSubSection&gt;{'\n'}</Tab2>
+            <Tab3>&lt;CommonFormDropdown&gt;{'\n'}</Tab3>
+            <Tab4>&lt;option value='CommonFormDropdown'&gt;CommonFormDropdown&lt;/option&gt;{'\n'}</Tab4>
+            <Tab3>&lt;/CommonFormDropdown&gt;{'\n'}</Tab3>
+            <Tab2>&lt;/CommonFormSubSection&gt;{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
+            <Tab2>CommonFormSection - Lorem ipsum dolor sit amet, consectetur adipisicing elit,{'\n'}</Tab2>
+            <Tab2>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormButtonWrapper&gt;{'\n'}</Tab>
+            <Tab2>&lt;button data-l10n-id='Cancel' className='browserButton whiteButton' /&gt;{'\n'}</Tab2>
+            <Tab2>&lt;button data-l10n-id='Done' className='browserButton primaryButton' /&gt;{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormButtonWrapper&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormBottomWrapper&gt;{'\n'}</Tab>
+            <Tab2>&lt;CommonFormClickable&gt;CommonFormClickable&lt;/CommonFormClickable&gt;{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormBottomWrapper&gt;{'\n'}</Tab>
+            &lt;/CommonForm&gt;{'\n'}
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Title</h2>
+          <div style={{
+            height: '60px',
+            position: 'relative',
+            bottom: '40px'
+          }}>
+            <CommonForm>
+              <CommonFormTitle>CommonFormTitle</CommonFormTitle>
+            </CommonForm>
+          </div>
+
+          <Pre><Code>
+            const &#123;{'\n'}
+            <Tab>CommonForm,{'\n'}</Tab>
+            <Tab>CommonFormTitle{'\n'}</Tab>
+            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            {'\n'}
+            &lt;CommonForm&gt;{'\n'}
+            <Tab>&lt;CommonFormTitle&gt;CommonFormTitle&lt;/CommonFormTitle&gt;{'\n'}</Tab>
+            &lt;/CommonForm&gt;{'\n'}
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Section</h2>
+          <div style={{
+            height: '90px',
+            position: 'relative',
+            bottom: '40px'
+          }}>
+            <CommonForm>
+              <CommonFormSection>
+                CommonFormSection - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.
+              </CommonFormSection>
+            </CommonForm>
+          </div>
+
+          <Pre><Code>
+            const &#123;{'\n'}
+            <Tab>CommonForm,{'\n'}</Tab>
+            <Tab>CommonFormSection{'\n'}</Tab>
+            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            {'\n'}
+            &lt;CommonForm&gt;{'\n'}
+            <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
+            <Tab2>CommonFormSection - Lorem ipsum dolor sit amet, consectetur adipisicing elit,{'\n'}</Tab2>
+            <Tab2>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            &lt;/CommonForm&gt;{'\n'}
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Dropdown</h2>
+          <div style={{
+            height: '70px',
+            position: 'relative',
+            bottom: '40px'
+          }}>
+            <CommonForm>
+              <CommonFormSection>
+                <CommonFormDropdown>
+                  <option value='CommonFormDropdown'>CommonFormDropdown</option>
+                </CommonFormDropdown>
+              </CommonFormSection>
+            </CommonForm>
+          </div>
+
+          <Pre><Code>
+            const &#123;{'\n'}
+            <Tab>CommonForm,{'\n'}</Tab>
+            <Tab>CommonFormSection,{'\n'}</Tab>
+            <Tab>CommonFormDropdown{'\n'}</Tab>
+            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            {'\n'}
+            &lt;CommonForm&gt;{'\n'}
+            <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
+            <Tab2>&lt;CommonFormDropdown&gt;{'\n'}</Tab2>
+            <Tab3>&lt;option value='CommonFormDropdown'&gt;CommonFormDropdown&lt;/option&gt;{'\n'}</Tab3>
+            <Tab2>&lt;/CommonFormDropdown&gt;{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            &lt;/CommonForm&gt;{'\n'}
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Sub sections with a dropdown</h2>
+          <div style={{
+            height: '110px',
+            position: 'relative',
+            bottom: '40px'
+          }}>
+            <CommonForm>
+              <CommonFormSection>
+                <CommonFormSubSection>CommonFormSubSection</CommonFormSubSection>
+                <CommonFormSubSection>
+                  <CommonFormDropdown>
+                    <option value='CommonFormDropdown'>CommonFormDropdown</option>
+                  </CommonFormDropdown>
+                </CommonFormSubSection>
+              </CommonFormSection>
+            </CommonForm>
+          </div>
+
+          <Pre><Code>
+            const &#123;{'\n'}
+            <Tab>CommonForm,{'\n'}</Tab>
+            <Tab>CommonFormSection,{'\n'}</Tab>
+            <Tab>CommonFormSubSection,{'\n'}</Tab>
+            <Tab>CommonFormDropdown{'\n'}</Tab>
+            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            {'\n'}
+            &lt;CommonForm&gt;{'\n'}
+            <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
+            <Tab2>&lt;CommonFormSubSection&gt;CommonFormSubSection&lt;/CommonFormSubSection&gt;{'\n'}</Tab2>
+            <Tab2>&lt;CommonFormSubSection&gt;{'\n'}</Tab2>
+            <Tab3>&lt;CommonFormDropdown&gt;{'\n'}</Tab3>
+            <Tab4>&lt;option value='CommonFormDropdown'&gt;CommonFormDropdown&lt;/option&gt;{'\n'}</Tab4>
+            <Tab3>&lt;/CommonFormDropdown&gt;{'\n'}</Tab3>
+            <Tab2>&lt;/CommonFormSubSection&gt;{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            &lt;/CommonForm&gt;{'\n'}
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Button wrapper</h2>
+          <div style={{
+            height: '70px',
+            position: 'relative',
+            bottom: '40px'
+          }}>
+            <CommonForm>
+              <CommonFormButtonWrapper>
+                <button data-l10n-id='Cancel' className='browserButton whiteButton' />
+                <button data-l10n-id='Done' className='browserButton primaryButton' />
+              </CommonFormButtonWrapper>
+            </CommonForm>
+          </div>
+
+          <Pre><Code>
+            const &#123;{'\n'}
+            <Tab>CommonForm,{'\n'}</Tab>
+            <Tab>CommonFormButtonWrapper{'\n'}</Tab>
+            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            {'\n'}
+            &lt;CommonForm&gt;{'\n'}
+            <Tab>&lt;CommonFormButtonWrapper&gt;{'\n'}</Tab>
+            <Tab2>&lt;button data-l10n-id='Cancel' className='browserButton whiteButton' /&gt;{'\n'}</Tab2>
+            <Tab2>&lt;button data-l10n-id='Done' className='browserButton primaryButton' /&gt;{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormButtonWrapper&gt;{'\n'}</Tab>
+            &lt;/CommonForm&gt;{'\n'}
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Bottom wrapper with a clickable element</h2>
+          <div style={{
+            height: '60px',
+            position: 'relative',
+            bottom: '40px'
+          }}>
+            <CommonForm>
+              <CommonFormBottomWrapper>
+                <CommonFormClickable>CommonFormClickable</CommonFormClickable>
+              </CommonFormBottomWrapper>
+            </CommonForm>
+          </div>
+
+          <Pre><Code>
+            const &#123;{'\n'}
+            <Tab>CommonForm,{'\n'}</Tab>
+            <Tab>CommonFormBottomWrapper,{'\n'}</Tab>
+            <Tab>CommonFormClickable{'\n'}</Tab>
+            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            {'\n'}
+            &lt;CommonForm&gt;{'\n'}
+            <Tab>&lt;CommonFormBottomWrapper&gt;{'\n'}</Tab>
+            <Tab2>&lt;CommonFormClickable&gt;CommonFormClickable&lt;/CommonFormClickable&gt;{'\n'}</Tab2>
+            <Tab>&lt;/CommonFormBottomWrapper&gt;{'\n'}</Tab>
+            &lt;/CommonForm&gt;{'\n'}
+          </Code></Pre>
+        </Container>
+
+        <GoTop />
+      </div>
 
       <hr />
 
-      <h1 data-l10n-id='buttons' />
-      <button data-l10n-id='browserButton' className='browserButton' onClick={this.onRemoveBookmark} />
-      <Pre><Code>
-        &lt;button data-l10n-id='done' className='browserButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />
-      </Code></Pre>
-
-      <button data-l10n-id='whiteButton' className='browserButton whiteButton' onClick={this.onRemoveBookmark} />
-      <Pre><Code>
-        &lt;button data-l10n-id='cancel' className='browserButton whiteButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />
-      </Code></Pre>
-
-      <button data-l10n-id='inlineButton' className='browserButton whiteButton inlineButton' onClick={this.onRemoveBookmark} />
-      <Pre><Code>
-        &lt;button data-l10n-id='done' className='browserButton whiteButton inlineButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />
-      </Code></Pre>
-
-      <button data-l10n-id='wideButton' className='browserButton whiteButton wideButton' onClick={this.onRemoveBookmark} />
-      <Pre><Code>
-        &lt;button data-l10n-id='cancel' className='browserButton whiteButton wideButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />
-      </Code></Pre>
-
-      <button data-l10n-id='smallButton' className='browserButton whiteButton smallButton' onClick={this.onRemoveBookmark} />
-      <Pre><Code>
-        &lt;button data-l10n-id='done' className='browserButton whiteButton smallButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />
-      </Code></Pre>
-
-      <button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
-      <Pre><Code>
-        &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />
-      </Code></Pre>
-
-      <button data-l10n-id='actionButton' className='browserButton actionButton' onClick={this.onRemoveBookmark} />
-      <Pre><Code>
-        &lt;button data-l10n-id='done' className='browserButton actionButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />
-      </Code></Pre>
-
-      <button data-l10n-id='subtleButton' className='browserButton subtleButton' onClick={this.onRemoveBookmark} />
-      <Pre><Code>
-        &lt;button data-l10n-id='cancel' className='browserButton subtleButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />
-      </Code></Pre>
-
-      <button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='whiteButton' className='browserButton whiteButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='wideButton' className='browserButton whiteButton wideButton' onClick={this.onRemoveBookmark} /><button data-l10n-id='primaryButton' className='browserButton primaryButton' onClick={this.onRemoveBookmark} />
-      <Pre><Code>
-        &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />{'\n'}
-        &lt;button data-l10n-id='cancel' className='browserButton whiteButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />{'\n'}
-        &lt;button data-l10n-id='cancel' className='browserButton whiteButton wideButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />{'\n'}
-        &lt;button data-l10n-id='cancel' className='browserButton primaryButton'{'\n'}
-        onClick={'{this.onRemoveBookmark}'} />{'\n'}
-      </Code></Pre>
+      <div id='sectionTitle'>
+        <h1>Section title</h1>
+
+        <Container>
+          <h2>Default section title</h2>
+
+          <DefaultSectionTitle>General Settings on about:preferences</DefaultSectionTitle>
+
+          <Pre><Code>
+            const &#123;DefaultSectionTitle&#125; = require('../../app/renderer/components/common/sectionTitle'){'\n'}
+            {'\n'}
+            &lt;DefaultSectionTitle&gt;General Settings on about:preferences&lt;/DefaultSectionTitle&gt;{'\n'}
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>About page section title</h2>
+
+          <SectionTitleWrapper>
+            <AboutPageSectionTitle>Brave Sync</AboutPageSectionTitle>
+          </SectionTitleWrapper>
+
+          <Pre><Code>
+            const &#123;{'\n'}
+            <Tab>SectionTitleWrapper,{'\n'}</Tab>
+            <Tab>AboutPageSectionTitle{'\n'}</Tab>
+            &#125; = require('../../app/renderer/components/common/sectionTitle'){'\n'}
+            {'\n'}
+            &lt;SectionTitleWrapper&gt;{'\n'}
+            <Tab>&lt;AboutPageSectionTitle&gt;Brave Sync&lt;/AboutPageSectionTitle&gt;{'\n'}</Tab>
+            &lt;/SectionTitleWrapper&gt;
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>About page section title + beta label</h2>
+
+          <SectionTitleLabelWrapper>
+            <AboutPageSectionTitle>Brave Payments</AboutPageSectionTitle>
+            <SectionLabelTitle>beta</SectionLabelTitle>
+          </SectionTitleLabelWrapper>
+
+          <Pre><Code>
+            const &#123;{'\n'}
+            <Tab>SectionTitleLabelWrapper,{'\n'}</Tab>
+            <Tab>AboutPageSectionTitle,{'\n'}</Tab>
+            <Tab>SectionLabelTitle{'\n'}</Tab>
+            &#125; = require('../../app/renderer/components/common/sectionTitle'){'\n'}
+            {'\n'}
+            &lt;SectionTitleLabelWrapper&gt;{'\n'}
+            <Tab>&lt;AboutPageSectionTitle&gt;Brave Payments&lt;/AboutPageSectionTitle&gt;{'\n'}</Tab>
+            <Tab>&lt;SectionLabelTitle&gt;beta&lt;/SectionLabelTitle&gt;{'\n'}</Tab>
+            &lt;/SectionTitleLabelWrapper&gt;
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>About page section title + sub title</h2>
+
+          <SectionTitleWrapper>
+            <AboutPageSectionTitle>History</AboutPageSectionTitle>
+          </SectionTitleWrapper>
+
+          <AboutPageSectionSubTitle>Today</AboutPageSectionSubTitle>
+
+          <Pre><Code>
+            const &#123;{'\n'}
+            <Tab>SectionTitleWrapper,{'\n'}</Tab>
+            <Tab>AboutPageSectionTitle,{'\n'}</Tab>
+            <Tab>AboutPageSectionSubTitle{'\n'}</Tab>
+            &#125; = require('../../app/renderer/components/common/sectionTitle'){'\n'}
+            {'\n'}
+            &lt;SectionTitleWrapper&gt;{'\n'}
+            <Tab>&lt;AboutPageSectionTitle&gt;About Brave&lt;/AboutPageSectionTitle&gt;{'\n'}</Tab>
+            &lt;/SectionTitleWrapper&gt;{'\n'}
+            {'\n'}
+            &lt;AboutPageSectionSubTitle&gt;Today&lt;/AboutPageSectionSubTitle&gt;{'\n'}
+          </Code></Pre>
+        </Container>
+
+        <GoTop />
+      </div>
     </div>
   }
 }
@@ -231,7 +668,20 @@ const common = {
   margin: '0 auto'
 }
 
+const tabWidth = '1em'
+
 const styles = StyleSheet.create({
+  flexJustifyEnd: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  fontSizeInitial: {
+    fontSize: 'initial'
+  },
+  toc__marginBottom: {
+    marginBottom: '.25rem'
+  },
+
   wrapper: common,
   container: common,
   pre: {
@@ -246,6 +696,24 @@ const styles = StyleSheet.create({
   code: {
     fontFamily: 'monospace',
     whiteSpace: 'pre'
+  },
+
+  goTop: {
+    fontSize: '1rem',
+    margin: '1rem 0'
+  },
+
+  tab: {
+    textIndent: tabWidth
+  },
+  tab2: {
+    textIndent: `calc(${tabWidth} * 2)`
+  },
+  tab3: {
+    textIndent: `calc(${tabWidth} * 3)`
+  },
+  tab4: {
+    textIndent: `calc(${tabWidth} * 4)`
   }
 })
 
diff --git a/js/webtorrent/components/torrentFileList.js b/js/webtorrent/components/torrentFileList.js
index 215eef388ee..e89a388cd0c 100644
--- a/js/webtorrent/components/torrentFileList.js
+++ b/js/webtorrent/components/torrentFileList.js
@@ -5,6 +5,8 @@ const SortableTable = require('../../components/sortableTable')
 const {css} = require('aphrodite/no-important')
 const commonStyles = require('../../../app/renderer/components/styles/commonStyles')
 
+const {AboutPageSectionSubTitle} = require('../../../app/renderer/components/common/sectionTitle')
+
 class TorrentFileList extends React.Component {
   render () {
     const { torrent, stateOwner } = this.props
@@ -35,8 +37,8 @@ class TorrentFileList extends React.Component {
     }
 
     return (
-      <div className='torrentFileList'>
-        <div data-l10n-id='files' className='sectionTitle' />
+      <div>
+        <AboutPageSectionSubTitle data-l10n-id='files' />
         {content}
       </div>
     )
diff --git a/js/webtorrent/components/torrentStatus.js b/js/webtorrent/components/torrentStatus.js
index 2a1f2c9fe4f..5d6535a7adc 100644
--- a/js/webtorrent/components/torrentStatus.js
+++ b/js/webtorrent/components/torrentStatus.js
@@ -5,6 +5,8 @@ const cx = require('../../lib/classSet')
 const {css} = require('aphrodite/no-important')
 const commonStyles = require('../../../app/renderer/components/styles/commonStyles')
 
+const {AboutPageSectionSubTitle} = require('../../../app/renderer/components/common/sectionTitle')
+
 class TorrentStats extends React.Component {
   render () {
     const torrent = this.props.torrent
@@ -19,7 +21,8 @@ class TorrentStats extends React.Component {
     }
 
     return <div>
-      <div data-l10n-id='torrentStatus' className='sectionTitle' />
+      <AboutPageSectionSubTitle data-l10n-id='torrentStatus' />
+
       <div className={cx({
         torrentStats: true,
         [css(commonStyles.userSelectNone)]: true
diff --git a/js/webtorrent/components/torrentViewer.js b/js/webtorrent/components/torrentViewer.js
index 12c2dbe4972..15003a5f81d 100644
--- a/js/webtorrent/components/torrentViewer.js
+++ b/js/webtorrent/components/torrentViewer.js
@@ -9,6 +9,8 @@ const Button = require('../../components/button')
 const TorrentFileList = require('./torrentFileList')
 const TorrentStatus = require('./torrentStatus')
 
+const {AboutPageSectionTitle} = require('../../../app/renderer/components/common/sectionTitle')
+
 class TorrentViewer extends React.Component {
   constructor () {
     super()
@@ -31,11 +33,11 @@ class TorrentViewer extends React.Component {
     if (torrent) {
       if (name) {
         // No localization, just use the torrent name
-        titleElem = <div className='sectionTitle'>{name}</div>
+        titleElem = <AboutPageSectionTitle>{name}</AboutPageSectionTitle>
       } else {
         // 'Loading torrent information...'
         titleElem = (
-          <div className='sectionTitle' data-l10n-id='torrentLoadingInfo' />
+          <AboutPageSectionTitle data-l10n-id='torrentLoadingInfo' />
         )
       }
       mainButton = (
@@ -59,7 +61,7 @@ class TorrentViewer extends React.Component {
       const l10nStart = name ? 'startPrompt' : 'startPromptUntitled'
       const l10nArgs = {name}
       titleElem = (
-        <div className='sectionTitle'
+        <AboutPageSectionTitle
           data-l10n-id={l10nStart}
           data-l10n-args={JSON.stringify(l10nArgs)}
         />
@@ -106,7 +108,10 @@ class TorrentViewer extends React.Component {
           </div>
         </div>
 
-        <div className='siteDetailsPageContent'>
+        <div className={cx({
+          siteDetailsPageContent: true,
+          [css(commonStyles.siteDetailsPageContent)]: true
+        })}>
           <TorrentStatus torrent={torrent} errorMessage={errorMessage} />
           <TorrentFileList
             torrentId={torrentId}
diff --git a/less/about/brave.less b/less/about/brave.less
deleted file mode 100644
index 6b9b4b029a3..00000000000
--- a/less/about/brave.less
+++ /dev/null
@@ -1,20 +0,0 @@
-@import "./common.less";
-
-.siteDetailsPage {
-  .siteDetailsPageContent {
-    .sectionTitle {
-      padding-left: 0;
-    }
-
-    .title {
-      width: 400px;
-      display: flex;
-      justify-content: space-between;
-      margin-left: @aboutPageSectionPadding;
-    }
-    .title.releaseNotes {
-      justify-content: inherit;
-      margin-bottom: 24px;
-    }
-  }
-}
diff --git a/less/about/history.less b/less/about/history.less
index aad0d5655fa..5f98985fb9e 100644
--- a/less/about/history.less
+++ b/less/about/history.less
@@ -7,7 +7,6 @@
     &.aboutBrave {
       .sortableTable {
         user-select: text;
-        margin-left: @aboutPageSectionPadding;
         width: 400px;
         td {
           cursor: auto;
@@ -15,6 +14,7 @@
         }
       }
     }
+
     .sortableTable {
       user-select: none;
       // Time visited
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 6356b4d2abc..a333989aa5d 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -13,34 +13,7 @@ body {
   display: none !important; /* for testing/debug only */
 }
 
-.sectionTitle {
-  color: @darkGray;
-  cursor: default;
-  font-size: 1.2em;
-  margin-bottom: 0.7em;
-  user-select: none;
-}
-
 .prefTabContainer {
-  .sectionTitleWrapper {
-    position: relative;
-    margin-right: 49px;
-    min-height: 40px;
-    min-width: 240px;
-
-    .sectionTitle {
-      color: @braveOrange;
-      font-size: 28px;
-      margin-bottom: 8px;
-    }
-
-    .sectionSubTitle {
-      color: #999;
-      font-size: 15px;
-      vertical-align: top;
-    }
-  }
-
   flex-grow: 1;
   padding: 40px;
   min-width: 704px;
diff --git a/less/about/siteDetails.less b/less/about/siteDetails.less
index adc000fb379..9a77f509521 100644
--- a/less/about/siteDetails.less
+++ b/less/about/siteDetails.less
@@ -10,12 +10,6 @@ body {
   background: @veryLightGray;
 }
 
-/*name/color taken from preferences.less*/
-.sectionTitle {
-  color: @braveOrange;
-  cursor: default;
-  user-select: none;
-}
 
 .siteDetailsPage {
   margin: 0;
@@ -24,10 +18,6 @@ body {
   .siteDetailsPageHeader {
     padding: 0 @aboutPageSectionPadding;
 
-    .sectionTitle {
-      font-size: 24px;
-      display: inline-block;
-    }
     .headerActions {
       float: right;
 
@@ -77,12 +67,6 @@ body {
     margin-top: 24px;
     display: block;
     clear: both;
-
-    .sectionTitle {
-      font-size: 16px;
-      margin-bottom: 12px;
-      padding-left: @aboutPageSectionPadding;
-    }
   }
 }
 
diff --git a/less/modalOverlay.less b/less/modalOverlay.less
index 660bcfa4ca2..3a55f095c56 100644
--- a/less/modalOverlay.less
+++ b/less/modalOverlay.less
@@ -77,6 +77,7 @@
       transition: @transitionFast;
     }
 
+    /* Copied to siteDetails.js */
     .sectionTitle {
       font-size: 22px;
       padding: 35px 0 10px 0;
diff --git a/less/webtorrent.less b/less/webtorrent.less
index 59dca70cbcf..2689cca3ce0 100644
--- a/less/webtorrent.less
+++ b/less/webtorrent.less
@@ -16,12 +16,6 @@
   }
 
   .siteDetailsPageContent {
-    padding: 0 24px;
-
-    .sectionTitle {
-      padding-left: 0;
-    }
-
     .sortableTable {
       user-select: none;
       table-layout: fixed;
@@ -62,8 +56,6 @@
 }
 
 .torrentStats {
-  margin-top: 10px;
-  margin-bottom: 10px;
   text-overflow: ellipsis;
   overflow: hidden;
 }
@@ -79,9 +71,6 @@
   text-decoration: none; // for when legal notice is a link
 }
 
-.torrentStats {
-  margin-right: 10px
-}
 
 .content {
   margin-top: 20px;
@@ -112,8 +101,3 @@ audio {
   padding-left: 4px;
   padding-right: 4px;
 }
-
-.torrentFileList {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}