diff --git a/app/common/constants/toolbarUserInterfaceScale.js b/app/common/constants/toolbarUserInterfaceScale.js
new file mode 100644
index 00000000000..5aff8f352e7
--- /dev/null
+++ b/app/common/constants/toolbarUserInterfaceScale.js
@@ -0,0 +1,21 @@
+/* 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 scaleSize = {
+  SMALLER: 'smaller',
+  NORMAL: 'normal',
+  LARGER: 'larger',
+  SUPERSIZE: 'supersize'
+}
+
+let zoomLevel = {}
+zoomLevel[scaleSize.SMALLER] = -0.5
+zoomLevel[scaleSize.NORMAL] = 0.0
+zoomLevel[scaleSize.LARGER] = 1.0
+zoomLevel[scaleSize.SUPERSIZE] = 3.0
+
+module.exports = {
+  scaleSize,
+  zoomLevel
+}
diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index ac92c668ffc..015fd191dd5 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -260,6 +260,7 @@ enableVimium=Enable Vimium
 useHardwareAcceleration=Use hardware acceleration when available *
 useSmoothScroll=Enable smooth scrolling *
 defaultZoomLevel=Default zoom level
+toolbarUserInterfaceScale=Toolbar and UI elements scale
 en-US=English (U.S.)
 nl-NL=Dutch (Netherlands)
 pt-BR=Portuguese (Brazil)
@@ -359,3 +360,7 @@ dashboardShowImages=Show images
 requiresRestart=* Requires browser restart
 showAll=Show all
 hideLower=Hide lower
+scaleSizeSmaller=Smaller
+scaleSizeNormal=Normal
+scaleSizeLarger=Larger
+scaleSizeSuper=Supersize
diff --git a/app/renderer/components/preferences/advancedTab.js b/app/renderer/components/preferences/advancedTab.js
new file mode 100644
index 00000000000..68d1780036b
--- /dev/null
+++ b/app/renderer/components/preferences/advancedTab.js
@@ -0,0 +1,69 @@
+/* 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 commonStyles = require('../styles/commonStyles')
+
+// Actions
+const {getSetting} = require('../../../../js/settings')
+
+// Components
+const {SettingsList, SettingItem, SettingCheckbox} = require('../settings')
+const {SettingDropdown} = require('../dropdown')
+const {DefaultSectionTitle} = require('../common/sectionTitle')
+
+// Constants
+const settings = require('../../../../js/constants/settings')
+const {scaleSize} = require('../../../common/constants/toolbarUserInterfaceScale')
+
+// Utils
+const {changeSetting} = require('../../lib/settingsUtil')
+
+class AdvancedTab extends ImmutableComponent {
+  render () {
+    return <div>
+      <main className={css(styles.advancedTabMain)}>
+        <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} />
+          <SettingCheckbox dataL10nId='sendCrashReports' prefKey={settings.SEND_CRASH_REPORTS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+          <SettingCheckbox dataL10nId='sendUsageStatistics' prefKey={settings.SEND_USAGE_STATISTICS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+        </SettingsList>
+
+        <DefaultSectionTitle data-l10n-id='toolbarUserInterfaceScale' />
+        <SettingItem>
+          <SettingDropdown
+            value={getSetting(settings.TOOLBAR_UI_SCALE, this.props.settings)}
+            onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TOOLBAR_UI_SCALE)}>
+            data-type='float'>
+            <option data-l10n-id='scaleSizeSmaller' value={scaleSize.SMALLER} />
+            <option data-l10n-id='scaleSizeNormal' value={scaleSize.NORMAL} />
+            <option data-l10n-id='scaleSizeLarger' value={scaleSize.LARGER} />
+            <option data-l10n-id='scaleSizeSuper' value={scaleSize.SUPERSIZE} />
+          </SettingDropdown>
+        </SettingItem>
+      </main>
+      <footer className={css(styles.moreInfo)}>
+        <div data-l10n-id='requiresRestart' className={css(commonStyles.requiresRestart)} />
+      </footer>
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  advancedTabMain: {
+    paddingBottom: '40px'
+  },
+
+  moreInfo: {
+    display: 'flex',
+    flex: 1,
+    alignItems: 'flex-end'
+  }
+})
+
+module.exports = AdvancedTab
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index e236134ac51..f6b1949beb1 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -156,6 +156,10 @@ const styles = StyleSheet.create({
   noPaddingRight: {
     paddingRight: 0
   },
+  requiresRestart: {
+    fontStyle: 'italic',
+    marginBottom: '2em'
+  },
 
   // User select
   userSelect: {
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 4f4bb67aab8..39878b1e0e2 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -7,6 +7,8 @@ const React = require('react')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
 const Immutable = require('immutable')
 const UrlUtil = require('../lib/urlutil')
+const {css} = require('aphrodite/no-important')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
 
 // Components
 const PreferenceNavigation = require('../../app/renderer/components/preferences/preferenceNavigation')
@@ -21,6 +23,7 @@ const PaymentsTab = require('../../app/renderer/components/preferences/paymentsT
 const SyncTab = require('../../app/renderer/components/preferences/syncTab')
 const PluginsTab = require('../../app/renderer/components/preferences/pluginsTab')
 const ExtensionsTab = require('../../app/renderer/components/preferences/extensionsTab')
+const AdvancedTab = require('../../app/renderer/components/preferences/advancedTab')
 const {populateDefaultExtensions} = require('../../app/renderer/lib/extensionsUtil')
 const {getZoomValuePercentage} = require('../lib/zoom')
 
@@ -240,7 +243,7 @@ class GeneralTab extends ImmutableComponent {
             settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         </SettingItem>
       </SettingsList>
-      <div data-l10n-id='requiresRestart' className='requiresRestart' />
+      <div data-l10n-id='requiresRestart' className={css(commonStyles.requiresRestart)} />
     </SettingsList>
   }
 }
@@ -648,22 +651,7 @@ class SecurityTab extends ImmutableComponent {
         <SettingCheckbox dataL10nId='doNotTrack' prefKey={settings.DO_NOT_TRACK} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
       </SettingsList>
       <SitePermissionsPage siteSettings={this.props.siteSettings} names={permissionNames} />
-      <div data-l10n-id='requiresRestart' className='requiresRestart' />
-    </div>
-  }
-}
-
-class AdvancedTab extends ImmutableComponent {
-  render () {
-    return <div>
-      <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} />
-        <SettingCheckbox dataL10nId='sendCrashReports' prefKey={settings.SEND_CRASH_REPORTS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingCheckbox dataL10nId='sendUsageStatistics' prefKey={settings.SEND_USAGE_STATISTICS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-      </SettingsList>
-      <div data-l10n-id='requiresRestart' className='requiresRestart' />
+      <div data-l10n-id='requiresRestart' className={css(commonStyles.requiresRestart)} />
     </div>
   }
 }
diff --git a/js/constants/appConfig.js b/js/constants/appConfig.js
index dd01b37a726..589d8c74a26 100644
--- a/js/constants/appConfig.js
+++ b/js/constants/appConfig.js
@@ -189,6 +189,7 @@ module.exports = {
     'advanced.minimum-visits': 1,
     'advanced.auto-suggest-sites': true,
     'advanced.hide-lower-sites': true,
+    'advanced.toolbar-ui-scale': 'normal',
     'shutdown.clear-history': false,
     'shutdown.clear-downloads': false,
     'shutdown.clear-cache': false,
diff --git a/js/constants/settings.js b/js/constants/settings.js
index 91027657c8e..eff48247e84 100644
--- a/js/constants/settings.js
+++ b/js/constants/settings.js
@@ -70,6 +70,7 @@ const settings = {
   MINIMUM_VISIT_TIME: 'advanced.minimum-visit-time',
   MINIMUM_VISITS: 'advanced.minimum-visits',
   AUTO_SUGGEST_SITES: 'advanced.auto-suggest-sites',
+  TOOLBAR_UI_SCALE: 'advanced.toolbar-ui-scale',
   // Sync settings
   SYNC_ENABLED: 'sync.enabled',
   SYNC_DEVICE_NAME: 'sync.device-name',
diff --git a/js/entry.js b/js/entry.js
index 00fb496704a..351e640d8ac 100644
--- a/js/entry.js
+++ b/js/entry.js
@@ -34,9 +34,7 @@ const patch = require('immutablepatch')
 const l10n = require('./l10n')
 const currentWindow = require('../app/renderer/currentWindow')
 
-// don't allow scaling or zooming of the ui
 webFrame.setPageScaleLimits(1, 1)
-webFrame.setZoomLevelLimits(0, 0)
 
 l10n.init()
 
diff --git a/js/stores/appStore.js b/js/stores/appStore.js
index 63a39189e2d..33b15c16970 100644
--- a/js/stores/appStore.js
+++ b/js/stores/appStore.js
@@ -35,6 +35,7 @@ const basicAuth = require('../../app/browser/basicAuth')
 const webtorrent = require('../../app/browser/webtorrent')
 const assert = require('assert')
 const profiles = require('../../app/browser/profiles')
+const {zoomLevel} = require('../../app/common/constants/toolbarUserInterfaceScale')
 
 // state helpers
 const basicAuthState = require('../../app/common/state/basicAuthState')
@@ -191,6 +192,7 @@ const createWindow = (action) => {
 
   const homepageSetting = getSetting(settings.HOMEPAGE)
   const startupSetting = getSetting(settings.STARTUP_MODE)
+  const toolbarUserInterfaceScale = getSetting(settings.TOOLBAR_UI_SCALE)
 
   setImmediate(() => {
     let mainWindow = new BrowserWindow(Object.assign(windowProps, browserOpts, {disposition: frameOpts.disposition}))
@@ -221,7 +223,7 @@ const createWindow = (action) => {
 
     mainWindow.webContents.on('did-finish-load', (e) => {
       lastEmittedState = appState
-      mainWindow.webContents.setZoomLevel(0.0)
+      mainWindow.webContents.setZoomLevel(zoomLevel[toolbarUserInterfaceScale] || 0.0)
       e.sender.send(messages.INITIALIZE_WINDOW,
         {
           disposition: frameOpts.disposition,
@@ -346,6 +348,12 @@ function handleChangeSettingAction (settingKey, settingValue) {
     case settings.DEFAULT_ZOOM_LEVEL:
       filtering.setDefaultZoomLevel(settingValue)
       break
+    case settings.TOOLBAR_UI_SCALE: {
+      const newZoomLevel = zoomLevel[settingValue] || 0
+      BrowserWindow.getAllWindows().forEach(function (wnd) {
+        wnd.webContents.setZoomLevel(newZoomLevel)
+      })
+    } break
     default:
   }
 }
diff --git a/less/about/preferences.less b/less/about/preferences.less
index a333989aa5d..1c6bbbfb61c 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -658,8 +658,3 @@ table.sortableTable {
 #syncQR {
   margin: 1em;
 }
-
-.requiresRestart {
-  font-style: italic;
-  margin-bottom: 2em;
-}