diff --git a/package-lock.json b/package-lock.json
index c316fc2..a8c3d3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1159,9 +1159,9 @@
       }
     },
     "@startinblox/hubl-styling-framework": {
-      "version": "1.0.48",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.48.tgz",
-      "integrity": "sha512-/bgu6Y2OZvnQhZ485knrgfFZZLm2UyxGcNiIQwtkze96feuJ91h5a0qa6vc6eRmKT4SBQSYHLoDtN4v/2Bcw4Q=="
+      "version": "1.0.54",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.54.tgz",
+      "integrity": "sha512-CSHt71PGCtlbTLp+DXoSVgB8hxYiUd/9Dhzof5KOVFbfEf4Tiwgp85DRkLfN8X0rMA+JFKL024Yw1z8MXlJKyg=="
     },
     "@types/q": {
       "version": "1.5.4",
diff --git a/package.json b/package.json
index 96c9285..0cb804f 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "@startinblox/hubl-styling-framework": "^1.0.48",
+    "@startinblox/hubl-styling-framework": "^1.0.54",
     "fs-extra": "^9.0.1",
     "normalize.css": "^8.0.1",
     "parcel-bundler": "^1.12.4",
diff --git a/src/index.pug b/src/index.pug
index 0e01e63..ed2d4dd 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -50,7 +50,7 @@ html(lang="en")
       nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.lg-quarter.jsLeftMenu
         include views/partials/menu-left.pug
 
-      main#content.segment.lg-three-quarter.text-top.notLoggedIn
+      main#content.segment.lg-three-quarter.sm-full.text-top.notLoggedIn
 
         if endpoints.get.dashboards
           #dashboard(hidden, data-view="dashboard").scrollbar-content
diff --git a/src/styles/chat/_index.scss b/src/styles/chat/_index.scss
index 061961b..cdbf46d 100644
--- a/src/styles/chat/_index.scss
+++ b/src/styles/chat/_index.scss
@@ -1,3 +1,7 @@
 .chat-view {
   height: calc(100vh - 72px - 78px);
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 50px - 68px);
+  }
 }
diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss
index 82e5c77..b5906ab 100644
--- a/src/styles/content/_index.scss
+++ b/src/styles/content/_index.scss
@@ -1,5 +1,9 @@
 main {
   height: calc(100vh - 72px);
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 50px);
+  }
 }
 
 /* Styles of the right-hand menu + pages with that menu */
