diff --git a/app/components/SimpleEditor/SimpleEditor.scss b/app/components/SimpleEditor/SimpleEditor.scss
index 59b6ee6fd2ef8106f1527c2ecd4071c8dfa84d06..232bebbdcaa1bfccbc9a61c8c353adc532b7abcd 100644
--- a/app/components/SimpleEditor/SimpleEditor.scss
+++ b/app/components/SimpleEditor/SimpleEditor.scss
@@ -22,7 +22,26 @@ $transparent-black: rgba(0, 0, 0, .75);
 $white: #fff;
 // track changes
 $inactive-grey: #404040;
-$active-blue: #4a90e2;
+$active-blue: #4990e2;
+
+$scrollbar-bg: #f5f5f5;
+$scrollbar-thumb: rgba(0, 0, 0, .2);
+$scrollbar-track: rgba(0, 0, 0, .3);
+
+::-webkit-scrollbar-track {
+  background-color: $scrollbar-bg;
+  border-radius: 10px;
+  box-shadow: inset 0 0 6px $scrollbar-track;
+  }
+
+::-webkit-scrollbar {
+  background-color: $scrollbar-bg;
+  width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: $scrollbar-thumb;
+}
 
 .editor-wrapper {
   height: 90vh;
@@ -72,11 +91,11 @@ $active-blue: #4a90e2;
 
     .sm-target-track-change-enable {
       button {
-        background-color: $inactive-grey;
-        border-radius: 0;
-        color: $white;
+        background-color: transparent;
+        border: 0;
+        color: $inactive-grey;
         line-height: 0;
-        // cursor: pointer;
+        outline: none;
         padding: 0 19px;
         position: relative;
       }
@@ -86,9 +105,9 @@ $active-blue: #4a90e2;
       }
 
       .track-changes-active {
-        background-color: $active-blue;
-        color: $white;
+        color: $active-blue;
         padding: 0 10px;
+        text-decoration: underline;
 
        &:after {
            content: 'Recording Changes';
@@ -100,34 +119,31 @@ $active-blue: #4a90e2;
       cursor: pointer;
 
       button {
-        background-color: $inactive-grey;
-        border-radius: 0;
-        color: $white;
+        background-color: transparent;
+        border: 0;
+        color: $inactive-grey;
         cursor: pointer;
+        line-height: 0;
+        outline: none;
         padding: 0 19px;
         position: relative;
-        line-height: 0;
       }
 
       button::after {
-        content: 'Changes View Off';
+        content: 'show changes';
       }
 
       .track-changes-view-active {
-        background-color: #228b46;
-        color: $white;
-        padding: 0 19px
+        color: $active-blue;
+        padding: 0 19px;
+        text-decoration: underline;
       }
 
       .track-changes-view-active::after {
-        content: 'Changes View On';
+        content: 'Hide changes';
       }
     }
 
-    .sm-target-track-change-enable {
-      padding: 0 9px;
-    }
-
     .sm-target-document,
     .sm-target-annotations,
     .sm-target-insert,
@@ -143,7 +159,7 @@ $active-blue: #4a90e2;
         padding: 0 12px;
 
         &:hover {
-          background: $toolbar-active-bg;
+          background: transparent;
 
           &:disabled {
             background: transparent;
@@ -152,7 +168,7 @@ $active-blue: #4a90e2;
      }
 
     .sm-active {
-      background: $toolbar-active-bg;
+      // background: $toolbar-active-bg;
       color: $black;
       margin: 0;
       outline: none;
@@ -209,7 +225,7 @@ $active-blue: #4a90e2;
         }
 
         .sc-switch-text-type {
-          bottom: 0px;
+          bottom: 0;
           margin: 0;
           padding: 0;
           width: 140px;
@@ -223,7 +239,7 @@ $active-blue: #4a90e2;
     color: $transparent-black;
     font-family: 'Fira Sans';
     line-height: 38px;
-    margin: 1.5% 0% 0% 15%;
+    margin: 0% 0% 0% 15%;
     min-height: 100vh;
     padding: 1% 0%;
     transition: .3s;
diff --git a/app/components/SimpleEditor/notesEditor/notesEditor.scss b/app/components/SimpleEditor/notesEditor/notesEditor.scss
index 35720139c2c584697c95602894341ad1795de888..3703b5413da5b40e85b67c8dd1686aff09ceaea5 100644
--- a/app/components/SimpleEditor/notesEditor/notesEditor.scss
+++ b/app/components/SimpleEditor/notesEditor/notesEditor.scss
@@ -6,17 +6,21 @@ $background: #fff;
     margin-top: 6px;
 
     .se-toolbar-wrapper {
+      position: absolute;
+      z-index: 9999;
 
       .sc-toolbar {
         background-color: $background;
         border: 0;
         float: left;
+        width: 100px;
+
      }
    }
 
     .se-scrollable {
       background: $background;
-      margin: 0% 0% 5% 0%;
+      margin: 0% 0% 5%;
       min-height: 135px;
 
      div.se-content {
@@ -24,13 +28,14 @@ $background: #fff;
        box-shadow: none;
        margin: 0;
        min-height: 110px;
+       padding: 3% 0 0 3%;
 
        .sc-container-editor {
          padding: 0;
        }
 
        .sc-comment-pane-list {
-         margin-left: 5%;
+         margin-left: 2.5%;
          li {
            max-width: 50%;
            min-width: 50%;