diff --git a/app/react/components/CodeEditor.module.css b/app/react/components/CodeEditor.module.css
index 1f480d3a2..c183000b5 100644
--- a/app/react/components/CodeEditor.module.css
+++ b/app/react/components/CodeEditor.module.css
@@ -60,9 +60,50 @@
 }
 
 .root :global(.cm-button) {
-  @apply bg-blue-8;
-  color: var(--text-codemirror-color);
   background-image: none;
+  border-radius: 4px;
+  gap: 5px;
+}
+
+.root :global(.cm-button[name='next']),
+.root :global(.cm-button[name='replace']) {
+  @apply border-blue-8 bg-blue-8 text-white;
+  @apply hover:border-blue-9 hover:bg-blue-9 hover:text-white;
+  @apply th-dark:hover:border-blue-7 th-dark:hover:bg-blue-7;
+}
+
+.root :global(.cm-button[name='prev']),
+.root :global(.cm-button[name='replaceAll']) {
+  @apply border border-solid;
+
+  @apply border-blue-8 bg-blue-2 text-blue-9;
+  @apply hover:bg-blue-3;
+
+  @apply th-dark:border-blue-7 th-dark:bg-gray-10 th-dark:text-blue-3;
+  @apply th-dark:hover:bg-blue-11;
+}
+
+.root :global(.cm-button[name='select']) {
+  @apply border-gray-5 bg-white text-gray-9;
+  @apply hover:border-gray-5 hover:bg-gray-3 hover:text-gray-10;
+
+  /* dark mode */
+  @apply th-dark:border-gray-warm-7 th-dark:bg-gray-iron-10 th-dark:text-gray-warm-4;
+  @apply th-dark:hover:border-gray-6 th-dark:hover:bg-gray-iron-9 th-dark:hover:text-gray-warm-4;
+
+  @apply th-highcontrast:border-gray-2 th-highcontrast:bg-black th-highcontrast:text-white;
+  @apply th-highcontrast:hover:border-gray-6 th-highcontrast:hover:bg-gray-9 th-highcontrast:hover:text-gray-warm-4;
+}
+
+.root :global(.cm-search) label {
+  font-weight: 400;
+  @apply text-gray-7;
+  @apply th-dark:text-gray-warm-3;
+  @apply th-highcontrast:text-white;
+}
+
+.root :global(.cm-search) input {
+  border-radius: 4px;
 }
 
 .root :global(.cm-textfield) {