--- a/client/src/components/Note.js	Thu Jun 29 17:11:56 2017 +0200
+++ b/client/src/components/Note.js	Thu Jun 29 17:26:35 2017 +0200
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { FormControl } from 'react-bootstrap';
 import { formatTimestamp } from '../utils';
 import SlateEditor from './SlateEditor';
 
@@ -18,12 +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 data = {
       plain,
       raw,
       html,
-      categories
+      categories,
+      marginComment
     }
 
     this.props.onSave(this.props.note, data);
@@ -52,6 +55,27 @@
     )
   }
 
+  renderNoteMarginComment() {
+    if (this.props.isEditing) {
+      return (
+        <div className="note-margin-comment">
+          <FormControl
+            name="margin"
+            componentClass="textarea"
+            placeholder="Enter a margin comment for your note"
+            defaultValue={ this.props.note.marginComment }
+            inputRef={ ref => { this.marginComment = ref; } } />
+        </div>
+      )
+    }
+
+    return (
+      <div className="note-margin-comment">
+        <small className="text-muted">{ this.props.note.marginComment }</small>
+      </div>
+    )
+  }
+
   renderNoteRight() {
     if (this.props.isEditing) {
       return (
@@ -74,9 +98,7 @@
         <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
         <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
         { this.renderNoteContent() }
-        <div className="note-margin-comment">
-          <small className="text-muted">{ this.props.note.marginComment }</small>
-        </div>
+        { this.renderNoteMarginComment() }
         { this.renderNoteRight() }
       </div>
     );