diff -r 5c3af4f10e92 -r 964438ef8401 client/src/components/NotesList.js
--- a/client/src/components/NotesList.js	Tue Sep 25 02:02:13 2018 +0200
+++ b/client/src/components/NotesList.js	Mon Oct 01 00:17:45 2018 +0200
@@ -12,9 +12,21 @@
       editingNote: null,
       noteToDelete: null,
       modalIsOpen: false,
-    };
+    }
   }
 
+  componentDidUpdate(prevProps) {
+    if ((this.props.notes || []).size > (prevProps.notes || []).size) {
+    this.node.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"})
+    }
+  }
+
+  // componentDidUpdate(prevProps) {
+  //   if (this.props.notes.size > prevProps.notes.size) {
+  //   this.node.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"})
+  //   }
+  // }
+
   componentWillMount() {
     Modal.setAppElement('body');
 }
@@ -68,36 +80,38 @@
   render() {
     if (this.props.notes.size === 0) {
       return (
-        <div className="alert alert-warning">Commencez votre première note en écrivant dans le champ texte ci-dessous</div>
+        <div></div>
       );
     }
 
     return (
       <div>
-
-        {this.props.notes.map((note) =>
-          <Note
-            note={ note }
-            key={ note._id }
-            onClick={ this.enterEditMode.bind(this, note) }
-            onClose={ this.closeNote }
-            onDelete={ this.confirmDelete.bind(this, note) }
-            onSave={ this.updateNote }
-            isEditing={ this.state.editingNote && note === this.state.editingNote }
-            annotationCategories={this.props.annotationCategories} />
-        )}
+        <div>
+          {this.props.notes.map((note) =>
+            <Note
+              note={ note }
+              key={ note._id}
+              onClick={ this.enterEditMode.bind(this, note) }
+              onClose={ this.closeNote }
+              onDelete={ this.confirmDelete.bind(this, note) }
+              onSave={ this.updateNote }
+              isEditing={ this.state.editingNote && note === this.state.editingNote }
+              annotationCategories={this.props.annotationCategories} />
+          )}
+            <div className="dummy-div" ref={node => this.node = node}/>
+          </div>
 
         <Modal
-        className="Modal__Bootstrap modal-dialog mt-5 pt-5 justify-content-lg-center"
+        className="Modal__Bootstrap modal-dialog modal-dialog-centered w-25"
         // closeTimeoutMS={150}
         isOpen={this.state.modalIsOpen}
         onRequestClose={this.handleModalCloseRequest}
         >
           <div id="delete-note-modal" className="modal-content">
-            <span id="delete-note-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
+            <span id="delete-note-close-modal-button" className="material-icons text-right" onClick={ this.handleModalCloseRequest }>close</span>
             <div className="modal-body text-center">
-            <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette note ?</span>
-              <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mt-3" id="delete-note-modal-button" onClick={ this.deleteNote }>Confirmer</button>
+            <span className="modal-text">Supprimer cette note ?</span>
+              <button type="button" className="btn btn-info text-secondary font-weight-bold py-1 px-2 ml-3" id="delete-note-modal-button" onClick={ this.deleteNote }>Supprimer</button>
             </div>
           </div>
         </Modal>