diff --git a/assets/components/atoms/button/button.scss b/assets/components/atoms/button/button.scss
index 30c4949f4..5798938a7 100644
--- a/assets/components/atoms/button/button.scss
+++ b/assets/components/atoms/button/button.scss
@@ -53,6 +53,7 @@
 .btn-secondary {
   background: transparent;
   border-color: $gray-300;
+  font-size: .8125rem;
 
   .bg-dark & {
     border-color: $gray-600;
diff --git a/assets/components/atoms/collapse/collapse-partial.twig b/assets/components/atoms/collapse/collapse-partial.twig
index 7b2fd4c41..7ebb1b51e 100644
--- a/assets/components/atoms/collapse/collapse-partial.twig
+++ b/assets/components/atoms/collapse/collapse-partial.twig
@@ -1,5 +1,10 @@
 <div class="collapse collapse-partial" id="biography-text" aria-expanded="false">
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aperiam culpa dolor dolore eaque esse excepturi incidunt libero maxime molestias mollitia neque odit possimus praesentium quaerat quam quas reprehenderit, saepe similique sit totam veritatis vero voluptas voluptatem voluptates voluptatibus! Ab ad adipisci autem blanditiis cum deleniti deserunt dolor, dolores earum eius enim esse est eveniet exercitationem, fuga fugiat fugit illum ipsum maiores molestias mollitia nesciunt officia perferendis praesentium quisquam quos recusandae rem repellat repudiandae sit temporibus vero vitae voluptatem! Blanditiis excepturi neque officia possimus suscipit? A culpa est ipsa nemo officiis. Corporis distinctio, est iure nihil possimus quis veritatis.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros. Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus. Curabitur eu risus vel leo vehicula auctor. Aenean in velit nisi. Curabitur ultricies lacinia odio, sed egestas ex facilisis nec. Pellentesque et sagittis justo, id consequat odio. Nullam molestie sit amet eros quis consequat.</p>
+  <h3>Mission</h3>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros.</p>
+  <p>Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus. Curabitur eu risus vel leo vehicula auctor. Aenean in velit nisi. Curabitur ultricies lacinia odio, sed egestas ex facilisis nec. Pellentesque et sagittis justo, id consequat odio. Nullam molestie sit amet eros quis consequat.</p>
+  <h3>Travail en cours</h3>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros. Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus.</p>
 </div>
 
 <button
diff --git a/assets/components/atoms/picture/picture-portrait.twig b/assets/components/atoms/picture/picture-portrait.twig
new file mode 100644
index 000000000..e8a0905d2
--- /dev/null
+++ b/assets/components/atoms/picture/picture-portrait.twig
@@ -0,0 +1,18 @@
+<picture>
+  <source
+    media="(min-width: 1140px)"
+    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+  <source
+    media="(min-width: 960px)"
+    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
+  <source
+    media="(min-width: 720px)"
+    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+  <source
+    media="(min-width: 541px)"
+    srcset="https://via.placeholder.com/253x360.jpg 1x,https://via.placeholder.com/506x720.jpg 2x">
+  <source
+    media="(max-width: 540px)"
+    srcset="https://via.placeholder.com/211x300.jpg 1x,https://via.placeholder.com/422x600.jpg 2x">
+  <img src="https://via.placeholder.com/506x720.jpg" class="img-fluid" alt="ALT">
+</picture>
diff --git a/assets/components/atoms/picture/picture-thumb-square.twig b/assets/components/atoms/picture/picture-thumb-square.twig
new file mode 100644
index 000000000..5a8ee4032
--- /dev/null
+++ b/assets/components/atoms/picture/picture-thumb-square.twig
@@ -0,0 +1,8 @@
+<picture>
+  <source media="(min-width: 1140px)" srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+  <source media="(min-width: 960px)" srcset="https://via.placeholder.com/95x95.jpg 1x,https://via.placeholder.com/190x190.jpg 2x">
+  <source media="(min-width: 720px)" srcset="https://via.placeholder.com/80x80.jpg 1x,https://via.placeholder.com/160x160.jpg 2x">
+  <source media="(min-width: 541px)" srcset="https://via.placeholder.com/120x120.jpg 1x,https://via.placeholder.com/240x204.jpg 2x">
+  <source media="(max-width: 540px)" srcset="https://via.placeholder.com/540x540.jpg 1x,https://via.placeholder.com/1080x1080.jpg 2x">
+  <img src="https://via.placeholder.com/95x95.jpg" class="img-fluid" alt="ALT">
+</picture>
diff --git a/assets/components/atoms/picture/picture.yml b/assets/components/atoms/picture/picture.yml
index 96c01edfb..049dde4e9 100644
--- a/assets/components/atoms/picture/picture.yml
+++ b/assets/components/atoms/picture/picture.yml
@@ -10,6 +10,11 @@ variants:
     wrapper: col-sm-4 col-md-2 col-lg-1
     notes: |
       Avatar picture need an equal height and width in order to be displayed as a circle
+  - name: portrait
+    title: Portrait
+    wrapper: col-md-3
+    notes: |
+      Portrait picture is used in People pages
   - name: one-third
     title: One third picture
     wrapper: col-md-4
@@ -18,6 +23,9 @@ variants:
   - name: news-thumb
     title: News Listing Thumbnail
     wrapper: col-3 col-md-2
+  - name: thumb-square
+    title: Listing square Thumbnail
+    wrapper: col-3 col-md-2
 notes: |
   <br>
 
diff --git a/assets/components/atoms/separator/separator.scss b/assets/components/atoms/separator/separator.scss
index 0e4dd4f07..d37e8560c 100644
--- a/assets/components/atoms/separator/separator.scss
+++ b/assets/components/atoms/separator/separator.scss
@@ -1,9 +1,14 @@
 @charset 'utf-8';
 
 hr {
+  border-color: $gray-100;
   width: 100%;
 
   &.bold {
     border-top-width: 3px;
   }
+  
+  &.darker {
+    border-color: $gray-200;
+  }
 }
diff --git a/assets/components/atoms/separator/separator.twig b/assets/components/atoms/separator/separator.twig
index ad7875715..1023c548f 100644
--- a/assets/components/atoms/separator/separator.twig
+++ b/assets/components/atoms/separator/separator.twig
@@ -1,3 +1,7 @@
 <hr>
 
 <hr class="bold">
+
+<hr class="darker">
+
+<hr class="bold darker">
diff --git a/assets/components/atoms/separator/separator.yml b/assets/components/atoms/separator/separator.yml
index 94ea1dcd9..f073a8cbb 100644
--- a/assets/components/atoms/separator/separator.yml
+++ b/assets/components/atoms/separator/separator.yml
@@ -2,3 +2,4 @@ title: Separator
 name: separator
 notes: |
   Use the `.bold` class to make the border wider.
+  Use the `.darker` class for a darker separator.
diff --git a/assets/components/atoms/social-icon/social-icon-link-group.twig b/assets/components/atoms/social-icon/social-icon-link-group.twig
index 349f5ea0f..7ac270a62 100644
--- a/assets/components/atoms/social-icon/social-icon-link-group.twig
+++ b/assets/components/atoms/social-icon/social-icon-link-group.twig
@@ -1,6 +1,7 @@
 {% set round = round ? round : false %}
 {% set discrete = discrete ? discrete : false %}
 {% set negative = negative ? negative : false %}
+
 {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative, url: 'https://www.facebook.com/epflcampus' } %}
 {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Twitter', icon: 'icon-twitter', round: round, discrete: discrete, negative: negative, url: 'https://twitter.com/epfl' } %}
 {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative, url: 'http://instagram.com/epflcampus' } %}
diff --git a/assets/components/atoms/social-icon/social-icon-single-link-with-details.twig b/assets/components/atoms/social-icon/social-icon-single-link-with-details.twig
new file mode 100644
index 000000000..351ffc161
--- /dev/null
+++ b/assets/components/atoms/social-icon/social-icon-single-link-with-details.twig
@@ -0,0 +1,11 @@
+{% set pretty_name = pretty_name ?: 'Twitter' %}
+{% set user_id = user_id ?: 'firstname.name' %}
+{% set icon = icon ?: 'icon-twitter' %}
+{% set round = round ? ' social-icon-round' : '' %}
+{% set discrete = discrete ? ' social-icon-discrete' : '' %}
+{% set negative = negative ? ' social-icon-negative' : '' %}
+{% set url = url or '#' %}
+<a href="{{ url }}" class="{{ 'social-icon social-icon-details social-' ~ icon ~ round ~ negative ~ discrete }}" rel="nofollow" title="View on {{ pretty_name }}">
+  {% include '@atoms/icon/icon.twig' with { icon: icon } %}
+  <span class="user">{{ user_id }}</span>
+</a>
diff --git a/assets/components/atoms/social-icon/social-icon.scss b/assets/components/atoms/social-icon/social-icon.scss
index 4d4bce36a..6ced6b2d2 100644
--- a/assets/components/atoms/social-icon/social-icon.scss
+++ b/assets/components/atoms/social-icon/social-icon.scss
@@ -14,6 +14,30 @@
   }
 }
 
