diff --git a/app/renderer/components/preferences/tabsTab.js b/app/renderer/components/preferences/tabsTab.js
new file mode 100644
index 00000000000..b8663d469ff
--- /dev/null
+++ b/app/renderer/components/preferences/tabsTab.js
@@ -0,0 +1,128 @@
+/* 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 {DefaultSectionTitle} = require('../common/sectionTitle')
+const {SettingsList, SettingItem, SettingCheckbox} = require('../common/settings')
+
+const {SettingDropdown} = require('../common/dropdown')
+
+const {tabCloseAction} = require('../../../common/constants/settingsEnums')
+const {changeSetting} = require('../../lib/settingsUtil')
+const getSetting = require('../../../../js/settings').getSetting
+const settings = require('../../../../js/constants/settings')
+
+class TabsTab extends ImmutableComponent {
+  get tabsPerTabPageOption () {
+    return [6, 8, 10, 20, 100]
+  }
+
+  get tabCloseActionOptions () {
+    return [
+      {
+        id: 'tabCloseActionLastActive',
+        action: tabCloseAction.LAST_ACTIVE
+      },
+      {
+        id: 'tabCloseActionNext',
+        action: tabCloseAction.NEXT
+      },
+      {
+        id: 'tabCloseActionParent',
+        action: tabCloseAction.PARENT
+      }
+    ]
+  }
+  render () {
+    return (
+      <div>
+        <DefaultSectionTitle data-l10n-id='tabSettings' />
+        <SettingsList>
+          <SettingItem dataL10nId='tabsPerTabPage'>
+            <SettingDropdown
+              data-test-id='tabsPerTabPage'
+              value={getSetting(settings.TABS_PER_PAGE, this.props.settings)}
+              data-type='number'
+              onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TABS_PER_PAGE)}>
+              {// Sorry, Brad says he hates primes :'(
+              this.tabsPerTabPageOption.map(option =>
+                <option
+                  data-test-id='tabsPerTabPageOption'
+                  data-test-active={
+                    getSetting(settings.TABS_PER_PAGE, this.props.settings) === option
+                  }
+                  value={option}
+                  key={option}>
+                  {option}
+                </option>
+              )}
+            </SettingDropdown>
+          </SettingItem>
+          <SettingItem dataL10nId='tabCloseAction'>
+            <SettingDropdown
+              value={getSetting(settings.TAB_CLOSE_ACTION, this.props.settings)}
+              onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TAB_CLOSE_ACTION)}>
+              {this.tabCloseActionOptions.map(option =>
+                <option
+                  data-l10n-id={option.id}
+                  data-test-id='tabCloseActionActiveOption'
+                  data-test-active={
+                    getSetting(settings.TAB_CLOSE_ACTION, this.props.settings) === option.action
+                  }
+                  value={option.action}
+                />
+              )}
+            </SettingDropdown>
+          </SettingItem>
+          <SettingCheckbox
+            dataL10nId='switchToNewTabs'
+            dataTestId='switchToNewTabs'
+            testIsEnabled={
+              getSetting(settings.SWITCH_TO_NEW_TABS, this.props.settings) === true
+            }
+            prefKey={settings.SWITCH_TO_NEW_TABS}
+            settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+          />
+          <SettingCheckbox
+            dataL10nId='paintTabs'
+            dataTestId='paintTabs'
+            testIsEnabled={
+              getSetting(settings.PAINT_TABS, this.props.settings) === true
+            }
+            prefKey={settings.PAINT_TABS}
+            settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+          />
+          <SettingCheckbox
+            dataL10nId='showTabPreviews'
+            dataTestId='showTabPreviews'
+            testIsEnabled={
+              getSetting(settings.SHOW_TAB_PREVIEWS, this.props.settings) === true
+            }
+            prefKey={settings.SHOW_TAB_PREVIEWS}
+            settings={this.props.settings}
+            onChangeSetting={this.props.onChangeSetting}
+          />
+          <SettingItem dataL10nId='dashboardSettingsTitle'>
+            <SettingCheckbox
+              dataL10nId='dashboardShowImages'
+              dataTestId='dashboardShowImages'
+              testIsEnabled={
+                getSetting(settings.SHOW_DASHBOARD_IMAGES, this.props.settings) === true
+              }
+              prefKey={settings.SHOW_DASHBOARD_IMAGES}
+              settings={this.props.settings}
+              onChangeSetting={this.props.onChangeSetting}
+            />
+          </SettingItem>
+        </SettingsList>
+      </div>
+    )
+  }
+}
+
+module.exports = TabsTab
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 1eb1eba5a27..c6d8f33900f 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -20,6 +20,7 @@ const BrowserButton = require('../../app/renderer/components/common/browserButto
 
 // Tabs
 const PaymentsTab = require('../../app/renderer/components/preferences/paymentsTab')
+const TabsTab = require('../../app/renderer/components/preferences/tabsTab')
 const SyncTab = require('../../app/renderer/components/preferences/syncTab')
 const PluginsTab = require('../../app/renderer/components/preferences/pluginsTab')
 const ExtensionsTab = require('../../app/renderer/components/preferences/extensionsTab')
@@ -34,7 +35,7 @@ const messages = require('../constants/messages')
 const settings = require('../constants/settings')
 const {changeSetting} = require('../../app/renderer/lib/settingsUtil')
 const {passwordManagers, extensionIds} = require('../constants/passwordManagers')
-const {startsWithOption, newTabMode, bookmarksToolbarMode, tabCloseAction, fullscreenOption, autoplayOption} = require('../../app/common/constants/settingsEnums')
+const {startsWithOption, newTabMode, bookmarksToolbarMode, fullscreenOption, autoplayOption} = require('../../app/common/constants/settingsEnums')
 
 const aboutActions = require('./aboutActions')
 const appActions = require('../actions/appActions')
@@ -336,43 +337,6 @@ class SearchTab extends ImmutableComponent {
   }
 }
 
-class TabsTab extends ImmutableComponent {
-  render () {
-    return <div>
-      <DefaultSectionTitle data-l10n-id='tabSettings' />
-      <SettingsList>
-        <SettingItem dataL10nId='tabsPerTabPage'>
-          <SettingDropdown
-            value={getSetting(settings.TABS_PER_PAGE, this.props.settings)}
-            data-type='number'
-            onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TABS_PER_PAGE)}>
-            {
-              // Sorry, Brad says he hates primes :'(
-              [6, 8, 10, 20, 100].map((x) =>
-                <option value={x} key={x}>{x}</option>)
-            }
-          </SettingDropdown>
-        </SettingItem>
-        <SettingItem dataL10nId='tabCloseAction'>
-          <SettingDropdown
-            value={getSetting(settings.TAB_CLOSE_ACTION, this.props.settings)}
-            onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.TAB_CLOSE_ACTION)}>
-            <option data-l10n-id='tabCloseActionLastActive' value={tabCloseAction.LAST_ACTIVE} />
-            <option data-l10n-id='tabCloseActionNext' value={tabCloseAction.NEXT} />
-            <option data-l10n-id='tabCloseActionParent' value={tabCloseAction.PARENT} />
-          </SettingDropdown>
-        </SettingItem>
-        <SettingCheckbox dataL10nId='switchToNewTabs' prefKey={settings.SWITCH_TO_NEW_TABS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingCheckbox dataL10nId='paintTabs' prefKey={settings.PAINT_TABS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingCheckbox dataL10nId='showTabPreviews' prefKey={settings.SHOW_TAB_PREVIEWS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <SettingItem dataL10nId='dashboardSettingsTitle'>
-          <SettingCheckbox dataL10nId='dashboardShowImages' prefKey={settings.SHOW_DASHBOARD_IMAGES} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        </SettingItem>
-      </SettingsList>
-    </div>
-  }
-}
-
 class SitePermissionsPage extends React.Component {
   hasEntryForPermission (name) {
     return this.props.siteSettings.some((value) => {
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index ef8979f6c2e..7ea7e454b61 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -128,5 +128,9 @@ module.exports = {
   downloadRemoveFromList: '[data-test-id="downloadRemoveFromList"]',
 
   siteInfoDialog: '[data-test-id="siteInfoDialog"]',
-  viewCertificateButton: '[data-test-id="viewCertificate"]'
+  viewCertificateButton: '[data-test-id="viewCertificate"]',
+
+  // about:preferences#tabs
+  tabsPerTabPageActiveOption: '[data-test-id="tabsPerTabPageOption"][data-test-active="true"]',
+  tabCloseActionActiveOption: '[data-test-id="tabCloseActionActiveOption"][data-test-active="true"]'
 }
diff --git a/test/unit/app/renderer/components/preferences/tabsTabTest.js b/test/unit/app/renderer/components/preferences/tabsTabTest.js
new file mode 100644
index 00000000000..5b00726c3a6
--- /dev/null
+++ b/test/unit/app/renderer/components/preferences/tabsTabTest.js
@@ -0,0 +1,219 @@
+/* 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/. */
+/* global describe, before, after, it */
+
+const mockery = require('mockery')
+const {mount, shallow} = require('enzyme')
+const {tabCloseAction} = require('../../../../../../app/common/constants/settingsEnums')
+const {tabsPerTabPageActiveOption, tabCloseActionActiveOption} = require('../../../../../lib/selectors')
+const assert = require('assert')
+const fakeElectron = require('../../../../lib/fakeElectron')
+let settingDefaultValue
+let TabsTab
+require('../../../../braveUnit')
+
+describe('TabsTab component', function () {
+  before(function () {
+    mockery.enable({
+      warnOnReplace: false,
+      warnOnUnregistered: false,
+      useCleanCache: true
+    })
+    mockery.registerMock('../../../extensions/brave/img/caret_down_grey.svg', 'caret_down_grey.svg')
+
+    mockery.registerMock('electron', fakeElectron)
+    mockery.registerMock('../../../../js/settings', {
+      getSetting: () => settingDefaultValue
+    })
+    window.chrome = fakeElectron
+    TabsTab = require('../../../../../../app/renderer/components/preferences/TabsTab')
+  })
+  after(function () {
+    mockery.disable()
+  })
+
+  describe('rendering', function () {
+    it('component should render', function () {
+      const wrapper = mount(<TabsTab />)
+      assert.equal(wrapper.length, 1)
+    })
+  })
+
+  describe('number of tabs per tab set', function () {
+    it('can switch to 6 tabs', function () {
+      settingDefaultValue = 6
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.equal(
+        wrapper
+          .find(tabsPerTabPageActiveOption)
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+    it('can switch to 8 tabs', function () {
+      settingDefaultValue = 8
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.equal(
+        wrapper
+          .find(tabsPerTabPageActiveOption)
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+    it('can switch to 10 tabs', function () {
+      settingDefaultValue = 10
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.equal(
+        wrapper
+          .find(tabsPerTabPageActiveOption)
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+    it('defaults to 20 tabs', function () {
+      settingDefaultValue = 20
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.equal(
+        wrapper
+          .find(tabsPerTabPageActiveOption)
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+    it('can switch to 100 tabs', function () {
+      settingDefaultValue = 100
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.equal(
+        wrapper
+          .find(tabsPerTabPageActiveOption)
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+    it('can not switch to other values', function () {
+      settingDefaultValue = 'what else?'
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.notEqual(
+        wrapper
+          .find(tabsPerTabPageActiveOption)
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+  })
+
+  describe('when closing an active tab', function () {
+    it('can select its parent tab', function () {
+      settingDefaultValue = tabCloseAction.PARENT
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.equal(
+        wrapper
+          .find(tabCloseActionActiveOption)
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+    it('can select the last viewed tab', function () {
+      settingDefaultValue = tabCloseAction.LAST_ACTIVE
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.equal(
+        wrapper
+          .find(tabCloseActionActiveOption)
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+    it('can select the next tab', function () {
+      settingDefaultValue = tabCloseAction.NEXT
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.equal(
+        wrapper
+          .find(tabCloseActionActiveOption)
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+    it('can not select other value', function () {
+      settingDefaultValue = tabCloseAction.I_HAVE_NO_IDEA_WHAT_IM_DOING
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.notEqual(
+        wrapper
+          .find(tabCloseActionActiveOption)
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+  })
+
+  describe('basic functionality', function () {
+    it('can switch to new tabs immediately', function () {
+      settingDefaultValue = true
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.notEqual(
+        wrapper
+          .find('[dataTestId="switchToNewTabs"]')
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+    it('can show tab previews on hover', function () {
+      settingDefaultValue = true
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.notEqual(
+        wrapper
+          .find('[dataTestId="paintTabs"]')
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+    it('can show tabs in page theme color', function () {
+      settingDefaultValue = true
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.notEqual(
+        wrapper
+          .find('[dataTestId="showTabPreviews"]')
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+
+    it('dashboard can show images', function () {
+      settingDefaultValue = true
+      const wrapper = shallow(<TabsTab settings={settingDefaultValue} />)
+
+      assert.notEqual(
+        wrapper.find('[dataTestId="dashboardShowImages"]')
+          .map(option => option.props().value)
+          .includes(settingDefaultValue),
+        true
+      )
+    })
+  })
+})