diff --git a/src/index.pug b/src/index.pug
index b5c1995..cb3b7c4 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -14,12 +14,16 @@ html(lang="en")
     if clientCSS
       link(rel='stylesheet', href=`${clientCSS}`)
   body
-    header#header.flex.is-spaced(role='banner')
-      include header.pug
 
-    main.notLoggedIn
-      include menu-left.pug
-      div#viewport
+    .wrapper
+
+      header#header.header(role='banner')
+        include header.pug
+
+      nav#main__menu.left-menu.jsLeftMenu
+        include menu-left.pug
+
+      main.box.content.notLoggedIn
 
         if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
           #dashboard(hidden).no-sidebar.with-padding
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 080d2a1..e478a76 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -47,94 +47,94 @@ sib-widget(name='hubl-menu-fix-url-project')
       order-by="customer.name"
     )
 
-nav#main__menu.jsLeftMenu
-  sib-router#navbar-router(default-route='dashboard')
-    if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
-      sib-route.menu(name='dashboard')
-        div.menu-label Tableau de bord
-        div.menu-icon.icon-home
-      div.divider
-    if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
-      sib-route.menu(name='members')
-        div.menu-label Annuaire des membres
-        div.menu-icon.icon-people
-      div.divider
-    if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-      sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
-        div.menu-label Offres de mission
-        div.menu-icon.icon-briefcase
-      div.divider
-    if endpoints.events || (endpoints.get && endpoints.get.events)
-      sib-route.menu(name='events')
-        div.menu-label Evènements
-        div.menu-icon.icon-calendar
-      div.divider
-    if endpoints.projects || (endpoints.get && endpoints.get.projects)
-      div
-        sib-link(next='admin-project-list')
-          div.menu
-            div.menu-chevron
-              div.menu-icon.icon-arrow-right-circle
-            div.menu-label  Projets
-            div.menu-icon.icon-folder-alt
-        sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
-        div.sub-menu.menu-notification
-          sib-display.project-tab(
-            bind-user
-            nested-field='projects'
-            fields='project'
-            empty-widget='hubl-create'
-            empty-value='projet'
-            widget-project='hubl-menu-fix-url-project'
-            order-by='project.customer.name'
-            next='project'
-          )
-      div.divider
-    if endpoints.circles || (endpoints.get && endpoints.get.circles)
-      div
-        sib-link(next='admin-circle-list')
-          div.menu
-            div.menu-chevron
-              div.menu-icon.icon-arrow-right-circle
-            div.menu-label  Canaux
-            div.menu-icon.icon-folder-alt
-        sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
-        div.sub-menu.menu-notification
-          sib-display(
-            bind-user
-            nested-field='circles'
-            fields='circle'
-            empty-widget='hubl-create'
-            empty-value='canal'
-            widget-circle='hubl-menu-fix-url-circle'
-            order-by='circle.name'
-            next='circle'
-          )
-      div.divider
-    if endpoints.users || (endpoints.get && endpoints.get.users)
-      div.menu-wrapper
+
+sib-router#navbar-router(default-route='dashboard')
+  if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
+    sib-route.menu(name='dashboard')
+      div.menu-label Tableau de bord
+      div.menu-icon.icon-home
+    div.divider
+  if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+    sib-route.menu(name='members')
+      div.menu-label Annuaire des membres
+      div.menu-icon.icon-people
+    div.divider
+  if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+    sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
+      div.menu-label Offres de mission
+      div.menu-icon.icon-briefcase
+    div.divider
+  if endpoints.events || (endpoints.get && endpoints.get.events)
+    sib-route.menu(name='events')
+      div.menu-label Evènements
+      div.menu-icon.icon-calendar
+    div.divider
+  if endpoints.projects || (endpoints.get && endpoints.get.projects)
+    div
+      sib-link(next='admin-project-list')
         div.menu
           div.menu-chevron
