diff --git a/src/header.pug b/src/header.pug
index d4d9e11..9ea0b6f 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -17,7 +17,7 @@
       summary.segment.padding(tabindex='0' role='button')
         solid-display#user-controls__profile(
           fields='first_name, account.picture'
-          class-first_name='text-letter-spacing-large'
+          class-first_name='text-letter-spacing-larger'
           class-account.picture='avatar small margin-right-small'
           widget-account.picture='hubl-user-avatar'
           bind-user
diff --git a/src/index.pug b/src/index.pug
index 73520b2..5986beb 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -19,10 +19,10 @@ html(lang="en")
     //- header#header.header.is-spaced(role='banner')
       include header.pug
 
-    header#header.segment.shadow
+    header#header.segment.bg-color-white.shadow
       include header.pug
 
-    nav#main__menu.left-menu.jsLeftMenu
+    nav#main__menu.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
       include menu-left.pug
 
     main#viewport.content.notLoggedIn
diff --git a/src/menu-left.pug b/src/menu-left.pug
index b3a7518..cd7f18f 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -55,45 +55,39 @@ solid-widget(name='hubl-menu-fix-url-project')
 
 solid-router#navbar-router(default-route='dashboard')
   if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
-    solid-route.menu(name='dashboard')
-      div.menu-label(data-trans="menuLeft.dashboard")
-      div.menu-icon.icon-home
-    div.divider
+    solid-route.menu.segment.lg-auto.padding.text-bold(name='dashboard')
+      div.menu-icon.icon-home.segment.lg-auto.margin-right-small.float-left
+      div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.dashboard")
   if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
-    solid-route.menu(name='members')
-      div.menu-label(data-trans="menuLeft.profileDirectory")
-      div.menu-icon.icon-people
-    div.divider
+    solid-route.menu.segment.lg-auto.padding.text-bold(name='members')
+      div.menu-icon.icon-people.segment.lg-auto.margin-right-small.float-left
+      div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.profileDirectory")
   if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-    solid-route.menu(name='job-offers', rdf-type='hd:joboffer')
-      div.menu-label(data-trans="menuLeft.jobBoard")
-      div.menu-icon.icon-briefcase
-    div.divider
+    solid-route.menu.segment.lg-auto.padding.text-bold(name='job-offers', rdf-type='hd:joboffer')
+      div.menu-icon.icon-briefcase.segment.lg-auto.margin-right-small.float-left
+      div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.jobBoard")
   if endpoints.resources || (endpoints.get && endpoints.get.resources)
-    solid-route.menu(name='resources')
-      div.menu-label(data-trans="menuLeft.resources")
-      div.menu-icon.icon-docs
-    div.divider
+    solid-route.menu.segment.lg-auto.padding.text-bold(name='resources')
+      div.menu-icon.icon-docs.segment.lg-auto.margin-right-small.float-left
+      div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.resources")
   if endpoints.polls || (endpoints.get && endpoints.get.polls)
-    solid-route.menu(name='polls')
-      div.menu-label(data-trans="menuLeft.gov")
-      div.menu-icon.icon-bubbles
-    div.divider
+    solid-route.menu.segment.lg-auto.padding.text-bold(name='polls')
+      div.menu-icon.icon-bubbles.segment.lg-auto.margin-right-small.float-left
+      div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.gov")
   if endpoints.events || (endpoints.get && endpoints.get.events)
-    solid-route.menu(name='events')
-      div.menu-label(data-trans="menuLeft.events")
-      div.menu-icon.icon-calendar
-    div.divider
+    solid-route.menu.segment.lg-auto.padding.text-bold(name='events')
+      div.menu-icon.icon-calendar.segment.lg-auto.margin-right-small.float-left
+      div.menu-label.segment.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.events")
   if endpoints.projects || (endpoints.get && endpoints.get.projects)
     div.menu-wrapper
       solid-link
         //- (next='admin-project-list')
-        div.menu
-          div.menu-chevron
+        div.menu.segment.lg-auto.padding.text-bold
+          div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-small.float-left
+          div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.projects")
+          div.menu-chevron.segment.lg-auto.float-left
             div.menu-icon.icon-arrow-up
             //- div.menu-icon.icon-arrow-right-circle
-          div.menu-label(data-trans="menuLeft.projects")
-          div.menu-icon.icon-folder-alt
       solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
       div.sub-menu.menu-notification
         div#loader-projects.loader.loader-menu
@@ -117,12 +111,12 @@ solid-router#navbar-router(default-route='dashboard')
     div.menu-wrapper
       solid-link
         //- (next='admin-circle-list')
-        div.menu
-          div.menu-chevron
+        div.menu.segment.lg-auto.padding.text-bold
+          div.menu-icon.icon-folder-alt.segment.lg-auto.margin-right-small.float-left
+          div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.circles")
+          div.menu-chevron.segment.lg-auto.float-left
             div.menu-icon.icon-arrow-up
             //- div.menu-icon.icon-arrow-right-circle
-          div.menu-label(data-trans="menuLeft.circles")
-          div.menu-icon.icon-folder-alt
       solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
       div.sub-menu.menu-notification
         div#loader-circles.loader.loader-menu
