diff --git a/src/header.pug b/src/header.pug
index 7daab268af90f82c1e6d2894d255a163f530dfab..af1b856c0ec7086854380b00922785cde4ac5c8e 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -16,7 +16,7 @@ details
     include page-notifications.pug
 
 sib-display#profile(
-  data-fields='first_name,account.picture',
+  data-fields='first_name, account.picture',
   widget-account.picture='sib-display-img',
   bind-user
   )
diff --git a/src/menu.pug b/src/menu.pug
index ad601e1755a6dbef57e470c3bf7b9e1fb7a30054..fbb76fd206395d41fb7bb52db1cb7a8353d52b41 100644
--- a/src/menu.pug
+++ b/src/menu.pug
@@ -32,7 +32,9 @@ nav#navbar
       div.sub-menu
         sib-display(
           data-src=`${sdn}/projects/`,
-          data-fields='name',
+          data-fields='project',
+          set-project='customer.name, dash, name',
+          value-dash='-',
           next='project'
         )
     div.divider
@@ -60,7 +62,7 @@ nav#navbar
       div.sub-menu
         sib-display(
           data-src=`${sdn}/members/`,
-          data-fields='pseudo',
+          data-fields='user.username',
           next='member-chat'
         )
     div.divider
diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug
index 9db156e8936e50f695e94a65d9e3661e7ee81bf9..65022e34e287ee5344619073b21b206c2cf30ea7 100644
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@@ -5,12 +5,18 @@ div.grid-layer
     sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
       data-fields='status, user-thumb, creation, title, description, skills, send',
+      
       set-status='closingDate',
       widget-closingDate='hdapp-closing-date',
-      set-user-thumb='author.account.picture, author.first_name, author.groups.ldp:contains.name',
+      
+      set-user-thumb='author.account.picture, author.first_name, author.groups',
       widget-author.account.picture='sib-display-img',
+      widget-author.groups='sib-display-lookuplist',
+      
       set-creation='creationDate',
+
       widget-skills='sib-display-lookuplist',
+      
       set-send='before-send-link, send-link',
       value-before-send-link='',
       value-send-link='Send a private message',
@@ -26,9 +32,9 @@ div.grid-layer
     sib-link(next="job-offer-create").containerH.containerCenter.action-link
       div.icon-plus
       div Post a new offer
-    sib-link().containerH.containerCenter.how-link
+    //-sib-link().containerH.containerCenter.how-link
       div.icon-idea
       div.grow How To find a new offer?
-    sib-link().containerH.containerCenter.how-link
+    //-sib-link().containerH.containerCenter.how-link
       div.icon-idea
       div.grow How to set notification?
diff --git a/src/page-members.pug b/src/page-members.pug
index 77f78695519b0583d06454683a0d3a12d0e95eef..f3c8e4258c53bf19782495968e77dc6bc25f9e32 100644
--- a/src/page-members.pug
+++ b/src/page-members.pug
@@ -5,31 +5,32 @@ div.grid-layer
     h1 Members
     sib-display#profiles-list(
       data-src=`${sdn}/members/`,
-      data-fields='header, infos, groups',
+      counter-template='${counter} members',
+      data-fields='header, infos',
+
       set-header='user.account.picture, user, pseudonym, bio, send',
-      set-infos='cell, user.groups.name, user.email, phone, user.skills',
-      set-user='user.first_name, user.last_name',
+      widget-user.account.picture='sib-display-img',
+      widget-user='hdapp-userinfo',
       set-pseudonym='before-pseudo,user.username',
       value-before-pseudo='@',
       value-send='SEND A MESSAGE',
       template-send='chat-link',
-      counter-template='${counter} members',
-      widget-user.account.picture='sib-display-img',
-      widget-roles='sib-display-lookuplist',
-      widget-user='hdapp-userinfo',
+      
+      set-infos='city, user.groups, user.email, phone, user.skills',
+      widget-user.groups='sib-display-lookuplist',
       widget-user.skills='sib-display-lookuplist',
 
