diff --git a/packages/nc-gui/components/account/UserList.vue b/packages/nc-gui/components/account/UserList.vue
index 948383a383..c5d5293651 100644
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@@ -227,9 +227,9 @@ const openDeleteModal = (user: UserType) => {
                     <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
                     <GeneralIcon
                       v-if="el?.roles === OrgUserRoles.CREATOR"
+                      id="nc-selected-item-icon"
                       icon="check"
                       class="w-4 h-4 text-primary"
-                      id="nc-selected-item-icon"
                     />
                   </div>
                   <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
@@ -246,9 +246,9 @@ const openDeleteModal = (user: UserType) => {
                     <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
                     <GeneralIcon
                       v-if="el.roles === OrgUserRoles.VIEWER"
+                      id="nc-selected-item-icon"
                       icon="check"
                       class="w-4 h-4 text-primary"
-                      id="nc-selected-item-icon"
                     />
                   </div>
                   <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
diff --git a/packages/nc-gui/components/account/UsersModal.vue b/packages/nc-gui/components/account/UsersModal.vue
index 1433785fb5..1d6f6fd055 100644
--- a/packages/nc-gui/components/account/UsersModal.vue
+++ b/packages/nc-gui/components/account/UsersModal.vue
@@ -193,7 +193,11 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                   <a-form-item name="role" :rules="[{ required: true, message: $t('msg.roleRequired') }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
 
-                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role !px-2">
+                    <a-select
+                      v-model:value="usersData.role"
+                      class="nc-user-roles"
+                      dropdown-class-name="nc-dropdown-user-role !px-2"
+                    >
                       <a-select-option
                         class="nc-role-option"
                         :value="OrgUserRoles.CREATOR"
@@ -203,9 +207,9 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                           <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
                           <GeneralIcon
                             v-if="usersData.role === OrgUserRoles.CREATOR"
+                            id="nc-selected-item-icon"
                             icon="check"
                             class="w-4 h-4 text-primary"
-                            id="nc-selected-item-icon"
                           />
                         </div>
 
@@ -223,9 +227,9 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                           <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
                           <GeneralIcon
                             v-if="usersData.role === OrgUserRoles.VIEWER"
+                            id="nc-selected-item-icon"
                             icon="check"
                             class="w-4 h-4 text-primary"
-                            id="nc-selected-item-icon"
                           />
                         </div>
                         <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
diff --git a/packages/nc-gui/components/nc/SelectOption.vue b/packages/nc-gui/components/nc/SelectOption.vue
index 7ff2310498..7f686e348e 100644
--- a/packages/nc-gui/components/nc/SelectOption.vue
+++ b/packages/nc-gui/components/nc/SelectOption.vue
@@ -1,13 +1,3 @@
-<template>
-  <a-select-option :value="value">
-    <div class="flex items-center w-full justify-between w-full gap-2">
-      <div class="truncate flex-1">
-        <slot />
-      </div>
-      <component v-if="isSelected" id="nc-selected-item-icon" class="text-primary w-6 h-6" :is="iconMap.check" />
-    </div>
-  </a-select-option>
-</template>
 <script lang="ts" setup>
 interface Props {
   isSelected?: boolean
@@ -20,4 +10,13 @@ const value = computed(() => props.value)
 console.log(props.isSelected, isSelected)
 </script>
 
-
+<template>
+  <a-select-option :value="value">
+    <div class="flex items-center w-full justify-between w-full gap-2">
+      <div class="truncate flex-1">
+        <slot />
+      </div>
+      <component :is="iconMap.check" v-if="isSelected" id="nc-selected-item-icon" class="text-primary w-6 h-6" />
+    </div>
+  </a-select-option>
+</template>
diff --git a/packages/nc-gui/components/roles/Selector.vue b/packages/nc-gui/components/roles/Selector.vue
index 3b0301a2fa..d248f789a4 100644
--- a/packages/nc-gui/components/roles/Selector.vue
+++ b/packages/nc-gui/components/roles/Selector.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { RoleDescriptions } from 'nocodb-sdk'
 import type { RoleLabels } from 'nocodb-sdk'
-import { toRef } from '#imports'
 import type { SelectValue } from 'ant-design-vue/es/select'
+import { toRef } from '#imports'
 
 const props = withDefaults(
   defineProps<{
@@ -35,7 +35,7 @@ function onChangeRole(val: SelectValue) {
 </script>
 
 <template>
-  <div size="lg" ref="dropdownRef" class="nc-roles-selector relative" @click="isDropdownOpen = !isDropdownOpen">
+  <div ref="dropdownRef" size="lg" class="nc-roles-selector relative" @click="isDropdownOpen = !isDropdownOpen">
     <RolesBadge data-testid="roles" :role="roleRef" :inherit="inheritRef === role" :size="sizeRef" />
     <a-select
       v-model:value="roleRef"
@@ -45,12 +45,7 @@ function onChangeRole(val: SelectValue) {
       class="py-1 !absolute top-0 left-0 w-full h-full z-10 text-xs opacity-0"
       @change="onChangeRole"
     >
-      <a-select-option
-        v-for="rl in props.roles"
-        :key="rl"
-        v-e="['c:workspace:settings:user-role-change']"
-        :value="rl"
-      >
+      <a-select-option v-for="rl in props.roles" :key="rl" v-e="['c:workspace:settings:user-role-change']" :value="rl">
         <div
           :class="{
             'w-[350px]': descriptionRef,
diff --git a/packages/nc-gui/components/smartsheet/column/DateOptions.vue b/packages/nc-gui/components/smartsheet/column/DateOptions.vue
index cb59ad96ca..39cee3470d 100644
--- a/packages/nc-gui/components/smartsheet/column/DateOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DateOptions.vue
@@ -18,8 +18,13 @@ if (!vModel.value.meta?.date_format) {
 
 <template>
   <a-form-item :label="$t('labels.dateFormat')">
-    <a-select show-search v-model:value="vModel.meta.date_format"  class="nc-date-select" dropdown-class-name="nc-dropdown-date-format">
-      <a-select-option v-for="(format, i) of [ ...dateFormats,...dateMonthFormats]" :key="i" :value="format">
+    <a-select
+      v-model:value="vModel.meta.date_format"
+      show-search
+      class="nc-date-select"
+      dropdown-class-name="nc-dropdown-date-format"
+    >
+      <a-select-option v-for="(format, i) of [...dateFormats, ...dateMonthFormats]" :key="i" :value="format">
         <div class="flex gap-2 justify-between items-center">
           {{ format }}
           <component
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 15ed3091c3..722982786c 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -585,7 +585,6 @@ export default {
         </template>
         <template v-else>
           <div class="flex flex-row w-full">
-            
             <NcButton
               v-if="props.showNextPrevIcons && !isFirstRow"
               v-e="['c:row-expand:prev']"
@@ -664,7 +663,6 @@ export default {
                       '!bg-gray-50 !px-0 !select-text': isReadOnlyVirtualCell(col),
                     }"
                   >
-                  
                     <LazySmartsheetVirtualCell
                       v-if="isVirtualCol(col)"
                       v-model="_row.row[col.title]"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index 7b99fa0cc0..289e914e5a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -94,7 +94,12 @@ if (!localValue.value && allowEmpty !== true) {
             </span>
           </NcTooltip>
         </div>
-        <component :is="iconMap.check" v-if="localValue === option.value" id="nc-selected-item-icon" class="text-primary w-4 h-4" />
+        <component
+          :is="iconMap.check"
+          v-if="localValue === option.value"
+          id="nc-selected-item-icon"
+          class="text-primary w-4 h-4"
+        />
       </div>
     </a-select-option>
   </NcSelect>