diff --git a/src/dependencies.pug b/src/dependencies.pug
index b1e1a35..20b63eb 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -34,9 +34,8 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 
 //- cdn
 //- don't forget to change version in hd-widgets.js
-script(type="module" src="https://unpkg.com/@startinblox/core@0.5")
+script(type="module" src="https://unpkg.com/@startinblox/core@0.5.24")
 script(type="module" src="https://unpkg.com/@startinblox/router@latest")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
 
 script(type="module" src="/scripts/hd-widgets.js")
-
diff --git a/src/header.pug b/src/header.pug
index af1b856..6551d37 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -3,10 +3,9 @@
   img(src="/images/logo.png" width=111 height=32)
 
 #search-bar
-  div
-    input#search-input(type='search')
-    i#search-icon.icon-magnifier(aria-hidden='true')
-    i#close-search-icon.icon-close(aria-hidden='true')
+  input#search-input(type='search')
+  i#search-icon.icon-magnifier(aria-hidden='true')
+  i#close-search-icon.icon-close(aria-hidden='true')
 
 details
   summary#notifications-button
diff --git a/src/styles/content.scss b/src/styles/content.scss
index a91f6fb..0b797d3 100644
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@@ -17,8 +17,8 @@
   }
 
   sib-display-img {
-    width: 2.5em;
-    height: 2.5em;
+    width: 4.25rem;
+    height: 4.25rem;
     overflow: hidden;
     border-radius: 100%;
   }
@@ -60,7 +60,7 @@
 // chat
 
 .chat-view {
-  padding: 1em;
+  padding: 1.7rem;
   position: relative;
   z-index: 0;
   @extend %frame;
@@ -126,7 +126,7 @@ sib-display#member-info {
   flex-direction: column;
   position: relative;
   @extend %frame;
-  padding: 1em;
+  padding: 1.7rem;
 
   label {
     display: none;
@@ -134,9 +134,9 @@ sib-display#member-info {
 
   div[name='header'] {
     border-bottom: 1px solid $color-anti-flash-white;
-    padding-bottom: 1em;
-    padding: 0.5em;
-    margin-bottom: 1em;
+    padding-bottom: 1.7rem;
+    padding: 0.85rem;
+    margin-bottom: 1.7rem;
     display: flex;
     flex-direction: column;
     >*{
@@ -190,8 +190,8 @@ sib-display#member-info {
     border-style: solid;
     border-color: $color-majorelle-blue;
     color: $color-majorelle-blue;
-    margin: 1em;
-    padding: 1em;
+    margin: 1.7rem;
+    padding: 1.7rem;
     text-decoration:none;
   }
 
@@ -242,26 +242,26 @@ hdapp-available {
 
     div {
       display: inline-block;
-      margin-right: 0.4em;
+      margin-right: 0.7rem;
     }
   }
 
   sib-link[next='member-chat'] {
     border-style: solid;
-    margin: 1em;
+    margin: 1.7rem;
     display: flex;
     border-radius: 25px;
     border-style: solid;
     border-color: $color-majorelle-blue;
     color: $color-majorelle-blue;
-    margin: 1em;
-    padding: 1em;
+    margin: 1.7rem;
+    padding: 1.7rem;
     text-decoration:none;
   }
 
   div[name='pseudonym'] {
-    margin-top: -1em;
-    margin-bottom: 1em;
+    margin-top: -1.7rem;
+    margin-bottom: 1.7rem;
   }
 
   #member-info {
@@ -276,7 +276,7 @@ hdapp-available {
 sib-form {
 
   form > * {
-    margin-top: 0.5em;
+    margin-top: 0.85rem;
   }
 
   // button like
diff --git a/src/styles/filters.scss b/src/styles/filters.scss
index 13b6f1a..8eee93c 100644
--- a/src/styles/filters.scss
+++ b/src/styles/filters.scss
@@ -4,7 +4,7 @@
   grid-gap: 0px 15px;
   grid-template-columns: 50% 50%;
   grid-template-rows: 3.5em 3.5em;
-  padding-bottom: 3em;
+  padding-bottom: 4.8rem;
 
   label {
     display: block;
@@ -14,10 +14,10 @@
     appearance: none;
     border-style: none;
     box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
-    font-size: 85%;
+    font-size: 1.36rem;
     line-height: 1.80;
-    margin-top: 1em;
-    padding: 0.7em;
+    margin-top: 1.36rem;
+    padding: 0.9rem;
     width: 95%;
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -35,7 +35,7 @@
     background-size: 14px 9px;
     box-sizing: border-box;
     display: inline-block;
-    padding: 0.5em 12.5em 0.5em 1em;
+    padding: 0.68rem;
   }
 
   sib-form-label-text {
@@ -44,10 +44,8 @@
   }
 }
 
-#offers-list > sib-form > form {
-  @extend %filters;
-}
-
-#profiles-list > sib-form > form {
-  @extend %filters;
+#offers-list, #profiles-list {
+  & > sib-form > form {
+    @extend %filters;
+  }
 }
diff --git a/src/styles/form.scss b/src/styles/form.scss
index 8e7777f..fc130ac 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -3,34 +3,34 @@
   flex-direction: column;
   margin: 0 auto;
   min-height: 100vh;
-  padding: 4em 5em 6em;
+  padding: 6.8rem 8.5rem 10.2rem;
   @extend %frame;
   
   .form-view {
     border-bottom: 1px solid $color-platinum;
-    padding-bottom: 1.5em;
+    padding-bottom: 2.55rem;
   }
 }
 
 #job-offer-create,
 #project-create,
 #project-edit {
-  font-size: 17px;
+  font-size: 1.7rem;
 
   h1 {
     color: $color-purple-dark;
     font-weight: bold;
-    font-size: 20px;
+    font-size: 2rem;
     text-align: center;
   }
 
   p.form-goal {
-    margin-bottom: 4em;
+    margin-bottom: 6.8rem;
     text-align: center;
   }
 
   p[name$='-text'] {
-    font-size: 15px;
+    font-size: 1.5rem;
     margin-bottom: 2em;
   }
 
@@ -54,7 +54,7 @@
     > label {
       color: $color-spun-pearl;
       font-weight: 600;
-      margin-bottom: 0.5em;
+      margin-bottom: 0.85rem;
     }
 
     input,
@@ -68,12 +68,12 @@
 
     input,
     textarea {
-      padding: 1em;
+      padding: 1.7rem;
     }
 
     select {
-      margin-bottom: 1em;
-      padding: 0.5em;
+      margin-bottom: 1.7rem;
+      padding: 0.85rem;
     }
   }
 