-      search-range-roles=`${sdn}/role/`,
+      search-range-groups=`${sdn}/groups/`,
       search-range-skills=`${sdn}/skills/`,
-      search-fields='name, roles, skills',
-      set-name='pseudo,user.first_name,user.last_name',
+      search-fields='name, groups, skills',
+      set-name='pseudo, user.first_name, user.last_name',
       search-label-name='Search by lastname, firstname...',
-      search-label-roles='Filter by role',
-      search-label-skills='Search by skills',
       search-widget-name='sib-form-placeholder-text',
+      search-label-groups='Filter by role',
+      search-label-skills='Search by skills',
       search-widget-skills='sib-form-placeholder-text',
       next='member')
-  div.grid-layer-links.containerV
+  //-div.grid-layer-links.containerV
     div.containerH.containerCenter.how-link
       div.containerV.fix.icon-idea
       div.containerV.grow
diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug
index f538ab4c4dc410d2fb13c9cb4c40beda02513c8c..ac882b1c211123b3c304470041de1d2b42de3c9f 100644
--- a/src/page-project-profile.pug
+++ b/src/page-project-profile.pug
@@ -2,37 +2,63 @@
   template#customer-template
     div#clientBox
       div
-        h2 Client :
-        div.containerH
-          label Raison Sociale :
-          span ${value.name}
-        div.containerV
-          label Adresse :
-          span ${value.address}
+        h5 Client:
+        ul
+          li #[span Business name:]${value.name}
+          li #[span Company register:]${value.companyRegister}
+          li
+            span Address:
+            br
+            p ${value.address}
       div
-        h2 Contact :
+        h5 Contact:
+        ul
+          li(name='name') #[span ${value.firstName} ${value.lastName}], ${value.role}
+          li(name='email')
+            a(href='mailto:${value.email}') ${value.email}
+          li(name='phone') ${value.phone}
 
   sib-display(
-    data-fields='title, customer.logo, label-description, description, customer',
-    set-title='const-title1,phone, customer.name,const-title2, name',
+    data-fields='block-title, infos, block-lead, block-fee, block-customer',
+    
+    set-block-title='const-title1, number, customer.name,const-title2, name, entitled, creationDate',
+    value-const-title1="N°",
+    value-const-title2="-",
+    value-entitled="Creation date:"
+
+    set-infos='block-description, block-logo',
+    set-block-description='label-description, description',
+    set-block-logo='customer.logo',
+    value-label-description='DESCRIPTION:',
     widget-customer.logo='sib-display-img',
+
+    set-block-fee='label-fee, details-cell, details-business',
+    value-label-fee='FEE:',
+    set-details-cell='cell-name, cell-fee, percentage',
+    value-cell-name='Happy Dev Paris:',
+    value-cell-fee='5',
+    value-percentage='%',
+    set-details-business='business-contribution, businessProvider, comma, businessProviderFee, percentage',
+    value-business-contribution='Business contribution:',
+    value-comma=', ',
+
+    set-block-customer='label-customer, customer',
+    value-label-customer='CUSTOMER INFORMATIONS:'
     template-customer='customer-template',
-    widget-team='sib-display-lookuplist',
-    value-label-description="Description:",
-    value-label-customer="Client:",
-    value-const-title1="N°:",
-    value-const-title2="-",
     bind-resources,
   )
 
-  h2 Team:
-  div.containerH
-    sib-display.members-list-condensed(
-      id-suffix='team',
-      data-fields='account.picture, profile.user, groups',
-      widget-account.picture='sib-display-img',
-      widget-profile.user='hdapp-userinfo',
-      widget-groups='sib-display-lookuplist',
+  div(name='block-team')
+    h2(name='label-team') Team:
+    sib-display(
+      id-suffix='members',
+      data-fields='teammate-img, teammate-profile, teammate-job',
+      set-teammate-img='user.account.picture',
+      set-teammate-profile='user, user.groups',
+      set-teammate-job='name',
+      widget-user.account.picture='sib-display-img',
+      widget-user='hdapp-userinfo',
+      widget-user.groups='sib-display-lookuplist',
       next='profile',
       bind-resources,
     )
diff --git a/src/styles/content.scss b/src/styles/content.scss
index bc1fc327f89593faffad9acceb2001911979739d..87ca2fdf44d870e42f1624b7e66c66cf219f2fb5 100644
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@@ -74,10 +74,10 @@
 }
 // member-profile && members
 