@@ -11,17 +15,13 @@ main {
   /*margin-top: 50px;*/
   overflow: hidden;
 
-  /*@media(min-width: 1024px) {
-    margin-top: 0;
-  }*/
-
   .views-container {
     flex: 1 0 0;
     /*-webkit-backface-visibility: hidden;*/
 
     &.sidebar-is-closed {
 
-      @media(min-width: 1024px) {
+      @media(min-width: 768.01px) {
         margin-left: -152px;
         transform: translate(152px);
       }
@@ -38,6 +38,11 @@ main {
     transition: all 0.5s;
     width: 217px;
 
+    @media (max-width: 768px) {
+      height: calc(100vh - 50px);
+      width: 65px;
+    }
+
     ul {
 
       li {
@@ -65,35 +70,35 @@ main {
 
     /* Styles use with JS to open/close the sidebar */
     &.jsRightMenu {
-      display: none;
-
-      @media(min-width: 1024px) {
-        display: block;
-      }
+      display: block;
     }
 
     &.jsRightMenu:not([open]) {
-      transform: translate(152px);
+      @media (min-width: 768.01px) {
+        transform: translate(152px);
+      }
+
+      /* Quick fix. When you got time, use animation on the span instead */
+      @media (max-width: 768px) {
+        ul>li:first-child>span,
+        ul>li:first-child>a {
+          visibility: hidden;
+        }
+      }
     }
 
     &.jsRightMenu[open] {
+      display: block;
+      bottom: 0;
+      right: 0;
 
-      @media(min-width: 1024px) {
-        display: block;
-        bottom: 0;
+      @media(max-width: 768px) {
         box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
         min-width: 60%;
         position: fixed;
-        right: 0;
         top: 50px;
         z-index: 1;
       }
-      @media(min-width: 1024px) {
-        box-shadow: none;
-        min-width: unset;
-        position: unset;
-        z-index: unset;
-      }
     }
   }
 }
@@ -105,6 +110,10 @@ main {
   height: calc(100vh - 72px); /* 72px == header's height */
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 50px);
+  }
 }
 
 /* Custom scrollbar of the left-menu*/
diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss
index 82ca945..2118caa 100644
--- a/src/styles/header/_index.scss
+++ b/src/styles/header/_index.scss
@@ -33,7 +33,7 @@ header {
     color: var(--color-heading);
     align-self: center;
 
-    @media(min-width: 640px) {
+    @media(min-width: 768.01px) {
       margin-right: 23px;
     }
 
@@ -80,7 +80,7 @@ header {
       .solid-notifications__triangle-shadow {
         display: none;
 
-        @media(min-width: 1024px) {
+        @media(min-width: 768.01px) {
           background: white;
           display: block;
           position: absolute;
@@ -118,7 +118,7 @@ header {
         top: 2.5em;
         width: 100vw;
 
-        @media(min-width: 1024px) {
+        @media(min-width: 768.01px) {
           max-height: calc(100vh - 93px);
           position: absolute;
           left: auto;
@@ -223,11 +223,7 @@ header {
                 line-height: 17px;
                 margin-top: 4px;
 
-                @media(min-width: 640px) {
-                  max-width: 226px;
-                }
-
-                @media(min-width: 1024px) {
+                @media(min-width: 768.01px) {
                   max-width: 256px;
                 }
               }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7cebea0..54c19e2 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,10 +2,6 @@
 
 @import "@startinblox/hubl-styling-framework/dist/index.css";
 
-main {
-  background-color: pink;
-}
-
 solid-display>div {
   display: contents !important;
 }
@@ -22,11 +18,23 @@ solid-display>div {
   line-height: 22px;
 }
 
+.sm-whitespace-normal {
+  @media (max-width: 768px) {
+    white-space: normal;
+  }
+}
+
+.sm-text-center {
+  @media (max-width: 768px) {
+    text-align: center;
+  }
+}
 
 .send-display {
   position: absolute;
   right: 20px;
   top: 20px;
+  z-index: 1;
 
   &::before {
     margin-top: 4px;
@@ -39,19 +47,32 @@ solid-display>div {
   bottom: 51px;
   right: 30px;
   z-index: 1;
+
+  @media (max-width: 768px) {
+    right: 20px;
+  }
 }
 
 .button-modify-profile {
   position: absolute;
-  right: 40px;
   top: 40px;
+  right: 40px;
   z-index: 1;
+
+  @media (max-width: 768px) {
+    top: 20px;
+    right: 20px;
+  }
 }
 
 .button-modify-skill {
   position: absolute;
   z-index: 1;
   right: 40px;
+
+  @media (max-width: 768px) {
+    right: 20px;
+  }
 }
 
 .counter>div:nth-child(1) {
@@ -154,7 +175,10 @@ solid-display>div {
 
 #member-profile .member-bio,
 #profile .member-bio {
-  max-width: 50%;
+
+  @media (min-width: 768.01px) {
+    max-width: 50%;
+  }
 }
 
 .icon-location-pin::before,
@@ -162,6 +186,21 @@ solid-display>div {
   margin-left: -3px;
 }
 
+#member-profile,
+#solid-profile-my-profile {
+  .avatar {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (max-width: 768px) {
+    .member-bio {
+      max-width: none;
+      width: 100%;
+    }
+  }
+}
+
 /* Job-offers */
 .job-edit {
   position: absolute;
@@ -249,7 +288,12 @@ $small: "max-width: 768px";
   }
 }
 
-
+/* Converse */
+@media (max-width: 767.98px) {
+  #conversejs .converse-chatboxes .chatbox .box-flyout {
+    width: 100% !important;
+  }
+}
 
 
 
diff --git a/src/styles/job-offers/_index.scss b/src/styles/job-offers/_index.scss
index e7a3b34..c62640f 100644
--- a/src/styles/job-offers/_index.scss
+++ b/src/styles/job-offers/_index.scss
@@ -1,3 +1,7 @@
 #job-offers>div:first-of-type {
   min-height: calc(100vh - 72px);
+
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 50px);
+  }
 }
diff --git a/src/styles/left-nav/_index.scss b/src/styles/left-nav/_index.scss
index 9d37bc8..5155738 100644
--- a/src/styles/left-nav/_index.scss
+++ b/src/styles/left-nav/_index.scss
@@ -1,6 +1,10 @@
 nav#main__menu {
   height: calc(100vh - 72px);
 
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 50px);
+  }
+
   .unread {
     font-weight: bolder;
   }
diff --git a/src/styles/members/_index.scss b/src/styles/members/_index.scss
index aa94712..ae9012d 100644
--- a/src/styles/members/_index.scss
+++ b/src/styles/members/_index.scss
@@ -1,3 +1,7 @@
 #members>div:first-of-type {
   min-height: calc(100vh - 72px);
+
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 50px);
+  }
 }
diff --git a/src/styles/profile/_index.scss b/src/styles/profile/_index.scss
index 893a0a1..f43b2c9 100644
--- a/src/styles/profile/_index.scss
+++ b/src/styles/profile/_index.scss
@@ -1,3 +1,7 @@
 #profile>div:first-of-type {
   min-height: calc(100vh - 72px);
+
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 50px);
+  }
 }
diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug
index 8ce2e7e..6deea1e 100644
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@@ -11,21 +11,21 @@
 nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
   solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='admin-circles')
     ul
-      li.segment.lg-full.padding-small.text-right.text-normal.jsOffsiteToggle
+      li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
         span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
         a(data-trans='admin.menuRight.fold')
       if (endpoints.users || (endpoints.get && endpoints.get.users))
-        solid-route.segment.lg-full(name='admin-communities')
-          li.segment.lg-full.padding-medium
+        solid-route.segment.lg-full.sm-full(name='admin-communities')
+          li.segment.lg-full.sm-full.padding-medium
             span.icon.ci-networking.icon-xlarge.margin-right-medium
             a(data-trans='admin.menuRight.community')
       if endpoints.circles || (endpoints.get && endpoints.get.circles)
-        solid-route.segment.lg-full(name='admin-circles')
-          li.segment.lg-full.padding-medium
+        solid-route.segment.lg-full.sm-full(name='admin-circles')
+          li.segment.lg-full.sm-full.padding-medium
             span.icon.ci-bubble-add.icon-xlarge.margin-right-medium
             a(data-trans='admin.menuRight.circles')
       if endpoints.projects || (endpoints.get && endpoints.get.projects)
-        solid-route.segment.lg-full(name='admin-projects')
-          li.segment.lg-full.padding-medium
+        solid-route.segment.lg-full.sm-full(name='admin-projects')
+          li.segment.lg-full.sm-full.padding-medium
             span.icon.ci-add.icon-xlarge.margin-right-medium
             a(data-trans='admin.menuRight.projects')
diff --git a/src/views/page-circle.pug b/src/views/page-circle.pug
index ca240be..bfb8a5f 100644
--- a/src/views/page-circle.pug
+++ b/src/views/page-circle.pug
@@ -14,30 +14,30 @@
 nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
   solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='circle-chat')
     ul
-      li.segment.lg-full.padding-small.text-right.text-normal.jsOffsiteToggle
+      li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
         span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
         a(data-trans='circle.menuRight.fold')
-      solid-route.segment.lg-full(name='circle-chat')
+      solid-route.segment.lg-full.sm-full(name='circle-chat')
         li.segment.lg-full.padding-medium
           span.icon.ci-chat.icon-xlarge.margin-right-medium
           a(data-trans='circle.menuRight.chat')
-      solid-route.segment.lg-full(name='circle-information')
-        li.segment.lg-full.padding-medium
+      solid-route.segment.lg-full.sm-full(name='circle-information')
+        li.segment.lg-full.sm-full.padding-medium
           span.icon.ci-information.icon-xlarge.margin-right-medium
           a(data-trans='circle.menuRight.information')
       if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes))
-        solid-route.segment.lg-full(name='circle-resources' use-id)
-          li.segment.lg-full.padding-medium
+        solid-route.segment.lg-full.sm-full(name='circle-resources' use-id)
+          li.segment.lg-full.sm-full.padding-medium
             span.icon.ci-networking.icon-xlarge.margin-right-medium
             a(data-trans='circle.menuRight.resources')
       if (endpoints.events || (endpoints.get && endpoints.get.events)) && (endpoints.typeevents || (endpoints.get && endpoints.get.typeevents))
-        solid-route.segment.lg-full(name='circle-events' use-id)
-          li.segment.lg-full.padding-medium
+        solid-route.segment.lg-full.sm-full(name='circle-events' use-id)
+          li.segment.lg-full.sm-full.padding-medium
             span.icon.ci-networking.icon-xlarge.margin-right-medium
             a(data-trans='circle.menuRight.events')
       if endpoints.polls || (endpoints.get && endpoints.get.polls)
-        solid-route.segment.lg-full(name='circle-polls' use-id)
-          li.segment.lg-full.padding-medium
+        solid-route.segment.lg-full.sm-full(name='circle-polls' use-id)
+          li.segment.lg-full.sm-full.padding-medium
             span.icon.ci-networking.icon-xlarge.margin-right-medium
             a(data-trans='circle.menuRight.polls')
       
diff --git a/src/views/page-dashboard.pug b/src/views/page-dashboard.pug
index 514e750..c930878 100644
--- a/src/views/page-dashboard.pug
+++ b/src/views/page-dashboard.pug
@@ -1,4 +1,4 @@
-div.padding-top-xlarge.padding-right-xsmall.padding-bottom-xlarge.padding-left-xsmall.whitespace-normal
+div.padding-top-xlarge.padding-right-xsmall.padding-bottom-xlarge.padding-left-xsmall.sm-padding-top-medium.whitespace-normal
   solid-dashboard(
     data-src=`${endpoints.dashboards || endpoints.get.dashboards}`
   )
diff --git a/src/views/page-directory.pug b/src/views/page-directory.pug
index f4fbdc5..5dc08bb 100644
--- a/src/views/page-directory.pug
+++ b/src/views/page-directory.pug
@@ -2,5 +2,4 @@ div.bg-color-grey.padding-top-xlarge.padding-right-small.padding-bottom-xlarge.p
   solid-directory(
     data-src=`${endpoints.users || endpoints.get.users}`
     range-skills=`${endpoints.skills || endpoints.get.skills}`
-    paginate-by="1"
   )
diff --git a/src/views/page-messages.pug b/src/views/page-messages.pug
index ccac5a5..df00215 100644
--- a/src/views/page-messages.pug
+++ b/src/views/page-messages.pug
@@ -1,4 +1,4 @@
-div.segment.lg-full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.border-bottom.border-color-grey
+div.segment.lg-full.sm-full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-xsmall.border-bottom.border-color-grey.whitespace-normal
   solid-display.labelled-avatar.small(
     bind-resources
     fields='segment1(account.picture), segment2(name, hyphen, at, username)'
@@ -8,7 +8,7 @@ div.segment.lg-full.padding-top-small.padding-right-large.padding-bottom-small.p
     class-segment1='segment'
     class-account.picture='avatar small'
     
-    class-segment2='segment margin-left-xsmall text-xxlarge text-letter-spacing-large'
+    class-segment2='segment margin-left-xsmall text-xxlarge text-letter-spacing-large whitespace-normal'
     class-name='text-color-heading text-uppercase text-semibold'
     class-hypen='text-color-heading'
     class-at=''
@@ -17,7 +17,7 @@ div.segment.lg-full.padding-top-small.padding-right-large.padding-bottom-small.p
     widget-account.picture='hubl-user-avatar'
   )
 
-.chat-view.segment.lg-full.whitespace-normal
+.chat-view.segment.lg-full.sm-full.whitespace-normal
   solid-xmpp-chat(
     data-authentication='login',
     data-auto-login='true',
diff --git a/src/views/page-project.pug b/src/views/page-project.pug
index 344222d..ea3678d 100644
--- a/src/views/page-project.pug
+++ b/src/views/page-project.pug
@@ -10,15 +10,15 @@
 nav.jsRightMenu.sidebar.whitespace-normal(role='navigation')
   solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route='project-chat')
     ul
-      li.segment.lg-full.padding-small.text-right.text-normal.jsOffsiteToggle
+      li.segment.lg-full.sm-full.padding-small.text-right.text-normal.jsOffsiteToggle
         span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
         a(data-trans='project.menuRight.fold')
-      solid-route.segment.lg-full(name='project-chat')
-        li.segment.lg-full.padding-medium
+      solid-route.segment.lg-full.sm-full(name='project-chat')
+        li.segment.lg-full.sm-full.padding-medium
           span.icon.ci-chat.icon-xlarge.margin-right-medium
           a(data-trans='project.menuRight.chat')
-      solid-route.segment.lg-full(name='project-information')
-        li.segment.lg-full.padding-medium
+      solid-route.segment.lg-full.sm-full(name='project-information')
+        li.segment.lg-full.sm-full.padding-medium
           span.icon.ci-information.icon-xlarge.margin-right-medium
           a(data-trans='project.menuRight.information')
       solid-route(name='project-picture' use-id)
diff --git a/src/views/partials/admin/page-admin-circles-create.pug b/src/views/partials/admin/page-admin-circles-create.pug
index 1cd245a..6e41ae1 100644
--- a/src/views/partials/admin/page-admin-circles-create.pug
+++ b/src/views/partials/admin/page-admin-circles-create.pug
@@ -1,10 +1,7 @@
-div.segment.lg-full.padding-large.border-bottom.border-color-grey
-  div.segment.lg-half
-    h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title')
-  div.segment.lg-half.text-right
-    solid-link(class="backlink", next='admin-circle-list' data-trans='circle.create.backlink')
+div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey
+  h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title')
 
-div.segment.lg-full.padding-large.whitespace-normal
+div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div#loader-circles-create.loader.loader-top
     div
     div
@@ -20,10 +17,10 @@ div.segment.lg-full.padding-large.whitespace-normal
     required-description
     loader-id='loader-circles-create'
 
-    class-status='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading whitespace-normal'
-    class-linebreak='segment lg-half'
-    class-name='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading'
-    class-description='segment margin-bottom-medium lg-half padding-left-small text-small text-semibold text-uppercase text-color-heading'
+    class-status='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
+    class-linebreak='segment lg-half sm-hidden'
+    class-name='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-description='segment margin-bottom-medium lg-half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
 
     label-status=''
     label-name=''
diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug
index 8749df2..189aae3 100644
--- a/src/views/partials/admin/page-admin-circles.pug
+++ b/src/views/partials/admin/page-admin-circles.pug
@@ -28,13 +28,10 @@ solid-router(default-route='admin-circle-list', hidden)
         value-at='@'
       )
 
