diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss
index 741c956..9d37bc8 100644
--- a/src/styles/left-nav/_index.scss
+++ b/src/styles/left-nav/_index.scss
@@ -54,14 +54,15 @@ nav#main__menu {
 
     .ellipsis-content,
     .ellipsis-content>div {
+      display: block;
+      line-height: 19px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
 
-      @media(min-width: 1024px) {
+      @media (max-width: 768px) {
         display: block;
-        line-height: 19px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
       }
     }
   }
@@ -88,17 +89,17 @@ nav#main__menu {
   }
 
   &.jsLeftMenu[open] {
-    display: block;
-    bottom: 0;
-    box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
-    width: 80vw;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 1000;
+    display: none;
 
-    @media(min-width: 1024px) {
-      display: none;
+    @media (max-width: 768px) {
+      display: block;
+      bottom: 0;
+      box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5);
+      width: 100%;
+      position: fixed;
+      right: 0;
+      top: 50px;
+      z-index: 1000;
     }
   }
 }
diff --git a/src/views/page-about.pug b/src/views/page-about.pug
index c010fe6..49eb7f9 100644
--- a/src/views/page-about.pug
+++ b/src/views/page-about.pug
@@ -1,16 +1,16 @@
-div.segment.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large
+div.segment.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-top-xxsmall.sm-padding-left-xsmall.sm-padding-right-xsmall.sm-padding-bottom-medium.whitespace-normal
   h2.text-xlarge.text-color-heading.text-uppercase(data-trans='about.title')
 
-  div.segment.lg-two-third.margin-top-small.padding-right-xlarge
-    div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center
+  div.segment.lg-two-third.sm-full.margin-top-small.sm-margin-top-xxsmall.padding-right-xlarge.sm-padding-none
+    div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.sm-padding-medium.sm-padding-top-xxsmall.sm-padding-bottom-xlarge.text-center
       h3.text-color-heading.text-semibold.text-uppercase(data-trans='about.card1.subTitle')
       div
         p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph1')
         p.segment.whitespace-normal.text-large(data-trans='about.card1.paragraph2')
         a.link.text-xlarge(href="https://startinblox.com/fr/" target="_blank") https://startinblox.com/fr/
 
-  div.segment.lg-third.margin-top-small.text-top
-    div.segment.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.text-center
+  div.segment.lg-third.sm-full.margin-top-small.text-top
+    div.segment.sm-full.whitespace-normal.shadow.padding-top-xlarge.padding-right-xxlarge.padding-bottom-xxlarge.padding-left-xxlarge.sm-padding-medium.sm-padding-bottom-xlarge.text-center
       div.segment.margin-top-small
         div.segment.center.icon.icon-xlarge.rounded-third.rounded.rounded-large.icon-envelope.icon-secondary
       h3.text-color-heading.text-semibold.text-uppercase.text-medium(data-trans='about.card2.subTitle')
diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug
index f10052c..b6a92a3 100644
--- a/src/views/partials/menu-left.pug
+++ b/src/views/partials/menu-left.pug
@@ -31,16 +31,16 @@ solid-widget(name='hubl-create')
       br
       span(data-trans="menuLeft.emptyCircleProject.createNew")
       span  
