diff --git a/backend/backend/metric.py b/backend/backend/metric.py
index c9c5615a..e0ab48f0 100644
--- a/backend/backend/metric.py
+++ b/backend/backend/metric.py
@@ -106,11 +106,11 @@ def _rem_onset(self):
         return rem_latency + self.bedtime
 
     def _initialize_sleep_offset(self):
-        if not self.has_slept:
-            sleep_offset = None
-        else:
+        if self.has_slept:
             sleep_nb_epochs = (self.sleep_indexes[-1] + 1) if len(self.sleep_indexes) else len(self.sleep_stages)
             sleep_offset = sleep_nb_epochs * EPOCH_DURATION + self.bedtime
+        else:
+            sleep_offset = None
 
         self._sleep_offset = sleep_offset
 
@@ -118,8 +118,14 @@ def _initialize_sleep_latency(self):
         self._sleep_latency = self._get_latency_of_stage(self.is_sleeping_stages)
 
     def _initialize_rem_latency(self):
-        """Time it took to enter REM stage"""
-        self._rem_latency = self._get_latency_of_stage(self.sleep_stages == SleepStage.REM.name)
+        """Time from the sleep onset to the first epoch of REM sleep"""
+        if self.has_slept:
+            bedtime_to_rem_duration = self._get_latency_of_stage(self.sleep_stages == SleepStage.REM.name)
+            rem_latency = bedtime_to_rem_duration - self._sleep_latency if bedtime_to_rem_duration is not None else None
+        else:
+            rem_latency = None
+
+        self._rem_latency = rem_latency
 
     def _initialize_transition_based_metrics(self):
         consecutive_stages_occurences = Counter(zip(self.sleep_stages[:-1], self.sleep_stages[1:]))