-  div.segment.lg-full.padding-large.border-bottom.border-color-grey
-    div
-      h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
-    div.segment.lg-hidden
-      button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')
+  div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+    h2.lg-margin-none.sm-margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
 
-  div.segment.lg-full.padding-large.whitespace-normal
+  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespace-normal
 
     div#loader-admin-circles.loader.loader-top
       div
@@ -42,13 +39,13 @@ solid-router(default-route='admin-circle-list', hidden)
       div
       div
 
-    div.segment.lg-full.margin-bottom-xlarge
-      div.segment.lg-half
+    div.segment.lg-full.sm-full.margin-bottom-xlarge.whitespace-normal
+      div.segment.lg-half.sm-full
         h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
-      div.segment.lg-half.text-right
+      div.segment.lg-half.sm-full.text-right
         solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
           solid-link(
-            class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
+            class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
             next='admin-circle-create'
             data-trans='circle.list.buttonCreate'
           )
diff --git a/src/views/partials/admin/page-admin-communities.pug b/src/views/partials/admin/page-admin-communities.pug
index 4817d9c..14aa503 100644
--- a/src/views/partials/admin/page-admin-communities.pug
+++ b/src/views/partials/admin/page-admin-communities.pug
@@ -15,13 +15,10 @@ solid-widget(name='hubl-action-community')
       div.button.button-disabled(data-trans='communities.noPermission')
 
 #admin-communities-list(hidden, data-view="admin-communities-list")
