diff --git a/package.json b/package.json
index 53e23b350..6d1d8bb05 100644
--- a/package.json
+++ b/package.json
@@ -141,6 +141,7 @@
   "dependencies": {
     "@types/codemirror": "^0.0.108",
     "@types/dompurify": "^2.2.3",
+    "cm-search-replace": "^1.0.0",
     "jsdom": "~19.0.0",
     "mitt": "^3.0.0"
   },
diff --git a/src/Editor.js b/src/Editor.js
index 9de79d128..b1189c607 100644
--- a/src/Editor.js
+++ b/src/Editor.js
@@ -26,6 +26,10 @@ import 'codemirror/addon/edit/matchtags';
 import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/display/placeholder';
 import 'codemirror/keymap/sublime';
+
+import 'cm-search-replace/src/search';
+import 'codemirror/addon/scroll/annotatescrollbar';
+import 'codemirror/addon/search/matchesonscrollbar';
 // import 'codemirror/addon/selection/active-line';
 // import 'codemirror/addon/edit/matchbrackets';
 import htmlParser from '@/utils/htmlparser';
diff --git a/src/sass/cherry.scss b/src/sass/cherry.scss
index 9495c8a6c..1b04d429e 100644
--- a/src/sass/cherry.scss
+++ b/src/sass/cherry.scss
@@ -242,6 +242,13 @@
   }
 }
 
+
+.cherry {
+  .ace_search {
+    background: #FFF;
+  }
+}
+
 .cherry-sidebar {
   width: 30px;
   position: absolute;