diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 67540d2952..d3e1ac8d41 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -58,12 +58,6 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			loadingList: false,
-		}
-	},
-
 	computed: {
 		// store variables
 		circles() {
@@ -82,25 +76,10 @@ export default {
 			return Object.values(this.circle?.members || [])
 		},
 
-		/**
-		 * Is the current circle empty
-		 *
-		 * @return {boolean}
-		 */
-		isEmptyCircle() {
-			return this.members.length === 0
-		},
-
 		...mapStores(useUserGroupStore),
 	},
 
 	watch: {
-		circle(newCircle) {
-			if (newCircle?.id) {
-				this.fetchCircleMembers(newCircle.id)
-			}
-		},
-
 		userGroup(newUserGroup) {
 			if (newUserGroup?.id) {
 				this.fetchUserGroupMembers(newUserGroup.id)
@@ -109,40 +88,18 @@ export default {
 	},
 
 	beforeMount() {
-		if (this.circle?.id) {
-			this.fetchCircleMembers(this.circle.id)
-		}
-
 		if (this.userGroup?.id) {
 			this.fetchUserGroupMembers(this.userGroup.id)
 		}
 	},
 
 	methods: {
-		async fetchCircleMembers(circleId) {
-			this.loadingList = true
-			this.logger.debug('Fetching members for', { circleId })
-
-			try {
-				await this.$store.dispatch('getCircleMembers', circleId)
-			} catch (error) {
-				console.error(error)
-				showError(t('contacts', 'There was an error fetching the member list'))
-			} finally {
-				this.loadingList = false
-			}
-		},
-
 		async fetchUserGroupMembers(userGroupId) {
-			this.loadingList = true
-
 			try {
 				await this.userGroupStore.getUserGroupMembers(userGroupId)
 			} catch (error) {
 				console.error(error)
 				showError(t('contacts', 'There was an error fetching the member list'))
-			} finally {
-				this.loadingList = false
 			}
 		},
 	},
diff --git a/src/components/MemberList/MemberGridItem.vue b/src/components/MemberList/MemberGridItem.vue
index e4d1335a4b..2fa92ca489 100644
--- a/src/components/MemberList/MemberGridItem.vue
+++ b/src/components/MemberList/MemberGridItem.vue
@@ -81,6 +81,7 @@
 
 <script>
 import { DialogBuilder, showError } from '@nextcloud/dialogs'
+import { emit } from '@nextcloud/event-bus'
 import { NcActionButton, NcActions, NcActionSeparator, NcActionText, NcAvatar, NcButton } from '@nextcloud/vue'
 import IconAccountGroupOutline from 'vue-material-design-icons/AccountGroupOutline.vue'
 import IconCheckOutline from 'vue-material-design-icons/CheckOutline.vue'
@@ -317,6 +318,7 @@ export default {
 					member: this.member,
 					leave: this.isCurrentUser,
 				})
+				emit('contacts:circles:member:deleted')
 			} catch (error) {
 				if (error?.response?.status === 404) {
 					this.logger.debug('Member is not in circle')
@@ -346,6 +348,7 @@ export default {
 				// this.member is a class. We're modifying the class setter, not the prop itself
 				// eslint-disable-next-line vue/no-mutating-props
 				this.member.level = level
+				emit('contacts:circles:member:changed')
 			} catch (error) {
 				this.logger.error('Could not change the member level', { level: CIRCLES_MEMBER_LEVELS[level], error })
 				showError(t('contacts', 'Could not change the member level to {level}', {
diff --git a/src/components/MemberList/MemberList.vue b/src/components/MemberList/MemberList.vue
index 3002877d6f..4b5f58190f 100644
--- a/src/components/MemberList/MemberList.vue
+++ b/src/components/MemberList/MemberList.vue
@@ -5,14 +5,8 @@
 
 <template>
 	<section class="member-list">
-		<NcEmptyContent v-if="loading" class="empty-content" :name="t('contacts', 'Loading members list …')">
-			<template #icon>
-				<IconLoading :size="20" />
-			</template>
-		</NcEmptyContent>
-
 		<NcEmptyContent
-			v-else-if="!circle.isMember"
+			v-if="!circle.isMember"
 			class="empty-content"
 			:name="t('contacts', 'The list of members is only visible to members of this team')">
 			<template #icon>
@@ -20,26 +14,66 @@
 			</template>
 		</NcEmptyContent>
 
-		<NcEmptyContent
-			v-else-if="!hasMembers"
-			class="empty-content"
-			:name="t('contacts', 'You currently have no access to the member list')">
-			<template #icon>
-				<IconContact :size="20" />
+		<template v-else>
+			<div class="member-list__filters" :class="{ 'member-list__filters--mobile': isMobile }">
+				<NcTextField
+					v-model="searchQuery"
+					class="member-list__search"
+					:label="t('contacts', 'Search among current members')"
+					trailing-button-icon="close"
+					:show-trailing-button="searchQuery !== ''"
+					@trailing-button-click="searchQuery = ''">
+					<template #icon>
+						<IconSearch :size="20" />
+					</template>
+				</NcTextField>
+
+				<NcSelect
+					v-model="searchRole"
+					:options="roles"
+					:placeholder="t('contacts', 'Role')"
+					:multiple="false"
+					style="min-width: 160px;" />
+			</div>
+
+			<NcEmptyContent
+				v-if="loading || loadingList"
+				class="empty-content"
+				:name="t('contacts', 'Loading members list …')">
+				<template #icon>
+					<NcLoadingIcon :size="20" />
+				</template>
+			</NcEmptyContent>
+
+			<NcEmptyContent
+				v-else-if="!hasMembers"
+				class="empty-content"
+				:name="hasActiveFilters ? t('contacts', 'No members found matching your search') : t('contacts', 'You currently have no access to the member list')">
+				<template #icon>
+					<IconContact :size="20" />
+				</template>
+			</NcEmptyContent>
+
+			<template v-else>
+				<div class="member-list__virtual" :style="virtualListStyle">
+					<Virtualizer
+						v-slot="{ item }"
+						:data="flatList">
+						<MemberGridItem
+							:key="`member-grid-item-${item.id}`"
+							:member="item"
+							:is-team="!item.isUser" />
+					</Virtualizer>
+
+					<NcNoteCard v-if="isMembersLisTooLarge" type="warning" class="member-list__too-large">
+						{{ t('contacts', 'Users list too large. Please adjust your filters.') }}
+						<NcButton variant="primary" @click="onLoadAllMembers">
+							{{ t('contacts', 'Load all members') }}
+						</NcButton>
+					</NcNoteCard>
+				</div>
 			</template>
-		</NcEmptyContent>
-
-		<VList
-			v-else
-			v-slot="{ item }"
-			class="member-list__virtual"
-			:style="virtualListStyle"
-			:data="flatList">
-			<MemberGridItem
-				:key="`member-grid-item-${item.id}`"
-				:member="item"
-				:is-team="!item.isUser" />
-		</VList>
+		</template>
 
 		<!-- member picker -->
 		<EntityPicker
@@ -61,27 +95,40 @@
 <script lang="ts">
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { subscribe } from '@nextcloud/event-bus'
-import { t } from '@nextcloud/l10n'
-import { NcEmptyContent } from '@nextcloud/vue'
-import { VList } from 'virtua/vue'
-import { defineComponent } from 'vue'
+import { NcButton, NcEmptyContent, NcLoadingIcon, NcNoteCard, NcSelect, NcTextField } from '@nextcloud/vue'
+import { refDebounced } from '@vueuse/core'
+import { Virtualizer } from 'virtua/vue'
+import { defineComponent, readonly, ref } from 'vue'
 import IconContact from 'vue-material-design-icons/AccountMultipleOutline.vue'
+import IconSearch from 'vue-material-design-icons/Magnify.vue'
 import EntityPicker from '../EntityPicker/EntityPicker.vue'
 import MemberGridItem from './MemberGridItem.vue'
 import IsMobileMixin from '../../mixins/IsMobileMixin.ts'
 import RouterMixin from '../../mixins/RouterMixin.js'
-import { CIRCLES_MEMBER_GROUPING, SHARES_TYPES_MEMBER_MAP } from '../../models/constants.ts'
+import {
+	CIRCLES_MEMBER_GROUPING,
+	CIRCLES_MEMBER_LEVELS,
+	MAX_MEMBERS_TO_RENDER,
+	MemberLevels,
+	SHARES_TYPES_MEMBER_MAP,
+} from '../../models/constants.ts'
 import { getRecommendations, getSuggestions } from '../../services/collaborationAutocompletion.js'
 
 export default defineComponent({
 	name: 'MemberList',
 
 	components: {
+		IconSearch,
+		NcButton,
+		NcNoteCard,
+		NcSelect,
+		NcTextField,
 		EntityPicker,
 		IconContact,
 		MemberGridItem,
 		NcEmptyContent,
-		VList,
+		Virtualizer,
+		NcLoadingIcon,
 	},
 
 	mixins: [IsMobileMixin, RouterMixin],
@@ -98,8 +145,31 @@ export default defineComponent({
 		},
 	},
 
+	setup() {
+		const searchQuery = ref('')
+		const searchQueryDebounced = refDebounced(searchQuery, 500)
+
+		const searchRole = ref(null)
+		const roles = Object.entries(CIRCLES_MEMBER_LEVELS).map(([id, label]) => ({
+			id: Number(id),
+			label,
+		}))
+		roles.unshift({
+			id: Number(MemberLevels.NONE),
+			label: t('contacts', 'Pending'),
+		})
+
+		return {
+			searchQuery,
+			searchQueryDebounced,
+			searchRole,
+			roles: readonly(roles),
+		}
+	},
+
 	data() {
 		return {
+			loadingList: false,
 			pickerLoading: false,
 			showPicker: false,
 			showPickerIntro: true,
@@ -111,6 +181,7 @@ export default defineComponent({
 			pickerTypes: CIRCLES_MEMBER_GROUPING,
 
 			circleHeaderHeight: 0,
+			loadAllMembers: false,
 		}
 	},
 
@@ -118,12 +189,20 @@ export default defineComponent({
 		/**
 		 * Return the current circle
 		 *
-		 * @return {object}
+		 * @return {Circle}
 		 */
 		circle() {
 			return this.$store.getters.getCircle(this.selectedCircle)
 		},
 
+		members() {
+			return Object.values(this.$store.getters.getCircle(this.circle.id)?.members || [])
+		},
+
+		isMembersLisTooLarge() {
+			return !this.loadAllMembers && this.flatList.length > MAX_MEMBERS_TO_RENDER
+		},
+
 		// Decode HTML entities in the circle display name so apostrophes (') and other
 		// HTML-encoded chars (e.g. &#39;) are shown correctly in the picker labels.
 		decodedTeamName(): string {
@@ -157,6 +236,10 @@ export default defineComponent({
 			return this.flatList.length > 0
 		},
 
+		hasActiveFilters() {
+			return this.searchQuery !== '' || this.searchRole !== null
+		},
+
 		virtualListStyle() {
 			const gridBaseline = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--default-grid-baseline')) || 4
 			const headerHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')) || 50
@@ -168,9 +251,31 @@ export default defineComponent({
 		},
 	},
 
+	watch: {
+		searchQueryDebounced() {
+			this.loadAllMembers = false
+			this.fetchCircleMembers()
+		},
+
+		searchRole() {
+			this.loadAllMembers = false
+			this.fetchCircleMembers()
+		},
+
+		'circle.id': {
+			handler() {
+				this.fetchCircleMembers()
+			},
+
+			immediate: true,
+		},
+	},
+
 	mounted() {
 		subscribe('contacts:circles:append', this.onShowPicker)
 		subscribe('guests:user:created', this.onGuestCreated)
+		subscribe('contacts:circles:member:changed', this.onMemberChanged)
+		subscribe('contacts:circles:member:deleted', this.onMemberChanged)
 		this.measureCircleHeader()
 	},
 
@@ -296,6 +401,39 @@ export default defineComponent({
 			const results = await getSuggestions(guest.username, this.circle)
 			this.$refs.entityPicker.onClick(results[0])
 		},
+
+		async fetchCircleMembers(silent = false) {
+			if (!this.circle?.canManageMembers) {
+				return
+			}
+
+			if (!silent) {
+				this.loadingList = true
+			}
+			const payload = { circleId: this.circle.id, search: this.searchQuery || null, role: this.searchRole?.id, limit: this.loadAllMembers ? 0 : undefined }
+			this.logger.debug('Fetching members for', payload)
+
+			try {
+				await this.$store.dispatch('getCircleMembers', payload)
+				console.log('debug: getCircleMembers', this.list)
+			} catch (error) {
+				console.error(error)
+				showError(t('contacts', 'There was an error fetching the member list'))
+			} finally {
+				if (!silent) {
+					this.loadingList = false
+				}
+			}
+		},
+
+		onLoadAllMembers() {
+			this.loadAllMembers = true
+			this.fetchCircleMembers()
+		},
+
+		onMemberChanged() {
+			this.fetchCircleMembers(true)
+		},
 	},
 })
 </script>
@@ -312,4 +450,28 @@ export default defineComponent({
 .empty-content {
 	height: 100%;
 }
+
+.member-list__virtual {
+	overflow: auto;
+}
+
+.member-list__too-large {
+	margin-top: calc(var(--default-grid-baseline) * 2);
+}
+
+.member-list__filters {
+	display: flex;
+	align-items: flex-end;
+	gap: calc(var(--default-grid-baseline) * 2);
+	margin-bottom: calc(var(--default-grid-baseline) * 4);
+
+	&--mobile {
+		flex-direction: column;
+		align-items: stretch;
+	}
+}
+
+.member-list__search {
+	flex: 1;
+}
 </style>
diff --git a/src/components/MemberList/MemberListGroup.vue b/src/components/MemberList/MemberListGroup.vue
index d8c0a18204..1623fc10ba 100644
--- a/src/components/MemberList/MemberListGroup.vue
+++ b/src/components/MemberList/MemberListGroup.vue
@@ -6,6 +6,9 @@
 <script setup lang="ts">
 import type Member from '../../models/member.ts'
 
+import { t } from '@nextcloud/l10n'
+import { NcEmptyContent } from '@nextcloud/vue'
+import IconSearch from 'vue-material-design-icons/Magnify.vue'
 import MemberListItem from './MemberListItem.vue'
 
 defineProps<{
@@ -22,6 +25,17 @@ defineProps<{
 			class="member-list-group__heading">
 			{{ label }}
 		</h4>
+
+		<template v-if="!members.length">
+			<div style="margin-top: 2rem;">
+				<NcEmptyContent :name="t('contacts', 'No results found')">
+					<template #icon>
+						<IconSearch :size="20" />
+					</template>
+				</NcEmptyContent>
+			</div>
+		</template>
+
 		<ul :aria-labelledby="`member-list-group-${type}`" class="member-list-group__list">
 			<MemberListItem
 				v-for="member in members"
@@ -32,6 +46,15 @@ defineProps<{
 </template>
 
 <style scoped lang="scss">
+#member-list-group-1 {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.member-list-group__list-extended {
+  max-height: 200px;
+}
+
 .member-list-group {
 	&__heading {
 		display: flex;
diff --git a/src/components/MemberList/MemberListItem.vue b/src/components/MemberList/MemberListItem.vue
index 7dcf03f872..36734a2886 100644
--- a/src/components/MemberList/MemberListItem.vue
+++ b/src/components/MemberList/MemberListItem.vue
@@ -83,6 +83,7 @@
 
 <script>
 import { DialogBuilder, showError } from '@nextcloud/dialogs'
+import { emit } from '@nextcloud/event-bus'
 import {
 	NcActionButton,
 	NcActionSeparator,
@@ -314,6 +315,7 @@ export default {
 					member: this.source,
 					leave: this.isCurrentUser,
 				})
+				emit('contacts:circles:member:deleted')
 			} catch (error) {
 				if (error?.response?.status === 404) {
 					this.logger.debug('Member is not in circle')
@@ -336,13 +338,14 @@ export default {
 				// If we changed an owner, let's refresh the whole dataset to update all ownership & memberships
 				if (level === MemberLevels.OWNER) {
 					await this.$store.dispatch('getCircle', this.circle.id)
-					await this.$store.dispatch('getCircleMembers', this.circle.id)
+					await this.$store.dispatch('getCircleMembers', { circleId: this.circle.id })
 					return
 				}
 
 				// this.source is a class. We're modifying the class setter, not the prop itself
 				// eslint-disable-next-line vue/no-mutating-props
 				this.source.level = level
+				emit('contacts:circles:member:changed')
 			} catch (error) {
 				this.logger.error('Could not change the member level', { level: CIRCLES_MEMBER_LEVELS[level], error })
 				showError(t('contacts', 'Could not change the member level to {level}', {
diff --git a/src/models/constants.ts b/src/models/constants.ts
index fed33ce1ad..fe63967a2a 100644
--- a/src/models/constants.ts
+++ b/src/models/constants.ts
@@ -215,3 +215,5 @@ export enum MemberStatus {
 	MEMBER = 'Member',
 	REQUESTING = 'Requesting',
 }
+
+export const MAX_MEMBERS_TO_RENDER = 100
diff --git a/src/services/circles.ts b/src/services/circles.ts
index d833200f51..b8f7998d21 100644
--- a/src/services/circles.ts
+++ b/src/services/circles.ts
@@ -115,10 +115,22 @@ export async function leaveCircle(circleId: string) {
  * Get the circle members without the members
  *
  * @param circleId the circle id
+ * @param search the search query
+ * @param role the role
+ * @param limit the limit
  * @return
  */
-export async function getCircleMembers(circleId: string) {
-	const response = await axios.get(generateOcsUrl('apps/circles/circles/{circleId}/members', { circleId }))
+export async function getCircleMembers(circleId: string, search?: string, role?: string, limit?: number) {
+	const response = await axios.get(
+		generateOcsUrl('apps/circles/circles/{circleId}/members', { circleId }),
+		{
+			params: {
+				search,
+				role,
+				...(limit ? { limit } : {}),
+			},
+		},
+	)
 	return response.data.ocs.data
 }
 
diff --git a/src/store/circles.js b/src/store/circles.js
index 0fefd16583..4e7d581b0e 100644
--- a/src/store/circles.js
+++ b/src/store/circles.js
@@ -5,6 +5,7 @@
 
 import { showError } from '@nextcloud/dialogs'
 import Circle from '../models/circle.ts'
+import { MAX_MEMBERS_TO_RENDER } from '../models/constants.ts'
 import Member from '../models/member.ts'
 import {
 	acceptMember,
@@ -53,6 +54,16 @@ const mutations = {
 		delete state.circles[circle.id]
 	},
 
+	/**
+	 * Reset circle members
+	 *
+	 * @param {object} state the store data
+	 * @param {string} circleId the circle id
+	 */
+	resetCircleMembers(state, circleId) {
+		state.circles[circleId].members = []
+	},
+
 	/**
 	 * Append a list of members to a circle
 	 * and remove duplicates
@@ -164,13 +175,21 @@ const actions = {
 	 * Retrieve and commit circle members
 	 *
 	 * @param {object} context the store mutations
-	 * @param {string} circleId the circle id
+	 * @param {object} data destructuring object
+	 * @param {string} data.circleId the circle id
+	 * @param {string} data.search the search query
+	 * @param {string} data.role the role
+	 * @param {number} data.limit the limit
 	 */
-	async getCircleMembers(context, circleId) {
+	async getCircleMembers(context, { circleId, search, role, limit }) {
 		const circle = context.getters.getCircle(circleId)
-		const members = await getCircleMembers(circleId)
+		if (limit === undefined) {
+			limit = MAX_MEMBERS_TO_RENDER + 1
+		}
+		const members = await getCircleMembers(circleId, search, role, limit)
 
 		logger.debug(`${circleId} have ${members.length} member(s)`, { members })
+		context.commit('resetCircleMembers', circle.id)
 		context.commit('appendMembersToCircle', members.map((member) => new Member(member, circle)))
 	},