-  div.segment.lg-full.padding-large.border-bottom.border-color-grey
-    div
-      h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
-    div.segment.lg-hidden
-      button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='communities.menuMobile')
+  div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+    h2.lg-margin-none.sm-margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
 
-  div.segment.lg-full.padding-large.whitespace-normal
+  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 
     div.segment.lg-full.margin-bottom-xlarge
       h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='communities.subTitle')
diff --git a/src/views/partials/admin/page-admin-projects-create.pug b/src/views/partials/admin/page-admin-projects-create.pug
index db77ae7..6653ac3 100644
--- a/src/views/partials/admin/page-admin-projects-create.pug
+++ b/src/views/partials/admin/page-admin-projects-create.pug
@@ -1,17 +1,14 @@
-div.segment.lg-full.padding-large.border-bottom.border-color-grey
-  div.segment.lg-half
-    h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.create.title')
-  div.segment.lg-half.text-right
-    solid-link(class="backlink", next='admin-project-list' data-trans='project.create.backlink')
+div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey
+  h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.create.title')
 
-div.segment.lg-full.padding-large
+div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div#loader-projects-create.loader.loader-top
     div
     div
     div
     div
 
-  solid-form.segment.lg-full.whitespace-normal.form(
+  solid-form.form(
     data-src=`${endpoints.projects || endpoints.post.projects}`
 
     fields='status, customer.name, name, description, captain, linebreak'
@@ -29,11 +26,11 @@ div.segment.lg-full.padding-large
     label-description='Description'
     label-captain=''
     
-    class-customer.name='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading'
-    class-name='segment margin-bottom-medium lg-half padding-left-small text-small text-semibold text-uppercase text-color-heading'
-    class-description='segment margin-bottom-medium lg-full text-small text-semibold text-uppercase text-color-heading'
-    class-captain='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading whitespace-normal'
-    class-linebreak='segment lg-full'
+    class-customer.name='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-name='segment margin-bottom-medium lg-half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-description='segment margin-bottom-medium lg-full sm-full text-small text-semibold text-uppercase text-color-heading'
+    class-captain='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
+    class-linebreak='segment lg-full sm-hidden'
     
     widget-status='solid-form-hidden'
     value-status='Private'
diff --git a/src/views/partials/admin/page-admin-projects.pug b/src/views/partials/admin/page-admin-projects.pug
index e2e08e4..bf6906b 100644
--- a/src/views/partials/admin/page-admin-projects.pug
+++ b/src/views/partials/admin/page-admin-projects.pug
@@ -8,21 +8,18 @@ solid-router(default-route='admin-project-list', hidden)
 
 #admin-project-list(hidden, data-view="admin-project-list")
 
-  div.segment.lg-full.padding-large.border-bottom.border-color-grey
-    div
-      h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
-    div.segment.lg-hidden
-      button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile')
+  div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+    h2.lg-margin-none.sm-margin-none.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
 
-  div.segment.lg-full.padding-large.whitespace-normal
+  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 
-    div.segment.lg-full.margin-bottom-xlarge
-      div.segment.lg-half
+    div.segment.lg-full.sm-full.margin-bottom-xlarge.whitespace-normal
+      div.segment.lg-half.sm-full
         h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='project.list.subTitle')
-      div.segment.lg-half.text-right
+      div.segment.lg-half.sm-full.text-right
         solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
           solid-link(
-            class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
+            class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
             next='admin-project-create'
             data-trans='project.list.buttonCreate'
           )
diff --git a/src/views/partials/admin/page-admin-users-create.pug b/src/views/partials/admin/page-admin-users-create.pug
index 6b3967a..24c0ffc 100644
--- a/src/views/partials/admin/page-admin-users-create.pug
+++ b/src/views/partials/admin/page-admin-users-create.pug
@@ -1,11 +1,8 @@
-div.segment.lg-full.padding-large.border-bottom.border-color-grey
-  div.segment.lg-half
-    h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
-  div.segment.lg-half.text-right
-    solid-link(class="backlink", next='admin-communities-list' data-trans='user.create.backlink')
+div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.padding-large.border-bottom.border-color-grey
+  h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
 
 
-div.segment.lg-full.padding-large.whitespace-normal
+div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
   div#loader-users-title.loader.loader
     div
     div
@@ -25,13 +22,13 @@ div.segment.lg-full.padding-large.whitespace-normal
 
   solid-widget(name='hubl-email-field')
     template
-      div.segment.margin-bottom-medium.lg-half.padding-left-small.text-small.text-semibold.text-uppercase.text-color-heading
+      div.segment.margin-bottom-medium.lg-half.sm-full.padding-left-small.sm-padding-none.text-small.text-semibold.text-uppercase.text-color-heading
         label(data-trans='user.create.labelEmail')
         input(type="email" label='' data-trans='label=user.create.labelEmail' name="email" required value="\${value}" data-holder)
 
-  div.segment.margin-bottom-medium.clearfix
-    div.segment.float-left
-      h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='user.create.title', loader-id='loader-users-title')
+  div.segment.margin-bottom-medium
+    div.segment
+      p.text-color-heading.text-semibold.text-xlarge.text-letter-spacing-large(data-trans='user.create.title', loader-id='loader-users-title')
   
   solid-form.form#selected-community(
     bind-resources
