diff --git a/src/assets/images/icons/icon_english.svg b/src/assets/images/icons/icon_english.svg
new file mode 100644
index 0000000..1c951d2
--- /dev/null
+++ b/src/assets/images/icons/icon_english.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640"><defs><clipPath id="a"><path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/></clipPath></defs><g clip-path="url(#a)" transform="translate(80) scale(.94)"><g stroke-width="1pt"><path fill="#006" d="M-256 0H768.02v512.01H-256z"/><path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/><path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/><path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/icons/icon_rocket.svg b/src/assets/images/icons/icon_rocket.svg
new file mode 100644
index 0000000..b66a5bd
--- /dev/null
+++ b/src/assets/images/icons/icon_rocket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="110" height="110"><defs id="defs3764"><style id="style3762">.cls-1{fill:#313535}</style></defs><path id="path3768" fill="#313535" d="M107 12.57C87.07 2.3 71.44 13.54 58.1 29.2c-3.2-.6-10.83-2.1-12.6-2.96l-14.4 16.5 5.76 2.43c3.3-4.6 10.7-9 14.9-8.1-3.05 4-6.05 8.17-8.92 12.16l9.02 10.5.17.17 9 10.5c4.36-2.22 8.88-4.52 13.33-6.95.15 4.32-5.27 10.86-10.24 13.46l1.5 6.02 18.48-11.7c-.6-1.87-.9-9.53-1-12.8 17.5-10.84 31-24.6 23.9-45.85zM96.5 32.94a8.67 8.67 0 1 1 .92-12.24 8.67 8.67 0 0 1-.9 12.27z" class="cls-1"/><path id="path3770" fill="#313535" d="M54.02 67c-.1-1.32-5.14-1.64-6.27-3.64-1.8-1.4-1.33-6.4-2.62-6.72-2.23-.53-5.5 1.56-13.4 8.65C23.82 72.37 1.3 96.97 1 103.47c6.48.68 34.22-17.85 42.4-24.58 8.2-6.72 10.8-9.63 10.62-11.9z" class="cls-1"/></svg>
\ No newline at end of file
diff --git a/src/assets/scss/base/_global.scss b/src/assets/scss/base/_global.scss
index 64db61b..297e5c2 100644
--- a/src/assets/scss/base/_global.scss
+++ b/src/assets/scss/base/_global.scss
@@ -16,10 +16,6 @@ figure {
 
 html {
   background: $background-color;
-  font-size: 75%;
-  @media (min-width: 768px) {
-    font-size: 100%;
-  }
 }
 // Typography
 ::selection {
diff --git a/src/assets/scss/includes/_header.scss b/src/assets/scss/includes/_header.scss
index 276ad9b..7b7dee8 100644
--- a/src/assets/scss/includes/_header.scss
+++ b/src/assets/scss/includes/_header.scss
@@ -1,76 +1,143 @@
 .site-header {
-  align-items: center;
   background: $brand-color;
   border-bottom: 1px solid $border-color;
-  display: flex;
-  flex-flow: row wrap;
-  padding: 20px 45px;
-  width: 100%;
 
-  .branding__content {
-    display: inline-block;
-    margin-bottom: 5px;
-    width: 120px;
-    @media (min-width: 48em) {
-      margin-bottom: 0;
-      width: 160px;
+  &.-yellow {
+    background-color: $brand-yellow;
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    width: 100%;
+    @media (min-width: em(768px)) {
+      flex-flow: row nowrap;
+      height: auto;
+      margin: 0 auto;
+      width: 100%;
     }
+  }
 
+  a {
+    color: $header-link-color;
+  }
+}
+
+.branding {
+  display: inline-block;
+  margin-bottom: em(5px);
+  height: em(40px);
+  width: em(120px);
+  @media (min-width: em(768px)) {
+    margin: 0 em(30px) 0 0;
+    height: em(60px);
+    width: em(160px);
+    max-width: em(255px);
+    flex: 1 1 em(200px);
+  }
+
+  &__content {
     &:hover {
       background: none;
       text-decoration: none;
     }
+  }
 
-    &__image {
-      display: block;
-      max-width: 100%;
+  &__image {
+    display: block;
+    margin: 0 auto;
+    height: em(40px);
+    width: em(120px);
+    max-width: 100%;
+    @media (min-width: em(768px)) {
+      margin: 0;
+      height: em(60px);
+      width: em(160px);
     }
   }
+}
 
-  a {
-    color: $header-link-color;
-  }
+.avatar {
+  border-radius: .2rem;
+  float: left;
+  height: 2rem;
+  margin-right: 1rem;
+  margin-top: -3px;
+  width: 2rem;
+}
 
-  .avatar {
-    border-radius: .2rem;
-    float: left;
-    height: 2rem;
-    margin-right: 1rem;
-    margin-top: -3px;
-    width: 2rem;
+.course-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  @media (min-width: em(768px)) {
+    flex-direction: row;
+    align-items: baseline;
+    flex: 1 1 em(400px);
   }
 
-  .site-title {
-    flex: auto;
-    float: left;
-    font-size: 1rem;
-    font-weight: bold;
-    line-height: 1.5;
-    text-align: center;
+  &__title {
+    $context: 24px;
+
+    font-size: em($context);
+    margin-bottom: em(20px, $context);
+    @media (min-width: em(768px)) {
+      margin-bottom: 0;
+    }
   }
 
-  .site-nav {
-    ul {
+  &__duration {
+    $context: 20px;
+
+    font-size: $context;
+    margin: 0;
+    &:before {
+      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PHBhdGggZD0iTTMwIDBDMTMuNDU4IDAgMCAxMy40NTggMCAzMHMxMy40NTggMzAgMzAgMzAgMzAtMTMuNDU4IDMwLTMwUzQ2LjU0MiAwIDMwIDB6bTAgNThDMTQuNTYxIDU4IDIgNDUuNDM5IDIgMzBTMTQuNTYxIDIgMzAgMnMyOCAxMi41NjEgMjggMjgtMTIuNTYxIDI4LTI4IDI4eiIvPjxwYXRoIGQ9Ik0zMCA2YTEgMSAwIDAgMC0xIDF2MjNIMTRhMSAxIDAgMSAwIDAgMmgxNmExIDEgMCAwIDAgMS0xVjdhMSAxIDAgMCAwLTEtMXoiLz48L3N2Zz4=");
       display: inline-block;
-      line-height: 1.5;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      text-align: center;
+      margin-right: em(10px, $context);
+      width: em(35px, $context);
+      vertical-align: middle;
     }
+  }
+}
+
+.links {
+  $margin: em(8px);
+
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: em(165px);
+  @media (min-width: em(768px)) {
+    margin: 0 0 0 em(30px);
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+    list-style: none;
+    text-align: center;
 
-    li {
+    &.-language:before {
+      content: "";
       display: inline-block;
-      margin-right: .4rem;
+      margin: 0 $margin;
+      width: em(1px);
+      height: em(24px);
+      background-color: $brand-black;
+      vertical-align: middle;
     }
   }
 
-  .branding,
-  .search-bar,
-  .site-nav {
-    @media (max-width: 480px) {
-      flex: 0 0 100%;
-      text-align: center;
+  &__item {
+    & + & {
+      margin-left: $margin;
     }
   }
 }
diff --git a/src/assets/scss/objects/_course-page.scss b/src/assets/scss/objects/_course-page.scss
index d8a4118..84bda1a 100644
--- a/src/assets/scss/objects/_course-page.scss
+++ b/src/assets/scss/objects/_course-page.scss
@@ -1,9 +1,9 @@
 .summary {
   flex: 1 1 em(200px);
-  margin: 0 0 em(70px);
+  margin: 0 0 em(30px);
   @media (min-width: em(768px)) {
-    max-width: em(370px);
-    margin: 0 em(70px) 0 0;
+    max-width: em(255px);
+    margin: 0 em(30px) 0 0;
   }
 
   &__steps {
@@ -28,18 +28,19 @@
     @media (min-width: em(768px)) {
       flex-direction: row;
       flex: 1 1 em(70px);
+      padding: 0;
       text-align: left;
     }
 
     & + & {
       @media (min-width: em(768px)) {
-        margin-top: em(60px);
+        margin-top: em(20px);
       }
     }
   }
 
   &__step-number {
-    $context: 40px;
+    $context: 32px;
 
     font-size: em($context);
     display: flex;
@@ -49,20 +50,22 @@
     flex: 0 0 auto;
     border: 2px solid $brand-yellow;
     border-radius: 50%;
-    width: em(70px, $context);
-    height: em(70px, $context);
+    width: em(50px, $context);
+    height: em(50px, $context);
     .-current & {
       background-color: $brand-yellow;
     }
   }
 
   &__step-title {
+    $context: 18px;
+
     color: #bbc1c4;
-    font-size: em(22px);
+    font-size: $context;
     line-height: 1.1;
-    margin: em(15px) 0 0;
+    margin: em(15px, $context) 0 0;
     @media (min-width: em(768px)) {
-      margin: 0 0 0 em(15px);
+      margin: 0 0 0 em(15px, $context);
     }
   }
 }
@@ -75,9 +78,17 @@
 
   &__content {
     flex: 1 1 em(400px);
+    margin-bottom: em(60px);
     width: 100%;
   }
 
+  &__chapter {
+    $context: 20px;
+
+    font-size: em($context);
+    margin-bottom: em(20px, $context);
+  }
+
   &__navigation {
     display: flex;
     flex-direction: row;
@@ -85,6 +96,8 @@
   }
 
   &__button {
+    position: fixed;
+    bottom: em(20px);
     background-color: $brand-yellow;
     border: none;
     border-radius: 30%;
@@ -96,19 +109,11 @@
 
     &.-previous {
       transform: rotate(180deg);
+      left: em(20px);
     }
-  }
-
-  &__duration {
-    $context: 20px;
 
-    font-size: $context;
-    &:before {
-      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PHBhdGggZD0iTTMwIDBDMTMuNDU4IDAgMCAxMy40NTggMCAzMHMxMy40NTggMzAgMzAgMzAgMzAtMTMuNDU4IDMwLTMwUzQ2LjU0MiAwIDMwIDB6bTAgNThDMTQuNTYxIDU4IDIgNDUuNDM5IDIgMzBTMTQuNTYxIDIgMzAgMnMyOCAxMi41NjEgMjggMjgtMTIuNTYxIDI4LTI4IDI4eiIvPjxwYXRoIGQ9Ik0zMCA2YTEgMSAwIDAgMC0xIDF2MjNIMTRhMSAxIDAgMSAwIDAgMmgxNmExIDEgMCAwIDAgMS0xVjdhMSAxIDAgMCAwLTEtMXoiLz48L3N2Zz4=");
-      display: inline-block;
-      margin-right: em(10px, $context);
-      width: em(35px, $context);
-      vertical-align: middle;
+    &.-next {
+      right: em(20px);
     }
   }
 
diff --git a/src/assets/scss/objects/_layout.scss b/src/assets/scss/objects/_layout.scss
index b83b53c..fd426e4 100644
--- a/src/assets/scss/objects/_layout.scss
+++ b/src/assets/scss/objects/_layout.scss
@@ -11,13 +11,9 @@
 
 .container {
   margin: 0 auto;
-  padding: 2.5em;
+  padding: em(20px);
   max-width: em($max-width-layout);
 
-  @media (min-width: em(480px)) {
-    padding: em(45px);
-  }
-
   @media (min-width: em(1360px)) {
     padding-left: 0;
     padding-right: 0;
diff --git a/src/containers/Course.jsx b/src/containers/Course.jsx
index 44624fc..e093db4 100644
--- a/src/containers/Course.jsx
+++ b/src/containers/Course.jsx
@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 
 import Summary from '../components/Summary';
 
-import clock from '../assets/images/icons/icon_clock.svg';
 import arrow from '../assets/images/icons/icon_arrow.svg';
 
 import {
@@ -140,10 +139,7 @@ export class Course extends React.Component {
 
   render() {
     const {
-      course: {
-        duration = {},
-        stepTitles = [],
-      } = {},
+      course: { stepTitles = [] } = {},
       currentStep,
     } = this.state;
 
@@ -162,7 +158,9 @@ export class Course extends React.Component {
         />
 
         <article className="course__content">
-          <p className="course__duration" data-icon={clock}>{duration.total} minutes</p>
+          {stepTitles.length > 0 && (
+            <h1 className="course__chapter">{currentStep + 1} - {stepTitles[currentStep]}</h1>
+          )}
           <div className="course__text">{step.map((renderer, key) => renderer({ key }))}</div>
           <div className="course__navigation">
             <button
diff --git a/src/containers/Header.jsx b/src/containers/Header.jsx
index eb4eaec..0589323 100644
--- a/src/containers/Header.jsx
+++ b/src/containers/Header.jsx
@@ -1,52 +1,81 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import cx from 'classnames';
 
+import clock from '../assets/images/icons/icon_clock.svg';
+import rocket from '../assets/images/icons/icon_rocket.svg';
 import logo from '../assets/images/logo_eleven_codelabs.png';
 
 const mapStateToProps = ({
   currentCourse,
-  currentStepIndex,
 }) => ({
   currentCourse,
-  currentStepIndex,
 });
 
 export class Header extends React.Component {
   static propTypes = {
     currentCourse: PropTypes.shape(),
-    currentStepIndex: PropTypes.number,
   };
 
   static defaultProps = {
     currentCourse: {},
-    currentStepIndex: null,
   };
 
   render() {
     const {
-      currentCourse: {
-        title = '',
-        stepTitles = [],
-      },
-      currentStepIndex,
+      currentCourse,
     } = this.props;
 
+    const headerClasses = cx('site-header', {
+      '-yellow': currentCourse.title,
+    });
+
     return (
-      <nav className="site-header">
-        <div className="branding">
-          <a href="/" className="branding__content">
-            <img className="branding__image" alt="Eleven Codelabs" src={logo}></img>
-          </a>
-        </div>
+      <header className={headerClasses}>
+        <div className="container site-header__content">
+          <div className="branding">
+            <a href="/" className="branding__content">
+              <img className="branding__image" alt="Eleven Codelabs" src={logo} />
+            </a>
+          </div>
+
+          <div className="course-header">
+            {currentCourse.title && <h2 className="course-header__title">{currentCourse.title}</h2>}
+            {currentCourse.time && <p className="course-header__duration" data-icon={clock}>{currentCourse.time} minutes</p>}
+          </div>
+
+          <div className="links">
+            <ul className="links__list -social">
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://blog.eleven-labs.com/feed.xml" title="Ajoutez-nous à votre veille" rel="nofollow noreferrer"><i className="fa fa-fw fa-rss"></i></a>
+              </li>
+
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://github.com/eleven-labs" title="Suivez-nous sur GitHub" rel="nofollow noreferrer"><i className="fa fa-fw fa-github"></i></a>
+              </li>
+
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://twitter.com/eleven_labs" title="Suivez-nous sur Twitter" rel="nofollow noreferrer"><i className="fa fa-fw fa-twitter"></i></a>
+              </li>
+
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://www.facebook.com/11Labs" title="Suivez-nous sur Facebook" rel="nofollow noreferrer"><i className="fa fa-fw fa-facebook"></i></a>
+              </li>
+
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://fr.linkedin.com/company/eleven-labs" title="Suivez-nous sur LinkedIn" rel="nofollow noreferrer"><i className="fa fa-fw fa-linkedin"></i></a>
+              </li>
 
-        <div className="site-title">
-          <h2>{title}</h2>
-          {stepTitles.length > 0 && (
-            <h3>{currentStepIndex + 1} - {stepTitles[currentStepIndex]}</h3>
-          )}
+              <li className="links__item">
+                <a className="no-link-style tracked-link" href="https://eleven-labs.com" title="Découvrez Eleven Labs" rel="nofollow">
+                  <img className="corporate-logo" src={rocket} alt="Découvrez Eleven Labs" height="19"></img>
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
-      </nav>
+      </header>
     );
   }
 }