diff --git a/backend/tests/test_response.py b/backend/tests/test_response.py
index 44cfee2e..dcd4e905 100644
--- a/backend/tests/test_response.py
+++ b/backend/tests/test_response.py
@@ -157,7 +157,7 @@ class TestReportLatenciesOnset():
             dict(
                 sequence=['W', 'N1', 'N2', 'N1', 'REM', 'W'],
                 test_rem=True,
-                latency=4 * EPOCH_DURATION,
+                latency=3 * EPOCH_DURATION,
             ), dict(
                 sequence=['W', 'W', 'N1', 'W', 'N1', 'W'],
                 test_rem=False,
@@ -189,7 +189,7 @@ def test_sequence_has_no_stage(self, sequence, test_rem):
         self.assert_latency_equals_expected(expected_latency, expected_onset, sequence, test_rem)
 
     def test_sequence_ends_with_stage(self, sequence, test_rem):
-        expected_latency = EPOCH_DURATION * (len(sequence) - 1)
+        expected_latency = EPOCH_DURATION * (len(sequence) - 1) if not test_rem else 0
         expected_onset = expected_latency + self.MOCK_REQUEST.bedtime
         self.assert_latency_equals_expected(expected_latency, expected_onset, sequence, test_rem)
 
diff --git a/web/src/assets/data/predicted_william_cyton.json b/web/src/assets/data/predicted_william_cyton.json
index 475a176c..34b61d42 100644
--- a/web/src/assets/data/predicted_william_cyton.json
+++ b/web/src/assets/data/predicted_william_cyton.json
@@ -1,4 +1,35 @@
 {
+  "subject": {
+    "age": 30,
+    "sex": "M"
+  },
+  "metadata": {
+    "bedTime": 1582441980,
+    "sessionEndTime": 1582473261.596,
+    "sessionStartTime": 1582436280,
+    "totalBedTime": 28260,
+    "totalSessionTime": 36981.596,
+    "wakeUpTime": 1582470240
+  },
+  "report": {
+    "N1Time": 630,
+    "N2Time": 11280,
+    "N3Time": 7530,
+    "REMTime": 6150,
+    "WASO": 960,
+    "WTime": 2310,
+    "awakenings": 4,
+    "efficientSleepTime": 25950,
+    "remLatency": 5940,
+    "remOnset": 1582447920,
+    "sleepEfficiency": 0.9182590233545648,
+    "sleepLatency": 1260,
+    "sleepOffset": 1582470150,
+    "sleepOnset": 1582443240,
+    "sleepTime": 26910,
+    "stageShifts": 43,
+    "wakeAfterSleepOffset": 90
+  },
   "epochs": {
     "timestamps": [
       1582441980,
diff --git a/web/src/components/floating_card.js b/web/src/components/floating_card.js
index 0c57d0d5..8aec7a4e 100644
--- a/web/src/components/floating_card.js
+++ b/web/src/components/floating_card.js
@@ -3,16 +3,14 @@ import PropTypes from 'prop-types';
 import { Card, Col, Row } from 'reactstrap';
 
 const FloatingCard = ({ cardClassName, headerText, bodyText, button }) => (
-  <Card className={`${cardClassName} shadow-lg border-0 h-100 card-lift--hover`}>
-    <div className="p-5 h-100">
-      <Row className="align-items-center h-100">
-        <Col className="h-100 d-flex flex-column">
-          <h3 className="text-white">{headerText}</h3>
-          <p className="lead text-white text-justify mt-3">{bodyText}</p>
-          <Row className="justify-content-center mt-auto">{button}</Row>
-        </Col>
-      </Row>
-    </div>
+  <Card className={`${cardClassName} p-5 h-100 shadow-lg border-0 h-100 card-lift--hover`}>
+    <Row className="align-items-center h-100">
+      <Col className="h-100 d-flex flex-column">
+        {headerText !== null && <h3 className="text-white">{headerText}</h3>}
+        <p className="lead text-white text-justify mt-3">{bodyText}</p>
+        <Row className="justify-content-center mt-auto">{button}</Row>
+      </Col>
+    </Row>
   </Card>
 );
 
diff --git a/web/src/components/footer/index.js b/web/src/components/footer/index.js
index 7cc0e156..e5d73495 100644
--- a/web/src/components/footer/index.js
+++ b/web/src/components/footer/index.js
@@ -37,7 +37,7 @@ PlatformButton.defaultProps = {
 const Copyright = () => {
   return (
     <div className="copyright">
-      © {new Date().getFullYear()}{' '}
+      © {new Date().getFullYear()}&nbsp;
       <a href="http://polycortex.polymtl.ca/" target="_blank" rel="noopener noreferrer">
         {text['footer_copyright_polycortex']}
       </a>
diff --git a/web/src/d3/evolving_chart/chart_states.js b/web/src/d3/evolving_chart/chart_states.js
index 273c88fe..e660f6a8 100644
--- a/web/src/d3/evolving_chart/chart_states.js
+++ b/web/src/d3/evolving_chart/chart_states.js
@@ -2,7 +2,7 @@ import * as d3 from 'd3';
 import _ from 'lodash';
 import { Duration } from 'luxon';
 
-import { BAR_HEIGHT, DIMENSION } from './constants';
+import { BAR_HEIGHT, DIMENSION, HOVERED_RECT_OPACITY } from './constants';
 import { EPOCH_DURATION_MS, TRANSITION_TIME_MS, STAGES_ORDERED } from '../constants';
 
 import '../style.css';
@@ -11,6 +11,8 @@ export const createTimelineChartCallbacks = (g, xTime, xTimeAxis, color, tooltip
   Object({
     fromInitial: () => {
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
+      g.selectAll('text.proportion').remove();
+      d3.selectAll('div.tooltip').style('opacity', 0);
 
       setAttrOnAnnotationRects(annotationRects, xTime, 0, color, tooltip);
 
@@ -21,8 +23,9 @@ export const createTimelineChartCallbacks = (g, xTime, xTimeAxis, color, tooltip
     },
     fromInstance: () => {
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
-
+      g.selectAll('text.proportion').remove();
       g.selectAll('.y.visualization__axis').remove();
+      d3.selectAll('div.tooltip').style('opacity', 0);
 
       setAttrOnAnnotationRects(annotationRects, xTime, 0, color, tooltip);
 
@@ -34,10 +37,12 @@ export const createInstanceChartCallbacks = (g, data, xTime, xTimeAxis, yAxis, c
   Object({
     fromTimeline: () => {
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
+      g.selectAll('text.proportion').remove();
+      d3.selectAll('div.tooltip').style('opacity', 0);
 
       createVerticalAxis(g, yAxis, color);
       transitionHorizontalAxis(g, STAGES_ORDERED.length * BAR_HEIGHT);
-      setAttrOnAnnotationRects(annotationRects, xTime, getVerticalPositionCallback, color, tooltip);
+      setAttrOnAnnotationRects(annotationRects, xTime, getVerticalPositionCallback(), color, tooltip);
     },
     fromBarChart: () => {
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
@@ -45,56 +50,52 @@ export const createInstanceChartCallbacks = (g, data, xTime, xTimeAxis, yAxis, c
       annotationRects.attr('x', xProportionCallback).attr('width', ({ end, start }) => xTime(end) - xTime(start));
 
       g.selectAll('text.proportion').remove();
+      d3.selectAll('div.tooltip').style('opacity', 0);
 
       g.select('.x.visualization__axis').interrupt().transition().call(xTimeAxis);
       transitionHorizontalAxis(g, STAGES_ORDERED.length * BAR_HEIGHT);
 
-      setAttrOnAnnotationRects(annotationRects, xTime, getVerticalPositionCallback, color, tooltip);
+      setAttrOnAnnotationRects(annotationRects, xTime, getVerticalPositionCallback(), color, tooltip);
     },
   });
 
 export const createBarChartCallbacks = (g, data, xAxisLinear, yAxis, color, tip) =>
   Object({
     fromInstance: () => {
-      const { firstStageIndexes, stageTimeProportions } = data;
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
       const xProportionCallback = getOffsetSleepStageProportionCallback(data);
 
+      d3.selectAll('div.tooltip').style('opacity', 0);
       g.select('.x.visualization__axis').transition().call(xAxisLinear);
       transitionHorizontalAxis(g, STAGES_ORDERED.length * BAR_HEIGHT);
 
-      setTooltip(annotationRects, tip)
+      setTooltip(annotationRects, tip, getVerticalPositionCallback(20))
         .transition()
         .duration(TRANSITION_TIME_MS)
-        .attr('y', getVerticalPositionCallback)
+        .attr('y', getVerticalPositionCallback())
         .attr('x', xProportionCallback)
-        .on('end', () => {
-          // Only keep the first rectangle of each stage to be visible
-          g.selectAll('.rect-stacked')
-            .attr('x', 0)
-            .attr('width', getFirstRectangleProportionWidthCallback(firstStageIndexes, stageTimeProportions));
-          createProportionLabels(g, data);
-        });
+        .on('end', () => setFirstRectangleToBeAsWideAsStageProportion(data, g));
     },
     fromStackedBarChart: () => {
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
       g.selectAll('text.proportion').remove();
+      d3.selectAll('div.tooltip').style('opacity', 0);
 
       createVerticalAxis(g, yAxis, color);
       transitionHorizontalAxis(g, STAGES_ORDERED.length * BAR_HEIGHT);
 
-      annotationRects
+      setTooltip(annotationRects, tip, getVerticalPositionCallback(20))
         .transition()
         .duration(TRANSITION_TIME_MS / 2)
         .attr('y', (d) => BAR_HEIGHT * STAGES_ORDERED.indexOf(d.stage))
         .transition()
         .duration(TRANSITION_TIME_MS / 2)
         .attr('x', 0)
-        .on('end', () => createProportionLabels(g, data));
+        .on('end', () => setFirstRectangleToBeAsWideAsStageProportion(data, g));
     },
   });
 
-export const createStackedBarChartCallbacks = (g, data) =>
+export const createStackedBarChartCallbacks = (g, data, tip) =>
   Object({
     fromBarChart: () => {
       const { annotations, firstStageIndexes, stageTimeProportions, epochs } = data;
@@ -103,6 +104,8 @@ export const createStackedBarChartCallbacks = (g, data) =>
         (getCumulativeProportionOfNightAtStart(stage, stageTimeProportions) + stageTimeProportions[stage] / 2) *
         DIMENSION.WIDTH;
       const annotationRects = g.selectAll('.rect-stacked').interrupt();
+      setTooltip(annotationRects, tip, 0);
+      d3.selectAll('div.tooltip').style('opacity', 0);
 
       g.selectAll('.y.visualization__axis').remove();
       g.selectAll('text.proportion').remove();
@@ -137,28 +140,42 @@ export const createStackedBarChartCallbacks = (g, data) =>
     },
   });
 
-const setAttrOnAnnotationRects = (annotationRects, x, yPosition, color, tooltip) =>
-  setTooltip(annotationRects, tooltip)
+const setAttrOnAnnotationRects = (annotationRects, x, yBarPosition, color, tooltip) =>
+  setTooltip(annotationRects, tooltip, yBarPosition)
     .attr('height', BAR_HEIGHT)
     .transition()
     .duration(TRANSITION_TIME_MS)
     .attr('x', ({ start }) => x(start))
-    .attr('y', yPosition)
+    .attr('y', yBarPosition)
     .attr('width', ({ end, start }) => x(end) - x(start))
     .attr('fill', ({ stage }) => color(stage));
 
-const setTooltip = (element, tooltip) =>
+const setFirstRectangleToBeAsWideAsStageProportion = (data, g) => {
+  const { firstStageIndexes, stageTimeProportions } = data;
+
+  // Only keep the first rectangle of each stage to be visible
+  g.selectAll('.rect-stacked')
+    .attr('x', 0)
+    .attr('width', getFirstRectangleProportionWidthCallback(firstStageIndexes, stageTimeProportions));
+  createProportionLabels(g, data);
+};
+
+const setTooltip = (element, tooltip, y) =>
   element
-    .on('mouseover', function (d) {
-      tooltip.show(d, this);
-      d3.select(this).style('opacity', 0.8);
+    .on('mouseover', function () {
+      tooltip.mouseover();
+      d3.select(this).style('stroke', 'black').style('opacity', HOVERED_RECT_OPACITY);
+    })
+    .on('mousemove', function (d) {
+      tooltip.mousemove(d, d3.mouse(this), `${y === 0 ? 0 : y(d)}px`);
     })
     .on('mouseout', function () {
-      tooltip.hide();
-      d3.select(this).style('opacity', 1);
+      tooltip.mouseleave();
+      d3.select(this).style('stroke', 'none').style('opacity', 1);
     });
 
-const getVerticalPositionCallback = (d) => BAR_HEIGHT * STAGES_ORDERED.indexOf(d.stage);
+const getVerticalPositionCallback = (cardOffset = 0) => (d) =>
+  BAR_HEIGHT * STAGES_ORDERED.indexOf(d.stage) + cardOffset;
 
 const getFirstRectangleProportionWidthCallback = (firstStageIndexes, stageTimeProportions) => ({ stage }, i) =>
   i === firstStageIndexes[stage] ? stageTimeProportions[stage] * DIMENSION.WIDTH : 0;
diff --git a/web/src/d3/evolving_chart/constants.js b/web/src/d3/evolving_chart/constants.js
index 58ef935f..9ab55272 100644
--- a/web/src/d3/evolving_chart/constants.js
+++ b/web/src/d3/evolving_chart/constants.js
@@ -16,3 +16,4 @@ export const DIMENSION = {
 };
 
 export const BAR_HEIGHT = DIMENSION.HEIGHT / STAGES_ORDERED.length;
+export const HOVERED_RECT_OPACITY = 0.7;
diff --git a/web/src/d3/evolving_chart/evolving_chart.js b/web/src/d3/evolving_chart/evolving_chart.js
index 02946cf0..e553b637 100644
--- a/web/src/d3/evolving_chart/evolving_chart.js
+++ b/web/src/d3/evolving_chart/evolving_chart.js
@@ -54,7 +54,10 @@ const bindAnnotationsToRects = (g, annotations) =>
   g.selectAll('.rect').data(annotations).enter().append('rect').attr('class', 'rect-stacked');
 
 const createEvolvingChart = (containerNode, data) => {
-  const svg = d3.select(containerNode).attr('viewBox', `0, 0, ${CANVAS_DIMENSION.WIDTH}, ${CANVAS_DIMENSION.HEIGHT}`);
+  const svg = d3
+    .select(containerNode)
+    .append('svg')
+    .attr('viewBox', `0, 0, ${CANVAS_DIMENSION.WIDTH}, ${CANVAS_DIMENSION.HEIGHT}`);
   const { xTime, xLinear, y, colors } = initializeScales();
   const { xTimeAxis, xLinearAxis, yAxis } = initializeAxes(xTime, xLinear, y);
   const g = createDrawingGroup(svg);
@@ -63,7 +66,7 @@ const createEvolvingChart = (containerNode, data) => {
   data = preprocessData(data);
 
   setDomainOnScales(xTime, xLinear, y, colors, data.epochs);
-  const { barToolTip, stackedToolTip } = initializeTooltips(svg, data);
+  const { barToolTip, stackedToolTip } = initializeTooltips(containerNode, data);
   bindAnnotationsToRects(g, data.annotations);
 
   timelineChartCallbacks = createTimelineChartCallbacks(g, xTime, xTimeAxis, colors, barToolTip);
@@ -72,7 +75,7 @@ const createEvolvingChart = (containerNode, data) => {
 
   barChartCallbacks = createBarChartCallbacks(g, data, xLinearAxis, yAxis, colors, stackedToolTip);
 
-  stackedBarChartCallbacks = createStackedBarChartCallbacks(g, data);
+  stackedBarChartCallbacks = createStackedBarChartCallbacks(g, data, stackedToolTip);
 
   timelineChartCallbacks.fromInitial();
 };
diff --git a/web/src/d3/evolving_chart/mouse_over.js b/web/src/d3/evolving_chart/mouse_over.js
index e9587828..9c92d1e0 100644
--- a/web/src/d3/evolving_chart/mouse_over.js
+++ b/web/src/d3/evolving_chart/mouse_over.js
@@ -1,24 +1,41 @@
-import tip from 'd3-tip';
-import './style.css';
+import * as d3 from 'd3';
 
 import { EPOCH_DURATION_MS } from '../constants';
 import { DateTime, Duration } from 'luxon';
 
-export const initializeTooltips = (svg, data) => {
-  const barToolTip = initializeTooltip(svg, getBarToolTipText);
-  const stackedToolTip = initializeTooltip(svg, (d) =>
+export const initializeTooltips = (containerNode, data) => {
+  const stackedToolTip = initializeTooltip(containerNode, (d) =>
     getStackedToolTipText(d, data.stageTimeProportions, data.epochs.length),
   );
+  const barToolTip = initializeTooltip(containerNode, getBarToolTipText);
 
   return { barToolTip, stackedToolTip };
 };
 
-const initializeTooltip = (svg, getToolTipText) => {
-  const tooltip = tip().attr('class', 'evolving_chart__tooltip').offset([-10, 0]);
-  svg.call(tooltip);
-  tooltip.html(getToolTipText);
+const initializeTooltip = (containerNode, getToolTipText) => {
+  var tooltip = d3
+    .select(containerNode)
+    .append('div')
+    .attr('class', 'tooltip')
+    .attr('border-radius', '2px')
+    .style('background-color', 'rgba(235, 235, 235, 0.9)')
+    .style('opacity', 0)
+    .style('position', 'absolute');
+  var tooltipText = tooltip.append('div').style('padding', '1em').style('font-size', '1em');
 
-  return tooltip;
+  var mouseover = (d) => {
+    tooltip.style('opacity', 1);
+  };
+  var mousemove = function (d, mouse, yPosition) {
+    // localize d3.mouse into viewbox: https://stackoverflow.com/a/11936865
+    tooltip.style('opacity', 1).style('left', `${mouse[0]}px`).style('top', yPosition);
+    tooltipText.html(() => getToolTipText(d));
+  };
+  var mouseleave = function () {
+    tooltip.style('opacity', 0).style('left', `0px`).style('top', '0px');
+  };
+
+  return { mouseover, mousemove, mouseleave };
 };
 
 const getBarToolTipText = (d) => `Stage : <strong> ${d.stage} </strong> <br>
diff --git a/web/src/d3/evolving_chart/style.css b/web/src/d3/evolving_chart/style.css
deleted file mode 100644
index 7654106f..00000000
--- a/web/src/d3/evolving_chart/style.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.evolving_chart__tooltip {
-  line-height: 1;
-  padding: 12px;
-  border-radius: 2px;
-  color: #0d0d0d;
-  background: rgba(235, 235, 235, 0.9);
-}
diff --git a/web/src/d3/spectrogram/constants.js b/web/src/d3/spectrogram/constants.js
index 9b1a7f8d..8b2b7198 100644
--- a/web/src/d3/spectrogram/constants.js
+++ b/web/src/d3/spectrogram/constants.js
@@ -3,7 +3,7 @@ export const NB_SPECTROGRAM = 2;
 export const FREQUENCY_KEY = 'frequencies';
 export const HYPNOGRAM_KEY = 'epochs';
 export const NB_POINTS_COLOR_INTERPOLATION = 3;
-export const NOT_HIGHLIGHTED_RECTANGLE_OPACITY = 0.5;
+export const NOT_HIGHLIGHTED_RECTANGLE_OPACITY = 0.7;
 export const CANVAS_WIDTH_TO_HEIGHT_RATIO = 700 / 1000; // width to height ratio
 export const CANVAS_HEIGHT_WINDOW_FACTOR = 0.8;
 export const MARGIN = {
diff --git a/web/src/views/analyze_sleep/waiting_for_server/index.js b/web/src/views/analyze_sleep/waiting_for_server/index.js
index 109df4cc..bc193fa0 100644
--- a/web/src/views/analyze_sleep/waiting_for_server/index.js
+++ b/web/src/views/analyze_sleep/waiting_for_server/index.js
@@ -32,7 +32,7 @@ const WaitingForServer = () => {
           <ListGroup flush>
             {assets.map((asset) => (
               <ListGroupItem key={asset.name} active={asset.currentOs} tag="a" href={asset.url}>
-                <i class="fas fa-download fa-lg mr-3" />
+                <i className="fas fa-download fa-lg mr-3" />
                 <span>{asset.name}</span>
               </ListGroupItem>
             ))}
diff --git a/web/src/views/home/hero/hero.js b/web/src/views/home/hero/hero.js
index 804ce025..87773225 100644
--- a/web/src/views/home/hero/hero.js
+++ b/web/src/views/home/hero/hero.js
@@ -38,7 +38,7 @@ class Hero extends React.Component {
                     <Row className="align-items-center justify-content-center mt-5 mb-4">
                       <RecordMyOwnSleepButton className="ml-3 mb-3 mb-md-0 hero__action_button" color="warning" />
                       <span className="mr-4" />
-                      <PreviewButton className="btn-white hero__action_button mr-3 mb-3 mb-sm-0" />
+                      <PreviewButton className="btn-white btn-lg hero__action_button mr-3 mb-3 mb-sm-0" />
                     </Row>
                     <div className="mt-4">
                       <small className="text-muted font-weight-bold mb-0 mr-2">* a project made by</small>
diff --git a/web/src/views/performance/index.js b/web/src/views/performance/index.js
index 027d4e27..ff4a640b 100644
--- a/web/src/views/performance/index.js
+++ b/web/src/views/performance/index.js
@@ -68,7 +68,7 @@ const Performance = () => {
           <li>
             First, we will check how our classifier’s scoring agrees with the scoring within the Physionet's Sleep-EDF
             dataset. Of course, we will perform this agreement test on a subset of EEG data that was never trained on.
-            This subset is composed of full nights of sleep coming from five subject of a different age group.{' '}
+            This subset is composed of full nights of sleep coming from five subject of a different age group.&nbsp;
           </li>
           <li>
             Then, we will check how this classifier performs on a full night recorded on one of our members. In order to
diff --git a/web/src/views/record_my_sleep/sections/electrodes_application_section/index.js b/web/src/views/record_my_sleep/sections/electrodes_application_section/index.js
index 28bddf50..ee4e8428 100644
--- a/web/src/views/record_my_sleep/sections/electrodes_application_section/index.js
+++ b/web/src/views/record_my_sleep/sections/electrodes_application_section/index.js
@@ -37,7 +37,8 @@ const ElectrodesApplicationSection = () => (
       <span />
       <span />
       <span />
-    </div>{' '}
+    </div>
+    &nbsp;
     <Container className="text-justify">
       <h3 className="display-3 mb-4 text-white">How to place the electrodes</h3>
 
diff --git a/web/src/views/record_my_sleep/sections/journal_section/index.js b/web/src/views/record_my_sleep/sections/journal_section/index.js
index d81afdbe..09b212f5 100644
--- a/web/src/views/record_my_sleep/sections/journal_section/index.js
+++ b/web/src/views/record_my_sleep/sections/journal_section/index.js
@@ -7,7 +7,7 @@ const JournalSection = () => (
   <section className="section section-md">
     <Container className="text-justify">
       <h3 className="display-3">
-        <i class="fas fa-pencil-alt mr-2" /> Write a journal
+        <i className="fas fa-pencil-alt mr-2" /> Write a journal
       </h3>
       <p className="lead">
         During the night, you must keep a journal, accurate to the minute, and write down a few information to help us
@@ -32,7 +32,7 @@ const JournalSection = () => (
       </ul>
       <p className="lead">This information must be given when filling out the upload form for your EEG data file.</p>
       <h4 className="mt-5">
-        <i class="fas fa-moon mr-2" />
+        <i className="fas fa-moon mr-2" />
         Good night!
       </h4>
     </Container>
diff --git a/web/src/views/record_my_sleep/sections/wake_up_section/index.js b/web/src/views/record_my_sleep/sections/wake_up_section/index.js
index 54933be3..967a6d46 100644
--- a/web/src/views/record_my_sleep/sections/wake_up_section/index.js
+++ b/web/src/views/record_my_sleep/sections/wake_up_section/index.js
@@ -5,7 +5,7 @@ const WakeUpSection = () => (
   <section className="section section-sm bg-gradient-warning">
     <Container className="text-justify text-white">
       <h3 className="display-3 text-white">
-        <i class="fas fa-coffee mr-2" /> Wake up!
+        <i className="fas fa-coffee mr-2" /> Wake up!
       </h3>
       <div>
         <h4 className="display-4 text-white mt-4">Remove & clean your electrodes</h4>
diff --git a/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js
new file mode 100644
index 00000000..f63db9e5
--- /dev/null
+++ b/web/src/views/sleep_analysis_results/evolving_chart_scrollytelling.js
@@ -0,0 +1,316 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Container, Card, CardBody, Row } from 'reactstrap';
+import _ from 'lodash';
+
+import D3ComponentScrollyTelling from 'components/d3component_scrollytelling';
+import WaypointDirection from 'components/waypoint_direction';
+
+import createEvolvingChart, {
+  instanceChartCallbacks,
+  timelineChartCallbacks,
+  barChartCallbacks,
+  stackedBarChartCallbacks,
+} from 'd3/evolving_chart/evolving_chart';
+import { STAGES_ORDERED } from 'd3/constants';
+import Metric from './metric';
+
+import './style.css';
+
+const EvolvingChartScrollyTelling = ({ epochs, report, metadata, subject }) => {
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const { bedTime, wakeUpTime, totalBedTime } = metadata;
+  const {
+    efficientSleepTime,
+    sleepTime,
+    sleepOnset,
+    stageShifts,
+    awakenings,
+    sleepOffset,
+    sleepLatency,
+    WASO,
+    sleepEfficiency,
+    wakeAfterSleepOffset,
+  } = report;
+  const sleepStageTimes = STAGES_ORDERED.reduce(
+    (obj, stage) => Object({ ...obj, [stage]: report[`${stage}Time`] }),
+    {},
+  );
+  const numberStagesTraversed = _.filter(sleepStageTimes, (time) => time > 0).length;
+  const mostProminentStage = _.maxBy(_.keys(sleepStageTimes), (stage) => sleepStageTimes[stage]);
+  const recommendedSleepStage =
+    parseInt(subject.age) > 18
+      ? 'an adult should sleep, on average, more than 7 hours per night to promote optimal health [Watson and al., 2015]'
+      : 'teenagers, from 13 to 18 years of age, should sleep 8 to 10 hours on a regular basis to promote optimal health [Paruthi and al., 2016]';
+  return (
+    <Container className="text-justify">
+      <div style={{ position: 'sticky', top: '10%' }}>
+        <D3ComponentScrollyTelling
+          callback={createEvolvingChart}
+          data={epochs}
+          isInitialized={isInitialized}
+          setIsInitialized={setIsInitialized}
+          useDiv
+        />
+      </div>
+      <div style={{ marginBottom: '50%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              This is your sleep timeline. Each color represents one of the 5 sleep stages which are&nbsp;
+              <span className="scrollytelling_cards__w_text">Wake</span>
+              ,&nbsp;
+              <span className="scrollytelling_cards__rem_text">REM</span>
+              ,&nbsp;
+              <span className="scrollytelling_cards__n1_text">N1</span>,&nbsp;
+              <span className="scrollytelling_cards__n2_text">N2</span>
+              &nbsp;and&nbsp;
+              <span className="scrollytelling_cards__n3_text">N3</span>. Each colored block reprensents a part of your
+              night that was associated to one of these five stages. You may want to hover them as it shows more details
+              about that part of your night.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '125%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              The time you spent out of bed is not taken into account in this analysis. Thus, our timeline starts at the
+              bedtime, <Metric isTime>{bedTime}</Metric> in your case, and ends at the time you got out of bed,
+              whereas&nbsp;
+              <Metric isTime>{wakeUpTime}</Metric>. Out of this <Metric isDuration>{sleepTime}</Metric>, you spent&nbsp;
+              <Metric isDuration>{efficientSleepTime}</Metric> actually sleeping. According to the American Academy of
+              Sleep Medicine, <Metric>{recommendedSleepStage}</Metric>.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '125%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              In total, there were <Metric>{stageShifts}</Metric> sleep stage's shifts and <Metric>{awakenings}</Metric>
+              &nbsp;noctural awakenings. "High levels of sleep fragmentation, as defined by recurrent awakenings and/or
+              stage shifts may result in complaints of non-restorative sleep even when an apparently normal total sleep
+              time is present." [Shrivastava and al., 2014]
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '125%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              You first fell asleep at <Metric isTime>{sleepOnset}</Metric>, which will be refered to as{' '}
+              <i>sleep onset</i>. You woke up at <Metric isTime>{sleepOffset}</Metric>, which we will refer to as sleep
+              offset. During that night's sleep, you went through <Metric>{numberStagesTraversed}</Metric> different
+              stages. Let's take a look at them.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      {isInitialized && (
+        <WaypointDirection onDown={instanceChartCallbacks.fromTimeline} onUp={timelineChartCallbacks.fromInstance} />
+      )}
+      <div style={{ marginBottom: '175%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              Let's first look at your <span className="scrollytelling_cards__w_text">Wake</span> stage. This stage
+              corresponds to when you are fully conscious and active.
+            </p>
+            <p>
+              You spent <Metric isDuration>{report.WTime}</Metric> awake through your night. This duration is, in a
+              sleep report, usually decomposed as three different components.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '125%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              First, <strong>sleep latency</strong> corresponds to the time you spend awake in bed before first falling
+              asleep, which here is <Metric isDuration>{sleepLatency}</Metric>.
+            </p>
+            <p>
+              Second, <strong>wake after sleep onset</strong>, often abbreviated as WASO, is the time spent awake
+              between sleep onset and sleep offset. In your case, it corresponds to&nbsp;
+              <Metric isDuration>{WASO}</Metric>.
+            </p>
+            <p>
+              Third, the time you spend in bed after waking up and getting out of bed, here being&nbsp;
+              <Metric isDuration>{wakeAfterSleepOffset}</Metric>, is called <strong>wake after sleep offset</strong>.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '125%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              <span className="scrollytelling_cards__rem_text">REM</span> stage, which is short for&nbsp;
+              <i>rapid eye movement</i>, is a stage characterized by, like its name implies it, rapid eye movement.
+              During this stage, your muscles are completely immobilized but your brain and your heart should be very
+              active, which illustrates why this stage is also called paradoxical sleep. This sleep stage therefore
+              closely resembles wake and it is hard to tell the difference using EEG signals. Take note here that we
+              dream during all sleep stages but it is in the&nbsp;
+              <span className="scrollytelling_cards__rem_text">REM</span> stage that dreams are best remembered and seem
+              the most vivid.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '100%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              <span className="scrollytelling_cards__n1_text">N1</span> stage is associated with the typical drowsiness
+              felt before falling asleep. It is a transition stage between wake and sleep. This stage is characterized
+              by reduced alertness, muscle tone and heart rate. Most people won't say they fell asleep if they get woken
+              up from <span className="scrollytelling_cards__n1_text">N1</span> sleep.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '100%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              <span className="scrollytelling_cards__n2_text">N2</span>&nbsp; stage corresponds to light sleep. The
+              muscle activity decreases even more, and the eyes stop moving. In this stage, the sensitivity to external
+              stimuli is still noticeable. On the EEG, this stage can be identified by the presence of&nbsp;
+              <a href="https://en.wikipedia.org/wiki/K-complex" target="_blank" rel="noreferrer">
+                K complexes
+              </a>
+              &nbsp;and&nbsp;
+              <a href="https://en.wikipedia.org/wiki/Sleep_spindle" target="_blank" rel="noreferrer">
+                sleep spindles
+              </a>
+              .
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '100%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              <span className="scrollytelling_cards__n3_text">N3</span> stage is when you are deeply asleep, hence it’s
+              also called&nbsp;
+              <strong>deep sleep</strong>, or sometimes <strong>slow wave sleep</strong>, and is the most difficult to
+              wake up from. During this stage, virtually no muscle activity can be detected. It is during this stage
+              that your cells get repaired and tissue grows. This is considered the most restful phase of sleep.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '100%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              <span className="scrollytelling_cards__n1_text">N1</span>,&nbsp;
+              <span className="scrollytelling_cards__n2_text">N2</span> and&nbsp;
+              <span className="scrollytelling_cards__n3_text">N3</span> are called, in opposition to&nbsp;
+              <span className="scrollytelling_cards__rem_text">REM</span>, the&nbsp;
+              <strong>NREM sleep stages</strong>.
+            </p>
+            <p>
+              We've looked at the different functions of each sleep stages. But how much time did you actually spend in
+              each during the night?
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      {isInitialized && (
+        <WaypointDirection onDown={barChartCallbacks.fromInstance} onUp={instanceChartCallbacks.fromBarChart} />
+      )}
+      <div style={{ marginBottom: '125%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 ml-auto">
+          <CardBody>
+            <p>
+              This view relativizes the total time spent in each sleep stage according to the other stages. Take your
+              time to compare the time spent in each stage. Note that the horizontal axis now represents the time spent
+              in hours since bedtime.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '125%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 ml-auto">
+          <CardBody>
+            <p>
+              <span className="scrollytelling_cards__w_text">Wake</span> time may be overrepresented, because it
+              includes your sleep latency (<Metric isDuration>{sleepLatency}</Metric>) and the time you spent in bed
+              after sleep offset (<Metric isDuration>{wakeAfterSleepOffset}</Metric>).
+            </p>
+            <p>
+              We can see that your most prominent sleep stage is <Metric>{mostProminentStage}</Metric>, which in your
+              case corresponds to&nbsp;<Metric isDuration>{sleepStageTimes[mostProminentStage]}</Metric>. Usually, the
+              most prominent sleep stage is <span className="scrollytelling_cards__n2_text">N2</span>
+              <Metric>{mostProminentStage === 'N2' ? ', as it is in your case. ' : '.'}</Metric>
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '125%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 ml-auto">
+          <CardBody>
+            <p>
+              From here, we can also look at your sleep efficiency, which is the proportion of time spent asleep over
+              the overall time spent in bed. In your case, it corresponds to&nbsp;
+              <Metric>{(sleepEfficiency * 100).toFixed()}%</Metric>, or&nbsp;
+              <Metric isDuration>{sleepEfficiency * totalBedTime}</Metric>.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      {isInitialized && (
+        <WaypointDirection
+          onDown={stackedBarChartCallbacks.fromBarChart}
+          onUp={barChartCallbacks.fromStackedBarChart}
+        />
+      )}
+      <div style={{ marginBottom: '125%' }} />
+      <Row>
+        <Card className="shadow col-lg-6 mx-auto">
+          <CardBody>
+            <p>
+              As a rule of thumb, adults approximately stay 5% of their total sleep time in N1, 50% in&nbsp;
+              <span className="scrollytelling_cards__n2_text">N2</span> and 20% in&nbsp;
+              <span className="scrollytelling_cards__n3_text">N3</span>. The remaining 25% is spent in the&nbsp;
+              <span className="scrollytelling_cards__rem_text">REM</span> stage sleep. A higher proportion of&nbsp;
+              <span className="scrollytelling_cards__n3_text">N3</span> should corresponds to an overall more intense
+              sleep.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <Row>
+        <div style={{ marginBottom: '100%' }} />
+      </Row>
+    </Container>
+  );
+};
+
+EvolvingChartScrollyTelling.propTypes = {
+  epochs: PropTypes.object.isRequired,
+};
+
+export default EvolvingChartScrollyTelling;
diff --git a/web/src/views/sleep_analysis_results/improve_sleep_tips.js b/web/src/views/sleep_analysis_results/improve_sleep_tips.js
new file mode 100644
index 00000000..04741eda
--- /dev/null
+++ b/web/src/views/sleep_analysis_results/improve_sleep_tips.js
@@ -0,0 +1,59 @@
+import BadgeBulletPoint from 'components/badge_bullet_point';
+import React from 'react';
+
+const TipsToImproveSleep = () => (
+  <>
+    <p className="lead mt-8">
+      Sleep deficiency increases the risk of health disorders like high blood pressure, cardiovascular disease,
+      diabetes, depression and obesity. It can also have huge side effects such as decreased mental capabilities
+      like learning, decision making process and problem-solving skills. Sleep deficiency is often caused by sleep
+      deprivation but can also be due to other factors like out of sync sleep (going to bed out of sync with your
+      circadian rythm) and getting poor sleep quality (which may be a symptom of sleep disorders such as sleep apnea or
+      restless legs syndrome). In order to improve your sleep hygiene and get a better and longer sleep, many actions
+      should be considered:
+    </p>
+    <ul className="list-unstyled mt-4">
+      <li className="py-2">
+        <h6 className="mb-0">
+          <BadgeBulletPoint badgeColor="warning" iconClass="fas fa-coffee fa-sm">
+            Alimentation: avoid eating large meals before bedtime. Having a balanced diet and avoiding sources of
+            caffeine can have a positive impact on one’s sleep. Chocolate, soft drink, tea and decaffeinated coffee are
+            unexpected sources of caffeine.
+          </BadgeBulletPoint>
+        </h6>
+      </li>
+      <li className="py-2">
+        <h6 className="mb-0">
+          <BadgeBulletPoint badgeColor="warning" iconClass="fas fa-wine-glass-alt fa-sm">
+            Alcohol, drugs and medicines: just as caffeine influences sleep, the consumption of alcohol, drugs and
+            certain medications have a significant effect on it. Alcohol, for example, reduces significantly the amount
+            of REM sleep and lead to multiple awakenings throughout each sleep cycle. [Shrivastava and al., 2014]
+          </BadgeBulletPoint>
+        </h6>
+      </li>
+      <li className="py-2">
+        <BadgeBulletPoint badgeColor="warning" iconClass="far fa-calendar-alt">
+          <h6 className="mb-0">
+            Routine: going to sleep at about the same time, in a dark and quiet environment can help stabilize your
+            sleep internal mechanisms, namely your circadian rhythms and your homeostasis.
+          </h6>
+        </BadgeBulletPoint>
+      </li>
+      <li className="py-2">
+        <BadgeBulletPoint badgeColor="warning" iconClass="fas fa-lightbulb">
+          <h6 className="mb-0">
+            Light: avoid looking at screens before or while getting to bed. Light, especially blue wavelenghts, suppress
+            melatonin secretion, thus interfering with your circadian rhythms.
+          </h6>
+        </BadgeBulletPoint>
+      </li>
+      <li className="py-2">
+        <BadgeBulletPoint badgeColor="warning" iconClass="fas fa-running">
+          <h6 className="mb-0">Exercise: work out for 20 to 30 minutes each day and maintain an active lifestyle.</h6>
+        </BadgeBulletPoint>
+      </li>
+    </ul>
+  </>
+);
+
+export default TipsToImproveSleep;
diff --git a/web/src/views/sleep_analysis_results/index.js b/web/src/views/sleep_analysis_results/index.js
index 04599805..92d967bd 100644
--- a/web/src/views/sleep_analysis_results/index.js
+++ b/web/src/views/sleep_analysis_results/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Row, Button, UncontrolledTooltip } from 'reactstrap';
+import { Container, Row, Button, UncontrolledTooltip, Badge } from 'reactstrap';
 import { Link, Redirect } from 'react-router-dom';
 
 import Header from 'components/header';
@@ -10,16 +10,20 @@ import { createSingleHypnogram } from 'd3/hypnogram/hypnogram';
 
 import useGlobalState from 'hooks/useGlobalState';
 import text from './text.json';
-import StackedBarChartScrollyTelling from './stacked_bar_chart_scrollytelling';
+import EvolvingChartScrollyTelling from './evolving_chart_scrollytelling';
 import SpectrogramScrollyTelling from './spectrogram_scrollytelling';
 
 import previewSequence from 'assets/data/predicted_william_cyton';
 
 import './style.css';
+import SleepMechanisms from './sleep_mechanisms';
+import TipsToImproveSleep from './improve_sleep_tips';
+import Metric from './metric';
 
 const SleepAnalysisResults = ({ location }) => {
   const [response] = useGlobalState('response');
   const isPreviewMode = location.state?.isPreviewMode;
+
   if (!isPreviewMode && !response) {
     return (
       <Redirect
@@ -30,10 +34,297 @@ const SleepAnalysisResults = ({ location }) => {
     );
   }
   const data = isPreviewMode ? previewSequence : response.data;
+  const { epochs, report, metadata, subject } = data;
   const encodedJsonEpochs = encodeURIComponent(JSON.stringify(data.epochs));
 
+  const sleepAnalysisIntro = (
+    <Container className="mt-5 mb-8 text-justify">
+      {isPreviewMode && (
+        <Row className="mb-5 justify-content-center">
+          <PreviewModeWarning />
+        </Row>
+      )}
+      <p className="lead my-5">
+        That's it! We have created your personalized sleep data visualizations. Through the following visualizations,
+        you will discover the time you spent in each sleep stage, how they are defined and what are their respective
+        functions. Then, an interactive hypnogram allows you to see the transitions between the sleep stages. Finally,
+        your spectrogram will be presented in detail and some explanations will try to give you a sense of how we were
+        able to find your sleep stages from your EEG data.
+      </p>
+
+      <p className="lead my-5">
+        Throughout these visualizations, your personalized sleep metrics will be presented to you. These were calculated
+        from the stages of sleep that we found. They will appear, here and there, <Metric>in blue</Metric>, in order to
+        stand out from the rest of the text.
+      </p>
+
+      <p className="lead mt-5">Without further ado, let's get started:</p>
+    </Container>
+  );
+  const evolvingChartOutro = (
+    <>
+      <Container className="text-justify">
+        <p className="lead">
+          You should now have a pretty good picture of how you spent your night. Also, we have seen that sleep can be
+          decomposed into two groups: REM and NREM. We’ve also defined other measures of your sleep architecture, such
+          as your sleep latency, efficiency and total sleep time. All of these metrics are very interesting. However, it
+          would be interesting to understand a little bit more about sleep in order to make sense of this.
+        </p>
+        <h4 className="mt-5">This is about your hormones</h4>
+        <p className="lead">
+          Hormones such as melatonin and cortisol play a decisive role in sleep. In fact, it is their variation that
+          partly explains the circadian cycle.
+        </p>
+        <p className="lead">
+          During the day, a neurotransmitter called serotonin gradually accumulates in the pineal gland. When it gets
+          dark, the pineal gland synthesizes melatonin which is a hormone that is synthesized from this serotonin.
+          Melatonin helps induce the sleepiness that prevails in the evening. Exposure to light including that of
+          screens, street lighting, etc. inhibits the secretion of melatonin and impairs sleep. On the other hand, in
+          the morning, the adrenal gland secretes the hormone cortisol from cholesterol. Its effect is to promote light
+          sleep and possibly awake. Any imbalance in these hormones or their secretion can have an inhibiting effect on
+          sleep.
+        </p>
+        <p className="lead">
+          Adenosine is not a hormone, but it also plays its role into sleep mechanisms. When you are awake, the level of
+          adenosine continuously increases in your brain. In contrast, when you sleep it is the opposite: it
+          continuously falls. This is why coffee makes us feel more energized, as caffeine acts as an adenosine-receptor
+          antagonist [O. Björklund et al., 2008].
+        </p>
+      </Container>
+      <SleepMechanisms />
+      <section className="section bg-secondary pt-150">
+        <Container className="text-justify">
+          <TipsToImproveSleep />
+          <p className="lead">
+            Although we’ve looked at many aspects of your night’s sleep, we haven’t properly looked at your sleep
+            dynamics, whereas how your sleep evolves overnight.
+          </p>
+        </Container>
+      </section>
+    </>
+  );
+
+  const hypnogramIntro = (
+    <Container className="text-justify mt-5">
+      <h3>Hypnogram</h3>
+      <p className="mt-3 lead">
+        A hypnogram allows you to visually inspect the evolution of your night, through time. The vertical axis
+        represents how hard it is to wake up, namely the sleep depth. We see that REM is one of the lightest sleep
+        stages (along with N1), because we unknowingly wake up from that stage. Those short periods of arousal often
+        last no longer than 15 seconds, are followed by a lighter sleep stage, and cannot be remembered the next
+        morning. If they are too frequent, they can affect your sleep quality. Considering that we only have a 30
+        seconds resolution, as we scored the night for each 30 seconds epochs, we can see that you have woken up&nbsp;
+        <Metric>{report.awakenings}</Metric> times.
+      </p>
+      <p className="my-5 lead">
+        We can also see that, throughout the night, stages follow about the same pattern, whereas we go from NREM
+        (either N1, N2 and N3) and then to REM, and so on. We call those sleep cycles, and those typically range from
+        four to six, each one lasting from 1 hour and a half to almost 2 hours. Another commonly looked at measurement
+        is the time between sleep onset and the first REM epoch, namely REM latency, which corresponds to&nbsp;
+        <Metric isDuration>{report.remLatency}</Metric>. It can be interesting as paradoxical sleep&nbsp;
+        <q>is very sensitive to the effects of medication, sleep deprivation, and circadian rhythm disorders</q>&nbsp;
+        [Shrivastava and al., 2014].
+      </p>
+    </Container>
+  );
+  const hypnogramOutro = (
+    <Container className="text-justify">
+      <p className="lead">
+        You’ve been able to visualize and inspect your night of sleep, which we’ve classified only based on your EEG
+        recordings. In a sleep lab, electrophysiology technologists generally look at your EEG, EOG and submental EMG,
+        and then manually classify each epoch of 30 seconds that compose your night. By looking at your EEG recordings,
+        we can see some patterns that can help electrophysiology technologists, and our classifier, discriminate sleep
+        stages throughout the night.
+      </p>
+    </Container>
+  );
+
+  const spectrogramIntro = (
+    <Container className="text-justify">
+      <h3 className="mt-5">Spectrogram</h3>
+      <p className="lead">
+        Below are represented spectrograms of the EEG signals recorded for each channel. The spectrogram is a special
+        visualization of a signal in the frequency and time domain. Indeed, it represents the spectrum of a signal as it
+        changes over time. Concretely, spectrograms can be viewed as if we took your signal, separated it into 30
+        seconds blocks, stacked them horizontally and then applied the Fast Fourier Transform. We then have, for each 30
+        seconds epoch, the corresponding amplitudes for each frequency that makes up the signal hence the spectra.
+      </p>
+      <p className="my-5 lead">
+        We then converted the scale to logarithmic, to better see the differences in the spectrums. We then speak of
+        signal power instead of signal amplitude, because we look at the spectrums in a logarithmic scale.
+      </p>
+      <h4>Why are spectrograms useful to observe EEG?</h4>
+      <p className="my-5 lead">
+        Electroencephalography signals allow us to observe brainwaves which have been traditionally split into defined
+        frequency bands, as they appear and disappear under specific conditions with specific voltage [M. Corsi-Cabrera
+        and al., 2000]. Thus, observing the spectrum of a signal is great as we can see the voltage amplitude for each
+        band and then try to predict under which physiological condition was the subject in. But as we've mentionned,
+        the EEG signals' spectrum do change over time, as EEG is not a stationnary signal. So we need to split the
+        signal into much smaller chunks, and then observe the spectrum of these chunks, and their evolution over time.
+      </p>
+      <p className="my-5 lead">
+        Furthermore, brainwaves frequency bands are widely used and their associated states are defined as below. Please
+        note that the ranges defined often varies, but we've settled on the definitions proposed by D.Purves in the
+        "Stages of Sleep" manual [D. Purves et al., 2001]. Also, brain waves are inherently associated with different
+        region through the brain. As our EEG montage is composed of electrodes placed on the midline axis, not all
+        frequency band ranges will be easily visible through our spectrograms. It can also explain why the expected
+        voltage intensity will be sometimes more explicit on the Fpz-Cz spectrogram vs the Pz-Oz spectrogram.
+      </p>
+      <ul className="list-unstyled my-4">
+        <li className="py-2">
+          <div className="d-flex mb-0">
+            <Badge className="badge-circle flex-shrink-0 mr-3" color="primary">
+              &beta;
+            </Badge>
+            <div>
+              The <strong>beta frequency band range</strong> is defined as between 14 and 60 Hz. It is mostly seen at
+              the front side of the scalp.
+            </div>
+          </div>
+        </li>
+        <li className="py-2">
+          <div className="d-flex mb-0">
+            <Badge className="badge-circle flex-shrink-0 mr-3" color="primary">
+              &alpha;
+            </Badge>
+            <div>
+              The <strong>alpha frequency band range</strong> is between 8 and 13 Hz. We mostly find these amplitudes on
+              the posterior regions of the head, and on both sides.
+            </div>
+          </div>
+        </li>
+        <li className="py-2">
+          <div className="d-flex mb-0">
+            <Badge className="badge-circle flex-shrink-0 mr-3" color="primary">
+              &theta;
+            </Badge>
+            <div>
+              The <strong>theta frequency band range</strong> is characterized by frequencies between 4 and 7 Hz. These
+              frequencies are not tied to any specific location of the brain.
+            </div>
+          </div>
+        </li>
+        <li className="py-2">
+          <div className="d-flex mb-0">
+            <Badge className="badge-circle flex-shrink-0 mr-3" color="primary">
+              &delta;
+            </Badge>
+            <div>
+              The <strong>delta frequency band range</strong> is described as the lowest range, whereas below 4 Hz. This
+              EEG band is located frontally for adults, and posteriorly for children.
+            </div>
+          </div>
+        </li>
+      </ul>
+      <h4>How to read it?</h4>
+      <p className="my-5 lead">
+        Yellow therefore means that in that 30 seconds time frame, that particular frequency had a big amplitude. Pink
+        means that you had that frequency with a lower amplitude. Purple means that you didn’t have that frequency in
+        the signal.
+      </p>
+      <p className="my-5 lead">
+        To get a better understanding at how spectrograms work, you can&nbsp;
+        <a href="https://musiclab.chromeexperiments.com/Spectrogram/" rel="noopener noreferrer" target="_blank">
+          check out this example
+        </a>
+        &nbsp;that decomposes sound frequency from your microphone.
+      </p>
+    </Container>
+  );
+  const spectrogramOutro = (
+    <Container className="text-justify">
+      <p className="mt-5 lead">
+        We've covered each of the band power frequency ranges we have used in our classification algorithm, and their
+        associated expected power depending on the sleep stages.
+      </p>
+    </Container>
+  );
+  const callToAction = (
+    <Container className="text-justify">
+      <Row className="scrollytelling-container__buttons">
+        <p className="mt-5 lead">
+          If you found our visualizations helpful in better understanding how sleep works, and especially how you slept
+          on your recorded night, you can come say hi at our &nbsp;
+          <a href="https://www.facebook.com/PolyCortex/" target="_blank" rel="noopener noreferrer">
+            Facebook page
+          </a>
+          . On another hand, if there have been problems or unexpected results while recording and analyzing your sleep,
+          you can always open an issue in our &nbsp;
+          <a href="https://github.com/PolyCortex/polydodo" target="_blank" rel="noopener noreferrer">
+            Github repository
+          </a>
+          .
+        </p>
+
+        <p className="mt-5 lead">
+          If you are curious about the performances of our classifier, we've written a short post about our methodology
+          and our results. Check it out! Otherwise, you can also download the predicted sleep stages.
+        </p>
+        <Link to="/performance">
+          <Button className="mt-4" color="default">
+            Check out the performances
+          </Button>
+        </Link>
+        <div className="mt-4" id="sleep_analysis_results__download_button">
+          <Button
+            color="secondary"
+            href={`data:text/json;charset=utf-8,${encodedJsonEpochs}`}
+            download="myresults.json"
+            disabled={isPreviewMode}
+          >
+            Download my results
+          </Button>
+        </div>
+        {isPreviewMode && (
+          <UncontrolledTooltip delay={0} placement="top" target="sleep_analysis_results__download_button">
+            You need to upload your own sleep sequence in order to download your data
+          </UncontrolledTooltip>
+        )}
+      </Row>
+    </Container>
+  );
+
+  const references = (
+    <Container className="my-6">
+      <small className="text-muted text-justify">
+        <div className="mt-2">
+          [Paruthi and al., 2016] S. Paruthi, L. J. Brooks, C. Dambrosio, W. A. Hall, S. Kotagal, R. M. Lloyd, B. A.
+          Malow, K. Maski, C. Nichols, S. F. Quan, C. L. Rosen, M. M. Troester, and M. S. Wise, “Recommended Amount of
+          Sleep for Pediatric Populations: A Consensus Statement of the American Academy of Sleep Medicine,” Journal of
+          Clinical Sleep Medicine, vol. 12, no. 06, pp. 785–786, 2016.
+        </div>
+        <div className="mt-2">
+          [Watson and al., 2015] N. F. Watson, M. S. Badr, G. Belenky, D. L. Bliwise, O. M. Buxton, D. Buysse, D. F.
+          Dinges, J. Gangwisch, M. A. Grandner, C. Kushida, R. K. Malhotra, J. L. Martin, S. R. Patel, S. F. Quan, and
+          E. Tasali, “Recommended Amount of Sleep for a Healthy Adult: A Joint Consensus Statement of the American
+          Academy of Sleep Medicine and Sleep Research Society,” Journal of Clinical Sleep Medicine, vol. 11, no. 06,
+          pp. 591–592, 2015.
+        </div>
+        <div className="mt-2">
+          [Shrivastava and al., 2014] D. Shrivastava, S. Jung, M. Saadat, R. Sirohi, and K. Crewson, “How to interpret
+          the results of a sleep study,” Journal of Community Hospital Internal Medicine Perspectives, vol. 4, no. 5, p.
+          24983, 2014.
+        </div>
+        <div className="mt-2">
+          [D. Purves and al., 2001] D. Purves et al., “Stages of Sleep,” Neuroscience. 2nd edition, 2001, Accessed: Nov.
+          22, 2020. [Online]. Available: https://www.ncbi.nlm.nih.gov/books/NBK10996/.
+        </div>
+        <div className="mt-2">
+          [O. Björklund and al., 2008] Björklund O, Kahlström J, Salmi P, Fredholm BB "Perinatal Caffeine, Acting on
+          Maternal Adenosine A1 Receptors, Causes Long-Lasting Behavioral Changes in Mouse Offspring". vol. 3, no. 12:
+          e3977, 2008. https://doi.org/10.1371/journal.pone.0003977
+        </div>
+        <div className="mt-2">
+          [M. Corsi-Cabrera, and al., 2000] M. Corsi-Cabrera, M. A. Guevara, Y. Del Río-Portilla, C. Arce, and Y.
+          Villanueva-Hernández, “EEG Bands During Wakefulness, Slow-Wave and Paradoxical Sleep as a Result Of Principal
+          Component Analysis in Man,” Sleep, vol. 23, no. 6, pp. 1–7, Sep. 2000, doi: 10.1093/sleep/23.6.1a.
+        </div>
+      </small>
+    </Container>
+  );
+
   return (
-    <div>
+    <>
       <Header
         sizeClass={'pb-150'}
         shapeQty={7}
@@ -41,128 +332,20 @@ const SleepAnalysisResults = ({ location }) => {
         subtitle={text['header_subtitle']}
         description={text['header_description']}
       />
-      <Container className="mt-5 mb-5 text-justify">
-        {isPreviewMode && (
-          <Row className="mb-5 justify-content-center">
-            <PreviewModeWarning />
-          </Row>
-        )}
-        <p>
-          Of course, we are analyzing only one night of sleep so it is therefore tricky to draw general conclusions
-          about your sleep. It is however fascinating to see how your night was.
-        </p>
-        <p>Without further ado, this is what was your night of sleep:</p>
-        <StackedBarChartScrollyTelling epochs={data.epochs} />
-        <p>
-          We have seen that sleep can be decomposed in mainly two stages, whereas REM and NREM, and that we can observe
-          different stage proportions across age, gender and different sleep disorders. We’ve also defined other
-          measures of your sleep architecture, such as your sleep latency, efficiency and total sleep time. In order to
-          improve your sleep hygiene, many elements can be considered:
-        </p>
-        <ul>
-          <li>
-            Alimentation: having a balanced diet and avoiding sources of caffeine can have a positive impact on one’s
-            sleep. Chocolate, soft drink, tea and decaffeinated coffee are unexpected sources of caffeine.
-          </li>
-          <li>Routine: going to sleep about at the same time, in a darkened and quiet environment.</li>
-          <li>Routine: going to sleep about at the same time, in a darkened and quiet environment.</li>
-          <li>Routine: going to sleep about at the same time, in a darkened and quiet environment.</li>
-        </ul>
-        <p>
-          Although we’ve looked at many aspects of your night’s sleep, we haven’t properly looked at your sleep
-          dynamics, whereas how your sleep evolves overnight.
-        </p>
-        <h4>Hypnogram</h4>
-        <p>
-          A hypnogram allows you to visually inspect the evolution of your night, through time. The vertical axis
-          represents how hard it is to wake up, namely the sleep deepness. We see that REM is one of the lightest sleep
-          stages (along with N1), because we unknowingly wake up from that stage. Those short periods of arousal often
-          last no longer than 15 seconds, are followed by a lighter sleep stage, and cannot be remembered the next
-          morning. If they are too frequent, they can affect your sleep quality. [5] We can see that, throughout the
-          night, stages follow about the same pattern, whereas we go from NREM (either N1, N2 and N3) and then to REM,
-          and so on. We call those sleep cycles, and those typically range from four to six, each one lasting from 90 to
-          110 minutes. Another commonly looked at measurement is the time between sleep onset and the first REM epoch,
-          namely REM latency, which corresponds to 20 minutes.
-        </p>
+      {sleepAnalysisIntro}
+      <EvolvingChartScrollyTelling epochs={epochs} report={report} metadata={metadata} subject={subject} />
+      {evolvingChartOutro}
+      {hypnogramIntro}
+      <Container>
         <D3Component callback={createSingleHypnogram} data={data.epochs ? [data.epochs] : null} />
-        <p>
-          Sleep cycles take place in a broader process, named the circadian rhythm. It is the one that regulates our
-          wake and sleep cycles over a 24 hours period.
-        </p>
-        <p>
-          You’ve been able to visualize and inspect your night of sleep, which we’ve classified only based on your EEG
-          recordings. In a sleep lab, electrophysiology technicians generally look at your EEG, EOG and submental EMG,
-          and then manually classify each epoch of 30 seconds that compose your night. By looking at your EEG
-          recordings, we can see some patterns that can help electrophysiology technicians, and our classifier,
-          discriminate sleep stages throughout the night.
-        </p>
-        <h4 className="mt-5">Spectrogram</h4>
-        <p>
-          Above, we can see the same chart from the first visualization, which represents your sleep stages through the
-          night. Below it, there are spectrograms of both your EEG channels. Spectrograms can be viewed as if we took
-          all of your nights signal, we’ve separated it in contiguous 30 seconds chunks, stacked then horizontally and
-          to which we’ve applied the fast fourier transform. We then have, for each 30 seconds epoch, the corresponding
-          amplitudes for each frequency that makes up the signal, hence the spectra. We then converted the scale to
-          logarithmic, to better see the differences in the spectrums. We then speak of signal power instead of signal
-          amplitude, because we look at the spectrums in a logarithmic scale.
-        </p>
-        <p>
-          <strong>How to read it?</strong>
-        </p>
-        <p>
-          Red therefore means that in that 30 seconds time frame, that particular frequency had a big amplitude. Green
-          means that you had that frequency with a lower amplitude. Dark blue means that you didn’t have that frequency
-          in the signal.
-        </p>
-        <p>
-          To get a better understanding at how spectrograms work, you can check out
-          <a href="https://musiclab.chromeexperiments.com/Spectrogram/" target="_blank" rel="noopener noreferrer">
-            {' '}
-            this visualization{' '}
-          </a>
-          that decomposes sound frequency from your microphone.
-        </p>
-        <SpectrogramScrollyTelling spectrograms={data.spectrograms} epochs={data.epochs} />
-        <p className="mt-5">
-          Generally, when talking about brain waves, we group certain frequencies together into bands. There are overall
-          five frequency bands, where each has a general associated behaviour, or state of mind. We will cover those
-          when looking at time frames corresponding to each sleep stage.
-        </p>
-        <p>
-          We can associate wake stages with low-amplitude activity in the 15 to 60 Hz frequency range, called the beta
-          band. By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta
-          band, and to have larger amplitudes. These characteristics are associated with N1. N2 stage has the same
-          characteristics, and also includes sleep spindles. They last only a few seconds and are a large oscillation in
-          the 10 to 15 hz band. Because they do not occur during all of the 30 seconds period, they cannot be seen here.
-          Stage N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the
-          delta range, with large amplitudes. REM stage has the same characteristics as Wake stage, whereas there are
-          low voltage high frequency activity.
-        </p>
-        <p>Wanna know how accurate this data is?</p>
-        <Row className="scrollytelling-container__buttons">
-          <Link to="/performance">
-            <Button className="mt-4" color="default">
-              Check out the performances
-            </Button>
-          </Link>
-          <div className="mt-4" id="sleep_analysis_results__download_button">
-            <Button
-              color="secondary"
-              href={`data:text/json;charset=utf-8,${encodedJsonEpochs}`}
-              download="myresults.json"
-              disabled={isPreviewMode}
-            >
-              Download my results
-            </Button>
-          </div>
-          {isPreviewMode && (
-            <UncontrolledTooltip delay={0} placement="top" target="sleep_analysis_results__download_button">
-              You need to upload your own sleep sequence in order to download your data
-            </UncontrolledTooltip>
-          )}
-        </Row>
       </Container>
-    </div>
+      {hypnogramOutro}
+      {spectrogramIntro}
+      <SpectrogramScrollyTelling spectrograms={data.spectrograms} epochs={data.epochs} />
+      {spectrogramOutro}
+      {callToAction}
+      {references}
+    </>
   );
 };
 
diff --git a/web/src/views/sleep_analysis_results/metric.js b/web/src/views/sleep_analysis_results/metric.js
new file mode 100644
index 00000000..0a38946a
--- /dev/null
+++ b/web/src/views/sleep_analysis_results/metric.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Metric = ({ isTime, isDuration, children }) => {
+  const getTimeString = (numberSecondsUTC) => new Date(numberSecondsUTC * 1000).toLocaleTimeString();
+  const getDurationString = (numberSeconds) => {
+    const nbHours = Math.floor(numberSeconds / 3600);
+    const nbMinutes = Math.floor((numberSeconds % 3600) / 60);
+
+    return nbHours > 0 ? `${nbHours} hours and ${nbMinutes} minutes` : `${nbMinutes} minutes`;
+  };
+
+  let content = children;
+
+  if (isTime) {
+    content = content !== null ? getTimeString(children) : 'never';
+  } else if (isDuration) {
+    content = content !== null ? getDurationString(children) : '0 minutes';
+  }
+
+  return (
+    <span className="text-primary">
+      <strong>{content}</strong>
+    </span>
+  );
+};
+
+Metric.propTypes = {
+  isTime: PropTypes.bool,
+  isDuration: PropTypes.bool,
+};
+
+Metric.defaultProps = {
+  isTime: false,
+  isDuration: false,
+};
+
+export default Metric;
diff --git a/web/src/views/sleep_analysis_results/preview_mode_warning.js b/web/src/views/sleep_analysis_results/preview_mode_warning.js
index 3a11f41a..4d0a9790 100644
--- a/web/src/views/sleep_analysis_results/preview_mode_warning.js
+++ b/web/src/views/sleep_analysis_results/preview_mode_warning.js
@@ -5,17 +5,15 @@ import Emoji from 'components/emoji';
 
 const BEDTIME_PREVIEW_MODE_TIMESTAMP = 1582441980 * 1000;
 
-const PreviewModeWarning = () => {
-  return (
-    <Alert color="warning">
-      <span>
-        <Emoji symbol="⚠️" />
-        <strong> You are in preview mode. </strong>
-        The data that is shown here comes from a recording we took on{' '}
-        {new Date(BEDTIME_PREVIEW_MODE_TIMESTAMP).toDateString()} <Emoji symbol="⚠️" />
-      </span>
-    </Alert>
-  );
-};
+const PreviewModeWarning = () => (
+  <Alert color="warning">
+    <span>
+      <Emoji symbol="⚠️" />
+      <strong> You are in preview mode. </strong>
+      The data that is shown here comes from a recording we took on&nbsp;
+      {new Date(BEDTIME_PREVIEW_MODE_TIMESTAMP).toDateString()} <Emoji symbol="⚠️" />
+    </span>
+  </Alert>
+);
 
 export default PreviewModeWarning;
diff --git a/web/src/views/sleep_analysis_results/sleep_mechanisms.js b/web/src/views/sleep_analysis_results/sleep_mechanisms.js
new file mode 100644
index 00000000..f9df8ca6
--- /dev/null
+++ b/web/src/views/sleep_analysis_results/sleep_mechanisms.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { CardDeck, Col, Container } from 'reactstrap';
+
+import FloatingCard from 'components/floating_card';
+
+import './style.css';
+
+const SleepMechanisms = () => (
+  <Container className="text-justify mt-6 mb--300">
+    <CardDeck>
+      <Col lg="6" className="mb-6">
+        <FloatingCard
+          cardClassName="bg-warning"
+          headerText="Circadian Rhythms"
+          bodyText={
+            <span>
+              This is your biological clock. It is a self-sustained internal process responsible for regulating your
+              sleep and wake cycles every 24 hours as well as other biological processes such as blood pressure, body
+              temperature and heart activity. This is why you feel sleepy at night and awake during the day. Some habits
+              or events may have an influence on these rhythms. Sleep cycles then take place in these broader processes.
+            </span>
+          }
+        />
+      </Col>
+      <Col lg="6" className="mb-6">
+        <FloatingCard
+          cardClassName="bg-primary"
+          headerText="Sleep Homeostasis"
+          bodyText={
+            <span>
+              Sleep homeostasis is a biological regulatory process that rules over how much sleep time and intensity you
+              need to get. It is tightly coupled with the <q>sleep debt</q> concept as the more you are awake, the more
+              and the deeper you'll need to eventually sleep. The adenosine cycle is suspected to be one of the
+              responsible for this.
+            </span>
+          }
+        />
+      </Col>
+    </CardDeck>
+  </Container>
+);
+
+export default SleepMechanisms;
diff --git a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js
index c62be124..39a4a003 100644
--- a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js
+++ b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Container, Card, CardBody } from 'reactstrap';
+import { Container, Card, CardBody, Row } from 'reactstrap';
 
 import createSpectrogram, { spectrogramCallbacks } from '../../d3/spectrogram/spectrogram';
 import D3ComponentScrollyTelling from '../../components/d3component_scrollytelling';
@@ -10,7 +10,7 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {
   const [isInitialized, setIsInitialized] = useState(false);
 
   return (
-    <Container>
+    <Container className="text-justify">
       <div style={{ position: 'sticky', top: '10%' }}>
         <D3ComponentScrollyTelling
           callback={createSpectrogram}
@@ -21,95 +21,145 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => {
         />
       </div>
       <div style={{ marginBottom: '50%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            Here is represented spectrograms of both your EEG channels. Spectrograms can be viewed as if we took all of
-            your nights signal, we’ve separated it in contiguous 30 seconds chunks, stacked then horizontally and to
-            which we’ve applied the fast fourier transform. We then have, for each 30 seconds epoch, the corresponding
-            amplitudes for each frequency that makes up the signal, hence the spectra.
-          </p>
-          <p>
-            We then converted the scale to logarithmic, to better see the differences in the spectrums. We then speak of
-            signal power instead of signal amplitude, because we look at the spectrums in a logarithmic scale.
-          </p>
-          <h5>How to read it?</h5>
-          <p>
-            Red therefore means that in that 30 seconds time frame, that particular frequency had a big amplitude. Green
-            means that you had that frequency with a lower amplitude. Dark blue means that you didn’t have that
-            frequency in the signal.
-          </p>
-          <p>
-            To get a better understanding at how spectrograms work, you can{' '}
-            <a href="https://musiclab.chromeexperiments.com/Spectrogram/" rel="noopener noreferrer" target="_blank">
-              check out this example
-            </a>{' '}
-            that decomposes sound frequency from your microphone.
-          </p>
-        </CardBody>
-      </Card>
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              Generally, when talking about brain waves, we group certain frequencies together into bands. There are
+              overall five frequency bands, where each has a general associated behaviour, or state of consciousness. We
+              will cover those when looking at time frames corresponding to each sleep stage.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
       <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            Generally, when talking about brain waves, we group certain frequencies together into bands. There are
-            overall five frequency bands, where each has a general associated behaviour, or state of mind. We will cover
-            those when looking at time frames corresponding to each sleep stage.
-          </p>
-        </CardBody>
-      </Card>
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              Let's highlight epochs classified as <span className="scrollytelling_cards__w_text">Wake</span> stages in
+              order to better see its characteristics.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
       {isInitialized && <WaypointDirection onDown={spectrogramCallbacks['W']} onUp={spectrogramCallbacks[null]} />}
       <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            We can associate wake stages with low-amplitude activity in the 15 to 60 Hz frequency range, called the beta
-            band. [6]
-          </p>
-        </CardBody>
-      </Card>
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              We can associate <span className="scrollytelling_cards__w_text">Wake</span> stages with low-amplitude
+              activity in the 15 to 60 Hz frequency range, called the beta band [D. Purves et al., 2001]. This means you
+              should be able to see, between 15 to 60 Hz, predominantly pink-ish colors. As the beta band is mostly
+              located at the front of the scalp, you should better see it in the Fpz-Cz's spectrogram.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '125%' }} />
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              Let's now highlight <span className="scrollytelling_cards__n1_text">N1</span> stages so they stand out
+              from the others.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
       {isInitialized && <WaypointDirection onDown={spectrogramCallbacks['N1']} onUp={spectrogramCallbacks['W']} />}
       <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            By slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the theta
-            band, and to have larger amplitudes. These characteristics are associated with N1.
-          </p>
-        </CardBody>
-      </Card>
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              While slowly falling asleep, the signal frequencies tend to decrease into the 4 to 8 Hz range, or the
+              theta band, and to have larger amplitudes [D. Purves et al., 2001]. You should then see more yellow in the
+              specified frequency band range. These characteristics are associated with&nbsp;
+              <span className="scrollytelling_cards__n1_text">N1</span>.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '125%' }} />
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              How about <span className="scrollytelling_cards__n2_text">N2</span> sleep stages? Once again, let's
+              hightlight epochs tagged as this stage.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
       {isInitialized && <WaypointDirection onDown={spectrogramCallbacks['N2']} onUp={spectrogramCallbacks['N1']} />}
       <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            N2 stage has the same characteristics as N1, and also includes sleep spindles. They last only a few seconds
-            and are a large oscillation in the 10 to 15 hz band. Because they do not occur during all of the 30 seconds
-            period, they cannot be seen here. [6]
-          </p>
-        </CardBody>
-      </Card>
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              <span className="scrollytelling_cards__n2_text">N2</span> stage has the same characteristics as&nbsp;
+              <span className="scrollytelling_cards__n1_text">N1</span>, and also includes sleep spindles. They last
+              only a few seconds and are composed of large oscillations in the 10 to 15 hz band. Because they do not
+              occur during all of the 30 seconds period, they cannot be seen here [D. Purves et al., 2001].
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '125%' }} />
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              We'll now look at how the epochs tagged as&nbsp;
+              <span className="scrollytelling_cards__n3_text">slow wave sleep</span>
+              &nbsp;look like.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
       {isInitialized && <WaypointDirection onDown={spectrogramCallbacks['N3']} onUp={spectrogramCallbacks['N2']} />}
       <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            Stage N3, also called slow wave sleep, is characterized by slower waves between 0.5 and 4 Hz, known as the
-            delta range, with large amplitudes. [6]
-          </p>
-        </CardBody>
-      </Card>
-      {isInitialized && <WaypointDirection onDown={spectrogramCallbacks['REM']} onUp={spectrogramCallbacks['N3']} />}
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              As expected, stage <span className="scrollytelling_cards__n3_text">N3</span> is characterized by slower
+              waves between 0.5 and 4 Hz, known as the delta range, with large amplitudes [D. Purves et al., 2001].
+              There should then be bright yellow at the lower freqency range. Once again, as the delta band is also
+              mostly located at the front of the scalp, you should better see it in the Fpz-Cz's spectrogram.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
       <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            REM stage has the same characteristics as Wake stage, whereas there are low voltage high frequency activity.
-            [6]
-          </p>
-        </CardBody>
-      </Card>
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              The last epochs to look at are the ones tagged as&nbsp;
+              <span className="scrollytelling_cards__rem_text">rapid eye movement</span>. Let's see how can they be
+              described.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      {isInitialized && <WaypointDirection onDown={spectrogramCallbacks['REM']} onUp={spectrogramCallbacks['N3']} />}
       <div style={{ marginBottom: '125%' }} />
+      <Row className="mx-auto col-md-6">
+        <Card className="shadow">
+          <CardBody>
+            <p>
+              <span className="scrollytelling_cards__rem_text">REM</span> stage has the same characteristics as&nbsp;
+              <span className="scrollytelling_cards__w_text">Wake</span> stage, whereas there are low voltage high
+              frequency activity [D. Purves et al., 2001]. This means you should once again be able to see, between 15
+              to 60 Hz, pink-ish colors.
+            </p>
+          </CardBody>
+        </Card>
+      </Row>
+      <div style={{ marginBottom: '70%' }} />
       &nbsp;
     </Container>
   );
diff --git a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js
deleted file mode 100644
index 567d9d9d..00000000
--- a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Container, Card, CardBody } from 'reactstrap';
-
-import D3ComponentScrollyTelling from 'components/d3component_scrollytelling';
-import WaypointDirection from 'components/waypoint_direction';
-
-import createEvolvingChart, {
-  instanceChartCallbacks,
-  timelineChartCallbacks,
-  barChartCallbacks,
-  stackedBarChartCallbacks,
-} from 'd3/evolving_chart/evolving_chart';
-
-const StackedBarChartScrollyTelling = ({ epochs }) => {
-  const [isInitialized, setIsInitialized] = useState(false);
-
-  return (
-    <Container>
-      <div style={{ position: 'sticky', top: '10%' }}>
-        <D3ComponentScrollyTelling
-          callback={createEvolvingChart}
-          data={epochs}
-          isInitialized={isInitialized}
-          setIsInitialized={setIsInitialized}
-        />
-      </div>
-      <div style={{ marginBottom: '50%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            We can see that each colored block represents a part of your night. They are ordered from bed time to out of
-            bed timestamps you’ve written in your journal. Each color is associated with a specific sleep stage. You
-            went to bed at 12:22 am and you got out of bed at 9:47 am, which adds up to 9 hours and 25 minutes of time
-            spent in bed. Of this total time, you spent 7 hours and 27 minutes actually sleeping. You first fell asleep
-            at XX:XX, to which we will refer to as sleep onset. The last non wake block ended at XX:XX, which can also
-            be referred to as sleep offset. During that night's sleep, you went through each of the 5 five stages. Let's
-            try to see a little better what happened about each of them.
-          </p>
-        </CardBody>
-      </Card>
-      <div style={{ marginBottom: '125%' }} />
-      {isInitialized && (
-        <WaypointDirection onDown={instanceChartCallbacks.fromTimeline} onUp={timelineChartCallbacks.fromInstance} />
-      )}
-      <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>Wake stage is of course the stage we want to minimize when in bed. It can be decomposed into two parts:</p>
-          <ul>
-            <li> Sleep latency : Time spent before falling asleep, which corresponds to X minutes in your case. </li>
-            <li> Wake after sleep onset (WASO): Time spent awake after first falling asleep and before waking up. </li>
-            <li>
-              {' '}
-              For healthy adults, it is normal to experience small awakenings during the night. Unprovoked awakenings
-              are mostly during or after REM stages.{' '}
-            </li>
-          </ul>
-        </CardBody>
-      </Card>
-      <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            <strong>REM stage</strong> stands for “Rapid Eyes Movements” and is also known as “paradoxical sleep”. It is
-            associated with dreaming and, as the National Sleep Foundation says,{' '}
-            <strong>“the brain is awake and body paralyzed.”</strong>
-          </p>
-          <p>
-            <strong>N1 stage</strong> is associated with that drowsy feeling before falling asleep. Most people wouldn’t
-            say they fell asleep if they’ve been woken up from N1 sleep.
-          </p>
-          <p>
-            <strong>N2 stage</strong> still corresponds to a light sleep, but where the muscle activity decreases more,
-            and the eyes have stopped moving. It is called, along with N1, <strong>light sleep</strong>.
-          </p>
-          <p>
-            <strong>N3 stage</strong> is when you are deeply asleep, hence it’s also called <strong>deep sleep</strong>,
-            or sometimes <strong>slow wave</strong> sleep, and is the most difficult to wake up from. It is during those
-            stages that your cells get repaired, and that tissue grows. But how much time did you spend in each stage
-            during the whole night?
-          </p>
-        </CardBody>
-      </Card>
-      <div style={{ marginBottom: '125%' }} />
-      {isInitialized && (
-        <WaypointDirection onDown={barChartCallbacks.fromInstance} onUp={instanceChartCallbacks.fromBarChart} />
-      )}
-      <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            From here, we can look at your sleep efficiency, which is the proportion of time spent asleep over the
-            overall time spent in bed. In your case, it corresponds to 79%, or 7h27.
-          </p>
-        </CardBody>
-      </Card>
-      <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            We are currently looking at your in bed sleep stage proportions. Wake time may be overrepresented, because
-            it includes your sleep latency and the time you spent in bed after waking up. In order to look at your
-            actual stage proportions, we must cut them out from wake time to only keep WASO.
-          </p>
-        </CardBody>
-      </Card>
-      <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            We can see that the most prominent sleep stage is N2, which in your case corresponds to XXXX. How does your
-            night compare to other people’s night?
-          </p>
-        </CardBody>
-      </Card>
-      <div style={{ marginBottom: '125%' }} />
-      {isInitialized && (
-        <WaypointDirection
-          onDown={stackedBarChartCallbacks.fromBarChart}
-          onUp={barChartCallbacks.fromStackedBarChart}
-        />
-      )}
-      <div style={{ marginBottom: '125%' }} />
-      <Card className="shadow" style={{ position: 'relative' }}>
-        <CardBody>
-          <p>
-            As a rule of thumb, adults approximately stay 5% of their total sleep time in N1; 50% in N2; and 20% is in
-            N3. The remaining 25% is REM stage sleep.
-          </p>
-        </CardBody>
-      </Card>
-      <div style={{ marginBottom: '125%' }} />
-      &nbsp;
-    </Container>
-  );
-};
-
-StackedBarChartScrollyTelling.propTypes = {
-  epochs: PropTypes.object.isRequired,
-};
-
-export default StackedBarChartScrollyTelling;
diff --git a/web/src/views/sleep_analysis_results/style.css b/web/src/views/sleep_analysis_results/style.css
index 43784a03..648a37bb 100644
--- a/web/src/views/sleep_analysis_results/style.css
+++ b/web/src/views/sleep_analysis_results/style.css
@@ -3,3 +3,28 @@
   justify-content: space-between;
   margin: 1rem 0.1rem;
 }
+
+.scrollytelling_cards__w_text {
+  font-weight: bold;
+  color: #e3624b;
+}
+
+.scrollytelling_cards__rem_text {
+  font-weight: bold;
+  color: #ffd443;
+}
+
+.scrollytelling_cards__n1_text {
+  font-weight: bold;
+  color: #b0c9d9;
+}
+
+.scrollytelling_cards__n2_text {
+  font-weight: bold;
+  color: #4da6fe;
+}
+
+.scrollytelling_cards__n3_text {
+  font-weight: bold;
+  color: #48587f;
+}