@@ -44,9 +41,9 @@ div.segment.lg-full.padding-large.whitespace-normal
     required-user.email
     loader-id='loader-users-create'
 
-    class-user.first_name='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading'
-    class-user.last_name='segment margin-bottom-medium lg-half padding-left-small text-small text-semibold text-uppercase text-color-heading'
-    class-user.username='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading'
+    class-user.first_name='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-user.last_name='segment margin-bottom-medium lg-half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
+    class-user.username='segment margin-bottom-medium lg-half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
 
     label-user.first_name=''
     label-user.last_name=''
diff --git a/src/views/partials/circle/page-circle-chat.pug b/src/views/partials/circle/page-circle-chat.pug
index 6582431..79f6f3d 100644
--- a/src/views/partials/circle/page-circle-chat.pug
+++ b/src/views/partials/circle/page-circle-chat.pug
@@ -1,4 +1,4 @@
-div.segment.lg-full.padding-large.border-bottom.border-color-grey
+div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
   solid-display.text-xxlarge.text-letter-spacing-large(
     bind-resources
     fields='name, dash, description'
@@ -9,7 +9,7 @@ div.segment.lg-full.padding-large.border-bottom.border-color-grey
     class-dash='text-color-heading text-bold'          
   )
 
-.chat-view.segment.lg-full.whitespace-normal
+.chat-view.segment.lg-full.sm-full.whitespace-normal
   solid-xmpp-chat(
     data-authentication='login',
     data-auto-login='true',
diff --git a/src/views/partials/circle/page-circle-profile.pug b/src/views/partials/circle/page-circle-profile.pug
index 5b975aa..09ba3ad 100644
--- a/src/views/partials/circle/page-circle-profile.pug
+++ b/src/views/partials/circle/page-circle-profile.pug
@@ -4,7 +4,7 @@ solid-router(default-route='circle-profile', hidden)
 
 #circle-profile(hidden, data-view="circle-profile")
   solid-ac-checker.block(permission='acl:Read', bind-resources)
-    div.segment.lg-full.padding-large.border-bottom.border-color-grey
+    div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
       solid-display.text-xxlarge.text-letter-spacing-large(
         bind-resources
         fields='name, dash, description'
@@ -14,14 +14,12 @@ solid-router(default-route='circle-profile', hidden)
         class-name='text-color-heading text-bold'
         class-dash='text-color-heading text-bold'          
       )
-      div.segment.lg-hidden
-        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.menuRight.buttonMobile')
 
   solid-widget(name='hubl-circle-team-contact')
     template 
       solid-link.icon.icon-secondary.hover.icon-speech.margin-left-xsmall(data-src='\${value}', next='messages')
   
-  div.segment.lg-full.padding-large
+  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
     div#loader-circle-profile.loader
       div
       div
@@ -29,7 +27,7 @@ solid-router(default-route='circle-profile', hidden)
       div
 
     div.whitespace-normal
-      solid-display.segment.lg-half(
+      solid-display.segment.lg-half.sm-full.sm-margin-bottom-medium(
         bind-resources
         fields='creationDateSet(title, creationDate)'
         loader-id='loader-circle-profile'
@@ -39,15 +37,16 @@ solid-router(default-route='circle-profile', hidden)
 
         widget-creationDate='solid-display-value-date'
       )
-      solid-ac-checker.segment.lg-half.text-right.margin-bottom-large(permission='acl:Append', bind-resources, nested-field='members')
-        solid-ac-checker(permission='acl:Delete', bind-resources)
-          solid-link(class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonModify')
-        solid-ac-checker(no-permission='acl:Delete', bind-resources)
-          solid-link(class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonAdd')
 
-      solid-ac-checker.segment.lg-full.text-right.margin-bottom-large(permission='acl:Delete', bind-resources)
+      solid-ac-checker.segment.lg-half.sm-full.text-right.margin-bottom-large(permission='acl:Append', bind-resources, nested-field='members')
+        solid-ac-checker(permission='acl:Delete', bind-resources)
+          solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonModify')
+        solid-ac-checker(no-permission='acl:Delete', bind-resources)
+          solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonAdd')
+
+      solid-ac-checker.segment.lg-full.sm-full.text-right.margin-bottom-large.sm-margin-bottom-medium(permission='acl:Delete', bind-resources)
         solid-delete(
-          class='button text-xsmall text-bold text-uppercase color-secondary bordered'
+          class='segment sm-full button text-xsmall text-bold text-uppercase text-uppercase text-center color-secondary bordered'
           bind-resources
           data-label=''
           data-trans='data-label=circle.profile.buttonDelete'
@@ -99,7 +98,7 @@ solid-router(default-route='circle-profile', hidden)
     solid-widget(name='hubl-circle-user-admin')
       template ${value ? "Administrateur" : ""}
 
-    solid-display.segment.lg-full.labelled-avatar.two-lines.whitespace-normal.children.lg-children-full.children-margin-bottom-medium(
+    solid-display.segment.lg-full.sm-full.labelled-avatar.two-lines.whitespace-normal.children.lg-children-full.sm-children-full.children-margin-bottom-medium(
       bind-resources
       nested-field='members'
       loader-id='loader-circle-profile'
diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug
index 7a159cf..b983eca 100644
--- a/src/views/partials/header.pug
+++ b/src/views/partials/header.pug
@@ -9,7 +9,7 @@ div
   span.tag.reversed.text-semibold(data-trans='header.beta')
 
   div
-    solid-notifications.segment.notLoggedIn(
+    solid-notifications.segment.sm-margin-right-xlarge.notLoggedIn(
       nested-field="inbox"
       bind-user
     )
diff --git a/src/views/partials/project/page-project-chat.pug b/src/views/partials/project/page-project-chat.pug
index 53800de..48e24a9 100644
--- a/src/views/partials/project/page-project-chat.pug
+++ b/src/views/partials/project/page-project-chat.pug
@@ -1,4 +1,4 @@
-div.segment.lg-full.padding-large.border-bottom.border-color-grey
+div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
   solid-display.text-xxlarge.text-letter-spacing-large(
     bind-resources
     fields='const-title1, number, customer.name, dash, name'
@@ -13,7 +13,7 @@ div.segment.lg-full.padding-large.border-bottom.border-color-grey
     value-dash=' - '
   )
 
-.chat-view.segment.lg-full.whitespace-normal
+.chat-view.segment.lg-full.sm-full.whitespace-normal
   solid-xmpp-chat(
     data-authentication='login',
     data-auto-login='true',
diff --git a/src/views/partials/project/page-project-profile.pug b/src/views/partials/project/page-project-profile.pug
index 8eb19f5..1524a6c 100644
--- a/src/views/partials/project/page-project-profile.pug
+++ b/src/views/partials/project/page-project-profile.pug
@@ -4,7 +4,7 @@ solid-router(default-route='project-profile', hidden)
 
 #project-profile(hidden, data-view="project-profile")
   solid-ac-checker.block(permission='acl:Read', bind-resources)
-    div.segment.lg-full.padding-large.border-bottom.border-color-grey
+    div.segment.lg-full.sm-full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
       solid-display.text-xxlarge.text-letter-spacing-large(
         bind-resources
         fields='const-title1, number, customer.name, dash, name'
@@ -18,14 +18,12 @@ solid-router(default-route='project-profile', hidden)
         value-const-title1='N°'
         value-dash=' - '
       )
-      div.segment.lg-hidden
-        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.menuRight.buttonMobile')
 
   solid-widget(name='hubl-project-team-contact')
     template 
       solid-link.icon.icon-secondary.hover.icon-speech.margin-left-xsmall(data-src='\${value}', next='messages')
 
-  div.segment.lg-full.padding-large
+  div.segment.lg-full.sm-full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
     div#loader-project-profile.loader
       div
       div
@@ -33,7 +31,7 @@ solid-router(default-route='project-profile', hidden)
       div
   
     div.whitespace-normal
-      solid-display.segment.lg-half(
+      solid-display.segment.lg-half.sm-full.sm-margin-bottom-medium(
         bind-resources
         fields='creationDateSet(title, creationDate)'
         loader-id='loader-project-profile'
@@ -46,15 +44,15 @@ solid-router(default-route='project-profile', hidden)
         widget-creationDate='solid-display-value-date'
       )
       
-      solid-ac-checker.segment.lg-half.text-right.margin-bottom-large(permission='acl:Append', bind-resources, nested-field='members')
+      solid-ac-checker.segment.lg-half.sm-full.text-right(permission='acl:Append', bind-resources, nested-field='members')
         solid-ac-checker(permission='acl:Delete', bind-resources)
-          solid-link(class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonModify')
+          solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonModify')
         solid-ac-checker(no-permission='acl:Delete', bind-resources)
-          solid-link(class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonAdd')
+          solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonAdd')
       
-      solid-ac-checker.segment.lg-full.text-right.margin-bottom-large(permission='acl:Delete', bind-resources)
+      solid-ac-checker.segment.lg-full.sm-full.text-right.margin-bottom-large.sm-margin-bottom-medium(permission='acl:Delete', bind-resources)
         solid-delete(
-          class='button text-xsmall text-bold text-uppercase color-secondary bordered'
+          class='segment sm-full button text-xsmall text-bold text-uppercase text-center color-secondary bordered'
           bind-resources
           data-label=''
           data-trans='data-label=project.profile.buttonDelete'
@@ -97,7 +95,7 @@ solid-router(default-route='project-profile', hidden)
 
     h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans='project.profile.subTitle')
 
-    solid-display.segment.lg-full.labelled-avatar.two-lines.whitespace-normal.children.lg-children-full.children-margin-bottom-medium(
+    solid-display.segment.lg-full.sm-full.labelled-avatar.two-lines.whitespace-normal.children.lg-children-full.sm-children-full.children-margin-bottom-medium(
       bind-resources
       nested-field='members'
       fields='segment1(user.account.picture), segment2(line1(user.name, user), line2(atom, user.communities))'