diff --git a/app/images/menu-vert.png b/app/images/menu-vert.png
index e7d8425d..d1a8e7c2 100644
Binary files a/app/images/menu-vert.png and b/app/images/menu-vert.png differ
diff --git a/app/styles/modules/common/nav.scss b/app/styles/modules/common/nav.scss
index b935e8e9..65b7fba5 100644
--- a/app/styles/modules/common/nav.scss
+++ b/app/styles/modules/common/nav.scss
@@ -5,9 +5,8 @@ $label-arrow-wh: 12px;
     background-position: center center;
     height: 100%;
     min-height: 100vh;
-    padding: 1rem .3rem;
+    padding: 1rem 0;
     text-transform: uppercase;
-    width: 50px;
 }
 
 .main-nav {
@@ -15,17 +14,15 @@ $label-arrow-wh: 12px;
     padding: 0;
     position: relative;
     text-align: center;
-    li {
-        margin-bottom: .75rem;
-    }
     a {
         color: $white;
         display: block;
+        padding: .75rem .8rem;
         position: relative;
-        text-align: center;
     }
     a:hover {
-        color: $fresh-taiga;
+        //color: $fresh-taiga;
+        background: rgba($black, .2);
         transition: color .3s linear;
         .helper {
             @extend %small;
@@ -33,7 +30,7 @@ $label-arrow-wh: 12px;
             background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .8) 100%);
             color: $white;
             display: block;
-            left: 45px;
+            left: 50px;
             opacity: 1;
             padding: .4rem 1rem;
             position: absolute;
@@ -67,6 +64,7 @@ $label-arrow-wh: 12px;
         @extend %large;
     }
     .active {
+        background: rgba($black, .2);
         color: $fresh-taiga;
         transition: color .3s linear;
     }
diff --git a/app/styles/modules/common/navbar.scss b/app/styles/modules/common/navbar.scss
index 3e9bffd4..c893cf2e 100644
--- a/app/styles/modules/common/navbar.scss
+++ b/app/styles/modules/common/navbar.scss
@@ -1,12 +1,14 @@
+$top-icon-color: #11241f;
+
 .navbar {
-    background: rgba($black, .2);
+    background: rgba($black, .5);
     display: flex;
     justify-content: space-between;
     overflow: hidden;
     position: relative;
     &:after {
-        background: url('../images/menu-vert.png') center center repeat;
-        background-size: cover;
+        background: url('../images/menu-vert.png') repeat top left;
+        background-size: 100%;
         bottom: 0;
         content: '';
         height: 100%;
@@ -23,33 +25,47 @@
         align-items: center;
         display: flex;
     }
+    .nav-left {
+        a {
+            padding: .5rem 1.5rem;
+            &.logo {
+                background: rgba($black, .2);
+                padding: .4rem .75rem;
+            }
+            svg {
+                height: 1.6rem;
+                max-width: 2rem;
+            }
+            path {
+                fill: $white;
+            }
+        }
+    }
+    .nav-right {
+        a {
+            padding: .5rem 2rem;
+        }
+    }
     a {
-        color: $gray-light;
+        color: $white;
         display: inline-block;
-        padding: .5rem 2rem;
+        transition: all .2s linear;
         &:hover {
-            background: rgba($gray, .3);
+            background: rgba($black, .2);
             color: $fresh-taiga;
             svg path {
-                fill: $gray-light;
+                fill: $white;
             }
         }
         &.user-avatar {
             padding: 0;
             padding-left: 2rem;
+            span {
+                padding-right: 1rem;
+            }
         }
 
     }
-    .logo {
-        padding: 0 2rem;
-        svg {
-            height: 2rem;
-            max-width: 2rem;
-        }
-        path {
-            fill: $white;
-        }
-    }
     img {
         height: 2.5rem;
         padding-left: .3rem;
@@ -59,7 +75,7 @@
         height: 1.2rem;
         max-width: 1.2rem;
         path {
-            fill: $gray;
+            fill: $dark-taiga;
             transition: all .2s;
         }
     }