@@ -144,11 +138,11 @@ solid-router#navbar-router(default-route='dashboard')
     div.divider
   if endpoints.users || (endpoints.get && endpoints.get.users)
     div.menu-wrapper
-      div.menu
-        div.menu-chevron
+      div.menu.segment.lg-auto.padding.text-bold
+        div.menu-icon.icon-envelope-letter.segment.lg-auto.margin-right-small.float-left
+        div.menu-label.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large.float-left(data-trans="menuLeft.messages")
+        div.menu-chevron.segment.lg-auto.float-left
           div.menu-icon.icon-arrow-up
-        div.menu-label(data-trans="menuLeft.messages")
-        div.menu-icon.icon-envelope-letter
       solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
       div.sub-menu.menu-notification
         div#loader-messages.loader.loader-menu
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index c5a9362..d6c29ce 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -23,7 +23,7 @@
 }
 
 .segment {
-  background: white;
+  /*background: white;*/
   position: relative;
 
   .content-vertically-centered {
@@ -66,12 +66,18 @@
   &.margin-left {
     margin-left: 20px;
   }
+  &.margin-right-small {
+    margin-right: 15px;
+  }
   &.margin-right {
     margin-right: 20px;
   }
   &.padding {
     padding: 14px;
   }
+  &.padding-large {
+    padding: 20px;
+  }
 }
 
 .avatar {
@@ -105,10 +111,22 @@
   box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
 }
 
+.bg-color-heading {
+  background: var(--color-heading);
+}
+
+.bg-color-white {
+  background: white;
+}
+
 .text-bold {
   font-weight: 600;
 }
 
+.text-uppercase {
+  text-transform: uppercase;
+}
+
 .text-xsmall {
   font-size: 12px;
 }
@@ -141,6 +159,10 @@
   color: var(--color-heading);
 }
 
+.text-color-white {
+  color: white;
+}
+
 .text-letter-spacing-wide {}
 
 .text-letter-spacing-wider {}
@@ -148,10 +170,12 @@
 .text-letter-spacing-widest {}
 
 .text-letter-spacing-large {
-  letter-spacing: 0.38px;
+  letter-spacing: 0.2px;
 }
 
-.text-letter-spacing-larger {}
+.text-letter-spacing-larger {
+  letter-spacing: 0.38px;
+}
 
 
 .logo {
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index a952da0..06eb705 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -1,7 +1,8 @@
 #main__menu {
-  background-color: var(--color-menu-background);
-  color: var(--color-menu-text);
+  /*background-color: var(--color-menu-background);
+  color: var(--color-menu-text);*/
   /*transition: flex-basis 0.5s ease-in-out;*/
+  width: 256px;
 
   &.open {
     transform: translateX(0);
@@ -13,6 +14,10 @@
 
   solid-router {
     .menu-wrapper {
+
+      .menu {
+        border-bottom: none;
+      }
       .menu-icon.icon-arrow-up {
         visibility: hidden;
       }
@@ -26,7 +31,7 @@
           }
 
           .menu-chevron {
-            transform: rotate(180deg);
+            transform: rotateX(180deg);
           }
         }
       }
@@ -38,16 +43,21 @@
 
     .menu {
       cursor: pointer;
+      border-bottom: 1px solid #4F5E72;
       display: flex;
-      flex-direction: row-reverse;
-      font-weight: bold;
-      padding: 1.2rem;
+      align-items: center;
+      /*flex-direction: row-reverse;*/
+      /*font-weight: bold;
+      padding: 1.2rem;*/
 
       &[active] {
-        background-color: var(--color-menu-highlight-primary);
+        background-color: var(--color-third);
+        color: var(--color-heading);
+        border-bottom: none;
 
         .menu-icon:before {
-          background-color: var(--color-menu-icon-background-active);
+          background-color: var(--color-heading);
+          color: white;
         }
 
         .menu-notification>solid-display>div:first-child {
@@ -56,15 +66,15 @@
       }
 
       .menu-icon {
-        align-items: center;
+        /*align-items: center;
         display: flex;
         justify-content: center;
         flex-grow: 0;
         flex-shrink: 0;
         font-size: 1.7rem;
-        width: 3.2em;
+        width: 3.2em;*/
 
-        &:before {
+        &::before {
           border-radius: 100%;
           height: 1.9em;
           line-height: 1.9em;
@@ -72,7 +82,7 @@
         }
       }
 
-      .menu-label {
+      /*.menu-label {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
@@ -82,16 +92,16 @@
         letter-spacing: 0.017rem;
         text-transform: uppercase;
         width: 8em;
-      }
+      }*/
 
-      .menu-chevron {
+      /*.menu-chevron {
         align-items: center;
         display: flex;
         flex-grow: 0;
         flex-shrink: 0;
         justify-content: center;
         width: 2em;
-      }
+      }*/
 
       >solid-display {
         display: block;
@@ -295,8 +305,7 @@
 
     .divider {
       height: 1px;
-      background-color: var(--color-grey-11);
-      opacity: 0.2;
+      background-color: #4F5E72;
     }
   }
 }