--- a/client/src/components/Note.js	Tue Oct 09 18:59:20 2018 +0200
+++ b/client/src/components/Note.js	Tue Oct 09 19:02:17 2018 +0200
@@ -84,21 +84,22 @@
     if (this.props.isEditing) {
       return (
         <a onClick={this.onClickClose}>
-          <span className="material-icons">close</span>
+          <span className="material-icons pl-2">close</span>
         </a>
       );
     }
 
     return (
       <a onClick={this.onClickDelete}>
-        <span className="material-icons">delete</span>
+        <span className="material-icons delete-icon pl-2">delete</span>
       </a>
     )
   }
 
   render() {
     return (
-    <div id={"note-" + this.props.note._id} className="note text-sm mr-5 pt-1" onClick={ this.props.onClick }>
+    <div id={"note-" + this.props.note._id} className="note text-sm mr-5 pt-1"
+    onClick={ this.props.onClick }>
       <div className="mr-5">
         <small className="start text-warning pt-2">{ formatTimestamp(this.props.note.startedAt) }</small>
         <small className="finish text-warning pb-2">{ formatTimestamp(this.props.note.finishedAt) }</small>

--- a/client/src/components/Note.scss	Tue Oct 09 18:59:20 2018 +0200
+++ b/client/src/components/Note.scss	Tue Oct 09 19:02:17 2018 +0200
@@ -22,10 +22,15 @@
     }
 
     &:hover {
-        // opacity: .6;
+        color: darkgray;
         border-bottom-color: black;
     }
 
+    &:hover .delete-icon {
+        opacity: 1;
+        color: black;
+    }
+
     .start, .finish {
         position: absolute;
         padding-right: 5rem;
@@ -50,3 +55,7 @@
     }
 }
 
+.delete-icon {
+    font-size: 1.2rem;
+    opacity: 0;
+}