diff --git a/client/actions/NotesActions.js b/client/actions/NotesActions.js
index a4798b4..c89310c 100644
--- a/client/actions/NotesActions.js
+++ b/client/actions/NotesActions.js
@@ -31,6 +31,12 @@ const NoteActions = {
         api.deleteNote(noteID)
             .then(() => this.loadNotes())
             .catch((err) => console.log(err));
+    },
+
+    updateNote(noteID, data) {
+        api.updateNote(noteID, data)
+            .then(()=> this.loadNotes())
+            .catch((err) => console.log(err))
     }
 };
 
diff --git a/client/components/App.jsx b/client/components/App.jsx
index 97c09c5..ead3f8d 100644
--- a/client/components/App.jsx
+++ b/client/components/App.jsx
@@ -20,9 +20,8 @@ export class App extends React.Component {
     constructor(props) {
         super(props);
         this.state = getStateFromFlux();
-        this.handleNoteAdd = this.handleNoteAdd.bind(this);
-        this.handleNoteDelete = this.handleNoteDelete.bind(this);
         this._onChange = this._onChange.bind(this);
+        this.handleNoteUpdate = this.handleNoteUpdate.bind(this);
     }
 
     componentWillMount() {
@@ -30,7 +29,7 @@ export class App extends React.Component {
     }
 
     componentDidMount() {
-        NotesStore.addChangeListener(this._onChange)
+        NotesStore.addChangeListener(this._onChange);
     }
 
     componentWillUnmount() {
@@ -45,12 +44,24 @@ export class App extends React.Component {
         NotesActions.deleteNote(note.id);
     }
 
+    handleNoteUpdate(data) {
+        this.setState({noteToEdit: data});
+    }
+
     render() {
         return (
             <div className="App">
                 <h2 className="App_header">Notes App</h2>
-                <NotesGrid notes={this.state.notes} onNoteDelete={this.handleNoteDelete}/>
-                <NotesEditor onNoteAdd={this.handleNoteAdd}/>
+                <NotesGrid
+                    notes={this.state.notes}
+                    onNoteDelete={this.handleNoteDelete}
+                    onNoteUpdate={this.handleNoteUpdate}
+                />
+                <NotesEditor
+                    onNoteAdd={this.handleNoteAdd}
+                    onNoteUpdate={this.handleNoteUpdate}
+                    noteToEdit={this.state.noteToEdit}
+                />
             </div>
         );
     }
diff --git a/client/components/Note.jsx b/client/components/Note.jsx
index c95a0c7..806c3d4 100644
--- a/client/components/Note.jsx
+++ b/client/components/Note.jsx
@@ -1,14 +1,16 @@
 import React from 'react';
 
+import {FaClose, FaEdit} from 'react-icons/lib/fa/';
+
 import './Note.less';
 
 export class Note extends React.Component {
     render() {
         const style = {backgroundColor: this.props.color};
-
         return (
             <div className='Note' style={style}>
-                <span className='Note__del-icon' onClick={this.props.onDelete}>x</span>
+                <FaClose className='Note__del-icon' onClick={this.props.onDelete} />
+                <FaEdit className="Note__edit-icon" onClick={this.props.onUpdate} />
                 {
                     this.props.title
                         ? <h4 className='Note__title'>{this.props.title}</h4>
@@ -17,6 +19,7 @@ export class Note extends React.Component {
                 {
                     this.props.date
                 }
+                {/*this.props.children > text of node Note*/}
                 <div className='Note__text'>{this.props.children}</div>
             </div>
         );
diff --git a/client/components/Note.less b/client/components/Note.less
index 859f7ee..7fa5d68 100644
--- a/client/components/Note.less
+++ b/client/components/Note.less
@@ -17,6 +17,9 @@
     .Note__del-icon {
       display: block;
     }
+    .Note__edit-icon{
+      display: block;
+    }
   }
 }
 
@@ -32,4 +35,13 @@
   display: none;
   color: rgba(0,0,0,0.6);
   cursor: pointer;
+}
+
+.Note__edit-icon {
+  position: absolute;
+  top: 20px;
+  right:5px;
+  display: none;
+  color: rgba(0,0,0,0.6);
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/client/components/NotesEditor.jsx b/client/components/NotesEditor.jsx
index 207900e..dbbcd46 100644
--- a/client/components/NotesEditor.jsx
+++ b/client/components/NotesEditor.jsx
@@ -25,6 +25,7 @@ export class NotesEditor extends React.Component {
 
     handleNoteAdd() {
         const newNote = {
+            id: this.state.id,
             title: this.state.title,
             text: this.state.text,
             color: this.state.color
@@ -32,12 +33,23 @@ export class NotesEditor extends React.Component {
 
         this.props.onNoteAdd(newNote);
         this.setState({
+            id: undefined,
             title: '',
             text: '',
             color: '#FFFFFF'
         });
     }
 
+    //before mount we change state if props are exist. Edit function
+    componentWillReceiveProps(nextProps) {
+        if(nextProps.noteToEdit) this.setState(nextProps.noteToEdit);
+    }
+
+    //After successful update needs to change state in App. Edit function
+    componentDidUpdate(){
+        if (this.props.noteToEdit) this.props.onNoteUpdate();
+    }
+
     render() {
         return (
             <div className="NoteEditor">
@@ -61,7 +73,7 @@ export class NotesEditor extends React.Component {
                         disabled={!this.state.text}
                         onClick={this.handleNoteAdd}
                     >
-                        Add
+                        {this.state.id ? "Edit" : "Add"}
                     </button>
                 </div>
             </div>
diff --git a/client/components/NotesGrid.jsx b/client/components/NotesGrid.jsx
index a4e9579..57b5921 100644
--- a/client/components/NotesGrid.jsx
+++ b/client/components/NotesGrid.jsx
@@ -25,8 +25,9 @@ export class NotesGrid extends React.Component {
                             key={note.id}
                             title={note.title}
                             onDelete={this.props.onNoteDelete.bind(null, note)}
+                            onUpdate={this.props.onNoteUpdate.bind(null, note)}
                             color={note.color}
-                            date={`${note.createdAt.slice(10} {note.createdAt.slice(0,10)}`}
+                            date={`${note.createdAt.slice(11,19)} ${note.createdAt.slice(0,10)}`}
                         >
                             {note.text}
                         </Note>
diff --git a/client/stores/NotesStore.js b/client/stores/NotesStore.js
index 3a56ded..8bbd345 100644
--- a/client/stores/NotesStore.js
+++ b/client/stores/NotesStore.js
@@ -42,7 +42,6 @@ const NotesStore = Object.assign({}, EventEmitter.prototype, {
 });
 
 AppDispatcher.register(function(action) {
-    //console.log(AppConstants, action.type);
     switch(action.type) {
         case AppConstants.LOAD_NOTES_REQUEST: {
             _isLoading = true;