diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index 02c1caa84f4a5065b639e478bf4c320eb786ca00..3e2d315e7be96d467ce71c5e5b874a878222e2f1 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -22,7 +22,8 @@ class Editor extends ProseEditor {
     this.handleActions({
       'showComments': function () { this.toggleCommentsArea(true) },
       'hideComments': function () { this.toggleCommentsArea(false) },
-      'trackChangesUpdate': function () { this.updateTrackChange() }
+      'trackChangesUpdate': function () { this.updateTrackChange() },
+      'trackChangesViewUpdate': function () { this.updateTrackChangeView() }
     })
   }
 
@@ -36,6 +37,11 @@ class Editor extends ProseEditor {
     this.extendState({ trackChanges: !this.props.trackChanges })
   }
 
+  updateTrackChangeView () {
+    this.extendState({ trackChangesView: !this.state.trackChangesView })
+    console.log('in editor', this.state.trackChangesView)
+  }
+
   willUpdateState () {}
 
   didMount () {
@@ -122,7 +128,8 @@ class Editor extends ProseEditor {
   getInitialState () {
     return {
       editorReady: false,
-      trackChanges: this.props.trackChanges
+      trackChanges: this.props.trackChanges,
+      trackChangesView: true
     }
   }
 
diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss
index c83cbf29a5125923f48d978a8966dac54763dca1..14171590e9dc4e169e1bc4e4ec1105d4c09eabad 100644
--- a/app/components/SimpleEditor/SimpleEditor.scss
+++ b/app/components/SimpleEditor/SimpleEditor.scss
@@ -106,6 +106,9 @@ $white: #fff;
     .sm-target-track-change-toggle-view {
       cursor: pointer;
       button::after {
+        content: 'View is Off';
+      }
+      .track-changes-view-active::after {
         content: 'View is On';
       }
     }
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangeComponent.js b/app/components/SimpleEditor/elements/track_change/TrackChangeComponent.js
index fb744b265dd6a9b0d94eaee6a10b3dc159165271..b0c41a18394aada2d036d2d30fb3dcdbea5c35de 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangeComponent.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangeComponent.js
@@ -4,12 +4,25 @@ class TrackChangeComponent extends AnnotationComponent {
   render ($$) {
     const user = this.context.controller.props.user
     const status = this.props.node.status
+    const trackChangesView = this.toggleTrackChangeView()
+    let hideDeletes = ''
+    let ShowAdditions = ''
+    // console.log('trackChangesView', trackChangesView)
+    if (trackChangesView === false && status === 'delete') {
+      hideDeletes = 'sc-track-delete-hide'
+    }
+
+    if (trackChangesView === false && status === 'add') {
+      ShowAdditions = 'sc-track-add-show'
+    }
 
     var el = $$('span')
       .attr('data-id', this.props.node.id)
       .attr('data-user', user.username)
       .attr('data-role', user.teams[0].name)
       .addClass(this.getClassNames())
+      .addClass(hideDeletes)
+      .addClass(ShowAdditions)
       .append(this.props.children)
 
     const className = 'sc-track-change-' + status
@@ -18,6 +31,20 @@ class TrackChangeComponent extends AnnotationComponent {
     return el
   }
 
+  getSurface () {
+    const surfaceManager = this.context.surfaceManager
+    const containerId = this.context.controller.props.containerId
+
+    return surfaceManager.getSurface(containerId)
+  }
+
+  toggleTrackChangeView () {
+    const self = this
+    const surface = self.getSurface()
+    // console.log('yoyyoyoy', surface)
+    return surface._owner.state.trackChangesView
+  }
+
 }
 
 export default TrackChangeComponent
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewCommand.js b/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewCommand.js
index 393fbe8985e1125d05f297daa522ecfac721c380..1eb570f61368dbad3ac9d306cec7a289063eb459 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewCommand.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewCommand.js
@@ -10,8 +10,9 @@ class TrackChangeControlViewCommand extends Command {
 
     return newState
   }
-  execute () {
-    console.log('execute command enable/disable view mode track changes')
+  execute (params, context) {
+    const surface = context.surfaceManager.getSurface('body')
+    surface.send('trackChangesViewUpdate')
     return true
   }
 }
diff --git a/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js b/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js
index 4f48f3fb55598df382cd85803c938971223b5ecd..1bb44a8e40a06aca4a85f32b335377462002a463 100644
--- a/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js
+++ b/app/components/SimpleEditor/elements/track_change/TrackChangeControlViewTool.js
@@ -1,6 +1,25 @@
 import { Tool } from 'substance'
 
-class TrackChangeControlViewTool extends Tool {}
+class TrackChangeControlViewTool extends Tool {
+  renderButton ($$) {
+    const el = super.renderButton($$)
+    let trackChangesViewMode = this.isTrackChangesViewOn()
+    if (trackChangesViewMode === true) el.addClass('track-changes-view-active')
+    return el
+  }
+
+  getSurface () {
+    const surfaceManager = this.context.surfaceManager
+    const containerId = this.context.controller.props.containerId
+    return surfaceManager.getSurface(containerId)
+  }
+
+  isTrackChangesViewOn () {
+    const surface = this.getSurface()
+    if (!surface) return
+    return surface._owner.state.trackChangesView
+  }
+}
 
 TrackChangeControlViewTool.type = 'track-change-toggle-view'
 
diff --git a/app/components/SimpleEditor/elements/track_change/trackChange.scss b/app/components/SimpleEditor/elements/track_change/trackChange.scss
index b8131dcb69f9b590a484b516ce06e559e6fac3ec..d0d9d2dd41f4ddc680de93605a0f1a1dacb84735 100644
--- a/app/components/SimpleEditor/elements/track_change/trackChange.scss
+++ b/app/components/SimpleEditor/elements/track_change/trackChange.scss
@@ -12,3 +12,11 @@
   background-color: red;
   text-decoration: line-through;
 }
+
+.sc-track-delete-hide {
+  display: none;
+}
+
+.sc-track-add-show {
+  background: transparent !important;
+}