+.social-icon-details {
+  min-height: 2.6em;
+  text-decoration: none !important;
+  vertical-align: bottom;
+  
+  &:hover {
+    background: $gray-600;
+    color: white;
+  }
+  
+  .user {
+    position: relative;
+    top: 2px;
+    line-height: 24px;
+    vertical-align: bottom;
+  }
+  
+  .icon + .user {
+    margin-left: .25em;
+    top: -1px;
+    line-height: 1em;
+  }
+}
+
 a.social-icon {
   margin-bottom: $spacer * 0.3;
   transition:
diff --git a/assets/components/base.scss b/assets/components/base.scss
index f5039333a..6e978ddb6 100644
--- a/assets/components/base.scss
+++ b/assets/components/base.scss
@@ -124,4 +124,5 @@
 
 //
 // pages:
+@import 'pages/people-detail/people-detail';
 @import 'pages/blog-single/blog-single';
diff --git a/assets/components/molecules/collapse-group/collapse-group-people-contacts.twig b/assets/components/molecules/collapse-group/collapse-group-people-contacts.twig
new file mode 100644
index 000000000..a90ffc147
--- /dev/null
+++ b/assets/components/molecules/collapse-group/collapse-group-people-contacts.twig
@@ -0,0 +1,124 @@
+{% if title is not defined %}{% set title = 'Contact information' %}{% endif %}
+{% if title %}
+<h4>{{title}}</h4>
+{% endif %}
+
+<button
+  class="collapse-title collapse-title-desktop"
+  type="button"
+  data-toggle="collapse"
+  data-target="#collapse-1"
+  aria-expanded="false"
+  aria-controls="collapse-1"
+>
+  <strong>Fonction précise</strong>, <span class="font-weight-normal">Nom du département</span>
+</button>
+
+<div class="collapse collapse-item show collapse-item-desktop" id="collapse-1">
+
+  <div class="row pt-2 pb-2">
+    <div class="col-md-5">
+      <p itemprop="location" itemscope itemtype="http://schema.org/Place">
+        <strong itemprop="name">EPFL PRES</strong><br/>
+        <span itemprop="address">
+          CE 3 316 (Centre Est)<br/>
+          Station 1<br/>
+          CH-1015 Lausanne
+        </span>
+      </p>
+    </div>
+    <div class="col-md-7">
+      <p>
+        <a href="tel:+41 21 666 77 88" class="btn btn-sm btn-secondary mb-2 align-baseline">+41 21 666 77 88</a>
+        <small class="align-baseline ml-2">Bureau principal: <a href="#">INN 019</a></small>
+        <br>
+        <a href="tel:+41 21 666 55 66" class="btn btn-sm btn-secondary mb-2 align-baseline">+41 21 666 55 66</a>
+        <small class="align-baseline ml-2">Bureau: <a href="#">INN 018</a></small>
+        <br>
+        <small>Unité: <a href="#">EPFL</a> &rsaquo; <a href="#">SI</a> &rsaquo; <a href="#">SI-EXOP</a> &rsaquo; <a href="#">EXAPP</a></small>
+      </p>
+    </div>
+    <div class="col-sm-12">
+      <p><span class="sr-only">Web site: </span><a href="https://www.epfl.ch/about/vice-presidencies/vice-presidencies/information-systems/">https://www.epfl.ch/about/vice-presidencies/vice-presidencies/information-systems/</a></p>
+    </div>
+  </div>
+
+</div>
+
+<button
+  class="collapse-title collapse-title-desktop collapsed"
+  type="button"
+  data-toggle="collapse"
+  data-target="#collapse-2"
+  aria-expanded="false"
+  aria-controls="collapse-2"
+>
+  <strong>Fonction précise</strong>, <span class="font-weight-normal">Nom du département</span>
+</button>
+
+<div class="collapse collapse-item collapse-item-desktop" id="collapse-2">
+
+  <div class="row pt-2 pb-2">
+    <div class="col-md-5">
+      <p itemprop="location" itemscope itemtype="http://schema.org/Place">
+        <strong itemprop="name">EPFL PRES</strong><br/>
+        <span itemprop="address">
+          CE 3 316 (Centre Est)<br/>
+          Station 1<br/>
+          CH-1015 Lausanne
+        </span>
+      </p>
+    </div>
+    <div class="col-md-7">
+      <p>
+        <a href="tel:+41 21 666 77 88" class="btn btn-sm btn-secondary mb-2 align-baseline">+41 21 666 77 88</a>
+        <small class="align-baseline ml-2">Bureau principal: <a href="#">INN 019</a></small>
+        <br>
+        <small>Unité: <a href="#">EPFL</a> &rsaquo; <a href="#">SI</a> &rsaquo; <a href="#">SI-EXOP</a> &rsaquo; <a href="#">EXAPP</a></small>
+      </p>
+    </div>
+    <div class="col-sm-12">
+      <p><span class="sr-only">Web site: </span><a href="https://rh.epfl.ch/">https://rh.epfl.ch/</a></p>
+    </div>
+  </div>
+
+</div>
+
+<button
+  class="collapse-title collapse-title-desktop collapsed"
+  type="button"
+  data-toggle="collapse"
+  data-target="#collapse-3"
+  aria-expanded="false"
+  aria-controls="collapse-3"
+>
+  <strong>Fonction précise</strong>, <span class="font-weight-normal">Nom du département</span>
+</button>
+
+<div class="collapse collapse-item collapse-item-desktop" id="collapse-3">
+
+  <div class="row pt-2 pb-2">
+    <div class="col-md-5">
+      <p itemprop="location" itemscope itemtype="http://schema.org/Place">
+        <strong itemprop="name">EPFL PRES</strong><br/>
+        <span itemprop="address">
+          CE 3 316 (Centre Est)<br/>
+          Station 1<br/>
+          CH-1015 Lausanne
+        </span>
+      </p>
+    </div>
+    <div class="col-md-7">
+      <p>
+        <a href="tel:+41 21 666 77 88" class="btn btn-sm btn-secondary mb-2 align-baseline">+41 21 666 77 88</a>
+        <small class="align-baseline ml-2">Bureau principal: <a href="#">INN 019</a></small>
+        <br>
+        <a href="tel:+41 21 666 55 66" class="btn btn-sm btn-secondary mb-2 align-baseline">+41 21 666 55 66</a>
+        <small class="align-baseline ml-2">Bureau: <a href="#">INN 018</a></small>
+        <br>
+        <small>Unité: <a href="#">EPFL</a> &rsaquo; <a href="#">SI</a> &rsaquo; <a href="#">SI-EXOP</a> &rsaquo; <a href="#">EXAPP</a></small>
+      </p>
+    </div>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/assets/components/molecules/collapse-group/collapse-group.yml b/assets/components/molecules/collapse-group/collapse-group.yml
index 01484163c..8895df224 100644
--- a/assets/components/molecules/collapse-group/collapse-group.yml
+++ b/assets/components/molecules/collapse-group/collapse-group.yml
@@ -3,6 +3,10 @@ name: collapse-group
 variants:
   - name: rich-content
     title: Collapse with rich content
+  - name: people-contacts
+    title: Collapse with contact info
+    notes: |
+      Used in People pages
 notes: |
   <br/>
 
diff --git a/assets/components/molecules/list-group/list-group-infoscience.twig b/assets/components/molecules/list-group/list-group-infoscience.twig
new file mode 100644
index 000000000..b2b4739c6
--- /dev/null
+++ b/assets/components/molecules/list-group/list-group-infoscience.twig
@@ -0,0 +1,32 @@
+<div class="list-group">
+  {% for i in 1..3 %}
+  <div class="list-group-item list-group-item-borderless list-group-item-infoscience">
+    <div class="record-content">
+      <p>Noms des auteurs: <strong>Titre de la publication lorem ipsum dolor sit amet consectetur adipscing elit</strong>; <i>Sous-titre lorem ipsum dolor sit amet consectetur adipscing elit</i>; Références, lieu de publication, etc.</p>
+    </div>
+    <div class="item-metadata">
+      <p class="item-date">18.11.2019</p>
+      <p class="item-links small">
+        <a href="#" target="_blank">Notice détaillée</a> – <a href="#" target="_blank">Texte intégral</a>
+      </p>
+    </div>
+  </div>
+  {% endfor %}
+  <!-- Publication with thumbnail image -->
+  <div class="list-group-item list-group-item-borderless list-group-item-infoscience has-thumbnail">
+    <div class="list-group-thumbnail">
+      {% include '@atoms/picture/picture-thumb-square.twig' %}
+    </div>
+    <div class="list-group-content">
+      <div class="record-content">
+        <p>Noms des auteurs: <strong>Titre de la publication lorem ipsum dolor sit amet consectetur adipscing elit</strong>; <i>Sous-titre lorem ipsum dolor sit amet consectetur adipscing elit</i>; Références, lieu de publication, etc.</p>
+      </div>
+      <div class="item-metadata">
+        <p class="item-date">18.11.2019</p>
+        <p class="item-links small">
+          <a href="#" target="_blank">Notice détaillée</a> – <a href="#" target="_blank">Texte intégral</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/assets/components/molecules/list-group/list-group.scss b/assets/components/molecules/list-group/list-group.scss
index a896420e4..5d6dab276 100644
--- a/assets/components/molecules/list-group/list-group.scss
+++ b/assets/components/molecules/list-group/list-group.scss
@@ -1,5 +1,14 @@
 @charset 'utf-8';
 
+.list-group-item {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+  
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
 .list-group-item-borderless {
   padding-right: 0;
   padding-left: 0;
@@ -14,6 +23,7 @@
 }
 
 .list-group {
+  
   .list-group-teaser {
     display: block;
     text-decoration: none;
@@ -29,7 +39,7 @@
     }
   }
 
-  .list-group-teaser-thumbnail {
+  .list-group-teaser-thumbnail{
     flex: 0 0 12rem;
     padding: 1rem;
     padding-top: 1rem;
@@ -106,4 +116,37 @@
       border: 1px solid $black !important;
     }
   }
+  
+  .item-metadata {
+    
+    p {
+      display: inline-block;
+      margin-bottom: 0;
+    }
+    
+    .item-date {
+      font-size: 1rem;
+      font-weight: bold;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+.list-group-item-infoscience {
+  
+  &.has-thumbnail {
+    display: flex;
+    
+    .list-group-thumbnail{
+      flex: 0 0 8rem;
+      margin-right: 1rem;
+      z-index: $zindex-1;
+    }
+    
+    .list-group-content {
+      flex: 0 1 100%;
+      z-index: $zindex-1;
+    }
+    
+  }
 }
diff --git a/assets/components/molecules/list-group/list-group.yml b/assets/components/molecules/list-group/list-group.yml
index 73c1666be..7ac59aad7 100644
--- a/assets/components/molecules/list-group/list-group.yml
+++ b/assets/components/molecules/list-group/list-group.yml
@@ -11,6 +11,10 @@ variants:
       The Borderless variant.
     background: ''
     wrapper: ''
+  - name: infoscience
+    title: Infoscience
+    notes: |
+      List of Infoscience publications.
   - name: teasers
     title: Teasers
     notes: |
diff --git a/assets/components/pages/people-detail/people-detail.scss b/assets/components/pages/people-detail/people-detail.scss
new file mode 100644
index 000000000..da58c88f7
--- /dev/null
+++ b/assets/components/pages/people-detail/people-detail.scss
@@ -0,0 +1,50 @@
+@charset 'utf-8';
+
+.people-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+}
+
+.people-basic-info {
+  flex-direction: row-reverse;
+}
+
+.people-contacts {
+  
+  hr {
+    border-color: $gray-300;
+    margin: 0;
+  }
+}
+
+.list-group + h3 {
+  margin-top: 2em;
+}
+
+.people-contents {
+  
+  .list-group {
+    
+    .list-group-item-borderless:not(.education-list):last-child {
+      border-bottom: 0;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.education-list {
+  display: grid;
+  grid-template-columns: minmax(20%,4fr) minmax(20%,3fr) minmax(20%,3fr) 8rem;
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  
+  p {
+    margin: 0;
+    padding-right: 1rem;
+    
+    &:last-child {
+      padding-right: 0;
+      text-align: right;
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/components/pages/people-detail/people-detail.twig b/assets/components/pages/people-detail/people-detail.twig
index adf526e9b..29ff6d9b2 100644
--- a/assets/components/pages/people-detail/people-detail.twig
+++ b/assets/components/pages/people-detail/people-detail.twig
@@ -41,66 +41,84 @@
     {# Header area #}
     <div class="row mt-5">
       <div class="col-md-12">
-        <div class="row">
+        <div class="row people-basic-info">
 
-          <div class="col-md-6">
+          <div class="col-md-4 col-lg-3 offset-lg-1 mb-3">
             {# Person avatar and buttons #}
             <div class="row">
-              <div class="col-sm-12 col-md-6 mb-3">
+              <div class="col-sm-12 mb-3">
                 <!-- Default profile picture markup -->
+                
                 <!--
-                {% include '@atoms/picture/picture-avatar.twig' %}
+                {% include '@atoms/picture/picture-portrait.twig' %}
                 -->
 
                 <!-- Placeholder when there is no profile picture -->
-                <img src="svg/avatar-placeholder.svg" alt="Avatar placeholder image" class="img-fluid rounded-circle bg-gray-100">
+                <img src="svg/portrait-placeholder.svg" alt="Avatar placeholder image" class="img-fluid bg-gray-100">
               </div>
             </div>
             <div class="row">
               <div class="col-sm-12">
-                <h4>Habilitation Dr. Ing</h4>
+                
                 <p>
-                  <a href="#" class="btn btn-sm btn-primary">prenom.nom@epfl.ch</a>
-                  <a href="#" class="btn btn-sm btn-secondary">+41 21 666 77 88</a>
-                  <a href="#" class="btn btn-sm btn-secondary">abbr.epfl.ch</a>
-                </p>
-              </div>
-              <div class="col-sm-12">
-                <p>
-                  {% include "@atoms/social-icon/social-icon-link.twig" with {
-                    discrete: true,
-                    icon: "icon-facebook"
-                  } %}
-                  {% include "@atoms/social-icon/social-icon-link.twig" with {
-                    discrete: true,
-                    icon: "icon-twitter"
-                  } %}
-                  {% include "@atoms/social-icon/social-icon-link.twig" with {
-                    discrete: true,
-                    icon: "icon-linkedin"
-                  } %}
+                  <small>
+                    <a href="#">Liste complète des adresses et fonctions</a>
+                    <br/>
+                    {% include "@atoms/icon/icon.twig" with { icon: 'icon-lock' } %}<a href="#">Données administratives</a>
+                  </small>
                 </p>
+                
               </div>
-              <div class="col-sm-12 my-3">
-                <h5>Disponibilités</h5>
+            </div>
+          </div>
+
+          <div class="people-contacts col-md-8">
+            <div class="row">
+              <div class="col-sm-12 mb-4">
+                <h2 class="people-title mb-3">Professeur titulaire, directeur du département XY</h2>
                 <p>
-                  Absente un vendredi sur deux.
+                  <a href="#" class="btn btn-sm btn-primary">prenom.nom@epfl.ch</a>
+                  <a href="#" class="btn btn-sm btn-secondary">+41 21 666 77 88</a>
+                  <a href="#" class="btn btn-sm btn-secondary">abbr.epfl.ch</a>
                 </p>
+                <p>Nationalité: suisse et allemande</p>
+                <div class="mt-1">
+                  <p>
+                    <a href="true" class="social-icon social-icon-details social-icon-linkedin social-icon-discrete" rel="nofollow" title="View on LinkedIn">
+                      <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-linkedin"></use>
+                      </svg>
+                      <span class="user">firstname.name</span>
+                    </a>
+                    <a href="true" class="social-icon social-icon-details social-icon-google social-icon-discrete" rel="nofollow" title="View on Google Scholar">
+                      <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-google"></use>
+                      </svg>
+                      <span class="user">firstname.name</span>
+                    </a>
+                    <a href="true" class="social-icon social-icon-details social-icon-discrete" rel="nofollow" title="View on Scopus">
+                      <span class="user">Scopus: 123456789</span>
+                    </a>
+                    <a href="true" class="social-icon social-icon-details social-icon-discrete" rel="nofollow" title="View on Orcid">
+                      <span class="user">Orcid: 123456789</span>
+                    </a>
+                    <a href="true" class="social-icon social-icon-details social-icon-discrete" rel="nofollow" title="View on ResearcherID">
+                      <span class="user">ResearcherID: 123456789</span>
+                    </a>
+                  </p>
+                </div>
               </div>
             </div>
-          </div>
-
-          <div class="col-md-6">
             {# Collapsible info #}
-            {% include '@molecules/collapse-group/collapse-group-rich-content.twig' with { title: false } %}
-
-            <p class="mt-4">
-              <small>
-                <a href="#">Liste complète des adresses et fonctions</a>
-                <br/>
-                {% include "@atoms/icon/icon.twig" with { icon: 'icon-lock' } %}<a href="#">Données administratives</a>
-              </small>
-            </p>
+            {% include '@molecules/collapse-group/collapse-group-people-contacts.twig' with { title: false } %}
+            <hr>
+            <div class="row">
+              <div class="people-extra-info col-sm-12 mt-5">
+                <p><strong>Informations complémentaires</strong></p>
+                <p>Disponibilités: absente un vendredi sur deux.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non.</p>
+              </div>
+            </div>
           </div>
 
         </div>
@@ -114,13 +132,13 @@
       <div class="container">
         <ul class="nav nav-tabs-light">
           <li class="nav-item">
-            <a class="nav-link active" href="#biography">Biography</a>
+            <a class="nav-link active" href="#biography">Biographie</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#publications">Publications</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#teaching-and-phd">Teaching & PhD</a>
+            <a class="nav-link" href="#teaching-and-phd">Teaching &amp; PhD</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#research">Research</a>
@@ -128,94 +146,152 @@
         </ul>
       </div>
     </nav>
-
-    <div class="container">
+    
+    <div class="container people-contents">
       {# Biography area #}
-      <div class="row mt-5">
-        <div class="col-md-7">
-          <h2 id="biography">Biography<span class="sr-only">of Xavier Alexandre</span></h2>
-          {% include '@atoms/collapse/collapse-partial.twig' %}
+      <div class="my-5">
+        <h2 id="biography">Biographie <span class="sr-only">de Xavier Alexandre</span></h2>
+        <!--{% include '@atoms/collapse/collapse-partial.twig' %} -->
+        <div class="biogaphy-content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros. Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus. Curabitur eu risus vel leo vehicula auctor. Aenean in velit nisi. Curabitur ultricies lacinia odio, sed egestas ex facilisis nec. Pellentesque et sagittis justo, id consequat odio. Nullam molestie sit amet eros quis consequat.</p>
+          <h3>Mission</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros.</p>
+          <p>Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus. Curabitur eu risus vel leo vehicula auctor. Aenean in velit nisi. Curabitur ultricies lacinia odio, sed egestas ex facilisis nec. Pellentesque et sagittis justo, id consequat odio. Nullam molestie sit amet eros quis consequat.</p>
+          <h3>Travail en cours</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor urna id nulla ornare, placerat gravida nulla tincidunt. Nullam scelerisque mauris neque. Quisque condimentum nisl dolor, id auctor lorem interdum non. Pellentesque ut ligula imperdiet, dictum risus eu, cursus eros. Curabitur elementum sapien nec velit egestas consequat. Ut fermentum dolor eu purus efficitur rutrum ac at purus.</p>
         </div>
-        <div class="col-md-5">
-          <h2>Fields of expertises<span class="sr-only">of Xavier Alexandre</span></h2>
+        <div class="mt-5">
+          <h3>Champs de compétences</h3>
           <p>
-            <a href="#" class="tag tag-primary">Expertise</a>
-            <a href="#" class="tag tag-primary">Expertise</a>
-            <a href="#" class="tag tag-primary">Expertise</a>
-            <a href="#" class="tag tag-primary">Expertise</a>
-            <a href="#" class="tag tag-primary">Expertise</a>
-            <a href="#" class="tag tag-primary">Expertise</a>
-            <a href="#" class="tag tag-primary">Expertise</a>
-            <a href="#" class="tag tag-primary">Expertise</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
+            <a href="#" class="tag tag-primary">Mot clé</a>
           </p>
+          {# Free content area #}
+          <p>architecture web, ergonomie, usability, ergonomie, design et architecture de l’information, cms, iconographie, graphisme web, charte graphique, design, logo, expertise communication web, html, css2, ui design</p>
         </div>
-      </div>
-
-      {# Publications #}
-      <div class="mt-5">
-        <h2 id="publications">Publications<span class="sr-only">of Xavier Alexandre</span></h2>
-        {% include '@molecules/list-group/list-group-borderless.twig' %}
-          <a class="btn btn-light btn-block btn-sm" aria-hidden="true" href="#publications">
-            Show all publications
-          </a>
-      </div>
-
-      {# Teaching and PHD area #}
-      <div class="mt-5">
-        <h2 id="teaching-and-phd">Teaching & PHD<span class="sr-only">of Xavier Alexandre</span></h2>
-        <div class="row mt-4">
-          <div class="col-md-4">
-            <h4>Teaching</h4>
-            <div class="card">
-              <ul class="list-group list-group-flush">
-                <li class="list-group-item">Computer science</li>
-                <li class="list-group-item">Communication systems</li>
-              </ul>
+        <div class="mt-5">
+          <h3>Formation</h3>
+          <div class="list-group">
+            <div class="list-group-item list-group-item-borderless education-list">
+              <p><strong>Dr. ès Sciences</strong></p>
+              <p>Microtechnologie</p>
+              <p>Université de Neuchâtel</p>
+              <p>2001</p>
+            </div>
+            <div class="list-group-item list-group-item-borderless education-list">
+              <p><strong>Master in Applied Sciences</strong></p>
+              <p>Engineering Physics</p>
+              <p>École Polytechnique de Montréal</p>
+              <p>1997</p>
             </div>
           </div>
-          <div class="col-md-4">
-            <h4>PhD Programs</h4>
-            <div class="card">
-              <ul class="list-group list-group-flush">
-                <li class="list-group-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, reiciendis!</li>
-                <li class="list-group-item">Lorem ipsum dolor sit amet, consectetur.</li>
-                <li class="list-group-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
-              </ul>
+        </div>
+        <div class="mt-5">
+          <h3>Parcours professionnel</h3>
+          <div class="list-group">
+            {% for i in 1..3 %}
+            <div class="list-group-item list-group-item-borderless">
+              <p><strong>Intitulé du poste</strong></p>
+              <p>Description du poste, lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel tortor nulla. In vehicula ante vel turpis rhoncus, ut malesuada magna tincidunt. Pellentesque purus sapien, porta ut aliquet et, sagittis ut diam.</p>
+              <div class="item-metadata">
+                <p class="item-date">2017 – 2019</p>
+                <p class="small">Nom de l'entreprise – <a href="#">Lien</a></p>
+              </div>
             </div>
+            {% endfor %}
           </div>
-          <div class="col-md-4">
-            <h4>PhD Students</h4>
-            <div class="mt-3">
-              {% include '@molecules/avatar-teaser/avatar-teaser.twig' %}
-              {% include '@molecules/avatar-teaser/avatar-teaser.twig' %}
-              {% include '@molecules/avatar-teaser/avatar-teaser.twig' %}
+        </div>
+        <div class="mt-5">
+          <h3>Récompenses</h3>
+          <div class="list-group">
+            {% for i in 1..4 %}
+            <div class="list-group-item list-group-item-borderless">
+              <p><strong>Titre de la récompense</strong></p>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel tortor nulla. In vehicula ante vel turpis rhoncus, ut malesuada magna tincidunt. Pellentesque purus sapien, porta ut aliquet et, sagittis ut diam.</p>
+              <div class="item-metadata">
+                <p class="item-date">12.11.2019</p>
+                <p class="small">Type: Lorem ipsum dolor – Source: Nom de l'institution – <a href="#">Lien</a></p>
+              </div>
             </div>
+            {% endfor %}
           </div>
         </div>
       </div>
-
-      <div class="mt-5">
-        <h2 id="courses">Courses<span class="sr-only">of Xavier Alexandre</span></h2>
-        {% include '@molecules/tabs/tabs-vertical.twig' %}
+    </div>
+    
+    <hr class="darker">
+    
+    <div class="container people-contents">
+      {# Publications #}
+      <div class="my-5">
+        <h2 id="publications">Publications <span class="sr-only">de Xavier Alexandre</span></h2>
+        <div class="mt-5">
+          <h3>Infoscience</h3>
+          {% include '@molecules/list-group/list-group-infoscience.twig' %}
+        </div>
+        <div class="mt-5">
+        <h3>Autres publications</h3>
+          {% include '@molecules/list-group/list-group-infoscience.twig' %}
+        </div>
       </div>
+    </div>
+    
+    <hr class="darker">
 
+    <div class="container people-contents">
+      {# Teaching and PHD area #}
+      <div class="my-5">
+        <h2 id="teaching-and-phd">Enseignement <span class="sr-only">of Xavier Alexandre</span></h2>
+        <div class="mt-5">
+          <h3 class="h4">Matières enseignées</h3>
+          <p>Informatique, Systèmes de communication, Architecture logiciels</p>
+          <h3 class="h4">Programmes doctoraux</h3>
+          <p>Doctoral program in computer and communication science, Doctoral program in Electrical Engineering</p>
+          <h3 class="h4">Doctorant·es</h3>
+          <p><a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a></p>
+          <h3 class="h4">Ancien·nes doctorant·es</h3>
+          <p><a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a>, <a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a>, <a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a>, <a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a>, <a href="#">Gwendoline Woodroff</a>, <a href="#">Hurlu Berlu</a>, <a href="#">Anne Hughes</a>, <a href="#">Martin Richard-Foy</a></p>
+        </div>
+        <div class="mt-5">
+          <h3>Cours <span class="sr-only">of Xavier Alexandre</span></h3>
+          <div class="list-group">
+            {% for i in 1..3 %}
+            <div class="list-group-item list-group-item-borderless">
+              <h4><a href="#">Nom du cours</a></h4>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel tortor nulla. In vehicula ante vel turpis rhoncus, ut malesuada magna tincidunt. Pellentesque purus sapien, porta ut aliquet et, sagittis ut diam.</p>
+            </div>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <hr class="darker">
 
+    <div class="container people-contents">
+      {# Research area #}
       <div class="mt-5">
-        <h2 id="research">Research<span class="sr-only">of Xavier Alexandre</span></h2>
-
-        <h3>Topics</h3>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-
-        <h3>Ongoing Research Projects</h3>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </p>
+        <h2 id="research">Recherche <span class="sr-only">of Xavier Alexandre</span></h2>
+        <div class="mt-5">
+          <h3>Sujets</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </p>
 
+          <h3>Projets de recherche en cours</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </div>
       </div>
-
     </div>
+    
   </div>
 {% endblock %}
 
diff --git a/assets/components/site.scss b/assets/components/site.scss
index 7a2a62746..f5b2d9ad6 100644
--- a/assets/components/site.scss
+++ b/assets/components/site.scss
@@ -38,7 +38,7 @@ body {
     & + h4,
     & + h5,
     & + h6 {
-      margin-top: 3rem;
+      margin-top: 1.5em;
     }
   }
   
@@ -46,6 +46,6 @@ body {
   h3 + h4,
   h4 + h5,
   h5 + h6 {
-    margin-top: 3rem;
+    margin-top: 1.5em;
   }
 }
\ No newline at end of file
diff --git a/assets/config/typography.scss b/assets/config/typography.scss
index 6b13d0db1..8eb9b6c11 100644
--- a/assets/config/typography.scss
+++ b/assets/config/typography.scss
@@ -23,7 +23,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin-bottom: .75rem;
+  margin-bottom: .75em;
 }
 
 h1,
diff --git a/assets/icons/google.svg b/assets/icons/google.svg
new file mode 100644
index 000000000..014b5ceb9
--- /dev/null
+++ b/assets/icons/google.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg>
\ No newline at end of file
diff --git a/assets/svg/portrait-placeholder.svg b/assets/svg/portrait-placeholder.svg
new file mode 100644
index 000000000..cdc3719e5
--- /dev/null
+++ b/assets/svg/portrait-placeholder.svg
@@ -0,0 +1 @@
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" width="253" height="360" viewBox="0 0 253 360"><title>portrait-placeholder</title><path d="M100.93,176.53S104,204,126.5,204s25.57-27.46,25.57-27.46,4.85,1,7.19-9.28c1.5-6.7-.5-8.49-1.76-8.49h-1.2c5.88-32.49-17.8-42.77-29.8-42.77s-35.68,10.28-29.8,42.76H95.5c-1.26,0-3.26,1.79-1.76,8.49C96.08,177.58,100.93,176.53,100.93,176.53ZM168.86,216c-20.26-3.89-24.34-8-25.1-11.64a29.14,29.14,0,0,1-34.52,0c-.74,3.64-4.84,7.72-25.1,11.64-20.85,4-20.57,21.18-20.57,24H189.43c0-2.85.28-20-20.57-24Z"/></svg>
\ No newline at end of file