--- a/client/src/components/SessionSummary.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/SessionSummary.js	Mon Oct 08 04:09:19 2018 +0200
@@ -1,16 +1,18 @@
 import React from 'react';
 import _ from 'lodash';
 import '../App.css';
+import './SessionSummary.css'
 import {formatTimestamp} from '../utils';
 
 const SessionSummary = ({notes}) => (
-  <ul className="list-group">
+  <ul className="list-group sticky-left">
     {notes.map((note) =>
-      <li className="list-group-item" key={note.get('_id')}>
-        <a href={'#note-' + note.get('_id')}>
-          <span className="text-muted">{formatTimestamp(note.startedAt)} → {formatTimestamp(note.finishedAt)}</span>
-          <span className="float-right">{_.words(note.plain).length} words</span>
-        </a>
+      <li className="list-group-item border-0" key={note.get('_id')}>
+          <a href={'#note-' + note.get('_id')}>
+            <small className="note-time text-warning bg-success border-0 text-center">{formatTimestamp(note.startedAt)}</small>
+            <small className="note-length font-weight-bold px-2 text-muted text-center">{_.words(note.plain).length} mots</small>
+            <small className="note-time text-warning bg-success border-0 text-center">{formatTimestamp(note.finishedAt)}</small>
+          </a>
       </li>
     )}
   </ul>