--- a/client/src/components/NoteInput.js	Thu Jun 01 16:15:08 2017 +0200
+++ b/client/src/components/NoteInput.js	Thu Jun 01 17:32:07 2017 +0200
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
-import { Form, FormGroup, Button } from 'react-bootstrap';
-import { Plain } from 'slate';
+import { Form, FormGroup, Button, Label, Row, Col } from 'react-bootstrap';
+import moment from 'moment';
 
 import PropTypes from 'prop-types';
 import SlateEditor from './SlateEditor';
@@ -8,12 +8,18 @@
 class NoteInput extends Component {
 
   state = {
-    buttonDisabled: false
+    buttonDisabled: false,
+    time: moment().format('H:mm:ss'),
+    startedAt: null,
+    finishedAt: null,
   }
 
-  onChange = (state) => {
-    const text = Plain.serialize(state);
-    this.setState({ buttonDisabled: text.length === 0 });
+  onEditorChange = (e) => {
+    this.setState({
+      buttonDisabled: e.state.document.length === 0,
+      startedAt: e.startedAt,
+      finishedAt: e.finishedAt
+    });
   }
 
   onAddNoteClick = () => {
@@ -22,7 +28,9 @@
 
     this.props.addNote(this.props.session, {
       plain: plain,
-      raw: raw
+      raw: raw,
+      startedAt: this.state.startedAt,
+      finishedAt: moment().format('H:mm:ss')
     });
 
     this.refs.editor.clear();
@@ -32,14 +40,41 @@
   componentDidMount() {
     const text = this.refs.editor.asPlain();
     this.setState({ buttonDisabled: text.length === 0 });
+    setInterval(() => {
+      const time = moment().format('H:mm:ss');
+      this.setState({ time });
+    }, 1000);
+  }
+
+  renderTiming() {
+    if (this.state.startedAt && this.state.finishedAt) {
+      return (
+        <span>
+          <Label>{this.state.startedAt}</Label> ⇒ <Label>{this.state.finishedAt}</Label>
+        </span>
+      )
+    } else {
+      return (
+        <span>No timing</span>
+      )
+    }
   }
 
   render() {
     return (
       <Form>
+        <Row>
+          <Col md={6}>
+            { this.renderTiming() }
+          </Col>
+          <Col md={6} className="text-right">
+            <Label bsStyle="info">{ this.state.time }</Label>
+          </Col>
+        </Row>
+        <hr />
         <FormGroup>
           <div className="editor-wrapper">
-            <SlateEditor ref="editor" onChange={this.onChange} />
+            <SlateEditor ref="editor" onChange={this.onEditorChange} />
           </div>
         </FormGroup>
         <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button>