diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index d0077c0e271eed3d4c28b6e22da3d9d2fc906c9b..5719bf380f0c64103b65efdd616cf00df2e8e12e 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -59,6 +59,7 @@ const Editoria = () => {
           placeholder="Type Something..."
           fileUpload={file => renderImage(file)}
           value={demo}
+          // readonly
           layout={layout}
           // onChange={source => console.log(source)}
           user={user}
diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index e67d9686e4c54c4692af8fc1f9a3c9afaec593ec..485a423cc9f969d569cfa933ecff2340758468fb 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -107,8 +107,27 @@ export default {
   TitleService: { updateTitle },
   RulesService: [emDash, ellipsis],
   ShortCutsService: {},
-  EnableTrackChangeService: { enabled: false },
-
+  EnableTrackChangeService: { enabled: false, toggle: true },
+  AcceptTrackChangeService: {
+    own: {
+      accept: true,
+      reject: true,
+    },
+    others: {
+      accept: true,
+      reject: true,
+    },
+  },
+  RejectTrackChangeService: {
+    own: {
+      accept: true,
+      reject: true,
+    },
+    others: {
+      accept: true,
+      reject: true,
+    },
+  },
   PmPlugins: [
     columnResizing(),
     tableEditing(),
diff --git a/wax-prosemirror-components/src/components/editingSuggesting/EditingSuggestingDropDown.js b/wax-prosemirror-components/src/components/editingSuggesting/EditingSuggestingDropDown.js
index 830a4bb49c5778b54f03310a454e31382d9964b2..845dd8fefa8467e7d41be71a95978d4239baef2a 100644
--- a/wax-prosemirror-components/src/components/editingSuggesting/EditingSuggestingDropDown.js
+++ b/wax-prosemirror-components/src/components/editingSuggesting/EditingSuggestingDropDown.js
@@ -1,5 +1,5 @@
 /* eslint react/prop-types: 0 */
-import React, { useMemo, useContext } from 'react';
+import React, { useMemo, useContext, useEffect } from 'react';
 import styled from 'styled-components';
 import { WaxContext } from 'wax-prosemirror-core';
 import Dropdown from 'react-dropdown';
@@ -8,13 +8,13 @@ import Icon from '../../helpers/Icon';
 import TrackChangesBox from '../trackChanges/TrackChangesBox';
 
 const DropdownStyled = styled(Dropdown)`
-  cursor: not-allowed;
   display: inline-flex;
   opacity: ${props => (props.select ? 1 : 0.4)};
-  pointer-events: ${props => (props.select ? 'default' : 'none')};
 
   .Dropdown-control {
     border: none;
+    cursor: ${props => (props.select ? 'default' : 'not-allowed')};
+    pointer-events: ${props => (props.select ? 'default' : 'none')};
   }
 
   .Dropdown-arrow {
@@ -70,22 +70,20 @@ const Viewing = () => {
 const dropDownOptions = [
   { label: <Editing />, value: 'editing' },
   { label: <Suggesting />, value: 'suggesting' },
-  { label: <Viewing />, value: 'viewing' },
 ];
 
 const EditingSuggesting = ({ view: { dispatch, state }, item }) => {
-  const { activeView, app } = useContext(WaxContext);
+  const { app } = useContext(WaxContext);
+  const isDisabled = app.config.get('config.EnableTrackChangeService').toggle;
 
-  const isDisabled = item.select(activeView.state);
-
-  const enableDisabletrackChanges = () => {
+  const enableDisableTrackChanges = () => {
     app.config.get('config.EnableTrackChangeService').enabled = !app.config.get(
       'config.EnableTrackChangeService',
     ).enabled;
   };
 
   const selectedOption = () => {
-    if (app.config.get('config.EnableTrackChangeService').enabled === true)
+    if (app.config.get('config.EnableTrackChangeService').enabled)
       return dropDownOptions[1];
 
     return dropDownOptions[0];
@@ -95,16 +93,18 @@ const EditingSuggesting = ({ view: { dispatch, state }, item }) => {
     () => (
       <DropdownStyled
         onChange={option => {
-          return enableDisabletrackChanges();
+          return enableDisableTrackChanges();
         }}
         options={dropDownOptions}
-        value={selectedOption()}
         select={isDisabled}
+        value={selectedOption()}
       />
     ),
-    [isDisabled],
+    [],
   );
 
+  if (app.config.get('readonly')) return <Viewing />;
+
   return EditingSuggestingComponent;
 };