diff --git a/console/console-src/modules/contents/attachments/AttachmentList.vue b/console/console-src/modules/contents/attachments/AttachmentList.vue
index 8372c1b71..226e1e45e 100644
--- a/console/console-src/modules/contents/attachments/AttachmentList.vue
+++ b/console/console-src/modules/contents/attachments/AttachmentList.vue
@@ -293,7 +293,6 @@ onMounted(() => {
                 >
                   <input
                     v-model="checkedAll"
-                    class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                     type="checkbox"
                     @change="handleCheckAllChange"
                   />
diff --git a/console/console-src/modules/contents/attachments/components/AttachmentListItem.vue b/console/console-src/modules/contents/attachments/components/AttachmentListItem.vue
index 27aaaa08a..954271692 100644
--- a/console/console-src/modules/contents/attachments/components/AttachmentListItem.vue
+++ b/console/console-src/modules/contents/attachments/components/AttachmentListItem.vue
@@ -122,7 +122,6 @@ const { operationItems } = useOperationItemExtensionPoint<Attachment>(
     >
       <input
         :checked="selectedAttachments.has(attachment)"
-        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
         type="checkbox"
         @click="emit('select', attachment)"
       />
diff --git a/console/console-src/modules/contents/comments/CommentList.vue b/console/console-src/modules/contents/comments/CommentList.vue
index 7b8c99b77..8910acf5c 100644
--- a/console/console-src/modules/contents/comments/CommentList.vue
+++ b/console/console-src/modules/contents/comments/CommentList.vue
@@ -236,7 +236,6 @@ const handleApproveInBatch = async () => {
             >
               <input
                 v-model="checkAll"
-                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
                 @change="handleCheckAllChange"
               />
@@ -375,7 +374,6 @@ const handleApproveInBatch = async () => {
                 <input
                   v-model="selectedCommentNames"
                   :value="comment?.comment?.metadata.name"
-                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                   name="comment-checkbox"
                   type="checkbox"
                 />
diff --git a/console/console-src/modules/contents/pages/DeletedSinglePageList.vue b/console/console-src/modules/contents/pages/DeletedSinglePageList.vue
index 38b361a0b..ec37d3d16 100644
--- a/console/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/console/console-src/modules/contents/pages/DeletedSinglePageList.vue
@@ -240,7 +240,6 @@ watch(
             >
               <input
                 v-model="checkedAll"
-                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
                 @change="handleCheckAllChange"
               />
@@ -308,7 +307,6 @@ watch(
                 <input
                   v-model="selectedPageNames"
                   :value="singlePage.page.metadata.name"
-                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                   type="checkbox"
                 />
               </template>
diff --git a/console/console-src/modules/contents/pages/SinglePageList.vue b/console/console-src/modules/contents/pages/SinglePageList.vue
index 80be4af5e..89131295f 100644
--- a/console/console-src/modules/contents/pages/SinglePageList.vue
+++ b/console/console-src/modules/contents/pages/SinglePageList.vue
@@ -325,7 +325,6 @@ watch(selectedPageNames, (newValue) => {
             >
               <input
                 v-model="checkedAll"
-                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
                 @change="handleCheckAllChange"
               />
diff --git a/console/console-src/modules/contents/pages/components/SinglePageListItem.vue b/console/console-src/modules/contents/pages/components/SinglePageListItem.vue
index ac4aff6d3..60be79293 100644
--- a/console/console-src/modules/contents/pages/components/SinglePageListItem.vue
+++ b/console/console-src/modules/contents/pages/components/SinglePageListItem.vue
@@ -130,7 +130,6 @@ const handleDelete = async () => {
       <input
         v-model="selectedPageNames"
         :value="singlePage.page.metadata.name"
-        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
         type="checkbox"
       />
     </template>
diff --git a/console/console-src/modules/contents/posts/DeletedPostList.vue b/console/console-src/modules/contents/posts/DeletedPostList.vue
index c6e07737f..6837127c6 100644
--- a/console/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/console/console-src/modules/contents/posts/DeletedPostList.vue
@@ -233,7 +233,6 @@ watch(
             >
               <input
                 v-model="checkedAll"
-                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
                 @change="handleCheckAllChange"
               />
@@ -300,7 +299,6 @@ watch(
                 <input
                   v-model="selectedPostNames"
                   :value="post.post.metadata.name"
-                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                   name="post-checkbox"
                   type="checkbox"
                 />
diff --git a/console/console-src/modules/contents/posts/PostList.vue b/console/console-src/modules/contents/posts/PostList.vue
index 0e622d099..85968934b 100644
--- a/console/console-src/modules/contents/posts/PostList.vue
+++ b/console/console-src/modules/contents/posts/PostList.vue
@@ -331,7 +331,6 @@ watch(selectedPostNames, (newValue) => {
             >
               <input
                 v-model="checkedAll"
-                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
                 @change="handleCheckAllChange"
               />
diff --git a/console/console-src/modules/contents/posts/components/PostListItem.vue b/console/console-src/modules/contents/posts/components/PostListItem.vue
index ea64ce3ae..55acc68e7 100644
--- a/console/console-src/modules/contents/posts/components/PostListItem.vue
+++ b/console/console-src/modules/contents/posts/components/PostListItem.vue
@@ -178,7 +178,6 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<ListedPost>(
       <input
         v-model="selectedPostNames"
         :value="post.post.metadata.name"
-        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
         name="post-checkbox"
         type="checkbox"
       />
diff --git a/console/console-src/modules/system/plugins/PluginList.vue b/console/console-src/modules/system/plugins/PluginList.vue
index bed4996ff..87241bc52 100644
--- a/console/console-src/modules/system/plugins/PluginList.vue
+++ b/console/console-src/modules/system/plugins/PluginList.vue
@@ -167,7 +167,6 @@ onMounted(() => {
             >
               <input
                 v-model="checkedAll"
-                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
                 @change="handleCheckAllChange"
               />
diff --git a/console/console-src/modules/system/plugins/components/PluginListItem.vue b/console/console-src/modules/system/plugins/components/PluginListItem.vue
index afb5e6fa1..a5916c70e 100644
--- a/console/console-src/modules/system/plugins/components/PluginListItem.vue
+++ b/console/console-src/modules/system/plugins/components/PluginListItem.vue
@@ -240,7 +240,6 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<Plugin>(
       <input
         v-model="selectedNames"
         :value="plugin.metadata.name"
-        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
         name="post-checkbox"
         type="checkbox"
       />
diff --git a/console/console-src/modules/system/roles/RoleDetail.vue b/console/console-src/modules/system/roles/RoleDetail.vue
index 0f3cc9848..e8922503c 100644
--- a/console/console-src/modules/system/roles/RoleDetail.vue
+++ b/console/console-src/modules/system/roles/RoleDetail.vue
@@ -233,18 +233,11 @@ onMounted(() => {
                         v-if="!isSuperRole"
                         v-model="selectedRoleTemplates"
                         :value="role.metadata.name"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                         type="checkbox"
                         :disabled="isSystemReserved"
                         @change="handleRoleTemplateSelect"
                       />
-                      <input
-                        v-else
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                        checked
-                        disabled
-                      />
+                      <input v-else type="checkbox" checked disabled />
                       <div class="flex flex-1 flex-col gap-y-3">
                         <span class="font-medium text-gray-900">
                           {{
diff --git a/console/console-src/modules/system/roles/components/RoleEditingModal.vue b/console/console-src/modules/system/roles/components/RoleEditingModal.vue
index 19dd9da17..00b1d1a56 100644
--- a/console/console-src/modules/system/roles/components/RoleEditingModal.vue
+++ b/console/console-src/modules/system/roles/components/RoleEditingModal.vue
@@ -219,7 +219,6 @@ const handleResetForm = () => {
                       <input
                         v-model="selectedRoleTemplates"
                         :value="roleTemplate.metadata.name"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                         type="checkbox"
                         @change="handleRoleTemplateSelect"
                       />
diff --git a/console/console-src/modules/system/users/UserList.vue b/console/console-src/modules/system/users/UserList.vue
index 772d6077f..ef98a1bdf 100644
--- a/console/console-src/modules/system/users/UserList.vue
+++ b/console/console-src/modules/system/users/UserList.vue
@@ -299,7 +299,6 @@ onMounted(() => {
             >
               <input
                 v-model="checkedAll"
-                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                 type="checkbox"
                 @change="handleCheckAllChange"
               />
@@ -412,7 +411,6 @@ onMounted(() => {
                 <input
                   v-model="selectedUserNames"
                   :value="user.user.metadata.name"
-                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                   name="post-checkbox"
                   type="checkbox"
                   :disabled="
diff --git a/console/package.json b/console/package.json
index b49feeb4e..11f2dbfac 100644
--- a/console/package.json
+++ b/console/package.json
@@ -113,6 +113,7 @@
     "@rushstack/eslint-patch": "^1.3.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.0",
+    "@tailwindcss/forms": "^0.5.7",
     "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^20.0.1",
     "@types/lodash.clonedeep": "4.5.7",
diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
index ed10cdb31..b9922f56a 100644
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
@@ -225,6 +225,9 @@ importers:
       '@tailwindcss/container-queries':
         specifier: ^0.1.0
         version: 0.1.0(tailwindcss@3.3.0)
+      '@tailwindcss/forms':
+        specifier: ^0.5.7
+        version: 0.5.7(tailwindcss@3.3.0)
       '@tsconfig/node18':
         specifier: ^2.0.1
         version: 2.0.1
@@ -3422,6 +3425,15 @@ packages:
       tailwindcss: 3.3.0(postcss@8.4.21)
     dev: true
 
+  /@tailwindcss/forms@0.5.7(tailwindcss@3.3.0):
+    resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
+    dependencies:
+      mini-svg-data-uri: 1.4.4
+      tailwindcss: 3.3.0(postcss@8.4.21)
+    dev: true
+
   /@tanstack/match-sorter-utils@8.7.6:
     resolution: {integrity: sha512-2AMpRiA6QivHOUiBpQAVxjiHAA68Ei23ZUMNaRJrN6omWiSFLoYrxGcT6BXtuzp0Jw4h6HZCmGGIM/gbwebO2A==}
     engines: {node: '>=12'}
@@ -8798,6 +8810,11 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+    dev: true
+
   /minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
diff --git a/console/src/components/global-search/GlobalSearchModal.vue b/console/src/components/global-search/GlobalSearchModal.vue
index aeee76ef6..343ec8b05 100644
--- a/console/src/components/global-search/GlobalSearchModal.vue
+++ b/console/src/components/global-search/GlobalSearchModal.vue
@@ -382,7 +382,7 @@ const onVisibleChange = (visible: boolean) => {
         ref="globalSearchInput"
         v-model="keyword"
         :placeholder="$t('core.components.global_search.placeholder')"
-        class="w-full py-1 text-base outline-none"
+        class="w-full px-0 py-1 text-base outline-none"
         autocomplete="off"
         autocorrect="off"
         spellcheck="false"
diff --git a/console/src/formkit/theme.ts b/console/src/formkit/theme.ts
index 27d90b2e0..70c9a91ad 100644
--- a/console/src/formkit/theme.ts
+++ b/console/src/formkit/theme.ts
@@ -4,7 +4,7 @@ const textClassification = {
   inner:
     "inline-flex items-center w-full relative box-border border border-gray-300 formkit-invalid:border-red-500 h-9 rounded-base overflow-hidden focus-within:border-primary focus-within:shadow-sm w-full sm:max-w-lg transition-all",
   input:
-    "outline-0 bg-white antialiased resize-none w-full text-black block transition-all appearance-none h-full px-3 text-sm",
+    "bg-white resize-none w-full text-black block transition-all h-full px-3 text-sm",
 };
 
 const boxClassification = {
@@ -15,8 +15,7 @@ const boxClassification = {
   wrapper:
     "flex items-center mb-1 cursor-pointer group-[.formkit-fieldset]:px-2",
   help: "mb-2 mt-0 px-2",
-  input:
-    "form-check-input h-4 w-4 mr-2 border border-gray-500 rounded-sm bg-white checked:bg-primary focus:outline-none focus:ring-0 transition duration-200",
+  input: "form-check-input mr-2 bg-white",
   inner: "flex items-center",
 };
 
@@ -105,7 +104,7 @@ const theme: Record<string, Record<string, string>> = {
   tagSelect: {
     ...textClassification,
     inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`,
-    input: `w-0 flex-grow outline-0 bg-transparent py-1 px-3 block transition-all appearance-none text-sm antialiased`,
+    input: `w-0 flex-grow bg-transparent py-1 px-3 block transition-all text-sm`,
     "post-tags-wrapper": "flex w-full items-center",
     "post-tags": "flex w-full flex-wrap items-center",
     "post-tag-wrapper": "inline-flex items-center p-1",
@@ -118,7 +117,7 @@ const theme: Record<string, Record<string, string>> = {
   categorySelect: {
     ...textClassification,
     inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`,
-    input: `w-0 flex-grow outline-0 bg-transparent py-1 px-3 block transition-all appearance-none text-sm antialiased`,
+    input: `w-0 flex-grow bg-transparent py-1 px-3 block transition-all text-sm`,
     "post-categories-wrapper": "flex w-full items-center",
     "post-categories": "flex w-full flex-wrap items-center",
     "post-categories-button":
diff --git a/console/src/styles/tailwind.css b/console/src/styles/tailwind.css
index b5c61c956..4d9e70473 100644
--- a/console/src/styles/tailwind.css
+++ b/console/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;
+}
diff --git a/console/tailwind.config.js b/console/tailwind.config.js
index 9e030c7ad..e807b8c95 100644
--- a/console/tailwind.config.js
+++ b/console/tailwind.config.js
@@ -24,6 +24,7 @@ module.exports = {
     require("@tailwindcss/aspect-ratio"),
     require("@formkit/themes/tailwindcss"),
     require("@tailwindcss/container-queries"),
+    require("@tailwindcss/forms"),
     require("tailwindcss-themer")({
       defaultTheme: {
         extend: {
diff --git a/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue b/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
index ee0dc2f8c..46f77adfd 100644
--- a/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
+++ b/console/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
@@ -179,7 +179,6 @@ const { copy } = useClipboard({
                       <input
                         v-model="selectedRoleTemplates"
                         :value="roleTemplate.metadata.name"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                         type="checkbox"
                         @change="handleRoleTemplateSelect"
                       />