diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx
index cf47ded427..ee55937b1c 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/Restapi/TabContent.jsx
@@ -30,7 +30,7 @@ export default ({
           return (
             <>
               <div className="row-container query-manager-border-color" key={index}>
-                <div className="fields-container mb-1">
+                <div className="fields-container mb-1 restapi-key-value">
                   <div className="field col-4 rounded-start rest-api-codehinter-key-field">
                     <CodeHinter
                       type="basic"
@@ -52,7 +52,7 @@ export default ({
                     />
                   </div>
                   <button
-                    className={`d-flex justify-content-center align-items-center delete-field-option bg-transparent border-0 rounded-0 border-top border-bottom border-end rounded-end ${
+                    className={`d-flex justify-content-center align-items-center delete-field-option bg-transparent border-0 rounded-0 border-top border-bottom border-end rounded-end qm-delete-btn ${
                       darkMode ? 'delete-field-option-dark' : ''
                     }`}
                     role="button"
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx
index 3b32706f67..20f499fbe8 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/DropDownSelect.jsx
@@ -298,7 +298,7 @@ const DropDownSelect = ({
           </p>
         </div>
       ) : (
-        <div className={`col-auto ${buttonClasses}`} id={popoverBtnId.current}>
+        <div className={`col-auto ${buttonClasses} h-100`} id={popoverBtnId.current}>
           <ButtonSolid
             size="sm"
             variant="tertiary"
@@ -322,6 +322,8 @@ const DropDownSelect = ({
               },
               'gap-0',
               'w-100',
+              'h-100',
+              'align-items-start',
               'rounded-0',
               'position-relative',
               'font-weight-normal',
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinConstraint.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinConstraint.jsx
index a8c37767d8..dba68a5f08 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinConstraint.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinConstraint.jsx
@@ -645,10 +645,9 @@ const JoinOn = ({
         </div>
         {index > 0 && (
           <ButtonSolid
-            customStyles={{ height: '30px' }}
             size="sm"
             variant="ghostBlack"
-            className="px-1 rounded-0 border border-start-0 rounded-end"
+            className="px-1 rounded-0 border border-start-0 rounded-en qm-delete-btn"
             onClick={onRemove}
           >
             <Trash fill="var(--slate9)" style={{ height: '16px' }} />
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx
index 4734addb26..863c826b8a 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSelect.jsx
@@ -340,10 +340,7 @@ const JsonBfieldsForSelect = ({ selectedJsonbColumns, handleJSonChange, table })
                     <ButtonSolid
                       size="sm"
                       variant="ghostBlack"
-                      className="px-1 rounded-0 border rounded-end"
-                      customStyles={{
-                        height: '30px',
-                      }}
+                      className="px-1 rounded-0 border rounded-end qm-delete-btn"
                       onClick={() => handleRemove(colDetails.id, colDetails.name, colDetails.table)}
                     >
                       <Trash fill="var(--slate9)" style={{ height: '16px' }} />
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx
index 2d5a2de518..9e129e9eb4 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinSort.jsx
@@ -164,10 +164,7 @@ export default function JoinSort({ darkMode }) {
                 <ButtonSolid
                   size="sm"
                   variant="ghostBlack"
-                  className="px-1 rounded-0 border rounded-end"
-                  customStyles={{
-                    height: '30px',
-                  }}
+                  className="px-1 rounded-0 border rounded-end qm-delete-btn"
                   onClick={() => setJoinOrderByOptions(joinOrderByOptions.filter((opt, idx) => idx !== i))}
                 >
                   <Trash fill="var(--slate9)" style={{ height: '16px' }} />
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx
index eba36f37a3..cf14448967 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/JoinTable.jsx
@@ -535,12 +535,11 @@ const RenderFilterSection = ({ darkMode }) => {
 
           <ButtonSolid
             customStyles={{
-              height: '30px',
               maxWidth: '30px',
             }}
             size="sm"
             variant="ghostBlack"
-            className="px-1 rounded-0 border rounded-end col-2"
+            className="px-1 rounded-0 border rounded-end col-2 qm-delete-btn"
             onClick={() => removeFilterConditionEntry(index)}
           >
             <Trash fill="var(--slate9)" style={{ height: '16px' }} />
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx
index 1766691d66..89323c1c3c 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderColumnUI.jsx
@@ -54,10 +54,7 @@ const RenderColumnUI = ({
             <ButtonSolid
               size="sm"
               variant="ghostBlack"
-              className="px-1 rounded-0 border rounded-end"
-              customStyles={{
-                height: '30px',
-              }}
+              className="px-1 rounded-0 border rounded-end qm-delete-btn"
               onClick={() => removeColumnOptionsPair(id)}
             >
               <Trash fill="var(--slate9)" style={{ height: '16px' }} />
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx
index 983019697a..cd7f94abf3 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderFilterSectionUI.jsx
@@ -117,10 +117,7 @@ const RenderFilterSectionUI = ({
             <ButtonSolid
               size="sm"
               variant="ghostBlack"
-              className="px-1 rounded-0 border rounded-end"
-              customStyles={{
-                height: '30px',
-              }}
+              className="px-1 rounded-0 border rounded-end qm-delete-btn"
               onClick={() => removeFilterConditionPair(id)}
             >
               <Trash fill="var(--slate9)" style={{ height: '16px' }} />
diff --git a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx
index b5021974ba..a349b9e5ed 100644
--- a/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx
+++ b/frontend/src/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/RenderSortUI.jsx
@@ -86,10 +86,7 @@ const RenderSortUI = ({
             <ButtonSolid
               size="sm"
               variant="ghostBlack"
-              className="px-1 rounded-0 border rounded-end"
-              customStyles={{
-                height: '30px',
-              }}
+              className="px-1 rounded-0 border rounded-end qm-delete-btn"
               onClick={() => removeSortConditionPair(id)}
             >
               <Trash fill="var(--slate9)" style={{ height: '16px' }} />
diff --git a/frontend/src/_styles/queryManager.scss b/frontend/src/_styles/queryManager.scss
index 7b256c3812..1c63a111e9 100644
--- a/frontend/src/_styles/queryManager.scss
+++ b/frontend/src/_styles/queryManager.scss
@@ -1856,8 +1856,9 @@ $border-radius: 4px;
 .tjdb-codhinter-wrapper{
   .codehinter-input{
     .cm-editor{
-      height: 30px !important;
+      // height: 30px !important;
       min-height: 30px !important;
+      max-height:100px !important;
       border-radius: 0 !important;
       border-right: 0 ;
   }
@@ -1865,8 +1866,9 @@ $border-radius: 4px;
 }
 .tjdb-limit-offset-codehinter{
   .cm-editor{
-    height: 30px !important;
+    // height: 30px !important;
     min-height: 30px !important;
+    max-height:100px !important;
   }
 }
 
@@ -1904,4 +1906,19 @@ $border-radius: 4px;
       line-height: 18px;
     }
   }
+}
+
+
+.qm-delete-btn {
+  min-height: 30px;
+  height: 100% !important;
+  align-items: flex-start !important;
+  padding-top: 6px;
+}
+
+.restapi-key-value {
+  .code-hinter-wrapper, .code-editor-basic-wrapper, .codehinter-container, .cm-codehinter, .code-editor-query-panel{
+    height:100%;
+    max-height: 100px;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index ff2e935de6..886d0a64c2 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -15824,6 +15824,7 @@ tbody {
 }
 
 .rest-api-options-codehinter {
+  height: 100%;
   .cm-content>.cm-line {
     // max-width: 357px !important;
   }