@@ -91,7 +91,7 @@
       padding-left: 0;
 
       div.choices__list {
-        margin-top: 1em;
+        margin-top: 1.7rem;
 
         div.choices__item {
           @extend %skill;
@@ -105,8 +105,8 @@
       }
 
       input[type='text'].choices__input {
-        max-width: 16em;
-        min-width: 16em;
+        max-width: 27.2rem;
+        min-width: 27.2rem;
       }
     }
   }
@@ -164,10 +164,10 @@
       border-radius: 100%;
       color: $color-majorelle-blue;
       cursor: pointer;
-      font-size: 1.5em;
+      font-size: 2.55rem;
       height: 1em;
       line-height: 0;
-      margin: 0.2em;
+      margin: 0.34rem;
       padding: 0 0.04em 0.08em;
       vertical-align: middle;
       width: 1em;
@@ -175,7 +175,7 @@
   }
 
   input[type='submit'] {
-    margin-top: 3.5em;
+    margin-top: 6rem;
     @extend %submit-form;
   }
 }
@@ -185,6 +185,6 @@
 
   input,
   textarea {
-    margin-bottom: 2em;
+    margin-bottom: 3.4rem;
   }
 }
diff --git a/src/styles/header.scss b/src/styles/header.scss
index 0211842..26d477c 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -1,69 +1,119 @@
 
 #header {
+  align-items: center;
   background-color: $color-white;
   color: $color-dark-lava;
-  //position: relative;
-  //@include border-shadow(bottom);
-  box-shadow: 0 2px 4px rgba(148, 98, 98, 0.09);
-  border: solid $color-white;
-  border-width: 1px 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
   display: flex;
-  //flex-grow: 0;
-  //flex-basis : 150px;
   flex-shrink: 0;
-  align-items: center;
-  padding: 1em 0.4em;
+  padding: 1.6rem 0.64rem;
   position: relative;
   z-index: 1;
+  //position: relative;
+  //@include border-shadow(bottom);
+  //flex-grow: 0;
+  //flex-basis : 150px;
 
   > * {
-    padding: 0 1.8rem;
+    padding: 0 2.5rem;
   }
 }
 
 #button-toggle {
-  @include icon('menu');
-  display: none;
   color: $color-dark-lava;
-  font-size: 2em;
-  padding: 0.72em;
   cursor: pointer;
+  display: none;
+  font-size: 3.2rem;
+  padding: 2.3rem;
+  @include icon('menu');
 }
 
 #logo {
   flex: 1 1 0;
 }
 
-details summary::-webkit-details-marker {
-  display:none;
-}
-
-#notifications-button {
-  @include icon(bell);
-  font-size: 2em;
-  cursor: pointer;
-  list-style-type: none;
+#search-bar {
   position: relative;
