diff --git a/packages/nc-gui/components/nc/List/index.vue b/packages/nc-gui/components/nc/List/index.vue
index 1febfdd286..136da5cc77 100644
--- a/packages/nc-gui/components/nc/List/index.vue
+++ b/packages/nc-gui/components/nc/List/index.vue
@@ -1,97 +1,6 @@
 <script lang="ts" setup>
 import { useVirtualList } from '@vueuse/core'
-import type { TooltipPlacement } from 'ant-design-vue/lib/tooltip'
-
-export type MultiSelectRawValueType = Array<string | number>
-
-export type RawValueType = string | number | MultiSelectRawValueType
-
-export interface NcListItemType {
-  value?: RawValueType
-  label?: string
-  ncItemDisabled?: boolean
-  ncItemTooltip?: string
-  [key: string]: any
-}
-
-/**
- * Props interface for the List component
- */
-export interface NcListProps {
-  /** The currently selected value */
-  value: RawValueType
-  /** The list of items to display */
-  list: NcListItemType[]
-  /**
-   * The key to use for accessing the value from a list item
-   * @default 'value'
-   */
-  optionValueKey?: string
-  /**
-   * The key to use for accessing the label from a list item
-   * @default 'label'
-   */
-  optionLabelKey?: string
-  /** Whether the list is open or closed */
-  open?: boolean
-  /**
-   * Whether to close the list after an item is selected
-   * @default true
-   */
-  closeOnSelect?: boolean
-  /** Placeholder text for the search input */
-  searchInputPlaceholder?: string
-  /** Show search input box always */
-  showSearchAlways?: boolean
-  /** Whether to show the currently selected option */
-  showSelectedOption?: boolean
-  /**
-   * The height of each item in the list, used for virtual list rendering.
-   * @default 38
-   */
-  itemHeight?: number
-  variant?: 'default' | 'small' | 'medium'
-  /** Custom filter function for list items */
-  filterOption?: (input: string, option: NcListItemType, index: Number) => boolean
-  /**
-   * Indicates whether the component allows multiple selections.
-   */
-  isMultiSelect?: boolean
-  /**
-   * The minimum number of items required in the list to enable search functionality.
-   */
-  minItemsForSearch?: number
-  /**
-   * Whether the list is locked and cannot be interacted with
-   */
-  isLocked?: boolean
-
-  /**
-   * Whether input should have border
-   */
-  inputBordered?: boolean
-
-  containerClassName?: string
-
-  itemClassName?: string
-
-  itemTooltipPlacement?: TooltipPlacement
-
-  /**
-   * Whether to hide the top divider
-   */
-  hideTopDivider?: boolean
-
-  /**
-   * This will remove side padding and rounded corners from the list item
-   */
-  itemFullWidth?: boolean
-
-  /**
-   * Whether to stop propagation on item click
-   */
-  stopPropagationOnItemClick?: boolean
-}
+import type { NcListProps } from '#imports'
 
 interface Emits {
   (e: 'update:value', value: RawValueType): void
@@ -110,6 +19,7 @@ const props = withDefaults(defineProps<NcListProps>(), {
   variant: 'default',
   isMultiSelect: false,
   minItemsForSearch: 4,
+  listWrapperClassName: '',
   containerClassName: '',
   itemClassName: '',
   itemTooltipPlacement: 'right',
@@ -387,6 +297,10 @@ watch(searchQuery, () => {
     handleAutoScrollOption()
   })
 })
+
+defineExpose({
+  list,
+})
 </script>
 
 <template>
@@ -431,9 +345,12 @@ watch(searchQuery, () => {
     <slot name="listHeader"></slot>
     <div
       class="nc-list-wrapper"
-      :class="{
-        'cursor-not-allowed': isLocked,
-      }"
+      :class="[
+        listWrapperClassName,
+        {
+          'cursor-not-allowed': isLocked,
+        },
+      ]"
     >
       <template v-if="list.length">
         <div class="h-auto !max-h-[247px]">
@@ -508,7 +425,7 @@ watch(searchQuery, () => {
       <template v-if="!list.length">
         <slot name="emptyState">
           <div class="h-full text-center flex items-center justify-center gap-3 mt-4">
-            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" class="!my-0" />
+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="emptyDescription || $t('labels.noData')" class="!my-0" />
           </div>
         </slot>
       </template>
diff --git a/packages/nc-gui/components/permissions/UserSelector.vue b/packages/nc-gui/components/permissions/UserSelector.vue
index 87fbe11ab5..06dcdd43a1 100644
--- a/packages/nc-gui/components/permissions/UserSelector.vue
+++ b/packages/nc-gui/components/permissions/UserSelector.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { PermissionKey } from 'nocodb-sdk'
-import { PermissionMeta, PermissionRoleMap, PermissionRolePower } from 'nocodb-sdk'
 
 const props = defineProps<{
   visible: boolean
@@ -24,77 +23,12 @@ const basesStore = useBases()
 const { basesUser } = storeToRefs(basesStore)
 
 // Search functionality
-const searchQuery = ref('')
 const isLoading = ref(false)
 
 const baseUsers = computed(() => {
   return basesUser.value.get(props.baseId) || []
 })
 
-// Filter users based on minimum role requirement from PermissionMeta
-const roleFilteredUsers = computed(() => {
-  if (!props.permission) return baseUsers.value
-
-  const permissionMeta = PermissionMeta[props.permission]
-  if (!permissionMeta) return baseUsers.value
-
-  const minimumRolePower = PermissionRolePower[permissionMeta.minimumRole]
-  if (!minimumRolePower) return baseUsers.value
-
-  return baseUsers.value.filter((user) => {
-    if (!user.roles) return false
-
-    if (typeof user.roles === 'string') {
-      const userRoles = (user.roles as string).split(',').map((r) => r.trim())
-      return userRoles.some((role) => {
-        const mappedRole = PermissionRoleMap[role as keyof typeof PermissionRoleMap]
-        const rolePower = PermissionRolePower[mappedRole]
-        return rolePower && rolePower >= minimumRolePower
-      })
-    }
-
-    return Object.keys(user.roles).some((role) => {
-      const mappedRole = PermissionRoleMap[role as keyof typeof PermissionRoleMap]
-      const rolePower = PermissionRolePower[mappedRole]
-      return rolePower && rolePower >= minimumRolePower
-    })
-  })
-})
-
-// Filtered users based on search
-const filteredUsers = computed(() => {
-  const users = roleFilteredUsers.value
-
-  if (!searchQuery.value.trim()) return users
-
-  const query = searchQuery.value.toLowerCase()
-  return users.filter((user) => {
-    return user.email?.toLowerCase().includes(query) || user.display_name?.toLowerCase().includes(query)
-  })
-})
-
-const isUserSelected = (userId: string) => selectedUsers.value.has(userId)
-
-const toggleUser = (userId: string) => {
-  if (selectedUsers.value.has(userId)) {
-    selectedUsers.value.delete(userId)
-  } else {
-    selectedUsers.value.add(userId)
-  }
-}
-
-const selectAll = () => {
-  filteredUsers.value.forEach((user) => {
-    selectedUsers.value.add(user.id)
-  })
-}
-
-const clearAll = () => {
-  filteredUsers.value.forEach((user) => {
-    selectedUsers.value.delete(user.id)
-  })
-}
-
 // Handle save
 const onSave = async () => {
   isLoading.value = true
@@ -126,12 +60,7 @@ const onSave = async () => {
   }
 }
 
-// Reset search when modal opens
-watch(visible, (isVisible) => {
-  if (isVisible) {
-    searchQuery.value = ''
-  }
-})
+const userSelectorListRef = ref()
 </script>
 
 <template>
@@ -160,59 +89,35 @@ watch(visible, (isVisible) => {
 
       <div class="text-nc-content-gray-muted mb-2">Select users</div>
 
-      <!-- Search Input -->
-      <div class="relative">
-        <GeneralIcon
-          icon="search"
-          class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-nc-content-gray-muted"
-        />
-        <input
-          v-model="searchQuery"
-          type="text"
-          placeholder="Find a user"
-          class="w-full pl-10 pr-4 py-2 border-1 border-b-0 rounded-t-lg border-nc-border-gray-medium focus:!border-nc-border-gray-medium focus:!outline-none text-sm"
-        />
-      </div>
-
-      <div class="max-h-80 overflow-y-auto mb-6">
-        <div
-          v-if="filteredUsers.length === 0"
-          class="flex flex-col items-center justify-center py-8 text-nc-content-gray-muted border-1 border-nc-border-gray-medium rounded-b-lg"
-        >
-          <img src="~assets/img/placeholder/no-search-result-found.png" class="!w-[164px] flex-none" alt="No users found" />
-          No users found
-        </div>
-        <div v-else>
-          <div
-            v-for="user in filteredUsers"
-            :key="user.id"
-            class="flex h-[54px] items-center gap-3 px-3 hover:bg-nc-bg-gray-light cursor-pointer border-1 border-b-0 border-nc-border-gray-medium last:rounded-b-lg last:border-b-1"
-            @click="toggleUser(user.id)"
-          >
-            <!-- User Avatar and Info -->
-            <div v-if="'email' in user" class="flex items-center gap-3 flex-1">
-              <GeneralUserIcon :user="user" size="medium" />
-              <div class="flex-1">
-                <div v-if="user.display_name" class="text-sm font-medium text-nc-content-gray-emphasis">
-                  {{ user.display_name }}
-                </div>
-                <div class="text-xs text-nc-content-gray-muted">
-                  {{ user.email }}
-                </div>
-              </div>
-            </div>
-
-            <NcCheckbox :checked="isUserSelected(user.id)" @click.stop="toggleUser(user.id)" />
-          </div>
-        </div>
-      </div>
+      <PermissionsUserSelectorList
+        ref="userSelectorListRef"
+        v-model:selected-users="selectedUsers"
+        class="flex-1 border-1 border-nc-border-gray-medium rounded-lg"
+        :base-id="baseId"
+        :permission-label="permissionLabel"
+        :permission-description="permissionDescription"
+        :permission="permission"
+        :is-open="visible"
+        list-class-name="!w-auto"
+      >
+      </PermissionsUserSelectorList>
 
       <div class="flex items-center justify-between pt-4 border-t border-nc-border-gray-light">
         <div class="flex gap-4">
-          <NcButton type="text" size="small" :disabled="isLoading || filteredUsers.length === 0" @click="selectAll">
+          <NcButton
+            type="text"
+            size="small"
+            :disabled="isLoading || userSelectorListRef?.list?.length === 0"
+            @click="userSelectorListRef?.selectAll()"
+          >
             Select all
           </NcButton>
-          <NcButton type="text" size="small" :disabled="isLoading || selectedUsers.size === 0" @click="clearAll">
+          <NcButton
+            type="text"
+            size="small"
+            :disabled="isLoading || selectedUsers.size === 0"
+            @click="userSelectorListRef?.clearAll()"
+          >
             Clear all
           </NcButton>
         </div>
diff --git a/packages/nc-gui/components/permissions/UserSelectorList.vue b/packages/nc-gui/components/permissions/UserSelectorList.vue
new file mode 100644
index 0000000000..70758e934a
--- /dev/null
+++ b/packages/nc-gui/components/permissions/UserSelectorList.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { PermissionKey } from 'nocodb-sdk'
+import { PermissionMeta, PermissionRoleMap, PermissionRolePower } from 'nocodb-sdk'
+
+const props = defineProps<{
+  selectedUsers: Set<string>
+  baseId: string
+  permissionLabel: string
+  permissionDescription?: string
+  permission?: PermissionKey
+  readonly?: boolean
+  isOpen?: boolean
+  listClassName?: string
+  showListFooter?: boolean
+}>()
+
+const emits = defineEmits(['update:selectedUsers', 'update:isOpen'])
+
+const selectedUsers = useVModel(props, 'selectedUsers', emits)
+
+const isOpen = useVModel(props, 'isOpen', emits)
+
+const basesStore = useBases()
+
+const { basesUser } = storeToRefs(basesStore)
+
+const listRef = ref()
+
+const baseUsers = computed(() => {
+  return basesUser.value.get(props.baseId) || []
+})
+
+// Filter users based on minimum role requirement from PermissionMeta
+const roleFilteredUsers = computed(() => {
+  if (!props.permission) return baseUsers.value
+
+  const permissionMeta = PermissionMeta[props.permission]
+  if (!permissionMeta) return baseUsers.value
+
+  const minimumRolePower = PermissionRolePower[permissionMeta.minimumRole]
+  if (!minimumRolePower) return baseUsers.value
+
+  return baseUsers.value.filter((user) => {
+    if (!user.roles) return false
+
+    if (typeof user.roles === 'string') {
+      const userRoles = (user.roles as string).split(',').map((r) => r.trim())
+      return userRoles.some((role) => {
+        const mappedRole = PermissionRoleMap[role as keyof typeof PermissionRoleMap]
+        const rolePower = PermissionRolePower[mappedRole]
+        return rolePower && rolePower >= minimumRolePower
+      })
+    }
+
+    return Object.keys(user.roles).some((role) => {
+      const mappedRole = PermissionRoleMap[role as keyof typeof PermissionRoleMap]
+      const rolePower = PermissionRolePower[mappedRole]
+      return rolePower && rolePower >= minimumRolePower
+    })
+  })
+})
+
+// Selected users display
+const selectedUsersList = computed(() => {
+  return Array.from(selectedUsers.value)
+    .map((userId) => baseUsers.value.find((user) => user.id === userId))
+    .filter(Boolean)
+})
+
+const toggleUser = (userId: string) => {
+  if (props.readonly) return
+
+  if (selectedUsers.value.has(userId)) {
+    selectedUsers.value.delete(userId)
+  } else {
+    selectedUsers.value.add(userId)
+  }
+}
+
+const selectAll = (filteredList: NcListItemType[] = listRef?.value?.list ?? roleFilteredUsers.value) => {
+  if (props.readonly) return
+
+  filteredList.forEach((user) => {
+    selectedUsers.value.add(user.id)
+  })
+}
+
+const clearAll = (filteredList: NcListItemType[] = listRef?.value?.list ?? roleFilteredUsers.value) => {
+  if (props.readonly) return
+
+  filteredList.forEach((user) => {
+    selectedUsers.value.delete(user.id)
+  })
+}
+
+const selectedUserIds = computed(() => {
+  return selectedUsersList.value.map((user) => user?.id) as string[]
+})
+
+const handleUpdateValue = (option: NcListItemType) => {
+  toggleUser(option.id)
+}
+
+const filterOption = (input: string, option: NcListItemType) => {
+  return antSelectFilterOption(input, option, ['email', 'display_name'])
+}
+
+defineExpose({
+  selectAll,
+  clearAll,
+  list: listRef?.value?.list ?? roleFilteredUsers.value,
+})
+</script>
+
+<template>
+  <NcList
+    ref="listRef"
+    :open="isOpen"
+    :value="selectedUserIds"
+    @change="handleUpdateValue($event)"
+    :list="roleFilteredUsers"
+    option-label-key="email"
+    option-value-key="id"
+    :item-height="54"
+    search-input-placeholder="Search user"
+    is-multi-select
+    show-search-always
+    :class="listClassName"
+    :filter-option="filterOption"
+    empty-description="No users found"
+  >
+    <template #listItemContent="{ option }">
+      <div v-if="option?.email" class="w-full flex gap-3 items-center max-w-[calc(100%_-_24px)]">
+        <GeneralUserIcon :user="option" size="base" class="flex-none" />
+        <div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]">
+          <div class="w-full flex gap-3">
+            <span class="text-sm text-gray-800 capitalize font-semibold truncate">
+              {{ option?.display_name || option?.email?.slice(0, option?.email.indexOf('@')) }}
+            </span>
+          </div>
+          <span class="text-xs text-gray-600 truncate">
+            {{ option?.email }}
+          </span>
+        </div>
+      </div>
+      <template v-else>{{ option.email ?? option.id }} </template>
+    </template>
+    <template #listItemSelectedIcon="{ isSelected }">
+      <NcCheckbox :checked="isSelected" />
+    </template>
+    <template v-if="showListFooter" #listFooter>
+      <NcDivider class="!my-0" />
+
+      <div class="flex items-center justify-between py-2">
+        <NcButton type="text" size="small" :disabled="selectedUsers.size === 0" @click="clearAll()"> Clear all </NcButton>
+        <NcButton type="text" size="small" :disabled="listRef?.list?.length === 0" @click="selectAll()"> Select all </NcButton>
+      </div>
+    </template>
+  </NcList>
+</template>
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index ba0da20a98..0947b4275d 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -29,6 +29,7 @@ import type { BaseRoleLoader } from '../components/smartsheet/grid/canvas/loader
 import type { AuditLogsDateRange, ImportSource, ImportType, PreFilledMode, TabType } from './enums'
 import type { rolePermissions } from './acl'
 import type Record from '~icons/*'
+import type { TooltipPlacement } from 'ant-design-vue/lib/tooltip'
 
 interface User {
   id: string
@@ -710,6 +711,105 @@ interface PermissionSelectorUser {
   display_name?: string | null
 }
 
+// NcList type starts here
+
+type MultiSelectRawValueType = Array<string | number>
+
+type RawValueType = string | number | MultiSelectRawValueType
+
+interface NcListItemType {
+  value?: RawValueType
+  label?: string
+  ncItemDisabled?: boolean
+  ncItemTooltip?: string
+  [key: string]: any
+}
+
+/**
+ * Props interface for the List component
+ */
+interface NcListProps {
+  /** The currently selected value */
+  value: RawValueType
+  /** The list of items to display */
+  list: NcListItemType[]
+  /**
+   * The key to use for accessing the value from a list item
+   * @default 'value'
+   */
+  optionValueKey?: string
+  /**
+   * The key to use for accessing the label from a list item
+   * @default 'label'
+   */
+  optionLabelKey?: string
+  /** Whether the list is open or closed */
+  open?: boolean
+  /**
+   * Whether to close the list after an item is selected
+   * @default true
+   */
+  closeOnSelect?: boolean
+  /** Placeholder text for the search input */
+  searchInputPlaceholder?: string
+  /** Show search input box always */
+  showSearchAlways?: boolean
+  /** Whether to show the currently selected option */
+  showSelectedOption?: boolean
+  /**
+   * The height of each item in the list, used for virtual list rendering.
+   * @default 38
+   */
+  itemHeight?: number
+  variant?: 'default' | 'small' | 'medium'
+  /** Custom filter function for list items */
+  filterOption?: (input: string, option: NcListItemType, index: Number) => boolean
+  /**
+   * Indicates whether the component allows multiple selections.
+   */
+  isMultiSelect?: boolean
+  /**
+   * The minimum number of items required in the list to enable search functionality.
+   */
+  minItemsForSearch?: number
+  /**
+   * Whether the list is locked and cannot be interacted with
+   */
+  isLocked?: boolean
+
+  /**
+   * Whether input should have border
+   */
+  inputBordered?: boolean
+
+  listWrapperClassName?: string
+
+  containerClassName?: string
+
+  itemClassName?: string
+
+  itemTooltipPlacement?: TooltipPlacement
+
+  /**
+   * Whether to hide the top divider
+   */
+  hideTopDivider?: boolean
+
+  emptyDescription?: string
+
+  /**
+   * This will remove side padding and rounded corners from the list item
+   */
+  itemFullWidth?: boolean
+
+  /**
+   * Whether to stop propagation on item click
+   */
+  stopPropagationOnItemClick?: boolean
+}
+
+// NcList type ends here
+
 export type {
   User,
   ProjectMetaInfo,
@@ -766,4 +866,8 @@ export type {
   RowColouringEvaluatedResultType,
   PermissionConfig,
   PermissionSelectorUser,
+  NcListProps,
+  NcListItemType,
+  MultiSelectRawValueType,
+  RawValueType,
 }
diff --git a/packages/nc-gui/utils/commonUtils.ts b/packages/nc-gui/utils/commonUtils.ts
index ba1653951b..f952f7d44c 100644
--- a/packages/nc-gui/utils/commonUtils.ts
+++ b/packages/nc-gui/utils/commonUtils.ts
@@ -130,8 +130,8 @@ export const searchCompare = (source?: NestedArray<string | number | undefined>,
  */
 export const antSelectFilterOption = (
   inputValue: string,
-  option?: DefaultOptionType,
-  searchKey: keyof DefaultOptionType | (keyof DefaultOptionType)[] = 'key',
+  option?: DefaultOptionType | NcListItemType,
+  searchKey: keyof DefaultOptionType | keyof NcListItemType | (keyof NcListItemType)[] | (keyof DefaultOptionType)[] = 'key',
 ) => {
   if (!option) return false