diff --git a/app/partials/project/project-menu.jade b/app/partials/project/project-menu.jade
index 4eeaede7..4b053ee1 100644
--- a/app/partials/project/project-menu.jade
+++ b/app/partials/project/project-menu.jade
@@ -3,63 +3,44 @@ div(class="menu-container")
         li(id="nav-search")
             a(href="" title="{{'PROJECT.SECTION.SEARCH' | translate}}")
                 span(class="icon icon-search")
-                span(class="item", translate="PROJECT.SECTION.SEARCH")
+                span.helper(translate="PROJECT.SECTION.SEARCH")
         <% if (project.is_backlog_activated && project.my_permissions.indexOf("view_us") != -1) { %>
         li(id="nav-backlog")
             a(href="" title="{{'PROJECT.SECTION.BACKLOG' | translate}}" tg-nav="project-backlog:project=project.slug")
                 span(class="icon icon-backlog")
-                span(class="item", translate="PROJECT.SECTION.BACKLOG")
+                span.helper(translate="PROJECT.SECTION.BACKLOG")
         <% } %>
         <% if (project.is_kanban_activated && project.my_permissions.indexOf("view_us") != -1) { %>
         li(id="nav-kanban")
             a(href="" title="{{'PROJECT.SECTION.KANBAN' | translate}}" tg-nav="project-kanban:project=project.slug")
                 span(class="icon icon-kanban")
-                span(class="item", translate="PROJECT.SECTION.KANBAN")
+                span.helper(translate="PROJECT.SECTION.KANBAN")
         <% } %>
         <% if (project.is_issues_activated && project.my_permissions.indexOf("view_issues") != -1) { %>
         li(id="nav-issues")
             a(href="" title="{{'PROJECT.SECTION.ISSUES' | translate}}" tg-nav="project-issues:project=project.slug")
                 span(class="icon icon-issues")
-                span(class="item", translate="PROJECT.SECTION.ISSUES")
+                span.helper(translate="PROJECT.SECTION.ISSUES")
         <% } %>
         <% if (project.is_wiki_activated && project.my_permissions.indexOf("view_wiki_pages") != -1) { %>
         li(id="nav-wiki")
             a(href="" title="{{'PROJECT.SECTION.WIKI' | translate}}" tg-nav="project-wiki:project=project.slug")
                 span(class="icon icon-wiki")
-                span(class="item", translate="PROJECT.SECTION.WIKI")
+                span.helper(translate="PROJECT.SECTION.WIKI")
         <% } %>
         li(id="nav-team")
             a(href="" title="{{'PROJECT.SECTION.TEAM' | translate}}" tg-nav="project-team:project=project.slug")
                 span(class="icon icon-team")
-                span(class="item", translate="PROJECT.SECTION.TEAM")
+                span.helper(translate="PROJECT.SECTION.TEAM")
         <% if (project.videoconferences) { %>
         li(id="nav-video")
             a(href!="<%- project.videoconferenceUrl %>" target="_blank" title="{{'PROJECT.SECTION.MEETUP' | translate}}")
                 span(class="icon icon-video")
-                span(class="item", translate="PROJECT.SECTION.MEETUP")
+                span(translate="PROJECT.SECTION.MEETUP")
         <% } %>
         <% if (project.i_am_owner) { %>
         li(id="nav-admin")
             a(href="" tg-nav="project-admin-home:project=project.slug" title="{{'PROJECT.SECTION.ADMIN' | translate}}")
                 span(class="icon icon-settings")
-                span(class="item", translate="PROJECT.SECTION.ADMIN")
+                span.helper(translate="PROJECT.SECTION.ADMIN")
         <% } %>