-            div.menu-icon.icon-arrow-up
-          div.menu-label Messages
-          div.menu-icon.icon-envelope-letter
-        sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
-        div.sub-menu.menu-notification
-          sib-display.nosub(
-            data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
-            fields='name, chatProfile.jabberID, badge'
-            search-fields="name"
-            search-label-name="Rechercher..."
-            search-widget-name="hubl-search-users"
-            widget-name='sib-display-div'
-            widget-badge='hubl-counter'
-            widget-chatProfile.jabberID='hubl-menu-jabberid'
-            action-badge='badge'
-            order-by='username'
-            next='messages'
-            paginate-by='10'
-          )
-      div.divider
+            div.menu-icon.icon-arrow-right-circle
+          div.menu-label  Projets
+          div.menu-icon.icon-folder-alt
+      sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
+      div.sub-menu.menu-notification
+        sib-display.project-tab(
+          bind-user
+          nested-field='projects'
+          fields='project'
+          empty-widget='hubl-create'
+          empty-value='projet'
+          widget-project='hubl-menu-fix-url-project'
+          order-by='project.customer.name'
+          next='project'
+        )
+    div.divider
+  if endpoints.circles || (endpoints.get && endpoints.get.circles)
+    div
+      sib-link(next='admin-circle-list')
+        div.menu
+          div.menu-chevron
+            div.menu-icon.icon-arrow-right-circle
+          div.menu-label  Canaux
+          div.menu-icon.icon-folder-alt
+      sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
+      div.sub-menu.menu-notification
+        sib-display(
+          bind-user
+          nested-field='circles'
+          fields='circle'
+          empty-widget='hubl-create'
+          empty-value='canal'
+          widget-circle='hubl-menu-fix-url-circle'
+          order-by='circle.name'
+          next='circle'
+        )
+    div.divider
+  if endpoints.users || (endpoints.get && endpoints.get.users)
+    div.menu-wrapper
+      div.menu
+        div.menu-chevron
+          div.menu-icon.icon-arrow-up
+        div.menu-label Messages
+        div.menu-icon.icon-envelope-letter
+      sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
+      div.sub-menu.menu-notification
+        sib-display.nosub(
+          data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
+          fields='name, chatProfile.jabberID, badge'
+          search-fields="name"
+          search-label-name="Rechercher..."
+          search-widget-name="hubl-search-users"
+          widget-name='sib-display-div'
+          widget-badge='hubl-counter'
+          widget-chatProfile.jabberID='hubl-menu-jabberid'
+          action-badge='badge'
+          order-by='username'
+          next='messages'
+          paginate-by='10'
+        )
+    div.divider
 
-    sib-route(name='admin', hidden)
-    sib-route.menu(name='profile', hidden)
+  sib-route(name='admin', hidden)
+  sib-route.menu(name='profile', hidden)
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 381d304..d527532 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -1,13 +1,14 @@
 #header {
   max-height: 83px;
   height: 83px;
+  display: flex;
   align-items: center;
   background-color: var(--color-header-background);
   color: var(--color-black);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
   flex-shrink: 0;
   position: relative;
-  z-index: 1;
+  /*z-index: 1;*/
 
   &.is-spaced {
     padding: 0 2.5rem;
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 1ef7c31..4d56b7f 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -11,21 +11,6 @@
     background-color: var(--color-main-background);
     color: var(--color-main-text);
     font-size: 1.6rem;
-    min-height: 100vh;
-    overflow-wrap: break-word;
-    overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */
-  }
-
-  main {
-    display: flex;
-    z-index: 0;
-    overflow: hidden;
-    height: calc(100vh - 83px); /* 83px = height of the header */
-    position: relative;
-    width: 100%;
-    
-    backface-visibility: hidden;
-    /*will-change: overflow;*/
   }
 
   .notLoggedIn {
@@ -33,6 +18,73 @@
   }
 }
 
+.wrapper {
+  display: grid;
+  grid-template-areas: 
+    "header"
+    "content";
+
+  @include breakpoint(lg) {
+    grid-template-columns: 265px auto;
+    grid-template-areas:
+      "header header"
+      "leftmenu content";
+  }
+}
+
+.header {
+  grid-area: header;
+}
+
+.left-menu {
+  grid-area: leftmenu;
+
+  @include breakpoint(lg) {
+    height: calc(100vh - 83px); /* 83px = nav height */
+    position: sticky;
+    top: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &.jsLeftMenu {
+    display: none;
+
+    @include breakpoint(lg) {
+      display: block;
+    }
+  }
+
+  &.jsLeftMenu[open] {
+    display: block;
+    bottom: 0;
+    box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
+    min-width: 80%;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1;
+
+    @include breakpoint(lg) {
+      display: none;
+    }
+  }
+}
+
+.content {
+  grid-area: content;
+
+  @include breakpoint(lg) {
+    position: sticky;
+    top: 0;
+    overflow-y: auto;
+    height: calc(100vh - 83px);
+    overflow-x: hidden;
+  }
+}
+
+
+
 /* Add scrollbar to the left and right menu, and to the content */
 nav, .views-container {
   overflow: auto;
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index a4b5459..77ba56b 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -1,10 +1,6 @@
 #main__menu {
   background-color: var(--color-menu-background);
   color: var(--color-menu-text);
-  display: block;
-  max-width: 250px;
-  min-height: calc(100vh - 83px); /* 83px = nav height */
-  flex: 1;
   /*transition: flex-basis 0.5s ease-in-out;*/
 
   &.open {
@@ -245,27 +241,6 @@
       opacity: 0.2;
     }
   }
-
-  &.jsLeftMenu {
-
-    display: none;
-
-    @include breakpoint(lg) {
-      display: block;
-    }
-  }
-
-  &.jsLeftMenu[open] {
-
-    display: block;
-    bottom: 0;
-    box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
-    min-width: 80%;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 1;
-  }
 }
 
 // Temporary fix for badges