-
-  .menu-notification {
-    position: absolute;
-    top: -3px;
-    left: 3px;
+  
+  #search-input {
+    border-radius: 10em;
+    padding: 0.64rem 1.28rem;
+    border: 1px solid $color-bombay;
+    height: 3.8rem;
+    width: 28rem;
+    -webkit-appearance: textfield;
+  
+    & ~ #close-search-icon,
+    & ~ #search-icon {
+      color: $color-bombay;
+      display: block;
+      font-size: 1.7rem;
+      margin: auto;
+      position: absolute;
+      right: 3.7rem;
+      top: 50%;
+      transform: translateY(-50%);
+      -webkit-text-stroke: 1px $color-bombay;
+    }
+  
+    & ~ #close-search-icon {
+      opacity: 0;
+    }
+  
+    &:focus {
+      & ~ #close-search-icon {
+        opacity: 1;
+      }
+  
+      & ~ #search-icon {
+        visibility: hidden;
+      }
+    }
   }
 }
 
-#notifications {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  height: 0;
-  left: 0;
-  z-index: 1;
+details {
+  summary::-webkit-details-marker {
+    display: none;
+  }
 
-  > div {
+  #notifications-button {
+    cursor: pointer;
+    font-size: 3rem;
+    list-style-type: none;
+    position: relative;
+    @include icon(bell);
+    
+    .menu-notification {
+      //flex-basis: 3em;
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 0;
+      flex-shrink: 0;
+      justify-content: center;
+      left: 0.3rem;
+      position: absolute;
+      top: -0.3rem;
+      width: 2em;
+
+      @extend %notification;
+    }
+  }
+
+  #notifications {
+    bottom: 0;
+    height: 0;
+    left: 0;
     position: absolute;
-    top: 0;
     right: 0;
+    z-index: 1;
+  
+    > div {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
   }
 }
 
@@ -77,12 +127,12 @@ details summary::-webkit-details-marker {
     }
   
     img {
-      width: 48px;
+      border-radius: 100%;
       height: 48px;
+      margin-right: 2rem;
       object-fit: cover;
       object-position: center;
-      border-radius: 100%;
-      margin-right: 1rem;
+      width: 48px;
     }
 
     sib-display-div[name='first_name'] {
@@ -90,16 +140,17 @@ details summary::-webkit-details-marker {
       display: flex;
 
       div[name='first_name'] {
-        font-size: 16px;
+        align-items: flex-end;
+        display: flex;
+        font-size: 1.8rem;
         font-weight: 600;
         @include icon('arrow-down');
   
         &::before {
-          color: color-dark-lava;
-          margin-left: 10px;
+          margin-left: 1.5rem;
         }
-  
       }
     }
   }
 }
+
diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss
index ae07381..975b04c 100644
--- a/src/styles/job-offers.scss
+++ b/src/styles/job-offers.scss
@@ -1,5 +1,6 @@
 #offers-list {
   @extend .grid-layer;
+  
   > sib-form {
     grid-column-start: start;
     grid-column-end: middle;
@@ -14,14 +15,14 @@
     grid-row-end: end;
     
     &:first-of-type {
-      margin-top: 3em;
+      margin-top: 5rem;
     }
     
     > sib-display {
       @extend %frame;
       display: block;
-      margin: 1em 0;
-      padding: 2em;
+      margin: 1.7rem 0;
+      padding: 3.4rem;
       /*&:nth-child(odd) {
         background-color: $color-anti-flash-white;
       }*/
@@ -39,7 +40,7 @@
 }
 
 [name='creation'] {
-  margin-top: 20px;
+  margin-top: 2rem;
 }
 
 [name='description'] {
@@ -48,7 +49,7 @@
 
 [name='send'] {
   color: $color-majorelle-blue;
-  font-size: 13px;
+  font-size: 1.3rem;
   text-align: right;
 
   > sib-link {
@@ -56,8 +57,8 @@
     @include icon('speech');
 
     &::before {
-      font-size: 15px;
-      margin-right: 12px;
+      font-size: 1.5rem;
+      margin-right: 1.2rem;
     }
   }
 }
@@ -99,9 +100,9 @@
     border: 1px solid yellow;
     border-radius: 3px;
     color: $color-rolling-stone;
-    font-size: 15px;
+    font-size: 1.5rem;
     font-weight: 400;
-    margin-left: 1em;
+    margin-left: 1.7rem;
     padding: calc(16px - 0.8em) 0.7em;
   }
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index d1a0a23..59c9815 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -10,22 +10,20 @@
   //  box-sizing: inherit;
 }
 
