--- a/client/src/App.scss	Fri Jun 23 15:21:43 2017 +0200
+++ b/client/src/App.scss	Fri Jun 23 15:57:35 2017 +0200
@@ -139,8 +139,8 @@
 .note {
     display: flex;
     position: relative;
-    padding: 10px 10px 10px 80px;
-    margin-bottom: 20px;
+    padding: 20px 10px 20px 80px;
+    margin-bottom: 10px;
     cursor: pointer;
     min-height: ($line-height-computed * 4);
     border: 1px solid transparent;

--- a/client/src/components/Note.js	Fri Jun 23 15:21:43 2017 +0200
+++ b/client/src/components/Note.js	Fri Jun 23 15:57:35 2017 +0200
@@ -42,6 +42,13 @@
     this.setState({ edit: false })
   }
 
+  onClickClose = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.setState({ edit: false })
+  }
+
   renderNoteContent() {
     if (this.state.edit) {
       return (
@@ -58,6 +65,22 @@
     )
   }
 
+  renderNoteRight() {
+    if (this.state.edit) {
+      return (
+        <a onClick={this.onClickClose}>
+          <span className="material-icons">close</span>
+        </a>
+      );
+    }
+
+    return (
+      <a onClick={this.onClickDelete}>
+        <span className="material-icons">delete</span>
+      </a>
+    )
+  }
+
   render() {
     return (
       <div id={"note-" + this.props.note._id} className="note" onClick={ this.enterEditMode }>
@@ -67,9 +90,7 @@
         <div className="note-margin-comment">
           <small className="text-muted">{ this.props.note.marginComment }</small>
         </div>
-        <a onClick={this.onClickDelete}>
-          <span className="material-icons">delete</span>
-        </a>
+        { this.renderNoteRight() }
       </div>
     );
   };