-    <% if (user) { %>
-    div(class="user")
-        div(class="user-settings")
-            ul(class="popover")
-                li
-                    a(href="" title="{{'USER_SETTINGS.POPOVER.USER_PROFILE' | translate}}", tg-nav="user-settings-user-profile:project=project.slug", translate="USER_SETTINGS.POPOVER.USER_PROFILE")
-                li
-                    a(href="" title="{{'USER_SETTINGS.POPOVER.CHANGE_PASSWORD' | translate}}", tg-nav="user-settings-user-change-password:project=project.slug", translate="USER_SETTINGS.POPOVER.CHANGE_PASSWORD")
-                li
-                    a(href="" title="{{'USER_SETTINGS.POPOVER.NOTIFICATIONS' | translate}}", tg-nav="user-settings-mail-notifications:project=project.slug", translate="USER_SETTINGS.POPOVER.NOTIFICATIONS")
-                <% if (feedbackEnabled) { %>
-                li
-                    a(href="" class="feedback" title="{{'USER_SETTINGS.POPOVER.FEEDBACK' | translate}}", translate="USER_SETTINGS.POPOVER.FEEDBACK")
-                <% } %>
-                li
-                    a(href="" title="{{'COMMON.LOGOUT' | translate}}" class="logout", translate="COMMON.LOGOUT")
-            a(href="" title="{{'USER_SETTINGS.POPOVER.TITLE_AVATAR' | translate}}" class="avatar" id="nav-user-settings")
-                img(src="{{ user.photo }}" alt="{{ user.full_name_display }}")
-    <% } %>
diff --git a/app/styles/modules/common/nav.scss b/app/styles/modules/common/nav.scss
index cf87eec0..b935e8e9 100644
--- a/app/styles/modules/common/nav.scss
+++ b/app/styles/modules/common/nav.scss
@@ -1,33 +1,13 @@
+$label-arrow-wh: 12px;
+
 .menu {
-    @extend %title;
     background-image: url('../images/menu.png');
-    background-position: left bottom;
+    background-position: center center;
     height: 100%;
     min-height: 100vh;
-    padding: 0 .3rem;
+    padding: 1rem .3rem;
     text-transform: uppercase;
-    width: 90px;
-}
-.logo-container {
-    cursor: pointer;
-    padding: 15px 15px 10px;
-    object,
-    img,
-    svg {
-        height: 50px;
-        width: 50px;
-    }
-    span {
-        @extend %large;
-        color: $white;
-        display: block;
-        margin-top: -5px;
-        text-align: center;
-    }
-    sup {
-        display: block;
-        line-height: 1rem;
-    }
+    width: 50px;
 }
 
 .main-nav {
@@ -36,26 +16,55 @@
     position: relative;
     text-align: center;
     li {
-        margin-bottom: 1rem;
+        margin-bottom: .75rem;
     }
     a {
         color: $white;
         display: block;
+        position: relative;
         text-align: center;
-        &:hover {
-            color: $fresh-taiga;
-            transition: color .3s linear;
-        }
-        span {
+    }
+    a:hover {
+        color: $fresh-taiga;
+        transition: color .3s linear;
+        .helper {
+            @extend %small;
+            animation: slideLeft 200ms ease-in-out both;
+            background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .8) 100%);
+            color: $white;
             display: block;
+            left: 45px;
+            opacity: 1;
+            padding: .4rem 1rem;
+            position: absolute;
+            top: 0;
+            transition: all .2s;
+            z-index: 99;
+            &:after {
+                background: rgba($blackish, 1);
+                content: '';
+                height: $label-arrow-wh;
+                left: calc(-#{$label-arrow-wh}/2);
+                position: absolute;
+                top: calc(50% - #{$label-arrow-wh}/2);
+                transform: rotate(45deg);
+                width: $label-arrow-wh;
+                z-index: 98;
+            }
         }
-        .icon {
-            @extend %xlarge;
-            line-height: 2.2rem;
-        }
-        .item {
-            @extend %large;
-        }
+    }
+    span {
+        display: block;
+    }
+    .helper {
+        display: none;
+    }
+    .icon {
+        font-size: 1.5rem;
+        line-height: 2.2rem;
+    }
+    .item {
+        @extend %large;
     }
     .active {
         color: $fresh-taiga;
@@ -63,44 +72,11 @@
     }
 }
 
-.user {
-    bottom: 1rem;
-    padding: 0 10px;
-    position: absolute;
-    width: 80px;
-    .popover {
-        @include popover(150px, '', 60px, 0, '', 15px, '', -6px, 25px);
-        a {
-            @extend %small;
-            color: $white;
-            text-align: left;
-            text-transform: none;
-            &:hover {
-                color: $fresh-taiga;
-                transition: color .2s linear;
-            }
-        }
+@keyframes slideLeft {
+    0% {
+        opacity: 0;
     }
-    img {
-        margin: 0 5px 10px;
-        width: 80%;
-        &:hover {
-            border-color: $fresh-taiga;
-            transition: border-color .3s linear;
-        }
-    }
-    .user-settings {
-        position: relative;
-    }
-    .settings {
-        text-align: center;
-        a {
-            color: $whitish;
-            margin-right: .5rem;
-            &:hover {
-                color: $fresh-taiga;
-                transition: color .3s linear;
-            }
-        }
+    100% {
+        opacity: 1;
     }
 }
diff --git a/app/styles/modules/common/navbar.scss b/app/styles/modules/common/navbar.scss
index add48ee0..3e9bffd4 100644
--- a/app/styles/modules/common/navbar.scss
+++ b/app/styles/modules/common/navbar.scss
@@ -26,7 +26,7 @@
     a {
         color: $gray-light;
         display: inline-block;
-        padding: .5rem .75rem;
+        padding: .5rem 2rem;
         &:hover {
             background: rgba($gray, .3);
             color: $fresh-taiga;
@@ -36,7 +36,7 @@
         }
         &.user-avatar {
             padding: 0;
-            padding-left: .75rem;
+            padding-left: 2rem;
         }
 
     }