--- a/client/src/App.scss	Thu Jun 22 12:53:00 2017 +0200
+++ b/client/src/App.scss	Thu Jun 22 12:37:53 2017 +0200
@@ -118,6 +118,7 @@
             }
         }
         .notes-list {
+            min-width: 75%;
             overflow-y: auto;
         }
     }
@@ -129,6 +130,7 @@
 }
 
 .note {
+    display: flex;
     position: relative;
     padding-left: 70px;
     margin-bottom: 20px;
@@ -159,6 +161,14 @@
         bottom: 0;
         left: 0;
     }
+
+    &-content {
+        width: 66.6666%;
+    }
+
+    &-margin-comment {
+        width: 33.3333%;
+    }
 }
 
 span.annotation {

--- a/client/src/actions/notesActions.js	Thu Jun 22 12:53:00 2017 +0200
+++ b/client/src/actions/notesActions.js	Thu Jun 22 12:37:53 2017 +0200
@@ -13,6 +13,7 @@
     startedAt: data.startedAt,
     finishedAt: data.finishedAt,
     categories: data.categories,
+    marginComment: data.marginComment,
   };
 
   const noteSrvr = {
@@ -40,6 +41,5 @@
         rollback: { type: types.NOOP }
       }
     }
-
   };
 }

--- a/client/src/components/Note.js	Thu Jun 22 12:53:00 2017 +0200
+++ b/client/src/components/Note.js	Thu Jun 22 12:37:53 2017 +0200
@@ -7,7 +7,10 @@
     <div id={"note-" + note._id} className="note">
       <span className="start">{formatTimestamp(note.startedAt)}</span>
       <span className="finish">{formatTimestamp(note.finishedAt)}</span>
-      <div dangerouslySetInnerHTML={{ __html: note.html }} />
+      <div className="note-content" dangerouslySetInnerHTML={{ __html: note.html }} />
+      <div className="note-margin-comment">
+        <small className="text-muted">{ note.marginComment }</small>
+      </div>
     </div>
   );
 };

--- a/client/src/components/NoteInput.js	Thu Jun 22 12:53:00 2017 +0200
+++ b/client/src/components/NoteInput.js	Thu Jun 22 12:37:53 2017 +0200
@@ -32,15 +32,16 @@
     const raw = this.refs.editor.asRaw();
     const html = this.refs.editor.asHtml();
     const categories = this.refs.editor.asCategories();
+    const marginComment = this.marginComment.value;
 
     this.props.notesActions.addNote(this.props.session, {
       plain: plain,
       raw: raw,
       html: html,
-
       startedAt: this.state.startedAt,
       finishedAt: now(),
       categories: categories,
+      marginComment: marginComment,
     });
 
     this.refs.editor.clear();
@@ -74,7 +75,7 @@
               name="margin"
               componentClass="textarea"
               placeholder="Enter a margin comment for your note"
-              inputRef={ ref => { this.description = ref; } }
+              inputRef={ ref => { this.marginComment = ref; } }
             />
           </div>
         </div>

--- a/client/src/store/noteRecord.js	Thu Jun 22 12:53:00 2017 +0200
+++ b/client/src/store/noteRecord.js	Thu Jun 22 12:37:53 2017 +0200
@@ -11,5 +11,7 @@
   startedAt: '',
   finishedAt: '',
 
-  categories: []
+  categories: [],
+
+  marginComment: ''
 }, 'Note');