diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js
index c0968466c..7c12e321b 100644
--- a/test/e2e/tests/send-eth.spec.js
+++ b/test/e2e/tests/send-eth.spec.js
@@ -187,7 +187,7 @@ describe('Send ETH from dapp using advanced gas controls', function () {
         // goes to the settings screen
         await driver.clickElement('.account-menu__icon');
         await driver.clickElement({ text: 'Settings', tag: 'div' });
-        await driver.clickElement({ text: 'Advanced', tag: 'h4' });
+        await driver.clickElement({ text: 'Advanced', tag: 'div' });
         await driver.clickElement(
           '[data-testid="advanced-setting-show-testnet-conversion"] .settings-page__content-item-col > div > div',
         );
diff --git a/test/e2e/tests/threebox.spec.js b/test/e2e/tests/threebox.spec.js
index ab9a88d23..ac58e68ab 100644
--- a/test/e2e/tests/threebox.spec.js
+++ b/test/e2e/tests/threebox.spec.js
@@ -37,20 +37,20 @@ describe('Threebox', function () {
         await driver.clickElement({ text: 'Settings', tag: 'div' });
 
         // turns on threebox syncing
-        await driver.clickElement({ text: 'Advanced', tag: 'h4' });
+        await driver.clickElement({ text: 'Advanced', tag: 'div' });
         await driver.clickElement(
           '[data-testid="advanced-setting-3box"] .toggle-button div',
         );
 
         // updates settings and address book
         // navigates to General settings
-        await driver.clickElement({ text: 'General', tag: 'h4' });
+        await driver.clickElement({ text: 'General', tag: 'div' });
 
         // turns on use of blockies
         await driver.clickElement('.toggle-button > div');
 
         // adds an address to the contact list
-        await driver.clickElement({ text: 'Contacts', tag: 'h4' });
+        await driver.clickElement({ text: 'Contacts', tag: 'div' });
 
         await driver.clickElement('.address-book__link');
         await driver.fill('#nickname', 'Test User Name 11');
@@ -89,7 +89,7 @@ describe('Threebox', function () {
         assert.equal(toggleLabelText, 'ON');
 
         // finds the restored address in the contact list
-        await driver.clickElement({ text: 'Contacts', tag: 'h4' });
+        await driver.clickElement({ text: 'Contacts', tag: 'div' });
         await driver.findElement({ text: 'Test User Name 11', tag: 'div' });
       },
     );
diff --git a/ui/components/app/tab-bar/index.scss b/ui/components/app/tab-bar/index.scss
index f32d3fb5b..87b898c79 100644
--- a/ui/components/app/tab-bar/index.scss
+++ b/ui/components/app/tab-bar/index.scss
@@ -36,13 +36,21 @@
     }
 
     &__content {
-      padding: 16px;
+      padding: 12px 18px;
       display: flex;
       flex-flow: row wrap;
       align-items: center;
       position: relative;
       z-index: 201;
 
+      &__title {
+        @include H4;
+
+        @media screen and (min-width: $break-large) {
+          @include H6;
+        }
+      }
+
       &__description {
         display: none;
 
diff --git a/ui/components/app/tab-bar/tab-bar.js b/ui/components/app/tab-bar/tab-bar.js
index a4dc9afd8..c503a801d 100644
--- a/ui/components/app/tab-bar/tab-bar.js
+++ b/ui/components/app/tab-bar/tab-bar.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Typography from '../../ui/typography/typography';
-import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
 const TabBar = (props) => {
   const { tabs = [], onSelect, isActive } = props;
@@ -19,7 +17,7 @@ const TabBar = (props) => {
         >
           <div className="tab-bar__tab__content">
             <div className="tab-bar__tab__content__icon">{icon}</div>
-            <Typography variant={TYPOGRAPHY.H4}>{content}</Typography>
+            <div className="tab-bar__tab__content__title">{content}</div>
           </div>
           <div className="tab-bar__tab__caret" />
         </button>
diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
index f02c6e199..f257c79af 100644
--- a/ui/pages/settings/index.scss
+++ b/ui/pages/settings/index.scss
@@ -133,13 +133,13 @@
 
       @media screen and (min-width: $break-large) {
         flex: 0 0 40%;
-        min-width: 264px;
-        padding-top: 8px;
+        max-width: 197px;
+        padding-top: 13px;
       }
 
       .tab-bar__tab {
         @media screen and (min-width: $break-large) {
-          padding: 16px 24px 0;
+          max-height: 50px;
         }
       }
     }