--- a/client/src/App.scss	Thu Jun 01 18:46:34 2017 +0200
+++ b/client/src/App.scss	Thu Jun 01 19:01:03 2017 +0200
@@ -43,3 +43,35 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.note {
+    position: relative;
+    padding-left: 70px;
+    margin-bottom: 20px;
+
+    &:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 27px;
+        z-index: -1;
+        display: block;
+        width: 2px;
+        background-color: #e6ebf1;
+    }
+
+    .start, .finish {
+        position: absolute;
+        background-color: #fff;
+    }
+
+    .start {
+        top: 0;
+        left: 0;
+    }
+    .finish {
+        bottom: 0;
+        left: 0;
+    }
+}

--- a/client/src/components/Note.js	Thu Jun 01 18:46:34 2017 +0200
+++ b/client/src/components/Note.js	Thu Jun 01 19:01:03 2017 +0200
@@ -3,8 +3,9 @@
 
 const Note = ({note}) => {
   return (
-    <div id={"note-" + note.id}>
-      <h5>{note.startedAt} ⇒ {note.finishedAt}</h5>
+    <div id={"note-" + note.id} className="note">
+      <span className="start">{note.startedAt}</span>
+      <span className="finish">{note.finishedAt}</span>
       <div dangerouslySetInnerHTML={{ __html: note.html }} />
     </div>
   );

--- a/client/src/components/NotesList.js	Thu Jun 01 18:46:34 2017 +0200
+++ b/client/src/components/NotesList.js	Thu Jun 01 19:01:03 2017 +0200
@@ -16,11 +16,11 @@
   }
 
   return (
-    <ListGroup>
+    <div>
       {notes.map((note) =>
-        <ListGroupItem key={note.id}><Note note={note} /></ListGroupItem>
+        <Note note={note} />
       )}
-    </ListGroup>
+    </div>
   );
 };