diff -r 183b128a4189 -r a642639dbc07 client/src/components/Note.js
--- a/client/src/components/Note.js	Mon Oct 08 03:30:54 2018 +0200
+++ b/client/src/components/Note.js	Mon Oct 08 04:09:19 2018 +0200
@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types';
 import { formatTimestamp } from '../utils';
 import SlateEditor from './SlateEditor';
+import './Note.css';
 
 class Note extends Component {
 
@@ -18,14 +19,14 @@
     const raw = this.refs.editor.asRaw();
     const html = this.refs.editor.asHtml();
     const categories = this.refs.editor.asCategories();
-    const marginComment = this.marginComment.value;
+    // const marginComment = this.marginComment.value;
 
     const data = {
       plain,
       raw,
       html,
       categories,
-      marginComment
+      // marginComment
     }
 
     this.props.onSave(this.props.note, data);
@@ -41,7 +42,7 @@
   renderNoteContent() {
     if (this.props.isEditing) {
       return (
-        <div className="note-content">
+        <div className="note-content w-100 pl-2 pt-2">
           <SlateEditor ref="editor"
             onButtonClick={ this.onClickButton }
             note={ this.props.note }
@@ -51,31 +52,33 @@
     }
 
     return (
-      <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
+      <div className="note-content w-100 pl-2 pt-2" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
     )
   }
 
-  renderNoteMarginComment() {
-    if (this.props.isEditing) {
-      return (
-        <div className="note-margin-comment">
-          <input type="text" className="form-control"
-            name="margin"
-            componentClass="textarea"
-            placeholder="Enter a margin comment for your note"
-            defaultValue={ this.props.note.marginComment }
-            // inputRef={ ref => { this.marginComment = ref; } } />
-            ref={(marginComment) => { this.marginComment = marginComment; }} />
-        </div>
-      )
-    }
+  // renderNoteMarginComment() {
+  //   if (this.props.isEditing) {
+  //     return (
+  //       <div className="row">
+  //       <div className="note-margin-comment w-25 mt-3">
+  //         <input type="text" className="form-control"
+  //           name="margin"
+  //           componentClass="textarea"
+  //           placeholder="Espace pour un commentaire de marge"
+  //           defaultValue={ this.props.note.marginComment }
+  //           // inputRef={ ref => { this.marginComment = ref; } } />
+  //           ref={(marginComment) => { this.marginComment = marginComment; }} />
+  //       </div>
+  //       </div>
+  //     )
+  //   }
 
-    return (
-      <div className="note-margin-comment">
-        <small className="text-muted">{ this.props.note.marginComment }</small>
-      </div>
-    )
-  }
+    // return (
+    //   <div className="note-margin-comment w-25 mt-5">
+    //     <small className="text-muted">{ this.props.note.marginComment }</small>
+    //   </div>
+    // )
+  // }
 
   renderNoteRight() {
     if (this.props.isEditing) {
@@ -95,13 +98,17 @@
 
   render() {
     return (
-      <div id={"note-" + this.props.note._id} className="note" onClick={ this.props.onClick }>
-        <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
-        <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
+    <div id={"note-" + this.props.note._id} className="note text-sm mr-5 pt-1" onClick={ this.props.onClick }>
+      <div className="mr-5">
+        <small className="start text-warning pt-2">{ formatTimestamp(this.props.note.startedAt) }</small>
+        <small className="finish text-warning pb-2">{ formatTimestamp(this.props.note.finishedAt) }</small>
+      </div>
         { this.renderNoteContent() }
-        { this.renderNoteMarginComment() }
+        {/* { this.renderNoteMarginComment() } */}
+        <div className="float-right">
         { this.renderNoteRight() }
-      </div>
+        </div>
+    </div>
     );
   };
 }