diff --git a/console/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue b/console/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue
index 50f04a8f1d..475e80f60a 100644
--- a/console/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue
+++ b/console/packages/editor/src/extensions/search-and-replace/SearchAndReplace.vue
@@ -8,8 +8,8 @@ import MdiRegex from "~icons/mdi/regex";
 import MdiArrowUp from "~icons/mdi/arrow-up";
 import MdiArrowDown from "~icons/mdi/arrow-down";
 import MdiClose from "~icons/mdi/close";
-import CodiconReplace from "~icons/codicon/replace";
-import CodiconReplaceAll from "~icons/codicon/replace-all";
+import LucideReplace from "~icons/lucide/replace";
+import LucideReplaceAll from "~icons/lucide/replace-all";
 import { i18n } from "@/locales";
 
 const props = defineProps({
@@ -164,7 +164,7 @@ watch(
               ref="searchInput"
               v-model="searchTerm"
               type="text"
-              class="block w-full p-1 ps-2 !pr-[5.5rem] bg-gray-50 rounded-sm border !border-solid !text-sm !leading-7 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full p-1 ps-2 !pr-[5.5rem] bg-gray-50 rounded border !border-solid !text-sm !leading-7 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
               :placeholder="
                 i18n.global.t(
                   'editor.extensions.search_and_replace.search_placeholder'
@@ -293,7 +293,7 @@ watch(
             <input
               v-model="replaceTerm"
               type="text"
-              class="block w-full p-1 ps-2 rounded-sm bg-gray-50 border !border-solid !text-sm !leading-7 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
+              class="block w-full p-1 ps-2 rounded bg-gray-50 border !border-solid !text-sm !leading-7 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500"
               :placeholder="
                 i18n.global.t(
                   'editor.extensions.search_and_replace.replace_placeholder'
@@ -303,7 +303,7 @@ watch(
               @keydown.enter.prevent="replace"
             />
           </div>
-          <div class="flex items-center mx-2">
+          <div class="flex items-center gap-2 mx-2">
             <button
               :title="
                 i18n.global.t('editor.extensions.search_and_replace.replace')
@@ -316,7 +316,7 @@ watch(
               :disabled="findState.findCount === 0"
               @click="replace"
             >
-              <CodiconReplace></CodiconReplace>
+              <LucideReplace></LucideReplace>
             </button>
             <button
               :title="
@@ -332,7 +332,7 @@ watch(
               :disabled="findState.findCount === 0"
               @click="replaceAll"
             >
-              <CodiconReplaceAll></CodiconReplaceAll>
+              <LucideReplaceAll></LucideReplaceAll>
             </button>
           </div>
         </div>
diff --git a/console/packages/editor/src/styles/tailwind.css b/console/packages/editor/src/styles/tailwind.css
index b5c61c9567..4d9e70473c 100644
--- a/console/packages/editor/src/styles/tailwind.css
+++ b/console/packages/editor/src/styles/tailwind.css
@@ -1,3 +1,26 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* override @tailwindcss/forms styles */
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"],
+input[type="url"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="search"],
+input[type="tel"],
+input:where(:not([type])),
+select,
+textarea {
+  @apply border-none py-0 focus:outline-0 focus:ring-0;
+}
+
+input[type="checkbox"] {
+  @apply rounded-sm border-gray-500;
+}