-html {
-  //box-sizing: border-box;
+:root {
+  font-size: 62.5%;
   font-family: Open Sans, sans-serif;
-  font-size: 13px;
-  background-color: $color-anti-flash-white;
-  color: $color-text-base;
+  
+  body {
+    //box-sizing: border-box;
+    background-color: $color-anti-flash-white;
+    color: $color-text-base;
+    font-size: 1.6rem;
+    margin: 0 auto;
+    overflow-wrap: break-word;
+  }
 }
 
-body {
-  margin: 0 auto;
-  overflow-wrap: break-word;
-//   height: 100%;
-//   display:flex;
-//   flex-direction: column;
- }
-
 h1,
 h2,
 h3,
@@ -39,7 +37,7 @@ h6 {
 
   span {
     font-weight: 400;
-    padding-left: 0.5em;
+    padding-left: 0.85rem;
 
     &:before {
       content: '// ';
@@ -48,22 +46,22 @@ h6 {
 }
 
 h1 {
-  font-size: 1.24em;
+  font-size: 2.1rem;
 }
 
-h2 {  font-size: 20px;
+h2 {  font-size: 2rem;
 }
 
 h3 {
-  font-size: 16px;
+  font-size: 1.6rem;
 }
 
 h4 {
-  font-size: 0.68em;
+  font-size: 1.2rem;
 }
 
 h5 {
-  font-size: 20px;
+  font-size: 2rem;
 }
 
 .debug {
@@ -87,30 +85,7 @@ button {
 
 .frame {
   @extend %frame;
-  padding: 3em;
-}
-
-.menu-notification {
-  //flex-basis: 3em;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 0;
-  flex-shrink: 0;
-  justify-content: center;
-  width: 2em;
-
-  > div {
-    align-items: center;
-    background-color: $color-mustard;
-    border-radius: 100%;
-    color: $color-dark-lava;
-    display: flex;
-    font-size: 12px;
-    height: 1.7em;
-    justify-content: center;
-    width: 1.7em;
-  }
+  padding: 5rem;
 }
 
 .layer {
@@ -160,50 +135,6 @@ button {
   }
 }
 
-#search-bar > div {
-  position: relative;
-}
-
-#search-icon {
-  -webkit-text-stroke: 1px $color-bombay;
-  color: $color-bombay;
-  pointer-events: none;
-}
-
-#close-search-icon,
-#search-icon {
-  position: absolute;
-  right: 0.8em;
-  top: 50%;
-  transform: translateY(-50%);
-  margin: auto;
-  display: block;
-  font-size: 1.2em;
-}
-
-#search-input {
-  -webkit-appearance: textfield;
-  border-radius: 10em;
-  padding: 0.4em 0.8em;
-  border: 1px solid $color-bombay;
-  height: 2.8rem;
-  width: 22rem;
-
-  & ~ #close-search-icon {
-    opacity: 0;
-  }
-
-  &:focus {
-    & ~ #close-search-icon {
-      opacity: 1;
-    }
-
-    & ~ #search-icon {
-      visibility: hidden;
-    }
-  }
-}
-
 sib-route,
 sib-trigger,
 sib-link {
@@ -213,7 +144,7 @@ sib-link {
 sib-link.back {
   color: $color-purple-dark;
   display: block;
-  font-size: 20px;
+  font-size: 2rem;
   font-weight: bold;
   text-align: right;
   @include icon('arrow-left-circle');
@@ -298,8 +229,12 @@ li[name*='groups'] {
   border: 1px solid $color-mikado-yellow;
   border-radius: 3px;
   color: $color-rolling-stone;
-  font-size: 13px;
+  font-size: 1.3rem;
   font-weight: 400;
-  margin-left: 1em;
+  margin-left: 1.7rem;
   padding: calc(16px - 1em) 0.7em;
+  
+  &:first-of-type {
+    margin-left: 0;
+  }
 }
diff --git a/src/styles/members.scss b/src/styles/members.scss
index 96a7acc..4285060 100644
--- a/src/styles/members.scss
+++ b/src/styles/members.scss
@@ -4,7 +4,7 @@
   nav {
     align-items: center;
     display: flex;
-    font-size: 24px;
+    font-size: 2.4rem;
     justify-content: center;
 
     button {
@@ -26,7 +26,7 @@
     }
 
     span {
-      font-size: 26px;
+      font-size: 2.6rem;
     }
   }
 
@@ -43,7 +43,7 @@
     flex-wrap: wrap;
     grid-column-start: start;
     grid-column-end: end;
-    margin-bottom: 1em;
+    margin-bottom: 1.7rem;
   }
   
   & > div {
@@ -53,23 +53,23 @@
       color: $color-quartz;
       font-weight: bold;
       justify-content: center;
-      margin-bottom: 2.2em;
+      margin-bottom: 3.75rem;
       white-space: nowrap;
       
       &::before, &::after {
         border-top: 1px solid $color-timberwolf;
         content: '';
         position: relative;
-        top: 0.5em;
+        top: 0.85rem;
         width: 35.2vw;
       }
 
       &::before {
-        right: 3em;
+        right: 5.1rem;
       }
 
       &::after {
-        left: 3em;
+        left: 5.1rem;
       }
     }
 
@@ -81,6 +81,7 @@
       display: flex;
       flex-flow: column wrap;
       margin-bottom: 2.5rem;
+      padding-bottom: 10rem;
       @media(min-width: 56rem) {
         height: 62rem;
         width: 32%;
@@ -94,7 +95,7 @@
         border-bottom: 1px solid $color-anti-flash-white;
         display: flex;
         flex-direction: column;
-        padding: 0.5em 0 2em;
+        padding: 0.85rem 0 3.4rem;
 
         > *:not(sib-display-img) {
           display: flex;
@@ -106,7 +107,7 @@
           background-color: white;
           border-radius: 50%;
           height: 28vh;
-          margin: 1em auto;
+          margin: 1.7rem auto;
           overflow: hidden;
           position: relative;
           width: 28vh;
@@ -132,24 +133,24 @@
           display: flex;
           flex-basis: 3.5em;
           line-height: 1.6;
-          margin: 1.5em 0;
-          padding: 0 4em;
+          margin: 2.5rem 0;
+          padding: 0 6.8rem;
           text-align: center;
         }
         
         [next=member-chat] {
           align-self: center;
           border: 1px solid $color-majorelle-blue;
-          border-radius: 2em;
+          border-radius: 3.4rem;
           color: $color-majorelle-blue;
-          font-size: 18px;
+          font-size: 1.8rem;
           font-weight: bold;
-          padding: 0.6em 1.5em 0.4em;
+          padding: 1rem 2.55rem 0.7rem;
           @include icon('speech');
   
           &::before {
-            font-size: 25px;
-            padding-right: 0.5em;
+            font-size: 2.5rem;
+            padding-right: 0.85rem;
           }
         }
       }
@@ -159,11 +160,11 @@
         > sib-display-div > div,
         > sib-display-lookuplist > ul {
           margin-bottom: 0;
-          margin-top: 1em;
+          margin-top: 1.7rem;
 
           &::before {
             color: $color-selective-yellow;
-            font-size: 20px;
+            font-size: 2rem;
             padding: 0 0.6em 0 1em;
           }
         }
@@ -176,7 +177,7 @@
         }
 
         > sib-display-lookuplist[name$='skills'] > ul {
-          margin-left: 1em;
+          margin-left: 1.7rem;
         }
         
         [name$='city'] * {
diff --git a/src/styles/menu-left.scss b/src/styles/menu-left.scss
index d420583..16587bf 100644
--- a/src/styles/menu-left.scss
+++ b/src/styles/menu-left.scss
@@ -1,26 +1,20 @@
 #navbar {
   background-color: $color-purple-dark;
   color: $color-white;
+  display: block;
+  flex: 0 0 16em;
+  flex-direction: column;
+  overflow: auto;
+  transition: flex-basis 0.5s ease-in-out;
   // max-width: 16rem;
   // position: relative;
   // min-height: 100%;
-  transition: flex-basis 0.5s ease-in-out;
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: 16em;
-  overflow: auto;
-  flex-direction: column;
-  font-size: 16px;
 
   &.open {
     transform: translateX(0);
   }
-  //@include border-shadow(right);
   
   sib-router {
-    display: flex;
-    flex-direction: column;
   
     .menu-wrapper {
       &.is-closed {
@@ -33,40 +27,12 @@
       }
     }
   
-    .divider {
-      height: 1px;
-      background-color: $color-gainsboro-a02;
-    }
-  
-    .sub-menu {
-      padding-left: 1.8em;
-      
-      div {
-        color: $color-spun-pearl;
-        padding-bottom: 0.7em;
-        font-size: 15px;
-        cursor: pointer;
-  
-        div[name='project'] {
-          display: flex;
-  
-          sib-display-div[name='dash'] {
-            margin: 0 0.4em;
-          }
-        }
-      }
-    }
-  
     .menu {
+      cursor: pointer;
       display: flex;
       flex-direction: row-reverse;
-      padding: 1em;
-      // border-top: 1px solid #ddd;
-      // &:last-child {
-      //   border-bottom: 1px solid #ddd;
-      // }
-      cursor: pointer;
       font-weight: bold;
+      padding: 1.6rem;
   
       &[active] {
         background-color: $color-mustard;
@@ -81,111 +47,93 @@
         .menu-notification > sib-display > div:first-child {
           background-color: $color-purple-dark;
           color: $color-mustard;
-          font-size: 12px;
         }
       }
   
       .menu-icon {
-        //flex-basis: 2em;
-        width: 4em;
-        flex-shrink: 0;
-        flex-grow: 0;
-        justify-content: center;
         align-items: center;
         display: flex;
-        flex-direction: column;
-        font-size: 11px;
+        justify-content: center;
+        flex-grow: 0;
+        flex-shrink: 0;
+        font-size: 1.7rem;
+        width: 3.2em;
   
         &:before {
-          width: 1.9em;
+          border-radius: 100%;
           height: 1.9em;
           line-height: 1.9em;
-          font-size: 1.6em;
-          border-radius: 100%;
+          width: 1.9em;
           // transform: perspective(1000px) translateZ(1px) scale(1);
           // will-change: transform;
           // transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
         }
       }
-  
-      .menu-chevron {
-        width: 2em;
-        flex-shrink: 0;
-        flex-grow: 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-  
-        > div {
-          color: $color-spun-pearl;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 11px;
-        }
-      }
-  
+      
       .menu-label {
-        //flex-basis: 8em;
-        width: 8em;
-        flex-shrink: 0;
-        flex-grow: 1;
-        justify-content: center;
         display: flex;
         flex-direction: column;
-        text-transform: uppercase;
+        flex-grow: 1;
+        flex-shrink: 0;
         font-weight: 600;
-        letter-spacing: 0.17px;
-        font-size: 16px;
+        justify-content: center;
+        letter-spacing: 0.017rem;
+        text-transform: uppercase;
+        width: 8em;
       }
-  
+      
       /*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
       .menu-notification {
-        //flex-basis: 3em;
-        width: 2em;
-        flex-shrink: 0;
-        flex-grow: 0;
+        align-self: center;
         display: flex;
-        flex-direction: column;
+        flex-grow: 0;
+        flex-shrink: 0;
         justify-content: center;
-        align-items: center;
+        width: 2em;
   
         > sib-display {
-          > div:first-of-type {
-            color: $color-dark-lava;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 1.7em;
-            height: 1.7em;
-            border-radius: 100%;
-            background-color: $color-mustard;
-            font-size: 12px;
-          }
+          
+          @extend %notification;
         }
       }
-  
-      &[id-prefix] {
-        display: none;
+
+      .menu-chevron {
+        align-items: center;
+        color: $color-spun-pearl;
+        display: flex;
+        flex-grow: 0;
+        flex-shrink: 0;
+        justify-content: center;
+        width: 2em;
       }
   
       > sib-display {
         display: block;
-        font-size: 0.9em;
-        color: #aaa;
+      }
+    }
+
+    .sub-menu {
+      padding-left: 2.88rem;
+      
+      div {
+        color: $color-spun-pearl;
+        cursor: pointer;
+        padding-bottom: 1.12rem;
   
-        > div {
-          margin-bottom: 1.5em;
+        div[name='project'] {
+          display: flex;
   
-          > sib-display {
-            cursor: pointer;
-            display: block;
-            padding: 0.5em 2em;
+          sib-display-div[name='dash'] {
+            margin: 0 0.4em;
           }
         }
       }
     }
+
+    .divider {
+      height: 1px;
+      background-color: $color-gainsboro-a02;
+    }
   }
 }
 
diff --git a/src/styles/menu-right.scss b/src/styles/menu-right.scss
index 271031f..602d26f 100644
--- a/src/styles/menu-right.scss
+++ b/src/styles/menu-right.scss
@@ -8,7 +8,6 @@
         background-color: $color-link-water;
         color: $color-purple-dark;
         flex: 0 0 auto;
-        font-size: 16px;
         font-weight: 600;
 
         > ul {  
@@ -24,13 +23,13 @@
             margin-bottom: 0;
             margin-left: 0;
             margin-top: 0;
-            padding: 1.5em 1.5em;
+            padding: 2.55rem 2.55rem;
             position: relative;
             width: 12em;
 
             &::before {
               float: left;
-              font-size: 40px;
+              font-size: 4rem;
               margin-left: 0;
               margin-right: 1.5rem;
             }
@@ -52,7 +51,7 @@
             &[name^='project'] {
               
               > li::before {
-                font-size: 40px;
+                font-size: 4rem;
               }
             }
             
diff --git a/src/styles/project-profile.scss b/src/styles/project-profile.scss
index 59d1593..0413bb6 100644
--- a/src/styles/project-profile.scss
+++ b/src/styles/project-profile.scss
@@ -1,11 +1,11 @@
 #project-profile {
   
   [name^='block-']:not([name='block-title']) {
-    margin-top: 3em;
+    margin-top: 5.1rem;
   
     [name^='label-'] {
       font-weight: bold;
-      margin-bottom: 0.8em;
+      margin-bottom: 1.4rem;
       text-transform: uppercase;
       @extend h2;
     }
@@ -13,20 +13,20 @@
     sib-display-div:not(:first-of-type),
     ul,
     [name*='job'] {
-      font-size: 15px;
+      font-size: 1.5rem;
     }
   }
 
   [name='block-title'] {
     border-bottom: 1px solid $color-link-water;
     display: flex;
-    padding-bottom: 2em;
+    padding-bottom: 3.4rem;
   
     > * {
       color: $color-dark-lava;
-      font-size: 20px;
+      font-size: 2rem;
       font-weight: bold;
-      padding-right: 0.5em;
+      padding-right: 0.85rem;
       text-transform: uppercase;
     }
   
@@ -35,7 +35,7 @@
     }
 
     > sib-display-div[name='name'] {
-      padding-left: 0.5em;
+      padding-left: 0.85rem;
     }
     
     > :not(:nth-last-child(n+4)) {
@@ -44,11 +44,6 @@
       text-transform: none;
     }
 
-    > :not(:nth-last-child(n+3)) {
-      color: $color-text-base;
-      font-size: 16px;
-    }
-
     [name='entitled'] {
       margin-left: auto;
     }
@@ -74,13 +69,13 @@
 
   [name^='details-'] {
     display: flex;
-    font-size: 15px;
-    margin-bottom: 0.5em;
+    font-size: 1.5rem;
+    margin-bottom: 0.85rem;
 
     [name='cell-name'],
     [name='business-contribution'] {
       font-weight: bold;
-      margin-right: 5px;
+      margin-right: 0.5rem;
     }
 
     [name='comma'] {
@@ -93,26 +88,26 @@
   display: flex;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 1em;
+  margin-top: 1.7rem;
   max-width: 100%;
 
   > * {
     border: 1px solid $color-link-water;
     flex: 1 1 auto;
     justify-content: space-between;
-    margin: 0 -1px -1px 0;
+    margin: 0 -0.1rem -0.1rem 0;
     min-width: 25vw;
     padding: 0;
 
     h5 {
-      margin-left: 1.1em;
-      margin-top: 1.2em;
+      margin-left: 2rem;
+      margin-top: 2rem;
     }
 
     ul {
-      font-size: 15px;
+      font-size: 1.5rem;
       list-style: none;
-      margin: -1.2em 0 2.2em -1.2em;
+      margin: -2.04rem 0 3.74rem -2.04rem;
 
       li {
 
@@ -140,19 +135,19 @@
     }
 
     &:not(:first-child) {
-      padding-left: 3em;
+      padding-left: 5.1rem;
 
       li {
-        margin-bottom: 1em;
+        margin-bottom: 1.7rem;
 
         &:last-child {
-          margin-top: 1.3em;
+          margin-top: 2.2rem;
         }
 
         &::before {
           color: $color-selective-yellow;
-          font-size: 20px;
-          padding: 0 0.6em 0 0;
+          font-size: 2rem;
+          padding: 0 1rem 0 0;
         }
       }
 
diff --git a/src/styles/right-panel.scss b/src/styles/right-panel.scss
index 1fe0d30..8f8ff5b 100644
--- a/src/styles/right-panel.scss
+++ b/src/styles/right-panel.scss
@@ -1,7 +1,7 @@
 .right-link {
-  padding: 0.5em;
-  margin-bottom: 1em;
-  margin-left: 5em;
+  padding: 0.85rem;
+  margin-bottom: 1.7rem;
+  margin-left: 8.5rem;
   flex-basis: auto;
   border-radius: 2em;
 
@@ -22,7 +22,7 @@
     background-color: $color-mustard;
     border-radius: 100%;
     justify-content: center;
-    margin-right: 0.7em;
+    margin-right: 1.2rem;
     //flex-direction: column;
     width: 1.8em;
     height: 1.8em;
@@ -41,7 +41,7 @@
   .icon-plus {
     font-size: 20px;
     justify-content: center;
-    margin: 0.3em 0.3em 0.3em 0;
+    margin: 0.5rem 0.5rem 0.5rem 0;
 
     &:before {
       //font-size: 1.3em;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 5d7bd69..f3fd166 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -26,23 +26,37 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 
 %button {
   display: inline-block;
-  padding: 0.5em 1.5em;
+  padding: 0.85rem 2.55rem;
   border: none;
   border-radius: 100em;
   font-weight: normal;
-}  
+}
+
+%notification {
+  > div:first-of-type {
+    align-items: center;
+    background-color: $color-mustard;
+    border-radius: 100%;
+    color: $color-dark-lava;
+    display: flex;
+    font-size: 1.3rem;
+    height: 1.7em;
+    justify-content: center;
+    width: 1.7em;
+  }
+}
+
+%shadow {
+  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
+}
 
 %content-padding {
-  padding: 2.6em;
+  padding: 4.4rem;
 }
 
 %frame {
   @extend %shadow;
   background-color: $color-white;
-}  
-
-%shadow {
-  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
 }
 
 %skill {
@@ -50,10 +64,9 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   border: 1px solid $color-selective-yellow;
   border-radius: 2em;
   color: $color-white;
-  font-size: 16px;
   font-weight: bold;
-  margin: 0.25em;
-  padding: 0.3em 1.2em;
+  margin: 0.4rem;
+  padding: 0.5rem 2rem;
 }
 
 %status-open {
@@ -63,7 +76,7 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   color: $color-white;
   display: inline-block;
   font-weight: normal;
-  padding: 0.5em 1em;
+  padding: 0.85rem 1.7rem;
 }
 
 %submit-form {
@@ -72,7 +85,7 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   float: right;
   font-weight: bold;
   text-transform: uppercase;
-} 
+}
 
 $breakpoints: (
   phone: 480px,
diff --git a/src/styles/variables.scss.orig b/src/styles/variables.scss.orig
new file mode 100644
index 0000000..954a669
--- /dev/null
+++ b/src/styles/variables.scss.orig
@@ -0,0 +1,106 @@
+//Color Variables
+$color-quartz:           hsl(0, 0%, 29%);
+$color-timberwolf:       hsl(0, 0%, 85%);
+$color-white:            hsl(0, 0%,100%);
+
+$color-selective-yellow: hsl(43, 100%, 50%);
+$color-mikado-yellow:    hsl(45, 95%, 54%);
+$color-mustard:          hsl(46, 100%, 67%);
+
+$color-rolling-stone:    hsl(210, 4%, 50%);
+$color-taupe-gray:       hsl(210, 5%, 56%);
+$color-platinum:         hsl(210, 17%, 91%);
+$color-anti-flash-white: hsl(210, 25%, 95%);
+$color-text-base:        hsl(213, 4%, 50%);
+$color-gainsboro:        hsl(213, 13%, 86%);
+$color-gainsboro-a02:    hsla(213, 13%, 86%, 0.2);
+$color-bombay:           hsl(215, 9%, 73%);
+$color-manatee:          hsl(215, 6%, 63%);
+$color-dark-lava:        hsl(216, 4%, 22%);
+$color-link-water:       hsl(221, 51%, 90%);
+$color-glitter:          hsl(222, 57%, 95%);
+$color-lavender-gray:    hsl(229, 25%, 79%);
+$color-purple-dark:      hsl(233, 18%, 29%);
+$color-spun-pearl:       hsl(244, 10%, 70%);
+$color-majorelle-blue:   hsl(244, 73%, 62%);
+
+%button {
+  display: inline-block;
+  padding: 0.85rem 2.55rem;
+  border: none;
+  border-radius: 100em;
+  font-weight: normal;
+}
+
+%content-padding {
+  padding: 2.6em;
+}
+
+%frame {
+  @extend %shadow;
+  background-color: $color-white;
+} 
+
+%notification {
+  > div:first-of-type {
+    align-items: center;
+    background-color: $color-mustard;
+    border-radius: 100%;
+    color: $color-dark-lava;
+    display: flex;
+    font-size: 1.3rem;
+    height: 1.7em;
+    justify-content: center;
+    width: 1.7em;
+  }
+} 
+
+%shadow {
+  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
+}
+
+<<<<<<< HEAD
+=======
+%content-padding {
+  padding: 4.4rem;
+}
+
+%frame {
+  @extend %shadow;
+  background-color: $color-white;
+}
+
+>>>>>>> 7b4f073... variables ok
+%skill {
+  background-color: $color-selective-yellow;
+  border: 1px solid $color-selective-yellow;
+  border-radius: 2em;
+  color: $color-white;
+  font-weight: bold;
+  margin: 0.4rem;
+  padding: 0.5rem 2rem;
+}
+
+%status-open {
+  background-color: $color-majorelle-blue;
+  border: none;
+  border-radius: 100em;
+  color: $color-white;
+  display: inline-block;
+  font-weight: normal;
+  padding: 0.85rem 1.7rem;
+}
+
+%submit-form {
+  background-color: $color-purple-dark;
+  color: $color-white;
+  float: right;
+  font-weight: bold;
+  text-transform: uppercase;
+} 
+
+$breakpoints: (
+  phone: 480px,
+  tablet: 768px,
+  desktop: 1024px,
+);