diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js
index aee772013..227d5b0ff 100644
--- a/src/common/NavBar/NavBar.js
+++ b/src/common/NavBar/NavBar.js
@@ -14,7 +14,7 @@ const NavBar = ({ backButton, tabs, title, searchBar, userMenu }) => {
             {
                 backButton ?
                     <NavBarButton
-                        className={styles['nav-bar-button']}
+                        className={styles['back-button']}
                         icon={'ic_back_ios'}
                         label={'back'}
                         onClick={onBackButtonClick}
@@ -24,15 +24,17 @@ const NavBar = ({ backButton, tabs, title, searchBar, userMenu }) => {
             }
             {
                 tabs.length > 0 ?
-                    tabs.map(({ href, icon, label }) => (
-                        <NavBarButton
-                            key={href}
-                            className={styles['nav-bar-button']}
-                            href={href}
-                            icon={icon}
-                            label={label}
-                        />
-                    ))
+                    <div className={styles['nav-tabs-container']}>
+                        {tabs.map(({ href, icon, label }) => (
+                            <NavBarButton
+                                key={href}
+                                className={styles['nav-tab-button']}
+                                href={href}
+                                icon={icon}
+                                label={label}
+                            />
+                        ))}
+                    </div>
                     :
                     <h2 className={styles['title']}>{title}</h2>
             }
diff --git a/src/common/NavBar/styles.less b/src/common/NavBar/styles.less
index ce89f728c..84a69cfbc 100644
--- a/src/common/NavBar/styles.less
+++ b/src/common/NavBar/styles.less
@@ -2,9 +2,11 @@
     --nav-bar-height: 44px;
     font-size: 16px;
 
-    .nav-bar-button {
-        &:nth-child(n+5) {
-            display: none;
+    .nav-tabs-container {
+        .nav-tab-button {
+            &:nth-child(n+5) {
+                display: none;
+            }
         }
     }
 }
@@ -17,12 +19,24 @@
     background-color: var(--color-secondarydark);
     overflow: hidden;
 
-    .nav-bar-button {
+    .back-button {
         flex: none;
-        max-width: calc(var(--nav-bar-height) * 3.5);
+        max-width: calc(var(--nav-bar-height) * 5);
         height: var(--nav-bar-height);
     }
 
+    .nav-tabs-container {
+        flex: none;
+        display: flex;
+        flex-direction: row;
+
+        .nav-tab-button {
+            flex: none;
+            max-width: calc(var(--nav-bar-height) * 3.5);
+            height: var(--nav-bar-height);
+        }
+    }
+
     .title {
         flex: 1;
         font-size: 1.1em;