diff --git a/app/renderer/components/bookmarks/addEditBookmarkHanger.js b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
index f1ec6145087..5fef8b3860d 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkHanger.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
@@ -159,6 +159,20 @@ class AddEditBookmarkHanger extends React.Component {
   }
 }
 
+const navigationButtonContainerWidth = globalStyles.navigationBar.navigationButtonContainer.width
+const navigationButtonContainerMarginRight = globalStyles.navigationBar.navigationButtonContainer.marginRight
+const bookmarkButtonContainerWidth = globalStyles.navigationBar.urlbarForm.height
+
+// Add navigationButtonContainerMarginRight (6px)
+const navigationButtonWidth = `calc(${navigationButtonContainerWidth} + ${navigationButtonContainerMarginRight})`
+
+// Count the reload and stop button, adding the half width of the bookmark button container
+// 12px == arrowUp width
+const bookmarkHangerPosition = `calc(12px + ${navigationButtonWidth} + (${bookmarkButtonContainerWidth} / 2))`
+
+// Add another container width
+const bookmarkHangerPositionWithHomeButton = `calc(${bookmarkHangerPosition} + ${navigationButtonWidth})`
+
 const styles = StyleSheet.create({
   // Copied from commonForm.js
   commonFormSection: {
@@ -185,7 +199,7 @@ const styles = StyleSheet.create({
   },
   bookmarkHanger__arrowUp: {
     position: 'relative',
-    left: '54px',
+    left: bookmarkHangerPosition,
 
     '::after': {
       content: '""',
@@ -199,7 +213,7 @@ const styles = StyleSheet.create({
     }
   },
   bookmarkHanger__withHomeButton: {
-    left: '83px'
+    left: bookmarkHangerPositionWithHomeButton
   },
   bookmark__bottomWrapper: {
     display: 'flex',
diff --git a/app/renderer/components/common/commonForm.js b/app/renderer/components/common/commonForm.js
index 9ca3b49e217..6fd26a7c7bd 100644
--- a/app/renderer/components/common/commonForm.js
+++ b/app/renderer/components/common/commonForm.js
@@ -164,7 +164,7 @@ const styles = StyleSheet.create({
     maxWidth: globalStyles.spacing.bookmarkHangerMaxWidth,
     height: 'initial', // #8634
 
-    // Cancel the inherited value from .navbarMenubarFlexContainer, which is 'nowrap'.
+    // Cancel the inherited value from navigator__menuBarAndNavigationBar on navigator.js, which is 'nowrap'.
     whiteSpace: 'normal'
   },
 
diff --git a/app/renderer/components/navigation/homeButton.js b/app/renderer/components/navigation/homeButton.js
index a0bbb9d9afa..fb2cee1530b 100644
--- a/app/renderer/components/navigation/homeButton.js
+++ b/app/renderer/components/navigation/homeButton.js
@@ -14,9 +14,15 @@ const appActions = require('../../../../js/actions/appActions')
 const settings = require('../../../../js/constants/settings')
 
 // Utils
+const cx = require('../../../../js/lib/classSet')
 const {getSetting} = require('../../../../js/settings')
 const eventUtil = require('../../../../js/lib/eventUtil')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+
+const homeButton = require('../../../../img/toolbar/home_btn.svg')
+
 class HomeButton extends ImmutableComponent {
   constructor (props) {
     super(props)
@@ -49,17 +55,37 @@ class HomeButton extends ImmutableComponent {
       })
   }
 
+  // BEM Level: navigationBar__buttonContainer
   render () {
-    return <span className='navigationButtonContainer'>
-      <button
-        data-test-id='homeButton'
-        data-l10n-id='homeButton'
-        className='normalizeButton navigationButton homeButton'
-        ref={(node) => { this.homeButton = node }}
-        onClick={this.onHome}
-      />
-    </span>
+    return <button className={cx({
+      normalizeButton: true,
+      [css(styles.navigationButton, styles.navigationButton_home)]: true
+    })}
+      data-test-id='homeButton'
+      data-l10n-id='homeButton'
+      ref={(node) => { this.homeButton = node }}
+      onClick={this.onHome}
+    />
   }
 }
 
+const styles = StyleSheet.create({
+  navigationButton: {
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L550-L553
+    backgroundColor: globalStyles.color.buttonColor,
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L584-L585
+    margin: 0,
+    padding: 0
+  },
+
+  navigationButton_home: {
+    background: `url(${homeButton}) center no-repeat`,
+    backgroundSize: `16px 16px`
+  }
+})
+
 module.exports = HomeButton
diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index 8b478ca01e9..bbfa78163ba 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -34,8 +34,17 @@ const siteUtil = require('../../../../js/state/siteUtil')
 const eventUtil = require('../../../../js/lib/eventUtil')
 const {getSetting} = require('../../../../js/settings')
 const contextMenus = require('../../../../js/contextMenus')
+const {isDarwin} = require('../../../common/lib/platformUtil')
+const {isFullScreen} = require('../../currentWindow')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
+
+const stopLoadingButton = require('../../../../img/toolbar/stoploading_btn.svg')
+const reloadButton = require('../../../../img/toolbar/reload_btn.svg')
+const bookmarkButton = require('../../../../img/toolbar/bookmark_btn.svg')
+const bookmarkedButton = require('../../../../img/toolbar/bookmark_marked.svg')
 
 class NavigationBar extends React.Component {
   constructor (props) {
@@ -74,6 +83,54 @@ class NavigationBar extends React.Component {
     windowActions.onStop(this.props.isFocused, this.props.shouldRenderSuggestions)
   }
 
+  get bookmarked () {
+    return this.props.activeFrameKey !== undefined &&
+      this.props.bookmarked
+  }
+
+  // BEM Level: navigationBar__buttonContainer
+  get stopButton () {
+    return <button className={cx({
+      normalizeButton: true,
+      [css(styles.navigationButton, styles.navigationButton_stop)]: true
+    })}
+      data-l10n-id='stopButton'
+      onClick={this.onStop}
+    />
+  }
+
+  // BEM Level: navigationBar__buttonContainer
+  get reloadButton () {
+    return <LongPressButton className={cx({
+      normalizeButton: true,
+      [css(styles.navigationButton, styles.navigationButton_reload)]: true
+    })}
+      l10nId='reloadButton'
+      testId='reloadButton'
+      onClick={this.onReload}
+      onLongPress={this.onReloadLongPress}
+    />
+  }
+
+  // BEM Level: navigationBar
+  get bookmarkButtonContainer () {
+    return <span className={css(
+      commonStyles.rectangleContainer,
+      commonStyles.rectangleContainer_outsideOfurlbarForm,
+      styles.navigationBar__buttonContainer_bookmark
+    )}>
+      <button className={cx({
+        normalizeButton: true,
+        withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
+        [css(styles.navigationBar__buttonContainer_bookmark__button, this.bookmarked && styles.navigationBar__buttonContainer_bookmark__button_remove)]: true
+      })}
+        data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+        data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
+        onClick={this.onToggleBookmark}
+      />
+    </span>
+  }
+
   componentDidMount () {
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
@@ -136,12 +193,12 @@ class NavigationBar extends React.Component {
       return null
     }
 
-    return <div
-      id='navigator'
+    return <div id='navigationBar'
+      data-test-id='navigationBar'
       data-frame-key={this.props.activeFrameKey}
       className={cx({
         titleMode: this.props.titleMode,
-        [css(styles.navigator_wide)]: this.props.isWideUrlBarEnabled
+        [css(styles.navigationBar, (this.props.isDarwin && this.props.isFullScreen) && styles.navigationBar_isDarwin_isFullScreen, this.props.titleMode && styles.navigationBar_titleMode, this.props.isWideUrlBarEnabled && styles.navigationBar_wide)]: true
       })}>
       {
         this.props.showBookmarkHanger
@@ -151,61 +208,117 @@ class NavigationBar extends React.Component {
       {
         this.props.titleMode
         ? null
-        : this.props.isLoading
-          ? <span className='navigationButtonContainer'>
-            <button data-l10n-id='stopButton'
-              className='normalizeButton navigationButton stopButton'
-              onClick={this.onStop} />
-          </span>
-          : <span className='navigationButtonContainer'>
-            <LongPressButton
-              l10nId='reloadButton'
-              className='normalizeButton navigationButton reloadButton'
-              onClick={this.onReload}
-              onLongPress={this.onReloadLongPress} />
-          </span>
+        : <span className={css(
+            commonStyles.navbarButtonContainer,
+            styles.navigationBar__buttonContainer,
+          )}>
+          {
+            this.props.isLoading
+            ? this.stopButton
+            : this.reloadButton
+          }
+        </span>
       }
       {
         this.props.showHomeButton
-        ? <HomeButton activeTabId={this.props.activeTabId} />
+        ? <span className={css(
+            commonStyles.navbarButtonContainer,
+            styles.navigationBar__buttonContainer,
+          )}>
+          <HomeButton activeTabId={this.props.activeTabId} />
+        </span>
+        : null
+      }
+      {
+        !this.props.titleMode
+        ? this.bookmarkButtonContainer
         : null
       }
-      <div className='startButtons'>
-        {
-          !this.props.titleMode
-          ? <span className='bookmarkButtonContainer'>
-            <button data-l10n-id={this.props.isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-              className={cx({
-                navigationButton: true,
-                bookmarkButton: true,
-                removeBookmarkButton: this.props.isBookmarked,
-                withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
-                normalizeButton: true
-              })}
-              onClick={this.onToggleBookmark} />
-          </span>
-          : null
-        }
-      </div>
       <UrlBar titleMode={this.props.titleMode} />
       {
         this.props.showPublisherToggle
-        ? <div className='endButtons'>
-          <PublisherToggle />
-        </div>
+        ? <PublisherToggle />
         : null
       }
     </div>
   }
 }
 
+const rightMargin = `calc(${globalStyles.spacing.navbarLeftMarginDarwin} / 2)`
+
 const styles = StyleSheet.create({
-  navigator_wide: {
 
-    // TODO: Refactor navigationBar.js to remove !important
-    maxWidth: '100% !important',
-    marginRight: '0 !important',
-    justifyContent: 'initial !important'
+  navigationBar: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '20px',
+    minWidth: '0%', // allow the navigationBar to shrink
+    maxWidth: '900px',
+    marginRight: rightMargin,
+    padding: 0,
+    position: 'relative',
+    userSelect: 'none',
+    zIndex: globalStyles.zindex.zindexNavigationBar
+  },
+
+  navigationBar_isDarwin_isFullScreen: {
+    marginRight: 0
+  },
+
+  navigationBar_titleMode: {
+    animation: 'fadeIn 1.2s'
+  },
+
+  navigationBar_wide: {
+    maxWidth: '100%',
+    marginRight: '0',
+    justifyContent: 'initial'
+  },
+
+  navigationBar__buttonContainer: {
+    width: globalStyles.navigationBar.navigationButtonContainer.width
+  },
+
+  navigationButton: {
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L550-L553
+    backgroundColor: globalStyles.color.buttonColor,
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L584-L585
+    margin: 0,
+    padding: 0
+  },
+
+  navigationButton_stop: {
+    background: `url(${stopLoadingButton}) center no-repeat`,
+    backgroundSize: '11px 11px'
+  },
+
+  navigationButton_reload: {
+    background: `url(${reloadButton}) center no-repeat`,
+    backgroundSize: '13px 13px'
+  },
+
+  navigationBar__buttonContainer_bookmark: {
+    borderRight: 'none',
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+
+  navigationBar__buttonContainer_bookmark__button: {
+    background: `url(${bookmarkButton}) center no-repeat`,
+    backgroundSize: '14px 14px',
+    width: '100%',
+    height: '100%'
+  },
+
+  navigationBar__buttonContainer_bookmark__button_remove: {
+    background: `url(${bookmarkedButton}) center no-repeat`
   }
 })
 
diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
index 0caff584566..a67bd69a6cc 100644
--- a/app/renderer/components/navigation/navigator.js
+++ b/app/renderer/components/navigation/navigator.js
@@ -6,6 +6,7 @@ const React = require('react')
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const Immutable = require('immutable')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
@@ -17,7 +18,7 @@ const NavigationBar = require('./navigationBar')
 const LongPressButton = require('../common/longPressButton')
 const MenuBar = require('./menuBar')
 const WindowCaptionButtons = require('./windowCaptionButtons')
-const Button = require('../common/button')
+const BrowserButton = require('../common/button')
 const BrowserAction = require('./browserAction')
 
 // State
@@ -29,7 +30,7 @@ const windowState = require('../../../common/state/windowState')
 
 // Util
 const {getCurrentWindowId, isMaximized, isFullScreen, isFocused} = require('../../currentWindow')
-const isWindows = require('../../../common/lib/platformUtil').isWindows()
+const platformUtil = require('../../../common/lib/platformUtil')
 const {braveShieldsEnabled} = require('../../../common/state/shieldState')
 const eventUtil = require('../../../../js/lib/eventUtil')
 const {isNavigatableAboutPage, getBaseUrl} = require('./../../../../js/lib/appUrlUtil')
@@ -44,8 +45,20 @@ const appConfig = require('../../../../js/constants/appConfig')
 const settings = require('../../../../js/constants/settings')
 
 // Styles
-const {StyleSheet, css} = require('aphrodite')
 const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
+
+const backButton = require('../../../../img/toolbar/back_btn.svg')
+const forwardButton = require('../../../../img/toolbar/forward_btn.svg')
+const braveButton1x = require('../../../../app/extensions/brave/img/braveBtn.png')
+const braveButton2x = require('../../../../app/extensions/brave/img/braveBtn2x.png')
+const braveButton3x = require('../../../../app/extensions/brave/img/braveBtn3x.png')
+const braveButtonHover1x = require('../../../../app/extensions/brave/img/braveBtn_hover.png')
+const braveButtonHover2x = require('../../../../app/extensions/brave/img/braveBtn2x_hover.png')
+const braveButtonHover3x = require('../../../../app/extensions/brave/img/braveBtn3x_hover.png')
+
+const isWindows = platformUtil.isWindows()
+const isDarwin = platformUtil.isDarwin()
 
 class Navigator extends React.Component {
   constructor (props) {
@@ -73,14 +86,6 @@ class Navigator extends React.Component {
     }
   }
 
-  get extensionButtons () {
-    let buttons = this.props.extensionBrowserActions.map((id) => <BrowserAction extensionId={id} />).values()
-    buttons = Array.from(buttons)
-    buttons.push(<span className='buttonSeparator' />)
-
-    return buttons
-  }
-
   onBack (e) {
     this.onNav(e, 'canGoBack', 'back', appActions.onGoBack)
   }
@@ -128,13 +133,13 @@ class Navigator extends React.Component {
   }
 
   onBraveMenu () {
-    if (this.props.shieldEnabled) {
+    if (this.props.shieldsEnabled) {
       windowActions.setBraveryPanelDetail({})
     }
   }
 
   onDoubleClick (e) {
-    if (!e.target.className.includes('navigatorWrapper')) {
+    if (!e.target.className.includes('navigationBarWrapper')) {
       return
     }
     return !isMaximized() ? windowActions.shouldMaximize(getCurrentWindowId()) : windowActions.shouldMinimize(getCurrentWindowId())
@@ -150,6 +155,170 @@ class Navigator extends React.Component {
     ipc.off(messages.SHORTCUT_ACTIVE_FRAME_FORWARD, this.onForward)
   }
 
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper
+  get navigationBarWrapper () {
+    return <div className={cx({
+      navigationBarWrapper: true,
+      [css(styles.navigationBarWrapper)]: true
+    })}
+      onDoubleClick={this.onDoubleClick}
+      onDragOver={this.onDragOver}
+      onDrop={this.onDrop}
+    >
+      {this.topLevelStartButtons}
+      <NavigationBar />
+      {this.topLevelEndButtons}
+    </div>
+  }
+
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons
+  get topLevelStartButtons () {
+    return <div className={cx({
+      topLevelStartButtons: true,
+      [css(styles.topLevelStartButtons, isWindows && styles.topLevelStartButtons_isWindows, isDarwin && styles.topLevelStartButtons_isDarwin, (isDarwin && this.props.isFullScreen) && styles.topLevelStartButtons_isDarwin_isFullScreen)]: true,
+      fullscreen: isFullScreen()
+    })}>
+      {this.backButton}
+      {this.forwardButton}
+    </div>
+  }
+
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons__topLevelStartButtonContainer
+  get backButton () {
+    return <span data-test-id={
+      !this.props.canGoBack
+        ? 'navigationBackButtonDisabled'
+        : 'navigationBackButton'
+      }
+      className={css(
+        commonStyles.navbarButtonContainer,
+        styles.topLevelStartButtonContainer,
+        !this.props.canGoBack && styles.topLevelStartButtonContainer_disabled
+      )}
+
+      // TODO (Suguru): Convert with Aphrodite
+      style={{
+        transform: this.props.canGoBack ? `scale(${this.props.swipeLeftPercent})` : `scale(1)`,
+        opacity: `${this.props.swipeLeftOpacity}`
+      }}>
+      <LongPressButton className={cx({
+        normalizeButton: true,
+        [css(styles.topLevelStartButtonContainer__topLevelStartButton_backButton)]: true,
+        [css(styles.topLevelStartButtonContainer__topLevelStartButton_disabled)]: !this.props.canGoBack,
+        [css(styles.topLevelStartButtonContainer__topLevelStartButton_enabled)]: this.props.canGoBack
+      })}
+        l10nId='backButton'
+        testId={!this.props.canGoBack ? 'backButtonDisabled' : 'backButton'}
+        disabled={!this.props.canGoBack}
+        onClick={this.onBack}
+        onLongPress={this.onBackLongPress}
+      />
+    </span>
+  }
+
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons__topLevelStartButtonContainer
+  get forwardButton () {
+    return <span data-test-id={
+      !this.props.canGoForward
+        ? 'navigationForwardButtonDisabled'
+        : 'navigationForwardButton'
+      }
+      className={css(
+        commonStyles.navbarButtonContainer,
+        styles.topLevelStartButtonContainer,
+        !this.props.canGoForward && styles.topLevelStartButtonContainer_disabled
+      )}
+
+      // TODO (Suguru): Convert with Aphrodite
+      style={{
+        transform: this.props.canGoForward ? `scale(${this.props.swipeRightPercent})` : `scale(1)`,
+        opacity: `${this.props.swipeRightOpacity}`
+      }}>
+      <LongPressButton className={cx({
+        normalizeButton: true,
+        [css(styles.topLevelStartButtonContainer__topLevelStartButton_forwardButton)]: true,
+        [css(styles.topLevelStartButtonContainer__topLevelStartButton_disabled)]: !this.props.canGoForward,
+        [css(styles.topLevelStartButtonContainer__topLevelStartButton_enabled)]: this.props.canGoForward
+      })}
+        l10nId='forwardButton'
+        testId={!this.props.canGoForward ? 'forwardButtonDisabled' : 'forwardButton'}
+        disabled={!this.props.canGoForward}
+        onClick={this.onForward}
+        onLongPress={this.onForwardLongPress}
+      />
+    </span>
+  }
+
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons
+  get topLevelEndButtons () {
+    return <div className={cx({
+      topLevelEndButtons: true,
+      [css(styles.topLevelEndButtons, this.props.isWideURLbarEnabled && styles.topLevelEndButtons_isWideURLbarEnabled)]: true
+    })}>
+      <div className={cx({
+        extraDragArea: !this.props.menuBarVisible,
+        allowDragging: this.props.shouldAllowWindowDrag,
+        [css(styles.topLevelEndButtons__extraDragArea_disabled)]: this.props.isWideURLbarEnabled
+      })} />
+      {
+        this.props.showBrowserActions
+          ? this.extensionButtons
+          : null
+      }
+      {this.braveMenuButton}
+      {
+        this.props.isCounterEnabled
+          ? this.counterBraveMenu
+          : null
+      }
+      {
+        this.props.isCaptionButton
+          ? <span className={css(styles.topLevelEndButtons__buttonSeparator)} />
+          : null
+      }
+    </div>
+  }
+
+  get extensionButtons () {
+    let buttons = this.props.extensionBrowserActions.map((id) => <BrowserAction extensionId={id} />).values()
+    buttons = Array.from(buttons)
+    buttons.push(<span className={css(styles.topLevelEndButtons__buttonSeparator)} />)
+
+    return buttons
+  }
+
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons__braveMenuButton
+  get braveMenuButton () {
+    return <BrowserButton className={css(
+      styles.braveMenuButton,
+      !this.props.shieldsEnabled && styles.braveMenuButton_shieldsDisabled,
+      this.props.shieldsDown && styles.braveMenuButton_shieldsDown,
+      this.props.isCaptionButton && styles.braveMenuButton_leftOfCaptionButton
+    )}
+      l10nId='braveMenu'
+      testId={!this.props.shieldsEnabled ? 'braveMenuDisabled' : 'braveMenu'}
+      test2Id={`shield-down-${this.props.shieldsDown}`}
+      disabled={this.props.activeTabShowingMessageBox}
+      onClick={this.onBraveMenu}
+    />
+  }
+
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons__counter_braveMenu
+  get counterBraveMenu () {
+    return <div data-test-id='counterBraveMenu'
+      className={css(
+        styles.counterBraveMenu,
+        (this.props.menuBarVisible || !isWindows) && styles.counterBraveMenu_right,
+
+        // delay badge show-up.
+        // this is also set for extension badge
+        // in a way that both can appear at the same time.
+        styles.counterBraveMenu_subtleShowUp
+      )}>
+      {this.props.totalBlocks}
+    </div>
+  }
+
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
     const swipeLeftPercent = state.get('swipeLeftPercent')
@@ -177,9 +346,10 @@ class Navigator extends React.Component {
     props.canGoForward = activeTab.get('canGoForward') && !activeTabShowingMessageBox
     props.totalBlocks = activeFrame ? frameStateUtil.getTotalBlocks(activeFrame) : false
     props.shieldsDown = !braverySettings.shieldsUp
-    props.shieldEnabled = braveShieldsEnabled(activeFrame)
+    props.shieldsEnabled = braveShieldsEnabled(activeFrame)
     props.menuBarVisible = menuBarState.isMenuBarVisible(currentWindow)
     props.isMaximized = isMaximized() || isFullScreen()
+    props.isFullScreen = isFullScreen()
     props.isCaptionButton = isWindows && !props.menuBarVisible
     props.activeTabShowingMessageBox = activeTabShowingMessageBox
     props.extensionBrowserActions = extensionBrowserActions
@@ -189,7 +359,7 @@ class Navigator extends React.Component {
     props.shouldAllowWindowDrag = windowState.shouldAllowWindowDrag(state, currentWindow, activeFrame, isFocused())
     props.isCounterEnabled = getSetting(settings.BLOCKED_COUNT_BADGE) &&
       props.totalBlocks &&
-      props.shieldEnabled
+      props.shieldsEnabled
     props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR)
     props.showNavigationBar = activeFrameKey !== undefined &&
       state.get('siteSettings') !== undefined
@@ -215,10 +385,10 @@ class Navigator extends React.Component {
 
   render () {
     return <div className={cx({
-      navbarCaptionButtonContainer: true,
+      navigator: true,
       allowDragging: this.props.shouldAllowWindowDrag
     })}>
-      <div className='navbarMenubarFlexContainer'>
+      <div className={css(styles.navigator__menuBarAndNavigationBar)}>
         {
           this.props.menuBarVisible
             ? <div className='menubarContainer'>
@@ -227,117 +397,7 @@ class Navigator extends React.Component {
             </div>
             : null
         }
-        <div className='navigatorWrapper'
-          onDoubleClick={this.onDoubleClick}
-          onDragOver={this.onDragOver}
-          onDrop={this.onDrop}
-        >
-          <div className={cx({
-            backforward: true,
-            fullscreen: isFullScreen()
-          })}>
-            <div data-test-id={
-              !this.props.canGoBack
-                ? 'navigationBackButtonDisabled'
-                : 'navigationBackButton'
-              }
-              className={cx({
-                navigationButtonContainer: true,
-                nav: true,
-                disabled: !this.props.canGoBack
-              })}
-              style={{
-                transform: this.props.canGoBack ? `scale(${this.props.swipeLeftPercent})` : `scale(1)`,
-                opacity: `${this.props.swipeLeftOpacity}`
-              }}>
-              <LongPressButton
-                testId={!this.props.canGoBack ? 'backButtonDisabled' : 'backButton'}
-                l10nId='backButton'
-                className='normalizeButton navigationButton backButton'
-                disabled={!this.props.canGoBack}
-                onClick={this.onBack}
-                onLongPress={this.onBackLongPress}
-              />
-            </div>
-            <div data-test-id={
-              !this.props.canGoForward
-                ? 'navigationForwardButtonDisabled'
-                : 'navigationForwardButton'
-              }
-              className={cx({
-                navigationButtonContainer: true,
-                nav: true,
-                disabled: !this.props.canGoForward
-              })}
-              style={{
-                transform: this.props.canGoForward ? `scale(${this.props.swipeRightPercent})` : `scale(1)`,
-                opacity: `${this.props.swipeRightOpacity}`
-              }}>
-              <LongPressButton
-                testId={!this.props.canGoForward ? 'forwardButtonDisabled' : 'forwardButton'}
-                l10nId='forwardButton'
-                className='normalizeButton navigationButton forwardButton'
-                disabled={!this.props.canGoForward}
-                onClick={this.onForward}
-                onLongPress={this.onForwardLongPress}
-              />
-            </div>
-          </div>
-          {
-            this.props.showNavigationBar
-            ? <NavigationBar />
-            : null
-          }
-          <div className={cx({
-            topLevelEndButtons: true,
-            [css(styles.navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled)]: this.props.isWideURLbarEnabled
-          })}>
-            <div className={cx({
-              extraDragArea: !this.props.menuBarVisible,
-              allowDragging: this.props.shouldAllowWindowDrag,
-              [css(styles.navigatorWrapper__topLevelEndButtons__extraDragArea_disabled)]: this.props.isWideURLbarEnabled
-            })} />
-            {
-              this.props.showBrowserActions
-                ? this.extensionButtons
-                : null
-            }
-            <div className={css(styles.braveMenuContainer)}>
-              <Button iconClass='braveMenu'
-                l10nId='braveMenu'
-                testId='braveShieldButton'
-                test2Id={`shield-down-${this.props.shieldsDown}`}
-                className={cx({
-                  braveShieldsDisabled: !this.props.shieldEnabled,
-                  braveShieldsDown: this.props.shieldsDown,
-                  leftOfCaptionButton: this.props.isCaptionButton
-                })}
-                disabled={this.props.activeTabShowingMessageBox}
-                onClick={this.onBraveMenu}
-              />
-              {
-                this.props.isCounterEnabled
-                  ? <div className={css(
-                      styles.lionBadge,
-                      (this.props.menuBarVisible || !isWindows) && styles.lionBadgeRight,
-                      // delay badge show-up.
-                      // this is also set for extension badge
-                      // in a way that both can appear at the same time.
-                      styles.subtleShowUp
-                    )}
-                    data-test-id='lionBadge'>
-                    {this.props.totalBlocks}
-                  </div>
-                  : null
-              }
-            </div>
-            {
-              this.props.isCaptionButton
-                ? <span className='buttonSeparator' />
-                : null
-            }
-          </div>
-        </div>
+        {this.navigationBarWrapper}
       </div>
       {
         this.props.isCaptionButton
@@ -348,38 +408,154 @@ class Navigator extends React.Component {
   }
 }
 
-module.exports = ReduxComponent.connect(Navigator)
-
 const styles = StyleSheet.create({
-  lionBadge: {
+  navigator__menuBarAndNavigationBar: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    position: 'relative',
+    overflow: 'visible',
+    whiteSpace: 'nowrap'
+  },
+
+  navigationBarWrapper: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: globalStyles.spacing.navbarMenubarMargin
+  },
+
+  topLevelStartButtons: {
+    display: 'flex',
+    zIndex: globalStyles.zindex.zindexNavigationBar
+  },
+
+  topLevelStartButtons_isWindows: {
+    paddingLeft: '5px'
+  },
+
+  topLevelStartButtons_isDarwin: {
+    paddingLeft: globalStyles.spacing.navbarLeftMarginDarwin
+  },
+
+  topLevelStartButtons_isDarwin_isFullScreen: {
+    paddingLeft: '4px'
+  },
+
+  // cf: navigationBar__navigationButtonContainer on navitionBar.js
+  topLevelStartButtonContainer: {
+    width: '34px'
+  },
+
+  topLevelStartButtonContainer_disabled: {
+    ':hover': {
+      background: 'transparent',
+      boxShadow: 'none'
+    }
+  },
+
+  topLevelStartButtonContainer__topLevelStartButton_backButton: {
+    background: `url(${backButton}) center no-repeat`,
+    backgroundSize: '14px 14px',
+
+    // ref: https://github.com/brave/browser-laptop/blob/48e9b4e792612b5fc17d7202bc7f2b5e8fbcfc2b/less/navigationBar.less#L467-L472
+    width: '100%',
+    height: '100%',
+    margin: 0
+  },
+
+  topLevelStartButtonContainer__topLevelStartButton_forwardButton: {
+    background: `url(${forwardButton}) center no-repeat`,
+    backgroundSize: '14px 14px',
+
+    // ref: https://github.com/brave/browser-laptop/blob/48e9b4e792612b5fc17d7202bc7f2b5e8fbcfc2b/less/navigationBar.less#L467-L472
+    width: '100%',
+    height: '100%',
+    margin: 0
+  },
+
+  topLevelStartButtonContainer__topLevelStartButton_disabled: {
+    opacity: 0.2
+  },
+
+  topLevelStartButtonContainer__topLevelStartButton_enabled: {
+    opacity: 0.85,
+    WebkitAppRegion: 'no-drag'
+  },
+
+  topLevelEndButtons: {
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'relative'
+  },
+
+  topLevelEndButtons_isWideURLbarEnabled: {
+    marginLeft: '6px'
+  },
+
+  // TODO (Suguru): Refactor navigationBar.less to remove !important
+  topLevelEndButtons__extraDragArea_disabled: {
+    display: 'none !important'
+  },
+
+  topLevelEndButtons__buttonSeparator: {
+    width: '1px',
+    borderLeft: '1px solid #e2e2e2',
+    margin: '4px 3px 4px 3px'
+  },
+
+  braveMenuButton: {
+    backgroundImage: `-webkit-image-set(url(${braveButton1x}) 1x, url(${braveButton2x}) 2x, url(${braveButton3x}) 3x)`,
+    backgroundRepeat: 'no-repeat',
+    height: globalStyles.navigationBar.urlbarForm.height,
+    width: globalStyles.spacing.navbarBraveButtonWidth,
+    marginRight: globalStyles.spacing.navbarButtonSpacing,
+    userSelect: 'none',
+    position: 'relative',
+    WebkitAppRegion: 'no-drag',
+
+    ':hover': {
+      backgroundImage: `-webkit-image-set(url(${braveButtonHover1x}) 1x, url(${braveButtonHover2x}) 2x, url(${braveButtonHover3x}) 3x)`
+    }
+  },
+
+  braveMenuButton_shieldsDisabled: {
+    filter: 'grayscale(100%)',
+    opacity: 0.4
+  },
+
+  braveMenuButton_shieldsDown: {
+    filter: 'grayscale(100%)'
+  },
+
+  braveMenuButton_leftOfCaptionButton: {
+    marginRight: '3px'
+  },
+
+  counterBraveMenu: {
+    position: 'absolute',
     left: 'calc(50% - 1px)',
     top: '14px',
-    position: 'absolute',
-    color: '#FFF',
-    borderRadius: '2.5px',
-    padding: '1px 2px',
-    pointerEvents: 'none',
+    color: '#fff',
     font: '6pt "Arial Narrow"',
     textAlign: 'center',
-    border: '0px solid #FFF',
-    background: '#555555',
+    padding: '1px 2px',
+    border: '0px solid #fff',
+    borderRadius: '2.5px',
+    background: '#555',
     minWidth: '10px',
+    pointerEvents: 'none',
     WebkitUserSelect: 'none'
   },
-  lionBadgeRight: {
+
+  counterBraveMenu_right: {
     left: 'auto',
     right: '2px'
   },
-  braveMenuContainer: {
-    position: 'relative'
-  },
-  subtleShowUp: globalStyles.animations.subtleShowUp,
 
-  // TODO: Refactor navigator.js with Aphrodite to remove !important
-  navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled: {
-    marginLeft: '6px !important'
-  },
-  navigatorWrapper__topLevelEndButtons__extraDragArea_disabled: {
-    display: 'none'
-  }
+  counterBraveMenu_subtleShowUp: globalStyles.animations.subtleShowUp
 })
+
+module.exports = ReduxComponent.connect(Navigator)
diff --git a/app/renderer/components/navigation/publisherToggle.js b/app/renderer/components/navigation/publisherToggle.js
index 5a70cf20142..cc533ea7a03 100644
--- a/app/renderer/components/navigation/publisherToggle.js
+++ b/app/renderer/components/navigation/publisherToggle.js
@@ -4,11 +4,10 @@
 
 const React = require('react')
 const Immutable = require('immutable')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
-const BrowserButton = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
@@ -17,12 +16,14 @@ const appActions = require('../../../../js/actions/appActions')
 const publisherState = require('../../../common/lib/publisherUtil')
 
 // Utils
+const cx = require('../../../../js/lib/classSet')
 const {getHostPattern} = require('../../../../js/lib/urlutil')
 const {getBaseUrl} = require('../../../../js/lib/appUrlUtil')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
 // Style
-const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
+
 const noFundVerifiedPublisherImage = require('../../../extensions/brave/img/urlbar/browser_URL_fund_no_verified.svg')
 const fundVerifiedPublisherImage = require('../../../extensions/brave/img/urlbar/browser_URL_fund_yes_verified.svg')
 const noFundUnverifiedPublisherImage = require('../../../extensions/brave/img/urlbar/browser_URL_fund_no.svg')
@@ -67,19 +68,22 @@ class PublisherToggle extends React.Component {
     return props
   }
 
+  // TODO (Suguru): NormalizeButton
+  // ref: navigationBar__buttonContainer_bookmarkButtonContainer on navigationBar.js
   render () {
     return <span
       data-test-id='publisherButton'
       data-test-authorized={this.props.isEnabledForPaymentsPublisher}
       data-test-verified={this.props.isVerifiedPublisher}
-      className={css(styles.addPublisherButtonContainer)}>
-      <BrowserButton
-        custom={[
-          !this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher && styles.noFundVerified,
-          this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher && styles.fundVerified,
-          !this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher && styles.noFundUnverified,
-          this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher && styles.fundUnverified
-        ]}
+      className={css(
+        commonStyles.rectangleContainer,
+        commonStyles.rectangleContainer_outsideOfurlbarForm,
+        styles.publisherButtonContainer
+      )}>
+      <button className={cx({
+        normalizeButton: true,
+        [css((!this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_noFundVerified, (this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_fundVerified, (!this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_noFundUnverified, (this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_fundUnverified, styles.publisherButtonContainer__button)]: true
+      })}
         data-l10n-id={this.l10nString}
         onClick={this.onAuthorizePublisher}
       />
@@ -87,45 +91,41 @@ class PublisherToggle extends React.Component {
   }
 }
 
-module.exports = ReduxComponent.connect(PublisherToggle)
-
 const styles = StyleSheet.create({
-  addPublisherButtonContainer: {
-    boxSizing: 'border-box',
-    display: 'flex',
-    alignItems: 'center',
-    height: globalStyles.spacing.buttonHeight,
-    width: globalStyles.spacing.buttonWidth,
-    minHeight: globalStyles.spacing.buttonHeight,
-    minWidth: globalStyles.spacing.buttonWidth,
-    WebkitAppRegion: 'no-drag',
-    borderWidth: '1px 1px 1px 0px',
-    borderStyle: 'solid',
-    borderColor: globalStyles.color.urlBarOutline,
-    borderRadius: '0 4px 4px 0',
-    borderTopLeftRadius: '0',
-    borderBottomLeftRadius: '0'
+
+  // cf: navigationBar__buttonContainer_bookmarkButtonContainer on navigationBar.js
+  publisherButtonContainer: {
+    borderLeft: 'none',
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+
+    // TODO (Suguru): Refactor navigationBar.less to remove !important.
+    // See the wildcard style under '#navigationBar'.
+    animation: 'none !important'
   },
 
-  noFundVerified: {
-    backgroundImage: `url(${noFundVerifiedPublisherImage})`,
-    backgroundSize: '18px',
-    marginLeft: '2px'
+  publisherButtonContainer__button: {
+    backgroundSize: '18px 18px',
+    width: '100%',
+    height: '100%'
   },
 
-  fundVerified: {
-    backgroundImage: `url(${fundVerifiedPublisherImage})`,
-    backgroundSize: '18px',
-    marginLeft: '2px'
+  publisherButtonContainer__button_noFundVerified: {
+    // 1px added due to the check mark
+    background: `url(${noFundVerifiedPublisherImage}) calc(50% + 1px) no-repeat`
   },
 
-  noFundUnverified: {
-    backgroundImage: `url(${noFundUnverifiedPublisherImage})`,
-    backgroundSize: '18px'
+  publisherButtonContainer__button_fundVerified: {
+    background: `url(${fundVerifiedPublisherImage}) calc(50% + 1px) no-repeat`
   },
 
-  fundUnverified: {
-    backgroundImage: `url(${fundUnverifiedPublisherImage})`,
-    backgroundSize: '18px'
+  publisherButtonContainer__button_noFundUnverified: {
+    background: `url(${noFundUnverifiedPublisherImage}) 50% no-repeat`
+  },
+
+  publisherButtonContainer__button_fundUnverified: {
+    background: `url(${fundUnverifiedPublisherImage}) 50% no-repeat`
   }
 })
+
+module.exports = ReduxComponent.connect(PublisherToggle)
diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index 8c8c2bc5b68..90d9c178058 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/app/renderer/components/navigation/urlBar.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const Immutable = require('immutable')
 const ipc = require('electron').ipcRenderer
 
@@ -37,10 +37,14 @@ const {getCurrentWindowId} = require('../../currentWindow')
 const {normalizeLocation, getNormalizedSuggestion} = require('../../../common/lib/suggestion')
 const isDarwin = require('../../../common/lib/platformUtil').isDarwin()
 const publisherUtil = require('../../../common/lib/publisherUtil')
+const {isWindows} = require('../../../common/lib/platformUtil')
 
 // Icons
 const iconNoScript = require('../../../../img/url-bar-no-script.svg')
 
+const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
+
 class UrlBar extends React.Component {
   constructor (props) {
     super(props)
@@ -385,6 +389,83 @@ class UrlBar extends React.Component {
     return ''
   }
 
+  get UrlBarIcon () {
+    return <UrlBarIcon
+      activateSearchEngine={this.props.activateSearchEngine}
+      active={this.props.isActive}
+      isSecure={this.props.isSecure}
+      isHTTPPage={this.props.isHTTPPage}
+      loading={this.props.loading}
+      location={this.props.location}
+      searchSelectEntry={this.props.searchSelectEntry}
+      title={this.props.title}
+      titleMode={this.props.titleMode}
+      isSearching={this.props.location !== this.props.urlbarLocation}
+      activeTabShowingMessageBox={this.props.activeTabShowingMessageBox}
+    />
+  }
+
+  // BEM Level: urlbarForm__titleBar
+  get titleBar () {
+    return <div id='titleBar' className={css(styles.titleBar)}>
+      <span className={css(styles.titleBar__host)}>{this.props.hostValue}</span>
+      <span>{this.props.hostValue && this.titleValue ? ' | ' : ''}</span>
+      <span>{this.titleValue}</span>
+    </div>
+  }
+
+  // BEM Level: urlbarForm__titleBar__loadTime
+  get loadTimer () {
+    return <span className={css(
+      styles.loadTime,
+      this.props.isActive && styles.loadTime_onFocus
+    )}
+      data-test-id='loadTime'>{this.loadTime}</span>
+  }
+
+  // BEM Level: urlbarForm__input
+  get input () {
+    return <input type='text'
+      spellCheck='false'
+      disabled={this.props.displayURL === undefined && this.loadTime === ''}
+      onFocus={this.onFocus}
+      onBlur={this.onBlur}
+      onKeyDown={this.onKeyDown}
+      onKeyUp={this.onKeyUp}
+      onChange={this.onChange}
+      onKeyPress={this.onKeyPress}
+      onClick={this.onClick}
+      onContextMenu={this.onContextMenu}
+      data-l10n-id='urlbar'
+      data-test-id='urlInput'
+      className={cx({
+        private: this.private,
+        [css(styles.input, this.props.isWindows && styles.input_windows)]: true
+      })}
+      readOnly={this.props.titleMode}
+      ref={(node) => { this.urlInput = node }}
+    />
+  }
+
+  // BEM Level: urlbarForm__legend
+  get legend () {
+    return <legend className={css(
+      styles.legend,
+      !!this.props.isFocused && styles.legend_isFocused,
+      this.props.isPublisherButtonEnabled && styles.legend_isPublisherButtonEnabled
+    )} />
+  }
+
+  // BEM Level: urlbarForm__buttonContainer_showNoScript
+  get noScriptInfo () {
+    return <span className={css(commonStyles.rectangleContainer)}
+      onClick={this.onNoScript}>
+      <span className={css(styles.noScript__button)}
+        data-l10n-id='noScriptButton'
+        data-test-id='noScriptButton' />
+    </span>
+  }
+
   onNoScript () {
     windowActions.setNoScriptVisible()
   }
@@ -457,6 +538,7 @@ class UrlBar extends React.Component {
     props.activeFrameKey = activeFrame.get('key')
     props.urlbarLocation = urlbarLocation
     props.isFocused = urlbar.get('focused')
+    props.isWindows = isWindows()
     props.frameLocation = frameLocation
     props.isSelected = urlbar.get('selected')
     props.noScriptIsVisible = currentWindow.getIn(['ui', 'noScriptInfo', 'isVisible'], false)
@@ -478,89 +560,179 @@ class UrlBar extends React.Component {
     return <form
       className={cx({
         urlbarForm: true,
-        [css(styles.urlbarForm_wide)]: this.props.isWideURLbarEnabled,
-        noBorderRadius: this.props.publisherButtonVisible
+        [css(styles.urlbarForm, this.props.isWideURLbarEnabled && styles.urlbarForm_wide, this.props.titleMode && styles.urlbarForm_titleMode, !this.props.titleMode && styles.urlbarForm_notTitleMode, !this.props.showNoScriptInfo && styles.urlbarForm_noScriptDisabled, this.props.publisherButtonVisible && styles.urlbarForm_isPublisherButtonEnabled)]: true
       })}
       action='#'
       id='urlbar'>
-      <div className='urlbarIconContainer'>
-        <UrlBarIcon
-          titleMode={this.props.titleMode}
-        />
+      <div className={css(commonStyles.rectangleContainer)}>
+        <UrlBarIcon titleMode={this.props.titleMode} />
       </div>
       {
         this.props.titleMode
-        ? <div id='titleBar'>
-          <span><strong>{this.props.hostValue}</strong></span>
-          <span>{this.props.hostValue && this.titleValue ? ' | ' : ''}</span>
-          <span>{this.titleValue}</span>
-        </div>
-        : <input type='text'
-          spellCheck='false'
-          disabled={this.props.displayURL === undefined && this.loadTime === ''}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-          onKeyDown={this.onKeyDown}
-          onKeyUp={this.onKeyUp}
-          onChange={this.onChange}
-          onKeyPress={this.onKeyPress}
-          onClick={this.onClick}
-          onContextMenu={this.onContextMenu}
-          data-l10n-id='urlbar'
-          className={cx({
-            testHookLoadDone: !this.props.loading
-          })}
-          id='urlInput'
-          readOnly={this.props.titleMode}
-          ref={(node) => { this.urlInput = node }} />
+        ? this.titleBar
+        : this.input
+      }
+      {
+        this.props.titleMode
+        ? null
+        : this.legend
       }
-      <legend />
       {
         this.props.showDisplayTime
-        ? <span className={cx({
-          'loadTime': true,
-          'onFocus': this.props.isActive
-        })}>{this.loadTime}</span>
+        ? this.loadTimer
         : null
       }
       {
-        !this.props.showNoScriptInfo
-        ? null
-        : <span className={css(styles.noScriptContainer)}
-          onClick={this.onNoScript}>
-          <span
-            data-l10n-id='noScriptButton'
-            data-test-id='noScriptButton'
-            className={css(styles.noScriptButton)} />
-        </span>
+        this.props.showNoScriptInfo
+        ? this.noScriptInfo
+        : null
       }
       {
-          this.props.showUrlBarSuggestions
-          ? <UrlBarSuggestions />
-          : null
-        }
+        this.props.showUrlBarSuggestions
+        ? <UrlBarSuggestions />
+        : null
+      }
     </form>
   }
 }
 
 const styles = StyleSheet.create({
-  noScriptContainer: {
+  urlbarForm: {
     display: 'flex',
-    padding: '5px',
-    marginRight: '-8px',
-    WebkitAppRegion: 'drag'
-  },
-  noScriptButton: {
-    WebkitAppRegion: 'no-drag',
-    backgroundImage: `url(${iconNoScript})`,
-    width: '14px',
-    height: '14px',
-    border: '0px'
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: globalStyles.navigationBar.urlbarForm.height,
+    padding: '0 3px',
+    background: '#fff',
+
+    // Overwrite wildcard on https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L698-L700
+    WebkitAppRegion: 'drag !important',
+
+    // PR #6485
+    position: 'relative',
+
+    // Fixes #4298
+    width: 0,
+
+    // allow the navigator to shrink
+    minWidth: 0
   },
 
   urlbarForm_wide: {
     // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L682-L684
     maxWidth: '100%'
+  },
+
+  urlbarForm_titleMode: {
+    background: 'none'
+  },
+
+  urlbarForm_notTitleMode: {
+    background: globalStyles.color.navigationBarBackgroundActive,
+    borderRadius: globalStyles.radius.borderRadiusURL,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    boxShadow: 'inset 0 0 0 1px rgba(187, 187, 187, 1.0)',
+    color: globalStyles.color.chromeText
+  },
+
+  urlbarForm_noScriptDisabled: {
+    paddingRight: '10px'
+  },
+
+  // ref: navigationBar__buttonContainer_addPublisherButtonContainer on publisherToggle.js
+  urlbarForm_isPublisherButtonEnabled: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+
+  titleBar: {
+    display: 'inline-block',
+    color: globalStyles.color.chromeText,
+    fontSize: globalStyles.spacing.defaultFontSize,
+    maxWidth: '100%',
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+
+  titleBar__host: {
+    fontWeight: 600
+  },
+
+  input: {
+    background: '#fff',
+    border: 'none',
+    boxSizing: 'border-box',
+    color: '#333',
+    letterSpacing: '-0.125px',
+    cursor: 'text',
+    display: 'flex',
+    flexGrow: 1,
+    fontSize: '13.5px',
+    fontWeight: 'normal',
+    outline: 'none',
+    textOverflow: 'ellipsis',
+
+    // allow the navigator to shrink
+    minWidth: 0,
+
+    // Disable window dragging so that selecting text is possible.
+    WebkitAppRegion: 'no-drag'
+  },
+
+  input_windows: {
+    fontWeight: 500,
+    lineHeight: 1.4,
+    margin: 0, // #5624
+    top: 0, // #5624
+    width: '100%'
+  },
+
+  legend: {
+    ':before': {
+      display: 'none',
+      content: '" "',
+      position: 'absolute',
+      borderRadius: '0 4px 4px 0',
+      color: '#333',
+      boxShadow: `inset 0 0 0 1px ${globalStyles.color.urlBarOutline}, inset 0 0 0 3px ${globalStyles.color.focusUrlbarOutline}`,
+      outline: 'none',
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0,
+      zIndex: globalStyles.zindex.zindexNavigationBar
+    }
+  },
+
+  legend_isFocused: {
+    ':before': {
+      display: 'block'
+    }
+  },
+
+  legend_isPublisherButtonEnabled: {
+    ':before': {
+      borderRadius: 0
+    }
+  },
+
+  loadTime: {
+    color: globalStyles.color.loadTimeColor,
+    fontSize: '12px'
+  },
+
+  loadTime_onFocus: {
+    display: 'none'
+  },
+
+  noScript__button: {
+    background: `url(${iconNoScript}) center no-repeat`,
+    width: '15px',
+    height: '15px',
+    WebkitAppRegion: 'no-drag'
   }
 })
 
diff --git a/app/renderer/components/navigation/urlBarIcon.js b/app/renderer/components/navigation/urlBarIcon.js
index 1fd6fcaaaca..6e2cae98d3a 100644
--- a/app/renderer/components/navigation/urlBarIcon.js
+++ b/app/renderer/components/navigation/urlBarIcon.js
@@ -25,6 +25,9 @@ const frameStateUtil = require('../../../../js/state/frameStateUtil')
 const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil')
 const {isPotentialPhishingUrl} = require('../../../../js/lib/urlutil')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+
 const searchIconSize = 16
 
 class UrlBarIcon extends React.Component {
@@ -34,26 +37,6 @@ class UrlBarIcon extends React.Component {
     this.onDragStart = this.onDragStart.bind(this)
   }
 
-  get iconCssClasses () {
-    if (this.props.isPotentialPhishingUrl) {
-      return ['fa-exclamation-triangle', 'insecure-color']
-    } else if (this.isSearch) {
-      return ['fa-search']
-    } else if (this.props.isAboutPage && !this.props.titleMode) {
-      return ['fa-list']
-    } else if (this.props.isHTTPPage && !this.props.active) {
-      if (this.props.isSecure === true) {
-        return ['fa-lock']
-      } else if (this.props.isSecure === false || this.props.isSecure === 2) {
-        return ['fa-unlock', 'insecure-color']
-      } else if (this.props.isSecure === 1) {
-        return ['fa-unlock']
-      }
-    }
-
-    return []
-  }
-
   /**
    * search icon:
    * - does not show when in title mode
@@ -62,29 +45,54 @@ class UrlBarIcon extends React.Component {
    */
   get isSearch () {
     const showSearch = this.props.isSearching && !this.props.titleMode
-
     const defaultToSearch = (!this.props.isHTTPPage || this.props.active) &&
                             !this.props.titleMode &&
                             !this.props.isAboutPage
-
     return showSearch || defaultToSearch
   }
 
+  get isAboutPage () {
+    return isSourceAboutUrl(this.props.location) &&
+      this.props.location !== 'about:newtab'
+  }
+
+  get iconCssClasses () {
+    if (isPotentialPhishingUrl(this.props.location)) {
+      return [globalStyles.appIcons.exclamationTriangle, css(styles.urlbarIcon_large, styles.urlbarIcon_siteInsecureColor)]
+    } else if (this.isSearch) {
+      return [globalStyles.appIcons.search]
+    } else if (this.isAboutPage && !this.props.titleMode) {
+      return [globalStyles.appIcons.list]
+    } else if (this.props.isHTTPPage && !this.props.active) {
+      // NOTE: EV style not approved yet; see discussion at https://github.com/brave/browser-laptop/issues/791
+      if (this.props.isSecure === true) {
+        return [globalStyles.appIcons.lock, css(styles.urlbarIcon_large)]
+      } else if (this.props.isSecure === false || this.props.isSecure === 2) {
+        return [globalStyles.appIcons.unlock, css(styles.urlbarIcon_large, styles.urlbarIcon_siteInsecureColor, styles.urlbarIcon_insecure)]
+      } else if (this.props.isSecure === 1) {
+        return [globalStyles.appIcons.unlock, css(styles.urlbarIcon_large, styles.urlbarIcon_insecure)]
+      }
+    }
+    return []
+  }
+
   get iconClasses () {
     if (this.props.activateSearchEngine) {
-      return cx({
-        urlbarIcon: true
-      })
+      return null
     }
 
+    // Move fa-list (not fa-search) icon on about pages 1px down
+    // ref: urlbarIcon_relative
+    const relativeIcon = this.isAboutPage && !this.isSearch
+
     const iconClasses = {
-      urlbarIcon: true,
-      fa: true
+      [css(styles.urlbarIcon, this.props.titleMode && styles.urlbarIcon_titleMode, this.isSearch && styles.urlbarIcon_isSearch, relativeIcon && styles.urlbarIcon_relative)]: true
     }
 
     this.iconCssClasses.forEach((iconClass) => {
       iconClasses[iconClass] = true
     })
+
     return cx(iconClasses)
   }
 
@@ -97,7 +105,8 @@ class UrlBarIcon extends React.Component {
       backgroundImage: `url(${this.props.searchSelectImage})`,
       backgroundSize: searchIconSize,
       width: searchIconSize,
-      height: searchIconSize
+      height: searchIconSize,
+      WebkitAppRegion: 'no-drag'
     }
   }
 
@@ -148,6 +157,7 @@ class UrlBarIcon extends React.Component {
   render () {
     // allow click and drag (unless tab is showing a message box)
     const props = {}
+
     if (!this.props.activeTabShowingMessageBox) {
       props.draggable = true
       props.onClick = this.onClick
@@ -155,11 +165,65 @@ class UrlBarIcon extends React.Component {
     }
 
     return <span
-      data-test-id='urlBarIcon'
+      data-test-id='urlbarIcon'
       {...props}
       className={this.iconClasses}
       style={this.iconStyles} />
   }
 }
 
+const styles = StyleSheet.create({
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L893-L896
+  urlbarIcon: {
+    color: globalStyles.color.siteSecureColor,
+    fontSize: '12px',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+
+    // Disable window dragging so that dragging the favicon is possible.
+    // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L704-L707
+    WebkitAppRegion: 'no-drag'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L801-L805
+  urlbarIcon_titleMode: {
+    display: 'inline-block',
+    opacity: 0.5,
+    minWidth: 0
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L809
+  // Unlock icon has this value if the title mode is enabled or not.
+  urlbarIcon_insecure: {
+    opacity: 1
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L900-L906
+  // about:newtab
+  urlbarIcon_isSearch: {
+
+    // 50% of #5a5a5a
+    color: 'rgba(90, 90, 90, .5)'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L908-L913
+  urlbarIcon_large: {
+
+    // Refactor iconClasses to remove !important
+    fontSize: '16px !important'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L897-L898
+  urlbarIcon_relative: {
+    position: 'relative',
+    bottom: '-1px'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L915-L917
+  urlbarIcon_siteInsecureColor: {
+    color: globalStyles.color.siteInsecureColor
+  }
+})
+
 module.exports = ReduxComponent.connect(UrlBarIcon)
diff --git a/app/renderer/components/navigation/windowCaptionButtons.js b/app/renderer/components/navigation/windowCaptionButtons.js
index 8ea4abbeffe..3f75112e042 100644
--- a/app/renderer/components/navigation/windowCaptionButtons.js
+++ b/app/renderer/components/navigation/windowCaptionButtons.js
@@ -50,7 +50,7 @@ class WindowCaptionButtons extends ImmutableComponent {
   }
 
   onDoubleClick (e) {
-    if (!e.target.className.includes('navigatorWrapper')) {
+    if (!e.target.className.includes('navigationBarWrapper')) {
       return
     }
     this.onMaximizeClick(e)
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 0ffa4b810fa..896000a0494 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -198,6 +198,41 @@ const styles = StyleSheet.create({
   isCommonForm: {
     fontSize: globalStyles.fontSize.flyoutDialog,
     width: '100%'
+  },
+
+  // #9283
+  // Create 25x25 squares and place the buttons at the center of each container
+  // Used for bookmarkButtonContainer, PublisherToggle, noScriptInfo, and UrlBarIcon.
+  rectangleContainer: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: globalStyles.navigationBar.urlbarForm.height,
+    width: globalStyles.navigationBar.urlbarForm.height,
+    minHeight: globalStyles.navigationBar.urlbarForm.height,
+    minWidth: globalStyles.navigationBar.urlbarForm.height,
+    WebkitAppRegion: 'no-drag'
+  },
+
+  // Add border to the bookmark button and publisher button only
+  rectangleContainer_outsideOfurlbarForm: {
+    border: `1px solid ${globalStyles.color.urlBarOutline}`,
+    borderRadius: globalStyles.radius.borderRadiusURL
+  },
+
+  navbarButtonContainer: {
+  // Used for stopButton, reloadButton, and homeButton on navigationBar.js
+  // and backButton and forwardButton on navigator.js
+    display: 'inline-block',
+    borderRadius: globalStyles.radius.borderRadiusNavigationButton,
+    height: globalStyles.navigationBar.urlbarForm.height,
+    marginRight: globalStyles.navigationBar.navigationButtonContainer.marginRight,
+
+    ':hover': {
+      background: '#fff',
+      boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.15)'
+    }
   }
 })
 
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index c2b3b241321..ef348b2d9ad 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -52,7 +52,8 @@ const globalStyles = {
     chromeSecondary: '#d3d3d3',
     chromeTertiary: '#c7c7c7',
     chromeText: '#555555',
-    navigationBarBackground: 'white',
+    navigationBarBackground: '#f7f7f7',
+    navigationBarBackgroundActive: '#fff',
     chromeControlsBackground: '#bbb',
     chromeControlsBackground2: 'white',
     tabsToolbarBorderColor: '#bbb',
@@ -105,6 +106,7 @@ const globalStyles = {
     notificationBottomBorderColor: '#ff5500',
     almostInvisible: 'rgba(255,255,255,0.01)',
     urlBarOutline: '#bbb',
+    focusUrlbarOutline: 'rgba(55, 169, 253, 0.4)',
     alphaWhite: 'rgba(255,255,255,0.8)'
   },
   filter: {
@@ -113,6 +115,7 @@ const globalStyles = {
   },
   radius: {
     borderRadius: '4px',
+    borderRadiusNavigationButton: '2px',
     borderRadiusTabs: '4px',
     borderRadiusURL: '4px',
     borderRadiusUIbox: '8px',
@@ -122,7 +125,6 @@ const globalStyles = {
     carotRadius: '8px'
   },
   spacing: {
-    navigatorHeight: '48px',
     defaultSpacing: '12px',
     defaultFontSize: '13px',
     contextMenuFontSize: '14px',
@@ -134,8 +136,6 @@ const globalStyles = {
     switchNubTopMargin: '2px',
     switchNubLeftMargin: '2px',
     switchNubRightMargin: '2px',
-    buttonHeight: '25px',
-    buttonWidth: '25px',
     navbarHeight: '36px',
     downloadsBarHeight: '60px',
     tabsToolbarHeight: '26px',
@@ -227,6 +227,7 @@ const globalStyles = {
     flyoutDialog: '13px',
     prefsPanelHeading: '23px'
   },
+
   appIcons: {
     clipboard: 'fa fa-clipboard',
     closeTab: 'fa fa-times-circle',
@@ -242,8 +243,14 @@ const globalStyles = {
     moreInfo: 'fa fa-info-circle',
     angleDoubleRight: 'fa fa-angle-double-right',
     findPrev: 'fa fa-caret-up',
-    findNext: 'fa fa-caret-down'
+    findNext: 'fa fa-caret-down',
+    exclamationTriangle: 'fa fa-exclamation-triangle',
+    search: 'fa fa-search',
+    list: 'fa fa-list',
+    lock: 'fa fa-lock',
+    unlock: 'fa fa-unlock'
   },
+
   animations: {
     subtleShowUp: {
       opacity: 0,
@@ -314,13 +321,27 @@ const globalStyles = {
         background: '#ccc'
       }
     }
+  },
+
+  navigationBar: {
+
+    urlbarForm: {
+      height: '25px'
+    },
+
+    navigationButtonContainer: {
+      marginRight: '6px',
+
+      // cf: topLevelStartButtonContainer on navigator.js
+      // globalStyles.navigationBar.urlbarForm.height + 2px
+      width: 'calc(25px + 2px)'
+    }
   }
 }
 
 globalStyles.color.chromeBorderColor = globalStyles.color.chromePrimary
 globalStyles.color.chromeControlsWarningBackground = globalStyles.color.chromePrimary
 globalStyles.color.audioColor = globalStyles.color.highlightBlue
-globalStyles.color.focusUrlbarOutline = globalStyles.color.highlightBlue
 globalStyles.color.siteSecureColor = globalStyles.color.buttonColor
 globalStyles.color.loadTimeColor = globalStyles.color.highlightBlue
 globalStyles.color.activeTabDefaultColor = globalStyles.color.chromePrimary
diff --git a/less/button.less b/less/button.less
index 2a5c73dcde1..b0b07907e3a 100644
--- a/less/button.less
+++ b/less/button.less
@@ -17,12 +17,6 @@
   white-space: nowrap;
 }
 
-span.buttonSeparator {
-  width: 1px;
-  border-left: 1px solid #e2e2e2;
-  margin: 4px 3px 4px 3px;
-}
-
 .menuButton {
   background-color: @buttonColor;
   display: inline-block;
diff --git a/less/forms.less b/less/forms.less
index 90233334c4c..3067f017e0a 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -63,7 +63,7 @@ select {
   text-overflow: ellipsis;
 }
 
-#navigator {
+#navigationBar {
   .urlBarSuggestions {
     .flyoutDialog;
     color: @chromeText;
diff --git a/less/navigationBar.less b/less/navigationBar.less
index 0f7078ad48e..6fb85dec939 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -16,14 +16,9 @@
 
 // (macOS) We need to keep a padding left to avoid overlapping
 // with the window buttons to close/maximize/minimize the window.
-.platform--darwin .navigatorWrapper .backforward {
-  margin-left: @navbarLeftMarginDarwin;
+.platform--darwin .navigatorWrapper .topLevelStartButtons {
 
-  &.fullscreen {
-    margin-left: 0;
-  }
-
-  // Since we want to keep the navigator centered, we need to calculate the
+  // Since we want to keep the navigationBar centered, we need to calculate the
   // difference between the width of the left box and the width of the right box.
   @centerOffset: @navbarLeftMarginDarwin + 2 * (@navbarButtonWidth + @navbarButtonSpacing) // width area on the left
                  - (@navbarBraveButtonWidth + 2 * @navbarButtonSpacing);
@@ -36,23 +31,6 @@
     box-sizing: border-box;
   }
 
-  .backforward {
-    padding-left: 5px;
-  }
-
-  #navigator {
-    .urlbarForm {
-      input {
-        font-weight: 500;
-        line-height: 1.4;
-        margin: 0; // #5624
-        top: 0; // #5624
-      }
-    }
-  }
-
-  #urlInput { width: 100%; }
-
   // changes to ensure window can be as small as 480px wide
   // and still be useable and have the caption buttons intact
   @media (max-width: @breakpointExtensionButtonPadding) {
@@ -357,7 +335,7 @@
 }
 
 // Styles had to be reworked to properly position the new caption buttons for Windows
-.navbarCaptionButtonContainer {
+.navigator {
   display: flex;
   //border-bottom: 1px solid #bbb;
 
@@ -365,15 +343,6 @@
     -webkit-app-region: drag;
   }
 }
-.navbarMenubarFlexContainer {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  box-sizing: border-box;
-  position: relative;
-  overflow: visible;
-  white-space: nowrap;
-}
 
 // Window Caption Buttons (for use w/ slim titlebar)
 .windowCaptionButtons {
@@ -443,51 +412,26 @@
 }
 
 // Here I grouped the rules to keep the layout of the top bar consistent.
-// The tricky part is to keep the title in `#navigator` centered when the
+// The tricky part is to keep the title in `#navigationBar` centered when the
 // box on its left has different size than the one on the right.
 // This is achieved by the local variable `@centerOffset`.
 .navigatorWrapper {
-  // Since we want to keep the navigator centered, we need to calculate the
+  // Since we want to keep the navigationBar centered, we need to calculate the
   // difference between the width of the left box and the width of the right box.
   @centerOffset: 2 * (@navbarButtonWidth + @navbarButtonSpacing) // width area on the left
                  - (@navbarBraveButtonWidth + 2 * @navbarButtonSpacing);
 
   @rightMargin: @navbarLeftMarginDarwin / 2;
 
-  display: flex;
-
-  // Buttons on the left
-  .backforward {
-    display: flex;
-
-    .backButton,
-    .forwardButton {
-      width: 100%;
-      height: 100%;
-      margin: 0;
-    }
-
-    .backButton {
-      background: url('../img/toolbar/back_btn.svg') center no-repeat;
-      background-size: 14px 14px;
-    }
-
-    .forwardButton {
-      background: url('../img/toolbar/forward_btn.svg') center no-repeat;
-      background-size: 14px 14px;
-    }
-  }
-
   // Navigation bar at the center
-  #navigator {
-    display: flex;
-    flex-grow: 1;
-    min-width: 0%; // allow the navigator to shrink
-    max-width: 900px;
-    margin-right: @rightMargin;
-
+  #navigationBar {
     &.titleMode {
       padding-right: @centerOffset;
+
+      @media (max-width: @breakpointNarrowViewport) {
+        transition: padding @transitionDuration ease-in-out;
+        padding-right: 0;
+      }
     }
 
     @media (max-width: @breakpointNarrowViewport) {
@@ -497,40 +441,10 @@
     @media (max-width: @breakpointNarrowViewport) {
       width: 100%;
     }
-
-    &.titleMode {
-      @media (max-width: @breakpointNarrowViewport) {
-        transition: padding @transitionDuration ease-in-out;
-        padding-right: 0;
-      }
-    }
   }
 
   // Buttons on the right
   .topLevelEndButtons {
-    display: flex;
-    flex-direction: row;
-    margin-left: 3px;
-    position: relative;
-
-    .braveMenu {
-      width: @navbarBraveButtonWidth;
-      margin-right: @navbarButtonSpacing;
-      -webkit-app-region: no-drag;
-      user-select: none;
-
-      &.braveShieldsDown {
-        -webkit-filter: grayscale(100%);
-      }
-
-      &.braveShieldsDisabled {
-        -webkit-filter: grayscale(100%);
-        opacity: 0.4;
-      }
-      &.leftOfCaptionButton {
-        margin-right: 3px;
-      }
-    }
 
     @media (max-width: @breakpointWideViewport) {
       .extraDragArea {
@@ -542,383 +456,27 @@
   }
 }
 
-.navigationButton {
-  background-color: @buttonColor;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  margin: 0 7px 0 0;
-}
-
-.navigationButtonContainer {
-  border-radius: @borderRadius;
-  height: 24px;
-  width: 26px;
-  margin-left: -3px;
-  margin-right: 6px;
-
-  &.nav {
-    margin-left: 4px;
-    margin-right: 1px;
-    width: 34px;
-  }
-
-  &:last-child {
-    margin-right: 8px;
-  }
-
-  &:not(.disabled):hover {
-    background: white;
-    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
-#navigator {
-  .stopButton,
-  .reloadButton,
-  .homeButton {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .stopButton {
-    background: url('../img/toolbar/stoploading_btn.svg') center no-repeat;
-    background-size: 11px 11px;
-  }
-
-  .reloadButton {
-    background: url('../img/toolbar/reload_btn.svg') center no-repeat;
-    background-size: 13px 13px;
-  }
-
-  .homeButton {
-    background: url('../img/toolbar/home_btn.svg') center no-repeat;
-    background-size: 16px 16px;
-  }
-}
-
-.navigatorWrapper {
-  justify-content: space-between;
-  align-items: center;
-  margin-top: @navbarMenubarMargin;
-  box-sizing: border-box;
-
-  /**
-   * Left buttons
-   */
-  .backforward {
-    display: flex;
-    z-index: @zindexNavigationBar;
-    transition: margin @transitionDuration ease-in-out;
-
-    button {
-      user-select: none;
-      color: @buttonColor;
-      cursor: default;
-      border-radius: 4px;
-      font-weight: 300;
-      opacity: 0.2;
-
-      &:not([disabled]) {
-        opacity: 0.85;
-        -webkit-app-region: no-drag;
-      }
-    }
-  }
-}
-
-@urlbarFormHeight: 25px;
-
 .urlbarForm {
-  position: relative; // PR #6485
-  width: 0; // Fixes #4298
-  align-items: center;
-  justify-content: center;
-  height: @urlbarFormHeight;
-  padding: 0 10px 0 3px;
-  display: flex;
-  flex-grow: 1;
-  min-width: 0%; // allow the navigator to shrink
-
   *:not(legend) {
     z-index: @zindexUrlbarNotLegend;
   }
 
-  legend:before {
-    content: ' ';
-    position: absolute;
-    border-radius: 0 4px 4px 0;
-    color: #333;
-    box-shadow: inset 0 0 0 1px @urlBarOutline, inset 0 0 0 3px @focusUrlbarOutline;
-    outline: none;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    z-index: @zindexNavigationBar;
-    display: none;
-  }
-
-  input:focus + legend:before {
-    display: block;
-  }
-
-  #navigator:not(.titleMode) & {
-    border-radius: @borderRadiusURL;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    box-shadow: inset 0 0 0 1px rgba(187, 187, 187, 1.0);
-    color: @chromeText;
-
-    // #4922
-    // TODO: replace this value with a CSS variable to add a dark UI.
-    background: #fff;
-  }
-
   @media (max-width: @breakpointNarrowViewport) {
     max-width: 80%;
   }
 }
 
-#navigator {
-  font-size: 20px;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 0;
-  position: relative;
-  user-select: none;
-  z-index: @zindexNavigationBar;
+#navigationBar {
 
   // #6253 #6680
   > * {
     -webkit-app-region: no-drag;
   }
 
-  form {
-    -webkit-app-region: drag;
-    // Disable window dragging so that selecting text and dragging the favicon is possible.
-    input, .urlbarIcon {
-      -webkit-app-region: no-drag;
-    }
-  }
-
-  .endButtons {
-    display: flex;
-  }
-
   &:not(.titleMode) {
     > * {
       animation: fadeIn .6s;
       z-index: @zindexNavigationBarElements;
     }
-
-    .urlbarForm {
-      &.noBorderRadius {
-        border-radius: 0;
-
-        legend:before {
-          border-radius: 0;
-        }
-      }
-    }
-
-    // Create 25x25 squares and place the buttons at the center of each container
-    .bookmarkButtonContainer,
-    .addPublisherButtonContainer {
-      border: 1px solid @urlBarOutline;
-      border-radius: @borderRadiusURL;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      height: @urlbarFormHeight;
-      width: @urlbarFormHeight;
-      min-height: @urlbarFormHeight;
-      min-width: @urlbarFormHeight;
-      -webkit-app-region: no-drag;
-    }
-
-    .bookmarkButtonContainer {
-      border-right: none;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-
-      .bookmarkButton {
-        background: url('../img/toolbar/bookmark_btn.svg') center no-repeat;
-        -webkit-mask-repeat: no-repeat;
-        background-size: 14px 14px;
-        margin: 0;
-        height: 0;
-        width: @urlbarFormHeight; // #6704
-        height: @urlbarFormHeight; // #6704
-
-        &.removeBookmarkButton {
-          background: url('../img/toolbar/bookmark_marked.svg') center no-repeat;
-          background-size: 14px 14px;
-        }
-      }
-    }
-  }
-
-  &.titleMode {
-    &:extend(#navigator:not(.titleMode).urlbarForm);
-    animation: fadeIn 1.2s;
-    background: none;
-    // border-radius: @borderRadiusURL;
-    // box-shadow: inset 0 0 0 1px rgba(187, 187, 187, 1.0);
-
-    .urlbarForm {
-      background: none;
-    }
-
-    input {
-      display: none;
-    }
-    #titleBar {
-      display: inline-block;
-      color: @chromeText;
-      font-size: 13px;
-      max-width: 100%;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin-left: 2px;
-
-      strong {
-        font-weight: 600;
-      }
-    }
-
-    .endButtons {
-      display: none;
-    }
-
-    .urlbarIcon {
-      display: inline-block;
-      opacity: 0.5;
-      position: relative;
-      left: 2px;
-      min-width: 0;
-
-      &.insecure-color {
-        color: @siteInsecureColor;
-        opacity: 1.0;
-      }
-    }
-
-    .bookmarkButton {
-      &:not(.removeBookmarkButton) {
-        display: none;
-      }
-    }
-  }
-
-  #titleBar {
-    display: none;
-    text-overflow: ellipsis;
-  }
-
-  .urlbarForm {
-    .loadTime {
-      color: @loadTimeColor;
-      font-size: 12px;
-      text-align: right;
-      cursor: default;
-
-      &.onFocus {
-        display: none;
-      }
-    }
-
-    /* Disable selection of button text */
-    > span {
-       user-select: none;
-    }
-
-    input {
-      border: none;
-      box-sizing: border-box;
-      color: #333;
-      letter-spacing: -0.125px;
-      cursor: text;
-      flex-grow: 1;
-      font-size: 13.5px;
-      font-weight: normal;
-      outline: none;
-      text-overflow: ellipsis;
-      min-width: 0%; // allow the navigator to shrink
-
-      // #4922: make the whole .urlbarForm clickable
-      height: @urlbarFormHeight;
-      background: transparent;
-
-      &.private {
-        background: @privateTabBackground;
-        color: @chromeText;
-      }
-
-      &:focus {
-        margin-right: 3px;
-      }
-    }
-
-    // Create 25x25 square and place .urlbarIcon at the center of it
-    .urlbarIconContainer {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: @urlbarFormHeight;
-      width: @urlbarFormHeight;
-      min-height: @urlbarFormHeight;
-      min-width: @urlbarFormHeight;
-
-      .urlbarIcon {
-        color: @siteSecureColor;
-        font-size: 12px;
-        background-repeat: no-repeat;
-        background-position: center;
-        position: relative;
-        bottom: -1px;
-
-        // about:newtab
-        &.fa-search {
-          position: relative;
-          bottom: 0;
-          // 50% of #5a5a5a
-          color: rgba(90, 90, 90, 0.5);
-        }
-
-        &.fa-lock,
-        &.fa-unlock,
-        &.fa-exclamation-triangle {
-          font-size: 16px;
-          bottom: 0;
-        }
-
-        &.insecure-color {
-          color: @siteInsecureColor;
-        }
-
-        &.extendedValidation {
-          color: @siteEVColor;
-        }
-      }
-    }
-  }
-}
-
-.topLevelEndButtons .braveMenu {
-  background-image: -webkit-image-set(url(../app/extensions/brave/img/braveBtn.png) 1x,
-                                      url(../app/extensions/brave/img/braveBtn2x.png) 2x,
-                                      url(../app/extensions/brave/img/braveBtn3x.png) 3x);
-  background-repeat: no-repeat;
-  height: 24px;
-
-  &:hover {
-    background-image: -webkit-image-set(url(../app/extensions/brave/img/braveBtn_hover.png) 1x,
-                                        url(../app/extensions/brave/img/braveBtn2x_hover.png) 2x,
-                                        url(../app/extensions/brave/img/braveBtn3x_hover.png) 3x);
   }
 }
diff --git a/less/variables.less b/less/variables.less
index 92b32854536..213c7f1bcda 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -8,7 +8,6 @@
 @highlightBlue: #37A9FD;
 @borderRadius: 2px;
 @borderRadiusTabs: 0;
-@borderRadiusURL: 4px;
 @borderRadiusUIbox: 8px;
 @borderRadiusModal: 8px;
 @bigBorderRadius: 14px;
@@ -25,6 +24,7 @@
 @tabsBackground: #ddd;
 @tabsBackgroundInactive: #ddd;
 @tabsToolbarBorderColor: #bbb;
+@navigationBarBackground: @chromeSecondary;
 @chromeBorderColor: @chromePrimary;
 @chromeControlsBackground: #bbb;
 @chromeControlsWarningBackground: @chromePrimary;
@@ -35,18 +35,13 @@
 @menuSelectionColor: #2F7AFB;
 @errorTextColor: #999;
 
-@navigatorHeight: 48px;
 @defaultSpacing: 12px;
 @progressBarColor: #3498DB;
 @defaultFontSize: 13px;
 @contextMenuFontSize: 14px;
 @settingItemSubtextFontSize: 0.95rem;
 @audioColor: @highlightBlue;
-@focusUrlbarOutline: rgba(55, 169, 253, 0.4);
-@siteSecureColor: @buttonColor;
 @siteInsecureColor: #C63626;
-@siteEVColor: green;
-@loadTimeColor: @highlightBlue;
 @activeTabDefaultColor: @chromePrimary;
 @buttonColor: #5a5a5a;
 @braveOrange: rgb(255, 85, 0);
diff --git a/test/bravery-components/braveryPanelTest.js b/test/bravery-components/braveryPanelTest.js
index 1c0ad6d93e1..1206d9607dc 100644
--- a/test/bravery-components/braveryPanelTest.js
+++ b/test/bravery-components/braveryPanelTest.js
@@ -56,7 +56,7 @@ describe('Bravery Panel', function () {
         .tabByIndex(0)
         .loadUrl(url)
         .windowByUrl(Brave.browserWindowUrl)
-        .waitForTextValue('[data-test-id="lionBadge"]', '2')
+        .waitForTextValue('[data-test-id="counterBraveMenu"]', '2')
     })
   })
   describe('Tracking Protection stats', function () {
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 0b429493afa..7f798c945fd 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -2,25 +2,25 @@ module.exports = {
   minimizeButton: '.min-btn',
   maximizeButton: '.max-btn',
   closeButton: '.close-btn',
-  urlInput: '#urlInput',
+  urlInput: '[data-test-id="urlInput"]',
   activeWebview: '.frameWrapper.isActive webview',
   activeTab: '[data-test-active-tab]',
   activeTabTitle: '[data-test-active-tab] [data-test-id="tabTitle"]',
   activeTabFavicon: '[data-test-active-tab] [data-test-favicon]',
   pinnedTabsTabs: '.pinnedTabs [data-test-id="tab"]',
   tabsTabs: '.tabs [data-test-id="tab"]',
-  navigator: '#navigator',
-  navigatorLoadTime: '#navigator .loadTime',
+  navigator: '[data-test-id="navigationBar"]',
+  navigatorLoadTime: '[data-test-id="loadTime"]',
   newFrameButton: '.tabs .newFrameButton',
   tabPage: '.tabPage',
   tabPage1: '[data-tab-page="0"]',
   tabPage2: '[data-tab-page="1"]',
   closeTab: '[data-test-id="closeTabIcon"]',
-  urlbarIcon: '[data-test-id="urlBarIcon"]',
+  urlbarIcon: '[data-test-id="urlbarIcon"]',
   urlBarSuggestions: '.urlBarSuggestions',
   titleBar: '#titleBar',
-  navigatorBookmarked: '#navigator .removeBookmarkButton',
-  navigatorNotBookmarked: '#navigator .bookmarkButton',
+  navigatorBookmarked: '[data-test-id="bookmarked"]',
+  navigatorNotBookmarked: '[data-test-id="notBookmarked"]',
   bookmarksToolbar: '[data-test-id="bookmarksToolbar"]',
   bookmarkNameInput: '[data-test-id="bookmarkNameInput"]',
   bookmarkLocationInput: '[data-test-id="bookmarkLocationInput"]',
@@ -35,8 +35,8 @@ module.exports = {
   findBarNextButton: '[data-test-id="findBarNextButton"]',
   findBarPrevButton: '[data-test-id="findBarPrevButton"]',
   findBarClearButton: '.findClear',
-  braveMenu: '.braveMenu:not(.braveShieldsDisabled)',
-  braveMenuDisabled: '.braveMenu.braveShieldsDisabled',
+  braveMenu: '[data-test-id="braveMenu"]',
+  braveMenuDisabled: '[data-test-id="braveMenuDisabled"]',
 
   // braveryPanelTest.js
   braveryPanel: '[data-test-id="braveryPanel"]',
@@ -62,9 +62,9 @@ module.exports = {
   noScriptAllowTempButton: '[data-l10n-id="allowScriptsTemp"]',
   noScriptAllowOnceButton: '[data-l10n-id="allowScriptsOnce"]',
   noScriptAllowButton: '[data-l10n-id="allowScripts"]',
-  backButton: '.backforward .backButton',
-  forwardButton: '.backforward .forwardButton',
-  reloadButton: '.reloadButton',
+  backButton: '.topLevelStartButtons .backButton',
+  forwardButton: '.topLevelStartButtons .forwardButton',
+  reloadButton: '[data-test-id="reloadButton"]',
   homeButton: '[data-test-id="homeButton"]',
   clearBrowsingDataButton: '[data-test-id="clearBrowsingDataButton"]',
   clearBrowsingDataPanel: '[data-test-id="clearBrowsingDataPanel"]',
diff --git a/test/unit/app/renderer/components/navigation/navigatorTest.js b/test/unit/app/renderer/components/navigation/navigatorTest.js
index 93b8c9cf6ad..063dd2f36f9 100644
--- a/test/unit/app/renderer/components/navigation/navigatorTest.js
+++ b/test/unit/app/renderer/components/navigation/navigatorTest.js
@@ -175,13 +175,13 @@ describe('Navigator component unit tests', function () {
 
     it('counter is shown by default', function () {
       const wrapper = mount(<Navigator />)
-      assert.equal(wrapper.find('[data-test-id="lionBadge"]').length, 1)
+      assert.equal(wrapper.find('[data-test-id="counterBraveMenu"]').length, 1)
     })
 
     it('counter is not shown when disabled via settings', function () {
       settingDefaultValue = false
       const wrapper = mount(<Navigator />)
-      assert.equal(wrapper.find('[data-test-id="lionBadge"]').length, 0)
+      assert.equal(wrapper.find('[data-test-id="counterBraveMenu"]').length, 0)
     })
   })
 })