diff --git a/app/components/SimpleEditor/ContainerEditor.js b/app/components/SimpleEditor/ContainerEditor.js
index ed1fe2f34876bbd8d2f8a5d14af6f9afe6379452..5cc6ebd03d1dec4888f19b5697216e38ae744271 100644
--- a/app/components/SimpleEditor/ContainerEditor.js
+++ b/app/components/SimpleEditor/ContainerEditor.js
@@ -2,7 +2,7 @@ import { each, keys, includes } from 'lodash'
 import {
   ContainerEditor as SubstanceContainerEditor,
   Surface,
-  uuid
+  uuid, createAnnotation
 } from 'substance'
 
 class ContainerEditor extends SubstanceContainerEditor {
@@ -43,7 +43,38 @@ class ContainerEditor extends SubstanceContainerEditor {
     // if (this.isReadOnlyMode()) {
     //   const documentSession = this.getDocumentSession()
     //   documentSession.on('didUpdate', this.disableToolbar, this)
-    //
+    // }
+
+    // Start
+    if (this.props.trackChanges) {
+      el.addEventListener('keydown', function (e) {
+        const surface = this.context.surfaceManager.getSurface('body')
+        const session = this.context.documentSession
+        const sel = session.getSelection()
+
+        const path = sel.path
+        const startOffset = sel.startOffset - 1
+        const endOffset = sel.endOffset + 1
+
+        const createAnno = session.createSelection(path, startOffset, endOffset)
+
+        const newNode = {
+          selection: createAnno,
+          node: { type: 'track-change' }
+        }
+
+        surface.transaction((tx, args) => {
+          createAnnotation(tx, newNode)
+        })
+        if (e.keyCode === 8) {
+          console.log('newNode', newNode)
+          let elem = document.querySelectorAll('[data-id=' + newNode.node.id + ']')
+          elem[0].style.backgroundColor = 'transparent'
+          elem[0].style.textDecoration = 'line-through'
+        }
+      })
+    }
+    // END
     return el
   }
 
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangePackage.js b/app/components/SimpleEditor/elements/track_change/TrackChangePackage.js
index 246cce5beb2abc34d8cc71dc5b71ccdbcd4caf1d..a3f3ac50c5f5e102a20cdd73fc8bb093515fd15d 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangePackage.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangePackage.js
@@ -2,7 +2,7 @@ import TrackChange from './TrackChange'
 import TrackChangeCommand from './TrackChangeCommand'
 import TrackChangeComponent from './TrackChangeComponent'
 import TrackChangeHTMLConverter from './TrackChangeHTMLConverter'
-import { AnnotationTool } from 'substance'
+// import { AnnotationTool } from 'substance'
 export default {
   name: 'track-change',
   configure: function (config) {
@@ -10,7 +10,7 @@ export default {
 
     config.addComponent(TrackChange.type, TrackChangeComponent)
     config.addConverter('html', TrackChangeHTMLConverter)
-    config.addTool('track-change', AnnotationTool, { target: 'insert' })
+    // config.addTool('track-change', AnnotationTool, { target: 'insert' })
     config.addCommand(TrackChange.type, TrackChangeCommand, { nodeType: TrackChange.type })
     config.addIcon('track-change', { 'fontawesome': 'fa-eye' })
     config.addLabel('track-change', {
diff --git a/app/components/SimpleEditor/elements/track_change/trackChange.scss b/app/components/SimpleEditor/elements/track_change/trackChange.scss
index d0c9affe5fa8adb47448dbbad5b88c6ab00173b9..d995404ea7945924b1f82292f714a8c50b1376a5 100644
--- a/app/components/SimpleEditor/elements/track_change/trackChange.scss
+++ b/app/components/SimpleEditor/elements/track_change/trackChange.scss
@@ -1,3 +1,3 @@
 .sc-track-change {
-  background-color: blue;
+  background-color: #f7f70c;
 }