diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
index 19f5941bad..f0b8529c0a 100644
--- a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
+++ b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import 'codemirror/mode/handlebars/handlebars';
+import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/sql/sql';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/search/match-highlighter';
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index 8c8ec999f8..fa15317db5 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -177,7 +177,7 @@ class Table extends React.Component {
             </label>
           )}
 
-          <button className="btn btn-sm btn-danger col" onClick={() => this.removeAction(index)}>
+          <button className="btn btn-sm btn-outline-danger col" onClick={() => this.removeAction(index)}>
             Remove
           </button>
         </Popover.Content>
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Elasticsearch.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Elasticsearch.jsx
index 784e6efd6d..59742f6702 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Elasticsearch.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Elasticsearch.jsx
@@ -85,18 +85,15 @@ class Elasticsearch extends React.Component {
                 </div>
                 <div className="mb-3 mt-2">
                   <label className="form-label text-reset">Query</label>
-                  <CodeMirror
-                    height="auto"
-                    fontSize="2"
+                  <CodeHinter
+                    currentState={this.props.currentState}
+                    initialValue={options.query}
+                    mode="sql"
                     placeholder={'{ "name": "" }'}
-                    value={options.query}
-                    onChange={(instance) => this.changeOption('query', instance.getValue())}
-                    options={{
-                      theme: 'duotone-light',
-                      mode: 'javascript',
-                      lineWrapping: true,
-                      scrollbarStyle: null
-                    }}
+                    theme="duotone-light"
+                    lineNumbers={true}
+                    className="query-hinter"
+                    onChange={(value) => this.changeOption('query', value)}
                   />
                 </div>
               </div>
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Mysql.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Mysql.jsx
index dfd809bd2c..1c23f1906b 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Mysql.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Mysql.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import 'codemirror/theme/duotone-light.css';
+import { CodeHinter } from '../../CodeBuilder/CodeHinter';
 
 class Mysql extends React.Component {
   constructor(props) {
@@ -29,18 +30,14 @@ class Mysql extends React.Component {
       <div>
         {options && (
           <div className="mb-3 mt-2">
-            <CodeMirror
-              height="auto"
-              fontSize="2"
-              value={options.query}
-              onChange={(instance) => this.changeOption('query', instance.getValue())}
-              placeholder="SELECT * FROM customers;"
-              options={{
-                theme: 'duotone-light',
-                mode: 'sql',
-                lineWrapping: true,
-                scrollbarStyle: null
-              }}
+            <CodeHinter
+              currentState={this.props.currentState}
+              initialValue={options.query}
+              mode="sql"
+              theme="duotone-light"
+              lineNumbers={true}
+              className="query-hinter"
+              onChange={(value) => this.changeOption('query', value)}
             />
           </div>
         )}
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx
index e3a87a7687..7e4d60b289 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx
@@ -51,19 +51,14 @@ class Postgresql extends React.Component {
 
             {options.mode === 'sql' && (
               <div className="mb-3 mt-2">
-                <CodeMirror
-                  height="auto"
-                  style={{ minHeight: '100px' }}
-                  fontSize="2"
-                  value={options.query}
-                  onChange={(instance) => this.changeOption('query', instance.getValue())}
-                  placeholder="SELECT * FROM customers;"
-                  options={{
-                    theme: 'duotone-light',
-                    mode: 'sql',
-                    lineWrapping: true,
-                    scrollbarStyle: null
-                  }}
+                <CodeHinter
+                  currentState={this.props.currentState}
+                  initialValue={options.query}
+                  mode="sql"
+                  theme="duotone-light"
+                  lineNumbers={true}
+                  className="query-hinter"
+                  onChange={(value) => this.changeOption('query', value)}
                 />
               </div>
             )}
diff --git a/frontend/src/Editor/QueryManager/QueryEditors/RestApi.jsx b/frontend/src/Editor/QueryManager/QueryEditors/RestApi.jsx
index d618488ea2..2597e08324 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/RestApi.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/RestApi.jsx
@@ -83,6 +83,7 @@ class Restapi extends React.Component {
               <div className="col">
                 <CodeHinter
                   currentState={this.props.currentState}
+                  className="form-control"
                   initialValue={options.url}
                   onChange={(value) => { this.changeOption('url', value); }}
                 />
@@ -102,10 +103,12 @@ class Restapi extends React.Component {
                       <CodeHinter
                         currentState={this.props.currentState}
                         initialValue={pair[0]}
+                        className="form-control"
                         onChange={(value) => this.keyValuePairValueChanged(value, 0, option, index)}
                       />
                       <CodeHinter
                         currentState={this.props.currentState}
+                        className="form-control"
                         initialValue={pair[1]}
                         onChange={(value) => this.keyValuePairValueChanged(value, 1, option, index)}
                       />
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 5d246e5837..d9f1b92c86 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -1058,11 +1058,12 @@ body {
 
 .code-hinter {
 
-    padding: 0.1775rem .75rem;
     height: 36px;
 
-    .CodeMirror {
-        font-family: 'Roboto', sans-serif;
+    .form-control {
+      .CodeMirror {
+          font-family: 'Roboto', sans-serif;
+      }
     }
 
     .CodeMirror-focused {
@@ -1116,4 +1117,26 @@ body {
  
  hr { 
   margin: 1rem 0;
+ }
+ 
+ .query-hinter {
+   min-height: 150px;
+ }
+
+ .codehinter-default-input {
+  padding: 0.0475rem .75rem;
+  display: block;
+  width: 100%;
+  font-size: .875rem;
+  font-weight: 400;
+  color: #232e3c;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #dadcde;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 4px;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  height: 30px;
  }
\ No newline at end of file