-      solid-link.segment.lg-full(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel")
+      solid-link.segment.lg-full.sm-full(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel")
 
 solid-widget(name='hubl-menu-fix-url-contact')
   template
-    solid-link.segment.lg-full(data-src="${value}" next="messages")
-      solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active(
+    solid-link.segment.lg-full.sm-full(data-src="${value}" next="messages")
+      solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
         data-src='${value}'
         fields='segment(message(name, chatProfile.jabberID), badge)'
         
-        class-segment="segment lg-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
+        class-segment="segment lg-full sm-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
         class-message='segment lg-three-quarter sub-menu-name'
         class-badge='segment badge'
 
@@ -53,11 +53,11 @@ solid-widget(name='hubl-menu-fix-url-contact')
 
 solid-widget(name='hubl-menu-fix-url-circle')
   template
-    solid-link.segment.lg-full(data-src="${value}" next="circle")
-      solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active(
+    solid-link.segment.lg-full.sm-full(data-src="${value}" next="circle")
+      solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
         data-src='${value}'
         fields='segment(status, circle(name, jabberID), badge)'
-        class-segment="segment lg-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
+        class-segment="segment lg-full sm-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
 
         class-status='segment text-top sub-menu-icon'
 
@@ -77,11 +77,11 @@ solid-widget(name='hubl-menu-fix-url-circle')
 
 solid-widget(name='hubl-menu-fix-url-project')
   template
-    solid-link.segment.lg-full(data-src="${value}" next="project")
-      solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active(
+    solid-link.segment.lg-full.sm-full(data-src="${value}" next="project")
+      solid-display.segment.lg-full.sm-full.text-color-white.heading-active.bg-color-heading.hover.active(
         data-src='${value}'
         fields='segment(status, project(customer.name, name, jabberID), badge)'
-        class-segment="segment lg-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
+        class-segment="segment lg-full sm-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
 
         class-status='segment text-top sub-menu-icon'
 
@@ -103,48 +103,48 @@ 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.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='dashboard')
+    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='dashboard')
       div.segment.margin-right-xxsmall
         div.icon.icon-small.icon-home
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard")
     div.divider
   if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
-    solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members')
+    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='members')
       div.segment.margin-right-xxsmall
         div.icon.icon-small.icon-people
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory")
     div.divider
   if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-    solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='job-offers', rdf-type='hd:joboffer')
+    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='job-offers', rdf-type='hd:joboffer')
       div.segment.margin-right-xxsmall
         div.segment.icon.icon-small.icon-briefcase
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard")
     div.divider
   if endpoints.resources || (endpoints.get && endpoints.get.resources)
-    solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='resources')
+    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='resources')
       div.segment.margin-right-xxsmall
         div.segment.icon.icon-small.icon-docs
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources")
     div.divider
   if endpoints.polls || (endpoints.get && endpoints.get.polls)
-    solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='polls')
+    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='polls')
       div.segment.margin-right-xxsmall
         div.segment.icon.icon-small.icon-bubbles
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov")
     div.divider
   if endpoints.events || (endpoints.get && endpoints.get.events)
-    solid-route.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='events')
+    solid-route.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name='events')
       div.segment.margin-right-xxsmall
         div.segment.icon.icon-small.icon-calendar
       div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events")
     div.divider
   if endpoints.projects || (endpoints.get && endpoints.get.projects)
     div.menu-wrapper
-      solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
+      solid-link.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
         //- (next='admin-project-list')
         div.segment.margin-right-xxsmall
           div.segment.icon.icon-small.icon-folder-alt
-        div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
+        div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
         div.menu-chevron.segment
           div.icon-arrow-up
           //- div.menu-icon.icon-arrow-right-circle
@@ -169,11 +169,11 @@ solid-router#navbar-router(default-route='dashboard')
     div.divider
   if endpoints.circles || (endpoints.get && endpoints.get.circles)
     div.menu-wrapper
-      solid-link.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
+      solid-link.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
         //- (next='admin-circle-list')
         div.segment.margin-right-xxsmall
           div.segment.icon.icon-small.icon-folder-alt
-        div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles")
+        div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles")
         div.menu-chevron.segment
           div.icon-arrow-up
           //- div.menu-icon.icon-arrow-right-circle
@@ -197,10 +197,10 @@ solid-router#navbar-router(default-route='dashboard')
         )
     div.divider
     div.menu-wrapper
-      div.menu.segment.lg-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
+      div.menu.segment.lg-full.sm-full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active
         div.segment.margin-right-xxsmall
           div.segment.icon.icon-small.icon-envelope-letter
-        div.segment.lg-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages")
+        div.segment.lg-three-quarter.sm-three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages")
         div.menu-chevron.segment
           div.icon-arrow-up
     solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
@@ -214,7 +214,7 @@ solid-router#navbar-router(default-route='dashboard')
         //- search-label-contact.name=""
         //- data-trans="search-label-contact.name=menuLeft.search"
         //- search-widget-contact.name="hubl-search-users"
-      solid-display.segment.lg-full.whitespace-normal(
+      solid-display.segment.lg-full.sm-full.whitespace-normal(
         bind-user
         nested-field='contacts'
         fields='contact'