diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
index 19ddba6a9..b13b8724e 100644
--- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -14,7 +14,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
         window.history.back();
     }, []);
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
-    const renderNavBarLabel = React.useMemo(() => ({ ref, className, onClick, children, }) => (
+    const renderNavMenuLabel = React.useMemo(() => ({ ref, className, onClick, children, }) => (
         <Button ref={ref} className={classnames(className, styles['button-container'])} tabIndex={-1} onClick={onClick}>
             <Icon className={styles['icon']} icon={'ic_more'} />
             {children}
@@ -45,18 +45,14 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
             <div className={styles['spacing']} />
             {
                 searchBar ?
-                    <SearchBar
-                        className={styles['search-bar']}
-                        query={query}
-                        active={route === 'search'}
-                    />
+                    <SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
                     :
                     null
             }
             <div className={styles['spacing']} />
             {
                 addonsButton ?
-                    <Button className={styles['button-container']} href={'#/addons'} tabIndex={-1}>
+                    <Button className={styles['button-container']} href={'#/addons'} title={'Addons'} tabIndex={-1}>
                         <Icon className={styles['icon']} icon={'ic_addons'} />
                     </Button>
                     :
@@ -72,7 +68,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
             }
             {
                 navMenu ?
-                    <NavMenu renderLabel={renderNavBarLabel} />
+                    <NavMenu renderLabel={renderNavMenuLabel} />
                     :
                     null
             }
diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
index dd6ff8e72..cebfd3ba2 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
@@ -38,7 +38,7 @@ const NavMenu = (props) => {
             onClick: popupLabelOnClick,
             children,
         })
-    ), [menuOpen, popupLabelOnClick]);
+    ), [menuOpen, popupLabelOnClick, props.renderLabel]);
     const renderMenu = React.useMemo(() => () => (
         <div className={styles['nav-menu-container']} onClick={popupMenuOnClick}>
             <div className={styles['user-info-container']}>
diff --git a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
index fc4173c65..02ba4640d 100644
--- a/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
+++ b/src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
@@ -63,7 +63,7 @@
     }
 
     .nav-menu-section {
-        border-top: thin solid @color-surface-dark5;
+        border-top: thin solid @color-surface-light5-20;
 
         .nav-menu-option-container {
             display: flex;
@@ -72,7 +72,7 @@
             height: 4rem;
 
             &:hover {
-                background-color: @color-background-dark1;
+                background-color: @color-background-light2;
             }
 
             .icon {
diff --git a/src/common/NavBar/VerticalNavBar/VerticalNavBar.js b/src/common/NavBar/VerticalNavBar/VerticalNavBar.js
index 88f00a679..26143fe47 100644
--- a/src/common/NavBar/VerticalNavBar/VerticalNavBar.js
+++ b/src/common/NavBar/VerticalNavBar/VerticalNavBar.js
@@ -4,7 +4,7 @@ const classnames = require('classnames');
 const NavTabButton = require('./NavTabButton');
 const styles = require('./styles');
 
-const VerticalNavBar = React.memo(({ className, route, tabs }) => {
+const VerticalNavBar = React.memo(({ className, selected, tabs }) => {
     return (
         <nav className={classnames(className, styles['vertical-nav-bar-container'])}>
             {
@@ -13,11 +13,10 @@ const VerticalNavBar = React.memo(({ className, route, tabs }) => {
                         <NavTabButton
                             key={index}
                             className={styles['nav-tab-button']}
-                            selected={tab.route === route}
+                            selected={tab.id === selected}
                             href={tab.href}
                             icon={tab.icon}
                             label={tab.label}
-                            route={tab.route}
                             onClick={tab.onClick}
                         />
                     ))
@@ -32,9 +31,9 @@ VerticalNavBar.displayName = 'VerticalNavBar';
 
 VerticalNavBar.propTypes = {
     className: PropTypes.string,
-    route: PropTypes.string,
+    selected: PropTypes.string,
     tabs: PropTypes.arrayOf(PropTypes.shape({
-        route: PropTypes.string,
+        id: PropTypes.string,
         label: PropTypes.string,
         icon: PropTypes.string,
         href: PropTypes.string,