diff --git a/src/common/NavBar/NavBarButton/NavBarButton.js b/src/common/NavBar/NavBarButton/NavBarButton.js
index c159a4171..59a371317 100644
--- a/src/common/NavBar/NavBarButton/NavBarButton.js
+++ b/src/common/NavBar/NavBarButton/NavBarButton.js
@@ -18,7 +18,7 @@ const NavBarButton = React.memo(({ className, icon, label, href, onClick }) => {
     }, [href, locationHash]);
     const inputType = typeof onClick === 'function' ? 'button' : 'link';
     return (
-        <Input className={classnames(className, styles['button'], { 'active': active })} type={inputType} href={href} onClick={onClick}>
+        <Input className={classnames(className, styles['button'], 'focusable-with-border', { 'active': active })} type={inputType} href={href} onClick={onClick}>
             <Icon className={styles['icon']} icon={icon} />
             <div className={styles['label']}>{label}</div>
         </Input>
diff --git a/src/common/NavBar/NavBarButton/styles.less b/src/common/NavBar/NavBarButton/styles.less
index cc19aa8aa..c978dac6d 100644
--- a/src/common/NavBar/NavBarButton/styles.less
+++ b/src/common/NavBar/NavBarButton/styles.less
@@ -2,11 +2,11 @@
     display: inline-flex;
     flex-direction: row;
     align-items: center;
-    padding: 0 1.4em;
+    padding: 0 1.2em;
     overflow: hidden;
     cursor: pointer;
 
-    &:hover, &:focus {
+    &:hover {
         background-color: var(--color-backgrounddark20);
     }
 
@@ -24,8 +24,9 @@
         flex: 1;
         height: 1.4em;
         line-height: 1.4em;
-        word-break: break-all;
         overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
         text-transform: capitalize;
         color: var(--color-surfacelighter);
     }