diff --git a/app/ledger.js b/app/ledger.js
index 985833e712..61d7197f7d 100644
--- a/app/ledger.js
+++ b/app/ledger.js
@@ -2003,7 +2003,7 @@ const showDisabledNotifications = () => {
       message: notificationTryPaymentsMessage,
       buttons: [
         {text: locale.translation('noThanks')},
-        {text: locale.translation('notificationTryPaymentsYes'), className: 'primary'}
+        {text: locale.translation('notificationTryPaymentsYes'), className: 'primaryButton'}
       ],
       options: {
         style: 'greetingStyle',
@@ -2062,7 +2062,7 @@ const showNotificationAddFunds = () => {
     buttons: [
       {text: locale.translation('turnOffNotifications')},
       {text: locale.translation('updateLater')},
-      {text: locale.translation('addFunds'), className: 'primary'}
+      {text: locale.translation('addFunds'), className: 'primaryButton'}
     ],
     options: {
       style: 'greetingStyle',
@@ -2086,7 +2086,7 @@ const showNotificationReviewPublishers = (nextTime) => {
     buttons: [
       {text: locale.translation('turnOffNotifications')},
       {text: locale.translation('dismiss')},
-      {text: locale.translation('reviewSites'), className: 'primary'}
+      {text: locale.translation('reviewSites'), className: 'primaryButton'}
     ],
     options: {
       style: 'greetingStyle',
@@ -2107,7 +2107,7 @@ const showNotificationPaymentDone = (transactionContributionFiat) => {
     message: notificationPaymentDoneMessage,
     buttons: [
       {text: locale.translation('turnOffNotifications')},
-      {text: locale.translation('Ok'), className: 'primary'}
+      {text: locale.translation('Ok'), className: 'primaryButton'}
     ],
     options: {
       style: 'greetingStyle',
diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
index fb81cc9bf0..2b5ec7c2ff 100644
--- a/app/renderer/components/preferences/payment/advancedSettings.js
+++ b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -90,11 +90,11 @@ class AdvancedSettingsFooter extends ImmutableComponent {
   render () {
     return <div className={css(paymentCommon.advanceFooter)}>
       <Button l10nId='backupLedger'
-        className={css(commonStyles.buttonPrimary)}
+        className={css(commonStyles.primaryButton)}
         onClick={this.props.showOverlay.bind(this, 'ledgerBackup')}
       />
       <Button l10nId='recoverLedger'
-        className={css(commonStyles.buttonPrimary, paymentCommon.marginButtons)}
+        className={css(commonStyles.primaryButton, paymentCommon.marginButtons)}
         onClick={this.props.showOverlay.bind(this, 'ledgerRecovery')}
       />
       <Button l10nId='done'
diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
index 5e1b9f5394..6c49fd0caf 100644
--- a/app/renderer/components/preferences/payment/bitcoinDashboard.js
+++ b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -54,11 +54,11 @@ class BitcoinDashboard extends ImmutableComponent {
 
   bitcoinPurchaseButton () {
     if (!this.props.ledgerData.get('buyURLFrame')) {
-      return <Button l10nId='add' className={css(commonStyles.buttonPrimary, styles.panelButton)} onClick={this.props.showOverlay.bind(this)} />
+      return <Button l10nId='add' className={css(commonStyles.primaryButton, styles.panelButton)} onClick={this.props.showOverlay.bind(this)} />
     }
 
     return <a href={this.props.ledgerData.get('buyURL')} target='_blank' onClick={this.openBuyURLTab}>
-      <Button l10nId='add' className={css(commonStyles.buttonPrimary, styles.panelButton)} />
+      <Button l10nId='add' className={css(commonStyles.primaryButton, styles.panelButton)} />
     </a>
   }
 
@@ -137,7 +137,7 @@ class BitcoinDashboard extends ImmutableComponent {
         </div>
         <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast)}>
           <a target='_blank' href={url}>
-            <button className={css(commonStyles.browserButton, commonStyles.buttonPrimary, styles.panelButton)}>{name}</button>
+            <button className={css(commonStyles.browserButton, commonStyles.primaryButton, styles.panelButton)}>{name}</button>
           </a>
         </div>
       </div>
@@ -156,7 +156,7 @@ class BitcoinDashboard extends ImmutableComponent {
         <div className={css(styles.settingsListTitle)} data-l10n-id='smartphoneTitle' />
       </div>
       <div className={css(styles.settingsPanelDivider, styles.settingsPanelDividerLast, styles.alignMiddle)}>
-        <Button className={css(commonStyles.buttonPrimary, styles.panelButton)} l10nId='displayQRCode' onClick={this.props.showQRcode.bind(this)} />
+        <Button className={css(commonStyles.primaryButton, styles.panelButton)} l10nId='displayQRCode' onClick={this.props.showQRcode.bind(this)} />
       </div>
     </div>
   }
@@ -205,7 +205,7 @@ class BitcoinDashboard extends ImmutableComponent {
         <a target='_blank' href='https://www.buybitcoinworldwide.com/'>
           <button className={cx({
             browserButton: true,
-            [css(commonStyles.buttonPrimary)]: true,
+            [css(commonStyles.primaryButton)]: true,
             [css(styles.panelButton)]: true
           })}>buybitcoinworldwide.com</button>
         </a>
@@ -299,7 +299,7 @@ class BitcoinDashboard extends ImmutableComponent {
                     ? <div className={css(styles.hasBitcoinHandler)}>
                       <a href={ledgerData.get('paymentURL')} target='_blank'>
                         <Button l10nId='bitcoinVisitAccount'
-                          className={css(commonStyles.buttonPrimary, styles.bitcoinAddressButton)}
+                          className={css(commonStyles.primaryButton, styles.bitcoinAddressButton)}
                         />
                       </a>
                       <div data-l10n-id='bitcoinAddress' className={css(styles.walletLabelText)} />
@@ -309,7 +309,7 @@ class BitcoinDashboard extends ImmutableComponent {
                     </div>
                 }
                 <div className={css(styles.walletAddressText)}>{ledgerData.get('address')}</div>
-                <Button className={css(commonStyles.buttonPrimary, styles.panelButton)}
+                <Button className={css(commonStyles.primaryButton, styles.panelButton)}
                   l10nId='copyToClipboard'
                   onClick={this.copyToClipboard.bind(this, ledgerData.get('address'))}
                 />
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index 8577cea0c8..7aee2459f7 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -45,7 +45,7 @@ class EnabledContent extends ImmutableComponent {
       testId={buttonText}
       test2Id={'addFunds'}
       l10nId={buttonText}
-      className={css(commonStyles.buttonPrimary, styles.addFunds)}
+      className={css(commonStyles.primaryButton, styles.addFunds)}
       onClick={onButtonClick.bind(this)}
       disabled={ledgerData.get('creating')}
     />
diff --git a/app/renderer/components/preferences/payment/history.js b/app/renderer/components/preferences/payment/history.js
index 68264f409f..b7ec820a16 100644
--- a/app/renderer/components/preferences/payment/history.js
+++ b/app/renderer/components/preferences/payment/history.js
@@ -118,7 +118,7 @@ class HistoryFooter extends ImmutableComponent {
         <span data-l10n-id={l10nDataId} data-l10n-args={JSON.stringify(l10nDataArgs)} />
       </div>
       <Button l10nId='paymentHistoryOKText'
-        className={css(commonStyles.buttonPrimary)}
+        className={css(commonStyles.primaryButton)}
         onClick={this.props.hideOverlay.bind(this, 'paymentHistory')}
       />
     </div>
diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/app/renderer/components/preferences/payment/ledgerBackup.js
index 57f3bac547..1b0d0ca9ca 100644
--- a/app/renderer/components/preferences/payment/ledgerBackup.js
+++ b/app/renderer/components/preferences/payment/ledgerBackup.js
@@ -76,11 +76,11 @@ class LedgerBackupFooter extends ImmutableComponent {
   render () {
     return <div className={css(paymentCommon.advanceFooter)}>
       <Button l10nId='printKeys'
-        className={css(commonStyles.buttonPrimary)}
+        className={css(commonStyles.primaryButton)}
         onClick={this.printKeys}
       />
       <Button l10nId='saveRecoveryFile'
-        className={css(commonStyles.buttonPrimary, paymentCommon.marginButtons)}
+        className={css(commonStyles.primaryButton, paymentCommon.marginButtons)}
         onClick={this.saveKeys}
       />
       <Button l10nId='done'
diff --git a/app/renderer/components/preferences/payment/ledgerRecovery.js b/app/renderer/components/preferences/payment/ledgerRecovery.js
index 7874b2e16a..cb10daea10 100644
--- a/app/renderer/components/preferences/payment/ledgerRecovery.js
+++ b/app/renderer/components/preferences/payment/ledgerRecovery.js
@@ -128,11 +128,11 @@ class LedgerRecoveryFooter extends ImmutableComponent {
     return <div className={css(paymentCommon.advanceFooter)}>
       <div className={css(styles.recoveryFooterButtons)}>
         <Button l10nId='recover'
-          className={css(commonStyles.buttonPrimary)}
+          className={css(commonStyles.primaryButton)}
           onClick={this.recoverWallet}
         />
         <Button l10nId='recoverFromFile'
-          className={css(commonStyles.buttonPrimary, paymentCommon.marginButtons)}
+          className={css(commonStyles.primaryButton, paymentCommon.marginButtons)}
           onClick={this.recoverWalletFromFile}
         />
         <Button l10nId='cancel'
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index e95ab2d217..9c663ca367 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -31,25 +31,6 @@ const styles = StyleSheet.create({
     textAlign: 'left',
     top: globalStyles.spacing.dialogTopOffset
   },
-  browserButton: {
-    margin: '0',
-    whiteSpace: 'nowrap',
-    outline: 'none',
-    cursor: 'default',
-    display: 'inline-block',
-    lineHeight: globalStyles.spacing.buttonHeight,
-    height: globalStyles.spacing.buttonHeight,
-    width: globalStyles.spacing.buttonWidth,
-    fontSize: globalStyles.spacing.defaultFontSize,
-    color: globalStyles.color.buttonColor,
-    borderRadius: globalStyles.radius.borderRadius,
-    textAlign: 'center',
-    transition: '.1s opacity, .1s background',
-    WebkitUserSelect: 'none',
-    backgroundSize: '16px',
-    backgroundPosition: 'center center',
-    backgroundRepeat: 'no-repeat'
-  },
 
   // itemList.less
   listItem: {
@@ -81,8 +62,28 @@ const styles = StyleSheet.create({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
   },
+
   // Buttons
-  buttonPrimary: {
+  browserButton: {
+    margin: '0',
+    whiteSpace: 'nowrap',
+    outline: 'none',
+    cursor: 'default',
+    display: 'inline-block',
+    lineHeight: globalStyles.spacing.buttonHeight,
+    height: globalStyles.spacing.buttonHeight,
+    width: globalStyles.spacing.buttonWidth,
+    fontSize: globalStyles.spacing.defaultFontSize,
+    color: globalStyles.color.buttonColor,
+    borderRadius: globalStyles.radius.borderRadius,
+    textAlign: 'center',
+    transition: '.1s opacity, .1s background',
+    WebkitUserSelect: 'none',
+    backgroundSize: '16px',
+    backgroundPosition: 'center center',
+    backgroundRepeat: 'no-repeat'
+  },
+  primaryButton: {
     background: 'linear-gradient(#FF7A1D, #ff5000)',
     borderLeft: '2px solid transparent',
     borderRight: '2px solid transparent',
@@ -127,6 +128,7 @@ const styles = StyleSheet.create({
   inlineButton: {
     display: 'inline'
   },
+
   // margin/padding
   noMarginTop: {
     marginTop: 0
@@ -151,6 +153,55 @@ const styles = StyleSheet.create({
   },
   noPaddingRight: {
     paddingRight: 0
+  },
+
+  // notificationBar
+  notificationBar: {
+    display: 'inline-block',
+    boxSizing: 'border-box',
+    width: '100%',
+    cursor: 'default',
+    WebkitUserSelect: 'none',
+    marginTop: globalStyles.spacing.navbarMenubarMargin
+  },
+  notificationBar__notificationItem: {
+    backgroundColor: '#ffefc0',
+    boxSizing: 'border-box',
+    borderTop: `1px solid ${globalStyles.color.tabsToolbarBorderColor}`,
+    borderBottom: `1px solid ${globalStyles.color.tabsToolbarBorderColor}`,
+    lineHeight: '24px',
+    padding: '8px 20px'
+  },
+  notificationBar__greetingStyle: {
+    backgroundColor: '#fff',
+    padding: '8px 20px',
+    width: '100%'
+  },
+  notificationItem__greeting: {
+    color: globalStyles.color.braveOrange,
+    fontSize: '16px',
+    margin: 'auto 10px auto 0',
+    userSelect: 'none'
+  },
+  notificationItem__message: {
+    color: '#000',
+    fontSize: '15px',
+    margin: 'auto 6px auto 0',
+    userSelect: 'none',
+    cursor: 'default'
+  },
+  notificationItem__secondaryMessage: {
+    color: '#888',
+    fontSize: '14px',
+    padding: '0',
+    margin: 'auto 0 auto 10px'
+  },
+  notificationItem__button: {
+    fontSize: '13px',
+    marginRight: '10px',
+    padding: '2px 15px',
+    textTransform: 'capitalize',
+    width: 'auto'
   }
 })
 
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 9fea2f140c..de2c1def48 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -25,7 +25,9 @@ const globalStyles = {
     chromeSecondary: '#d3d3d3',
     chromeTertiary: '#c7c7c7',
     chromeText: '#555555',
-    tabsBackground: '#dddddd',
+    tabsBackground: '#ddd',
+    tabsBackgroundInactive: '#ddd',
+    tabsToolbarBorderColor: '#bbb',
     navigationBarBackground: 'white',
     chromeControlsBackground: '#bbb',
     chromeControlsBackground2: 'white',
@@ -102,6 +104,7 @@ const globalStyles = {
     bookmarksToolbarWithFaviconsHeight: '28px',
     bookmarksFileIconSize: '13px',
     bookmarksFolderIconSize: '15px',
+    navbarMenubarMargin: '7px',
     navbarButtonSpacing: '4px',
     navbarButtonWidth: '20px',
     navbarBraveButtonWidth: '23px',
diff --git a/js/components/notificationBar.js b/js/components/notificationBar.js
index 9972bc4624..748cd962cb 100644
--- a/js/components/notificationBar.js
+++ b/js/components/notificationBar.js
@@ -9,6 +9,9 @@ const ipc = require('electron').ipcRenderer
 const messages = require('../constants/messages')
 const getOrigin = require('../state/siteUtil').getOrigin
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
 class NotificationItem extends ImmutableComponent {
   clickHandler (buttonIndex, e) {
     const nonce = this.props.detail.get('options').get('nonce')
@@ -34,38 +37,42 @@ class NotificationItem extends ImmutableComponent {
     let i = 0
     const options = this.props.detail.get('options')
     const greeting = this.props.detail.get('greeting')
-    return <div className={'notificationItem ' + (options.get('style') || '')}>
-      <span className='options'>
-        {
-          options.get('persist')
-            ? <span id='rememberOption'>
-              <input type='checkbox' ref={(node) => { this.checkbox = node }} />
-              <label htmlFor='rememberOption' data-l10n-id='rememberDecision' onClick={this.toggleCheckbox.bind(this)} />
-            </span>
-            : null
-        }
-        {
-          this.props.detail.get('buttons').map((button) =>
-            <button
-              type='button'
-              className={'button ' + (button.get('className') || '')}
-              onClick={this.clickHandler.bind(this, i++)}>{button.get('text')}</button>
-          )
-        }
-      </span>
-      {
-        greeting
-          ? <span className='greeting'>{greeting}</span>
-          : null
-      }
-      <span className='message'>{this.props.detail.get('message')}</span>
-      <span className='notificationAdvanced'>
-        {
-          options.get('advancedText') && options.get('advancedLink')
-            ? <span onClick={this.openAdvanced.bind(this)}>{options.get('advancedText')}</span>
-            : null
-        }
-      </span>
+    return <div className={css(commonStyles.notificationBar__notificationItem) + ' ' + 'notificationItem' + ' ' + (options.get('style') || '')}>
+      <div className={css(styles.flexJustifyBetween, styles.flexAlignCenter)}>
+        <div className={css(styles.marginRight)}>
+          {
+            greeting
+              ? <span className={css(commonStyles.notificationItem__greeting)} data-test-id='greeting'>{greeting}</span>
+              : null
+          }
+          <span className={css(commonStyles.notificationItem__message)}>{this.props.detail.get('message')}</span>
+          <span className={css(styles.advanced)}>
+            {
+              options.get('advancedText') && options.get('advancedLink')
+                ? <span onClick={this.openAdvanced.bind(this)}>{options.get('advancedText')}</span>
+                : null
+            }
+          </span>
+        </div>
+        <span className={css(styles.flexAlignCenter)} data-test-id='notificationOptions'>
+          {
+            options.get('persist')
+              ? <span id='rememberOption'>
+                <input className={css(styles.checkbox)} type='checkbox' ref={(node) => { this.checkbox = node }} />
+                <label className={css(styles.label)} htmlFor='rememberOption' data-l10n-id='rememberDecision' onClick={this.toggleCheckbox.bind(this)} />
+              </span>
+              : null
+          }
+          {
+            this.props.detail.get('buttons').map((button) =>
+              <button
+                type='button'
+                className={'browserButton' + ' ' + css(commonStyles.notificationItem__button) + ' ' + (button.get('className') || 'whiteButton')}
+                onClick={this.clickHandler.bind(this, i++)}>{button.get('text')}</button>
+            )
+          }
+        </span>
+      </div>
     </div>
   }
 }
@@ -83,7 +90,7 @@ class NotificationBar extends ImmutableComponent {
       return null
     }
 
-    return <div className='notificationBar'>
+    return <div className={css(commonStyles.notificationBar)} data-test-id='notificationBar'>
       {
         activeNotifications.takeLast(3).map((notificationDetail) =>
           <NotificationItem detail={notificationDetail} />
@@ -93,4 +100,34 @@ class NotificationBar extends ImmutableComponent {
   }
 }
 
+const styles = StyleSheet.create({
+  flexJustifyBetween: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexFlow: 'row wrap'
+  },
+  flexAlignCenter: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  marginRight: {
+    marginRight: '6px'
+  },
+  label: {
+    fontSize: '15px',
+    padding: '0 10px 0 0',
+    color: '#666'
+  },
+  checkbox: {
+    marginRight: '3px'
+  },
+  advanced: {
+    color: 'grey',
+    cursor: 'pointer',
+    textDecoration: 'underline',
+    fontSize: '13px',
+    margin: '5px'
+  }
+})
+
 module.exports = NotificationBar
diff --git a/js/components/updateBar.js b/js/components/updateBar.js
index e3095bc11e..05a0f04906 100644
--- a/js/components/updateBar.js
+++ b/js/components/updateBar.js
@@ -13,6 +13,9 @@ const remote = require('electron').remote
 const path = require('path')
 const cx = require('../lib/classSet')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
 class UpdateHello extends ImmutableComponent {
   onSpinnerClick () {
     // To make testing of updates easier in dev mode,
@@ -45,7 +48,7 @@ class UpdateHello extends ImmutableComponent {
   }
 
   render () {
-    return <span className='greeting'>
+    return <span className={css(commonStyles.notificationItem__greeting)} data-test-id='greeting'>
       <span onClick={this.onSpinnerClick.bind(this)}
         className={cx({
           fa: this.loading,
@@ -59,7 +62,8 @@ class UpdateHello extends ImmutableComponent {
 
 class UpdateHide extends ImmutableComponent {
   render () {
-    return <Button className='button secondary'
+    return <Button className={css(commonStyles.notificationItem__button) + ' ' + 'whiteButton'}
+      data-test-id='updateHide'
       l10nId='updateHide'
       onClick={appActions.setUpdateStatus.bind(null, this.props.reset ? UpdateStatus.UPDATE_NONE : undefined, false, undefined)} />
   }
@@ -70,7 +74,8 @@ class UpdateLog extends ImmutableComponent {
     remote.shell.openItem(path.join(remote.app.getPath('userData'), 'updateLog.log'))
   }
   render () {
-    return <Button className='button updateViewLogButton secondary'
+    return <Button className={css(commonStyles.notificationItem__button) + ' ' + 'whiteButton'}
+      data-test-id='updateViewLogButton'
       l10nId='updateViewLog'
       onClick={this.onViewLog.bind(this)} />
   }
@@ -78,81 +83,89 @@ class UpdateLog extends ImmutableComponent {
 
 class UpdateAvailable extends ImmutableComponent {
   render () {
-    return <div>
-      <span className='options'>
+    return <div className={css(styles.flexJustifyBetween, styles.flexAlignCenter)}>
+      <div>
+        <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateHello' />
+        <span className={css(commonStyles.notificationItem__message)} data-l10n-id='updateAvail' />
+        <span className={css(commonStyles.notificationItem__secondaryMessage)} data-l10n-id='updateRequiresRelaunch' />
+      </div>
+      <span className={css(styles.flexAlignCenter)} data-test-id='notificationOptions'>
         {
           this.props.metadata && this.props.metadata.get('notes')
-          ? <Button className='button updateDetails secondary'
+          ? <Button className={css(commonStyles.notificationItem__button) + ' ' + 'whiteButton'}
+            data-test-id='updateDetails'
             l10nId='updateDetails'
             onClick={windowActions.setReleaseNotesVisible.bind(null, true)} />
           : null
         }
-        <Button className='button updateLaterButton secondary'
+        <Button className={css(commonStyles.notificationItem__button) + ' ' + 'whiteButton'}
+          data-test-id='updateLater'
           l10nId='updateLater'
           onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_AVAILABLE_DEFERRED, false, undefined)} />
-        <Button className='button primary'
+        <Button className={css(commonStyles.notificationItem__button) + ' ' + 'primaryButton'}
+          data-test-id='updateNow'
           l10nId='updateNow'
           onClick={appActions.setUpdateStatus.bind(null, UpdateStatus.UPDATE_APPLYING_RESTART, false, undefined)} />
       </span>
-      <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateHello' />
-      <span className='message' data-l10n-id='updateAvail' />
-      <span className='message secondary' data-l10n-id='updateRequiresRelaunch' />
-      <span className='spacer' />
     </div>
   }
 }
 
 class UpdateChecking extends ImmutableComponent {
   render () {
-    return <div>
-      <span className='options'>
+    return <div className={css(styles.flexJustifyBetween)}>
+      <div>
+        <UpdateHello updateStatus={this.props.updateStatus} />
+        <span className={css(commonStyles.notificationItem__message)} data-l10n-id='updateChecking' />
+      </div>
+      <span className={css(styles.flexAlignCenter)} data-test-id='notificationOptions'>
         <UpdateLog />
         <UpdateHide />
       </span>
-      <UpdateHello updateStatus={this.props.updateStatus} />
-      <span className='message' data-l10n-id='updateChecking' />
-      <span className='spacer' />
     </div>
   }
 }
 
 class UpdateDownloading extends ImmutableComponent {
   render () {
-    return <div>
-      <span className='options'>
+    return <div className={css(styles.flexJustifyBetween)}>
+      <div>
+        <UpdateHello updateStatus={this.props.updateStatus} />
+        <span className={css(commonStyles.notificationItem__message)} data-l10n-id='updateDownloading' />
+      </div>
+      <span className={css(styles.flexAlignCenter)} data-test-id='notificationOptions'>
         <UpdateLog />
         <UpdateHide />
       </span>
-      <UpdateHello updateStatus={this.props.updateStatus} />
-      <span className='message' data-l10n-id='updateDownloading' />
-      <span className='spacer' />
     </div>
   }
 }
 
 class UpdateError extends ImmutableComponent {
   render () {
-    return <div>
-      <span className='options'>
+    return <div className={css(styles.flexJustifyBetween)}>
+      <div>
+        <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateOops' />
+        <span className={css(commonStyles.notificationItem__message)} data-l10n-id='updateError' />
+      </div>
+      <span className={css(styles.flexAlignCenter)} data-test-id='notificationOptions'>
         <UpdateLog />
         <UpdateHide reset />
       </span>
-      <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateOops' />
-      <span className='message' data-l10n-id='updateError' />
-      <span className='spacer' />
     </div>
   }
 }
 
 class UpdateNotAvailable extends ImmutableComponent {
   render () {
-    return <div>
-      <span className='options'>
+    return <div className={css(styles.flexJustifyBetween)}>
+      <div>
+        <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateNotYet' />
+        <span className={css(commonStyles.notificationItem__message)} data-l10n-id='updateNotAvail' />
+      </div>
+      <span className={css(styles.flexAlignCenter)} data-test-id='notificationOptions'>
         <UpdateHide reset />
       </span>
-      <UpdateHello updateStatus={this.props.updateStatus} l10nId='updateNotYet' />
-      <span className='message' data-l10n-id='updateNotAvail' />
-      <span className='spacer' />
     </div>
   }
 }
@@ -182,7 +195,8 @@ class UpdateBar extends ImmutableComponent {
       updateStatus = UpdateStatus.UPDATE_AVAILABLE
     }
 
-    return <div className='updateBar'>
+    // 'notificationItem' for styling with notificationBar.less
+    return <div className={updateBarStyle + ' ' + 'notificationItem'} data-test-id='updateBar'>
       {
         updateStatus === UpdateStatus.UPDATE_AVAILABLE ? <UpdateAvailable metadata={this.props.updates.get('metadata')} updateStatus={updateStatus} /> : null
       }
@@ -202,4 +216,22 @@ class UpdateBar extends ImmutableComponent {
   }
 }
 
+const styles = StyleSheet.create({
+  flexJustifyBetween: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexFlow: 'row wrap'
+  },
+  flexAlignCenter: {
+    display: 'flex',
+    alignItems: 'center'
+  }
+})
+
+const updateBarStyle = css(
+  commonStyles.notificationBar,
+  commonStyles.notificationBar__notificationItem,
+  commonStyles.notificationBar__greetingStyle
+)
+
 module.exports = UpdateBar
diff --git a/js/entry.js b/js/entry.js
index 34fec11bb5..323e2e6a40 100644
--- a/js/entry.js
+++ b/js/entry.js
@@ -14,7 +14,6 @@ require('../less/switchControls.less')
 require('../less/tabs.less')
 require('../less/findbar.less')
 require('../less/dialogs.less')
-require('../less/updateBar.less')
 require('../less/downloadBar.less')
 require('../less/bookmarksToolbar.less')
 require('../less/notificationBar.less')
diff --git a/less/notificationBar.less b/less/notificationBar.less
index e6a524eedd..3185fd9c76 100644
--- a/less/notificationBar.less
+++ b/less/notificationBar.less
@@ -3,108 +3,61 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import "variables.less";
-@import (reference) "button.less";
 
-.notificationBar {
-  display: inline-block;
-  width: 100%;
-  cursor: default;
-  -webkit-user-select: none;
+// TODO: refactor notificationBar.js and updateBar.js
+.notificationItem {
 
-  .notificationItem {
-    background-color: #ffefc0;
-    border-bottom: 1px solid #888;
-    line-height: 24px;
-    padding: 6px 12px 6px 20px;
+  // TODO: refactor button.less
+  .browserButton {
+    border: none;
+    box-shadow: none;
+    line-height: 1;
 
-    &.greetingStyle {
-      background-color: #fff;
-      padding: 8px 20px 6px 20px;
-
-      .button {
-        .browserButton();
-
-        background-color: #eee;
-        border-style: none;
-        font-size: 14px;
-        height: 25px;
-        line-height: 27px;
-        margin: auto 0 auto 4px;
-        padding: 0px 25px;
-        width: auto;
-
-        &.primary {
-          background-color: @braveOrange;
-          color: #fff;
-          margin-right: 0px;
-
-          &:hover {
-            background-color: lighten(@braveOrange, 10%);
-            color: #fff !important;
-          }
-          &:active {
-            background-color: darken(@braveOrange, 10%);
-            color: #fff !important;
-          }
-        }
-      }
-    }
-
-    label {
-      font-size: 15px;
-      padding: 0 10px 0 0;
-      color: #666;
-    }
-
-    input[type="checkbox"] {
-      margin: 0 3px;
+    &:hover {
+      border: none;
     }
 
-    .button {
-      font-size: 13px;
-      margin-right: 10px;
-      padding: 2px 15px;
-      text-transform: capitalize;
-      width: auto;
+    &.whiteButton {
+      border: 1px solid @gray;
     }
 
-    .greeting {
-      color: @braveOrange;
-      font-size: 16px;
-      margin: auto 10px auto 0;
-      user-select: none;
-    }
+    &.primaryButton {
+      background: @braveOrange;
+      border: 1px solid @braveOrange;
+      box-shadow: none;
+      font-weight: normal;
 
-    .message {
-      color: #000;
-      font-size: 15px;
-      margin: auto 0;
-      user-select: none;
-      cursor: default;
+      &:hover {
+        background: lighten(@braveOrange, 10%);
+        border: 1px solid lighten(@braveOrange, 10%);
+      }
 
-      &.secondary {
-        color: #888;
-        font-size: 14px;
-        padding: 0;
-        margin: auto 0 auto 10px;
+      &:active {
+        background: darken(@braveOrange, 10%);
+        border: 1px solid darken(@braveOrange, 10%);
       }
     }
+  }
 
-    .options {
-      float: right;
-      margin-left: 6px;
-    }
+  // Copied to commonStyles.js - notificationItem__greetingStyle
+  // TODO: refactor app/ledger.js (style: 'greetingStyle')
+  &.greetingStyle {
+    background: #fff;
+    padding: 8px 20px;
+    width: 100%;
+  }
+}
 
-    .spacer {
-      flex-grow: 1;
-    }
+// TODO: remove
+div[class*='notificationBar'] {
+  // Cancel the top margin of notificationBar (except the 1st one)
+  + div[class*='notificationBar'] {
+    margin-top: 0;
+    border-top: 0;
 
-    .notificationAdvanced {
-      color: grey;
-      cursor: pointer;
-      text-decoration: underline;
-      font-size: 13px;
-      margin: 5px;
+    // Cancel the top border of notificationItem (except the 1st one)
+    > div[class*='notificationItem'] {
+      border-top: 0;
     }
   }
 }
diff --git a/less/tabs.less b/less/tabs.less
index f0ce3b78cd..c8d2151a26 100644
--- a/less/tabs.less
+++ b/less/tabs.less
@@ -122,7 +122,7 @@
   background: @tabsBackground;
   display: flex;
   height: @tabsToolbarHeight;
-  border-top: 1px solid #bbb;
+  border-top: 1px solid @tabsToolbarBorderColor;
   -webkit-user-select: none;
 }
 
diff --git a/less/updateBar.less b/less/updateBar.less
deleted file mode 100644
index 10ec46b097..0000000000
--- a/less/updateBar.less
+++ /dev/null
@@ -1,14 +0,0 @@
-/* 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/. */
-
-@import "variables.less";
-@import (reference) "notificationBar.less";
-
-.updateBar {
-  &:extend(.notificationBar.greetingStyle);
-  .notificationBar .notificationItem();
-  .notificationBar .notificationItem.greetingStyle();
-
-  padding: 8px 16px 8px 20px;
-}
diff --git a/less/variables.less b/less/variables.less
index 6180aac0ff..e5646ac135 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -22,6 +22,7 @@
 
 @tabsBackground: #ddd;
 @tabsBackgroundInactive: #ddd;
+@tabsToolbarBorderColor: #bbb;
 @navigationBarBackground: @chromeSecondary;
 @navigationBarBackground: #f7f7f7;
 @navigationBarBackgroundActive: #fff;
diff --git a/test/bravery-components/notificationBarTest.js b/test/bravery-components/notificationBarTest.js
index 8fb330d9f0..a4fdc32f03 100644
--- a/test/bravery-components/notificationBarTest.js
+++ b/test/bravery-components/notificationBarTest.js
@@ -40,7 +40,7 @@ describe('notificationBar permissions', function () {
       .loadUrl(this.notificationUrl)
       .windowByUrl(Brave.browserWindowUrl)
       .waitForExist(notificationBar)
-      .element('.notificationItem:nth-Child(1) .options')
+      .element('.notificationItem:nth-Child(1) [data-test-id="notificationOptions"]')
       .click('button=Deny')
       .activateTitleMode()
       .waitUntil(function () {
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 73c914ddef..afd524f64b 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -22,7 +22,7 @@ module.exports = {
   navigatorBookmarked: '#navigator .removeBookmarkButton',
   navigatorNotBookmarked: '#navigator .bookmarkButton',
   bookmarksToolbar: '.bookmarksToolbar',
-  notificationBar: '.notificationBar',
+  notificationBar: '[data-test-id="notificationBar"]',
   errorContent: '.errorContent',
   errorUrl: '.errorUrl',
   errorText: '.errorText',