-.members-list-condensed {
+/*.members-list-condensed {
   img {
     width: 50px;
-    height: 50px;
+    height: 100px;
     border-radius: 100%;
     object-fit: cover;
     object-position: top;
@@ -88,11 +88,20 @@
   }
 
   > div > sib-display > div {
-    margin: 1em 0;
     display: grid;
-    grid-template-columns: [first] 50px [middle] auto [end];
-    grid-template-rows: [first] 25px [middle] 25px [end];
+    grid-template-columns: 0.5fr 2fr;
+    grid-template-rows: repeat(3, auto);
+    grid-column-gap: 3rem;
     align-items: center;
+
+    div[name="teammate-img"] {
+      background: blue;
+      grid-row: 1 / -1;
+    }
+      
+    }
+
+
     ul{
       margin-top: 0px;
       margin-bottom: 0px;
@@ -112,7 +121,7 @@
   // ul {
   //   padding-left: 1em;
   // }
-}
+}*/
 
 sib-display#member-info {
   display: flex;
@@ -265,81 +274,6 @@ hdapp-available {
     }
   }
 }
-// projects
-
-#project-profile sib-display {
-  sib-display-div {
-    > [name^='label-'] {
-      @extend h2;
-    }
-  }
-
-  [name='title'] {
-    @extend h1;
-    display: flex;
-
-    > * {
-      padding-left: 0.5em;
-      padding-right: 0.5em;
-    }
-
-    > [name^='const-'] {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    > [name='name'] {
-      font-weight: normal;
-    }
-  }
-}
-
-#clientBox {
-  margin-top: 1em;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-left-width: 1px;
-  border-left-style: solid;
-
-  > * {
-    label{
-      font-weight: bold;
-      margin-right: 1em;
-    }
-    border-right-width: 1px;
-    border-right-style: solid;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    padding: 1em;
-    > div{
-      margin-bottom: 1em;
-    }
-  }
-}
-
-#project-edit form {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
-  > * {
-    display: flex;
-    margin-bottom: 1em;
-
-    label {
-      flex-basis: 8em;
-      flex-shrink: 0;
-    }
-
-    input,
-    textarea {
-      flex-grow: 1;
-      min-width: 0;
-    }
-  }
-}
 
 /*
 label {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 16688e858e60dfff1227fcdf226ecaa03826e5ec..417ea291c3f3375d08f28eb92160814dd550e8b0 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -8,10 +8,13 @@
 @import 'main';
 @import 'form';
 @import 'content';
+
 @import 'filters';
 @import 'right-panel';
+
 @import 'job-offers';
 @import 'members';
+@import 'project-profile';
 
 // @import 'members';
 @import 'header';
diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss
index b3bc5d3da2258527207ad7f43185d5c2d853367c..ae07381117ad7f3124a47579ff652f590b8d83dc 100644
--- a/src/styles/job-offers.scss
+++ b/src/styles/job-offers.scss
@@ -53,6 +53,12 @@
 
   > sib-link {
     cursor: pointer;
+    @include icon('speech');
+
+    &::before {
+      font-size: 15px;
+      margin-right: 12px;
+    }
   }
 }
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 4bfc28eacab1d47615946d9d0a5258d378d92645..7e815b6251bdb9ab7a67ec487b4054c0a707c329 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -15,7 +15,7 @@ html {
   font-family: Open Sans, sans-serif;
   font-size: 13px;
   background-color: $color-anti-flash-white;
-  color: $color-taupe-gray;
+  color: $color-text-base;
 }
 // body {
 //   height: 100%;
@@ -59,13 +59,22 @@ h4 {
   font-size: 0.68em;
 }
 
+h5 {
+  font-size: 20px;
+}
+
 .debug {
   outline: 2px dotted red;
 }
 
+#job-offers,
+#members {
+  @extend %content-padding;
+}
+
 .frame {
   @extend %frame;
-  padding: 1em;
+  padding: 3em;
 }
 
 .menu-notification {
@@ -176,7 +185,7 @@ h4 {
     > div {
       //display: flex;
       //margin: 2.6em;
-      padding:2.6em;
+      //padding:2.6em;
       //flex: 1 1 0;
       flex-grow: 1;
     }
@@ -318,3 +327,14 @@ sib-display-lookuplist {
     font-weight: bold;
   }
 }
+
+div[name*='groups'],
+li[name*='groups'] {
+  border: 1px solid $color-mikado-yellow;
+  border-radius: 3px;
+  color: $color-rolling-stone;
+  font-size: 13px;
+  font-weight: 400;
+  margin-left: 1em;
+  padding: calc(16px - 1em) 0.7em;
+}
diff --git a/src/styles/material-design-icons.scss b/src/styles/material-design-icons.scss
index 226d20db731ae58bf65a499097a82b4f4b923dd9..b53ae2b222732dc25563c1f6d97635cf083f78ea 100644
--- a/src/styles/material-design-icons.scss
+++ b/src/styles/material-design-icons.scss
@@ -22,7 +22,8 @@ $mdi-version:          "3.3.92" !default;
 
 $mdi-icons: (
   account-outline: '\F013',
-  atom: '\F767'
+  atom: '\F767',
+  cellphone-iphone: '\F120'
 );
 
 %mdi,
diff --git a/src/styles/member.scss b/src/styles/member.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/styles/members.scss b/src/styles/members.scss
index f4334a5ae5dc627a8aaf2a52e60e103b80893de1..8d0db5f1b558fab0fc82e1a8f8b226610298b8a1 100644
--- a/src/styles/members.scss
+++ b/src/styles/members.scss
@@ -28,7 +28,7 @@
         content: '';
         position: relative;
         top: 0.5em;
-        width: 31.4em;
+        width: 35.2vw;
       }
 
       &::before {
@@ -41,10 +41,10 @@
     }
 
     > sib-display {
-      color: $color-rolling-stone;
-      cursor: pointer;
       background-color: white;
       box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
+      color: $color-rolling-stone;
+      cursor: pointer;
       display: flex;
       flex-flow: column wrap;
       margin-bottom: 2.5rem;
@@ -59,9 +59,9 @@
 
       div[name='header'] {
         border-bottom: 1px solid $color-anti-flash-white;
-        padding: 0.5em 0 2em;
         display: flex;
         flex-direction: column;
+        padding: 0.5em 0 2em;
 
         > *:not(sib-display-img) {
           display: flex;
@@ -81,13 +81,10 @@
           }
         }
 
-        div[name='user'] {
+        ul[name='user'] {
           font-weight: bold;
+          margin: 0;
           @extend h1;
-
-          sib-display-div[name$='last_name'] {
-            margin-left: 6px;
-          }
         }
 
         sib-display-div[name$='bio'] {
@@ -118,7 +115,9 @@
       
       div[name='infos'] {
 
-        > sib-display-div > div {
+        > sib-display-div > div,
+        > sib-display-lookuplist > ul {
+          margin-bottom: 0;
           margin-top: 1em;
 
           &::before {
@@ -128,15 +127,22 @@
           }
         }
 
-        ul {
+        > sib-display-lookuplist[name$='groups'] > ul > li {
+          border: none;
+          font-size: inherit;
+          margin-left: 0;
+          padding: 0;
+        }
+
+        > sib-display-lookuplist[name$='skills'] > ul {
           margin-left: 1em;
         }
         
-        [name$='cell'] * {
+        [name$='city'] * {
           @include mdi('atom');
         }
 
-        [name*='groups'] * {
+        ul[name*='groups'] {
           @include mdi('account-outline');
         }
 
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index c161793cafb765d72beed4b887d481e96a15149e..1b34ce3594aa4d96be53786944e69e7423fee429 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -59,11 +59,20 @@ sib-router {
 
   .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;
+        }
+      }
     }
   }
 
diff --git a/src/styles/project-profile.scss b/src/styles/project-profile.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5087ccf7694faf52d9e70f8a908016b8285366cf
--- /dev/null
+++ b/src/styles/project-profile.scss
@@ -0,0 +1,264 @@
+#project-profile {
+  
+  [name^='block-']:not([name='block-title']) {
+    margin-top: 3em;
+  
+    [name^='label-'] {
+      font-weight: bold;
+      margin-bottom: 0.8em;
+      text-transform: uppercase;
+      @extend h2;
+    }
+  
+    sib-display-div:not(:first-of-type),
+    ul,
+    [name*='job'] {
+      font-size: 15px;
+    }
+  }
+
+  [name='block-title'] {
+    border-bottom: 1px solid $color-link-water;
+    display: flex;
+    padding-bottom: 2em;
+  
+    > * {
+      color: $color-dark-lava;
+      font-size: 20px;
+      font-weight: bold;
+      padding-right: 0.5em;
+      text-transform: uppercase;
+    }
+  
+    > [name^='const-'] {
+      padding: 0;
+    }
+
+    > sib-display-div[name='name'] {
+      padding-left: 0.5em;
+    }
+    
+    > :not(:nth-last-child(n+4)) {
+      color: $color-purple-dark;
+      font-weight: normal;
+      text-transform: none;
+    }
+
+    > :not(:nth-last-child(n+3)) {
+      color: $color-text-base;
+      font-size: 16px;
+    }
+
+    [name='entitled'] {
+      margin-left: auto;
+    }
+  }
+
+  [name='infos'] {
+    display: flex;
+
+    [name='description'] {
+      width: 90%;
+    }
+    
+    [name='block-logo'] {
+      box-sizing: border-box;
+      display: block;
+      height: 8.5vh;
+      position: relative;
+      text-align: center;
+      width: 15vw;
+    }
+  }
+
+
+  [name^='details-'] {
+    display: flex;
+    font-size: 15px;
+    margin-bottom: 0.5em;
+
+    [name='cell-name'],
+    [name='business-contribution'] {
+      font-weight: bold;
+      margin-right: 5px;
+    }
+
+    [name='comma'] {
+      margin-right: 0.2em;
+    }
+  }
+}
+
+#clientBox {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1em;
+  max-width: 100%;
+
+  > * {
+    border: 1px solid $color-link-water;
+    flex: 1 1 auto;
+    justify-content: space-between;
+    margin: 0 -1px -1px 0;
+    min-width: 25vw;
+    padding: 0;
+
+    h5 {
+      margin-left: 1.1em;
+      margin-top: 1.2em;
+    }
+
+    ul {
+      font-size: 15px;
+      list-style: none;
+      margin: -1.2em 0 2.2em -1.2em;
+
+      li {
+
+        span {
+          font-weight: bold;
+        }
+      }
+    }
+
+    &:first-child {
+      li {
+      
+        span {
+          margin-right: 0.3em;
+        }
+
+        &:first-child {
+          margin-bottom: 0.5em;
+        }
+
+        &:last-child {
+          margin-top: 2.4em;
+        }
+      }
+    }
+
+    &:not(:first-child) {
+      padding-left: 3em;
+
+      li {
+        margin-bottom: 1em;
+
+        &:last-child {
+          margin-top: 1.3em;
+        }
+
+        &::before {
+          color: $color-selective-yellow;
+          font-size: 20px;
+          padding: 0 0.6em 0 0;
+        }
+      }
+
+      [name$='name'] {
+        @include mdi('account-outline');
+
+        &::before {
+          padding-left: 0.2em;
+        }
+      }
+
+      [name$='email'] {
+        @include icon('envelope');
+      }
+
+      [name$='phone'] {
+        @include mdi('cellphone-iphone');
+
+        &::before{
+          padding-left: 0.2em;
+        }
+      }
+    }
+  }
+}
+
+[name='block-team'] {
+  
+  > sib-display > div > sib-display > div {
+    align-items: center;
+    display: grid;
+	  grid-template-columns: 5vw 2fr;
+    grid-template-rows: repeat(2, 5.2vh);
+    
+    label {
+      display: none;
+    }
+    
+    [name='teammate-profile'],
+    [name='teammate-img'],
+    [name='teammate-job'] {
+      margin: 0;
+      width: auto;
+    }
+
+    [name='teammate-img'] {
+      grid-row: 1 / -1;
+      
+      img {
+        border: 0;
+        border-radius: 100%;
+        display: block;
+        font-size: 100%;
+        margin: 0;
+        padding: 0;
+        width: 75%;
+      }
+    }
+    
+    [name='teammate-profile'] {
+      align-self: end;  
+    
+      hdapp-userinfo {
+        display: inline-block;
+        height: 0;
+
+        > ul {
+          font-weight: 600;
+          padding-inline-start: 0;
+        }
+      }
+      
+      sib-display-lookuplist {
+        display: inline-block;
+
+        > ul {
+          margin-block-end: 0;
+          margin-block-start: 0;
+        }
+      }
+    }
+
+    [name='teammate-job'] {
+      align-self: start;
+    }
+  }
+}
+
+#project-edit form {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  > * {
+    display: flex;
+    margin-bottom: 1em;
+
+    label {
+      flex-basis: 8em;
+      flex-shrink: 0;
+    }
+
+    input,
+    textarea {
+      flex-grow: 1;
+      min-width: 0;
+    }
+  }
+}
diff --git a/src/styles/right-panel.scss b/src/styles/right-panel.scss
index 7c76d42ef0997629c13346581ada2af467584cc9..1fe0d30cee43c124207b6dcf35b367cded894221 100644
--- a/src/styles/right-panel.scss
+++ b/src/styles/right-panel.scss
@@ -36,6 +36,7 @@
   color: $color-white;
   font-weight: bold;
   text-transform: uppercase;
+  cursor: pointer;
 
   .icon-plus {
     font-size: 20px;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d0cc334448ed171c3a1ed3917b3850bc356e2fd0..60f8e1b36557a1f4fb132e88bd8eb62808079bd9 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -4,15 +4,18 @@ $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-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-dark-lava:        hsl(216, 4%, 22%);
+$color-link-water:       hsl(221, 51%, 90%);
 $color-purple-dark:      hsl(233, 18%, 29%);
 $color-spun-pearl:       hsl(244, 10%, 70%);
 $color-majorelle-blue:   hsl(244, 73%, 62%);
@@ -22,6 +25,10 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
   box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
 }
 
+%content-padding {
+  padding: 2.6em;
+}
+
 %frame {
   @extend %shadow;
   background-color: $color-white;
diff --git a/www/fonts/material-design-icons.svg b/www/fonts/material-design-icons.svg
index 5b4f68cac3a0fbbdb53d9dc4c8c7a8a0e433772d..2b1e8e6c1bf10911f469108d88670e7f73fe4373 100644
--- a/www/fonts/material-design-icons.svg
+++ b/www/fonts/material-design-icons.svg
@@ -15,6 +15,10 @@
     <glyph glyph-name="atom"
       unicode="&#xF767;"
       horiz-adv-x="512" d=" M256 213.3333333333334C267.7333333333334 213.3333333333334 277.3333333333333 203.7333333333334 277.3333333333333 192S267.7333333333334 170.6666666666667 256 170.6666666666667S234.6666666666667 180.2666666666667 234.6666666666667 192S244.2666666666667 213.3333333333334 256 213.3333333333334M90.0266666666667 357.9733333333334C120.5333333333333 388.48 186.6666666666667 374.8266666666667 256 329.3866666666667C325.3333333333333 374.8266666666667 391.4666666666667 388.48 421.9733333333334 357.9733333333334C452.48 327.4666666666667 438.8266666666667 261.3333333333334 393.3866666666667 192C438.8266666666667 122.6666666666667 452.48 56.5333333333333 421.9733333333334 26.0266666666666C391.4666666666667 -4.48 325.3333333333333 9.1733333333333 256 54.6133333333333C186.6666666666667 9.1733333333333 120.5333333333333 -4.48 90.0266666666667 26.0266666666666C59.52 56.5333333333333 73.1733333333333 122.6666666666667 118.6133333333333 192C73.1733333333333 261.3333333333334 59.52 327.4666666666667 90.0266666666667 357.9733333333334M331.52 267.52C344.5333333333333 254.2933333333334 356.48 240.8533333333333 367.5733333333333 227.4133333333334C397.0133333333333 272.8533333333334 407.68 311.8933333333333 391.68 327.68C375.8933333333333 343.68 336.8533333333333 333.0133333333333 291.4133333333333 303.5733333333334C304.8533333333334 292.48 318.2933333333333 280.5333333333334 331.52 267.5200000000001M180.48 116.48C167.4666666666667 129.7066666666667 155.52 143.1466666666667 144.4266666666667 156.5866666666667C114.9866666666667 111.1466666666667 104.32 72.1066666666667 120.32 56.3200000000001C136.1066666666667 40.3200000000001 175.1466666666667 50.9866666666667 220.5866666666667 80.4266666666667C207.1466666666667 91.52 193.7066666666667 103.4666666666667 180.48 116.48M120.32 327.68C104.32 311.8933333333333 114.9866666666667 272.8533333333334 144.4266666666667 227.4133333333334C155.52 240.8533333333334 167.4666666666667 254.2933333333334 180.48 267.52C193.7066666666667 280.5333333333333 207.1466666666667 292.48 220.5866666666667 303.5733333333333C175.1466666666667 333.0133333333333 136.1066666666667 343.68 120.32 327.68M210.7733333333333 146.7733333333333C225.7066666666666 131.84 241.0666666666667 118.1866666666667 256 106.0266666666666C270.9333333333333 118.1866666666667 286.2933333333333 131.84 301.2266666666667 146.7733333333333C316.16 161.7066666666667 329.8133333333334 177.0666666666667 341.9733333333334 192C329.8133333333334 206.9333333333333 316.16 222.2933333333334 301.2266666666667 237.2266666666667C286.2933333333334 252.1600000000001 270.9333333333334 265.8133333333334 256 277.9733333333334C241.0666666666667 265.8133333333334 225.7066666666667 252.1600000000001 210.7733333333333 237.2266666666667C195.84 222.2933333333334 182.1866666666667 206.9333333333334 170.0266666666667 192C182.1866666666667 177.0666666666667 195.84 161.7066666666667 210.7733333333333 146.7733333333333M391.68 56.3200000000001C407.68 72.1066666666667 397.0133333333333 111.1466666666667 367.5733333333333 156.5866666666667C356.48 143.1466666666667 344.5333333333333 129.7066666666667 331.52 116.48C318.2933333333334 103.4666666666667 304.8533333333334 91.52 291.4133333333333 80.4266666666667C336.8533333333333 50.9866666666667 375.8933333333333 40.3200000000001 391.68 56.3200000000001z" />
+
+    <glyph glyph-name="cellphone-iphone"
+      unicode="&#xF120;"
+      horiz-adv-x="512" d=" M341.3333333333333 64H149.3333333333333V362.6666666666667H341.3333333333333M245.3333333333333 -21.3333333333333C227.6266666666667 -21.3333333333333 213.3333333333333 -7.04 213.3333333333333 10.6666666666667S227.6266666666667 42.6666666666667 245.3333333333333 42.6666666666667S277.3333333333333 28.3733333333333 277.3333333333333 10.6666666666667S263.04 -21.3333333333333 245.3333333333333 -21.3333333333333M330.6666666666667 426.6666666666667H160C130.56 426.6666666666667 106.6666666666667 402.7733333333333 106.6666666666667 373.3333333333334V10.6666666666667C106.6666666666667 -18.7733333333333 130.56 -42.6666666666666 160 -42.6666666666666H330.6666666666667C360.1066666666667 -42.6666666666666 384 -18.7733333333333 384 10.6666666666667V373.3333333333334C384 402.7733333333333 360.1066666666667 426.6666666666667 330.6666666666667 426.6666666666667z" />
   </font>
 </defs>
 </svg>