diff --git a/src/AddUsersTabs.vue b/src/AddUsersTabs.vue
new file mode 100644
index 000000000..775a1f5c1
--- /dev/null
+++ b/src/AddUsersTabs.vue
@@ -0,0 +1,256 @@
+<!--
+	@copyright Copyright (c) 2017 Arawa
+
+	@author 2024 Baptiste Fotia <baptiste.fotia@arawa.fr>
+
+	@license GNU AGPL version 3 or any later version
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as
+	published by the Free Software Foundation, either version 3 of the
+	License, or (at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="select-users-wrapper">
+		<NcAppSidebar name="Ajouter des utilisateurs"
+			class="my-sidebar"
+			:title="title"
+			@close="closeSidebar">
+			<NcAppSidebarTab id="manually"
+				name="Manually"
+				:order="1">
+				<MultiSelectUsers :all-selected-users="allSelectedUsers"
+					@change="addUserToBatch" />
+			</NcAppSidebarTab>
+			<NcAppSidebarTab id="import"
+				name="Import"
+				:order="2">
+				<div class="buttons-import-groups">
+					<ButtonUploadLocalFile :all-selected-users="allSelectedUsers"
+						@push="pushUsersFromButton" />
+					<ButtonUploadShareFiles :all-selected-users="allSelectedUsers"
+						@push="pushUsersFromButton" />
+				</div>
+			</NcAppSidebarTab>
+		</NcAppSidebar>
+		<div class="select-users-list">
+			<div v-if="allSelectedUsers.length === 0"
+				class="select-users-list-empty">
+				<span>
+					{{ t('workspace', 'No users selected') }}
+				</span>
+			</div>
+			<div v-else>
+				<UserCard v-for="user in allSelectedUsers"
+					:key="user.name"
+					class="user-entry"
+					:class="$store.getters.isMember($route.params.space, user) || !$route.params.group ? '' : 'user-not-member'"
+					:user="user"
+					@toggle-role="toggleUserRole"
+					@remove-user="removeUserFromBatch" />
+			</div>
+		</div>
+		<p v-if="$route.params.group && addingUsersToWorkspace" class="caution">
+			{{ t('workspace', 'Caution, users highlighted in red are not yet member of this workspace. They will be automaticaly added.') }}
+		</p>
+		<div class="buttons-groups">
+			<NcButton
+				@click="addUsersToWorkspaceOrGroup()">
+				{{ t('workspace', 'Add') }}
+			</NcButton>
+		</div>
+	</div>
+</template>
+
+<script>
+import ButtonUploadLocalFile from './ButtonUploadLocalFile.vue'
+import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
+import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
+import UserCard from './UserCard.vue'
+import MultiSelectUsers from './MultiSelectUsers.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import ManagerGroup from './services/Groups/ManagerGroup.js'
+import UserGroup from './services/Groups/UserGroup.js'
+import ButtonUploadShareFiles from './ButtonUploadShareFiles.vue'
+
+export default {
+	name: 'AddUsersTabs',
+	components: {
+		ButtonUploadLocalFile,
+		ButtonUploadShareFiles,
+		MultiSelectUsers,
+		NcAppSidebar,
+		NcAppSidebarTab,
+		UserCard,
+		NcButton,
+	},
+	data() {
+		return {
+			allSelectedUsers: [], // All selected users from all searches
+		}
+	},
+	computed: {
+		title() {
+			return t('workspace', 'Add users')
+		},
+	},
+	methods: {
+		closeSidebar() {
+			this.$emit('close-sidebar')
+		},
+		addUsersToWorkspaceOrGroup() {
+			this.$emit('close-sidebar')
+			const space = this.$store.state.spaces[this.$route.params.space]
+			this.allSelectedUsers.forEach(user => {
+				let gid = ''
+				if (this.$route.params.group !== undefined) {
+					// Adding a user to a workspace 'subgroup
+					this.$store.dispatch('addUserToGroup', {
+						name: this.$route.params.space,
+						gid: this.$route.params.group,
+						user,
+					})
+					if (user.role === 'admin') {
+						this.$store.dispatch('addUserToGroup', {
+							name: this.$route.params.space,
+							gid: ManagerGroup.getGid(space),
+							user,
+						})
+					}
+				} else {
+					// Adding a user to the workspace
+					if (user.role === 'admin') {
+						gid = ManagerGroup.getGid(space)
+					} else {
+						gid = UserGroup.getGid(space)
+					}
+					this.$store.dispatch('addUserToGroup', {
+						name: this.$route.params.space,
+						gid,
+						user,
+					})
+				}
+			})
+		},
+		// Adds user to the batch when user selects user in the MultiSelect
+		addUserToBatch(user) {
+			this.allSelectedUsers.push(user)
+		},
+		// Removes a user from the batch
+		removeUserFromBatch(user) {
+			this.allSelectedUsers = this.allSelectedUsers.filter((u) => {
+				return u.name !== user.name
+			})
+		},
+		// Changes the role of a user
+		toggleUserRole(user) {
+			this.allSelectedUsers = this.allSelectedUsers.map(u => {
+				if (u.name === user.name) {
+					u.role = u.role === 'user' ? 'admin' : 'user'
+					return u
+				} else {
+					return u
+				}
+			})
+		},
+		pushUsersFromButton(element) {
+			this.allSelectedUsers = element
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+
+section.app-sidebar__tab--active {
+	min-height: auto !important;
+	display: flex !important;
+	flex-direction: column !important;
+	height: 13% !important;
+	justify-content: center !important;
+	align-items: center !important;
+	overflow: visible !important;
+}
+
+// FIXME: Obivously we should at some point not randomly reuse the sidebar component
+// since this is not oficially supported
+.modal-container .app-sidebar {
+	$modal-padding: 14px;
+	border: 0;
+	min-width: calc(100% - #{$modal-padding * 2});
+	position: relative;
+	top: 0;
+	left: 0;
+	right: 0;
+	max-width: calc(100% - #{$modal-padding * 2});
+	padding: 0 14px;
+	height: auto; // retirer le mode auto
+	overflow: initial;
+	user-select: text;
+	-webkit-user-select: text;
+}
+
+.content-tab {
+	width: 100%;
+}
+
+.select-users-wrapper {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+}
+
+.select-users-list {
+	flex-grow: 1;
+	margin: 25px 0;
+	border-style: solid;
+	border-width: 1px;
+	border-color: transparent;
+	width: 82%;
+	overflow: scroll;
+	height: 330px;
+}
+
+.select-users-list-empty {
+	text-align: center;
+	line-height: 300px;
+	width: 100%;
+}
+
+.select-users-wrapper {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	align-items: center;
+}
+
+.user-entry {
+	justify-content: space-between;
+	padding-left: 5px;
+}
+
+.user-entry {
+	align-items: center;
+	display: flex;
+	flex-flow: row;
+}
+
+.buttons-import-groups {
+	display: flex;
+	width: 560px;
+	justify-content: space-between;
+	margin-top: 6px;
+}
+
+</style>
diff --git a/src/ButtonUploadLocalFile.vue b/src/ButtonUploadLocalFile.vue
new file mode 100644
index 000000000..78c7c1d80
--- /dev/null
+++ b/src/ButtonUploadLocalFile.vue
@@ -0,0 +1,128 @@
+<!--
+	@copyright Copyright (c) 2017 Arawa
+
+	@author 2024 Baptiste Fotia <baptiste.fotia@arawa.fr>
+
+	@license GNU AGPL version 3 or any later version
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as
+	published by the Free Software Foundation, either version 3 of the
+	License, or (at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div>
+		<NcButton @click="uploadNewFile()">
+			<template #icon>
+				<Upload :size="20" />
+			</template>
+			{{ t('workspace', 'Upload new files') }}
+		</NcButton>
+		<input ref="filesAttachment"
+			type="file"
+			hidden
+			@change="handleUploadFile">
+	</div>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import Upload from 'vue-material-design-icons/Upload.vue'
+import showNotificationError from './services/Notifications/NotificationError.js'
+
+export default {
+	name: 'ButtonUploadLocalFile',
+	components: {
+		NcButton,
+		Upload,
+	},
+	props: {
+		allSelectedUsers: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			isLookingUpUsers: false, // True when we are looking up users
+		}
+	},
+	methods: {
+		uploadNewFile() {
+			this.$refs.filesAttachment.click()
+		},
+		async handleUploadFile(event) {
+			if (event.target.files[0]) {
+				this.isLookingUpUsers = true
+				const bodyFormData = new FormData()
+				const file = event.target.files[0]
+				const space = this.$store.state.spaces[this.$route.params.space]
+				const spaceObj = JSON.stringify(space)
+				bodyFormData.append('file', file)
+				bodyFormData.append('space', spaceObj)
+				try {
+					const users = await this.$store.dispatch('addUsersFromCSV', {
+						formData: bodyFormData,
+					})
+					let usersToDisplay = this.filterAlreadyPresentUsers(users)
+					usersToDisplay = this.addSubtitleToUsers(usersToDisplay)
+					this.$emit('push', [...this.allSelectedUsers, ...usersToDisplay])
+					// this.allSelectedUsers = [...this.allSelectedUsers, ...usersToDisplay]
+				} catch (err) {
+					let duration = 5000
+
+					// change the duration of the notification
+					// related to the number of the word.
+					if (err.response.data.data.message.split(' ').length >= 30) {
+						duration = 8000
+					}
+
+					const title = err.response.data.data.title
+					const text = err.response.data.data.message
+					showNotificationError(title, text, duration)
+					console.error(err.response.data.exception)
+				}
+				this.isLookingUpUsers = false
+				event.target.value = ''
+			}
+		},
+		// When adding users to a space, show only those users who are not already member of the space
+		filterAlreadyPresentUsers(recvUsers) {
+			let users = []
+			if (this.$route.params.group === undefined) {
+				const space = this.$store.state.spaces[this.$route.params.space]
+				users = recvUsers.filter(user => {
+					return (!(user.uid in space.users))
+				}, space)
+			} else {
+				users = recvUsers.filter(user => {
+					return (!(user.groups.includes(this.$route.params.group)))
+				})
+			}
+			// Filters user that are already selected
+			return users.filter(newUser => {
+				return this.allSelectedUsers.every(user => {
+					return newUser.uid !== user.uid
+				})
+			})
+		},
+		addSubtitleToUsers(users) {
+			return users.map(user => {
+				return {
+					...user,
+					subtitle: user.subtitle ?? '',
+				}
+			})
+		},
+	},
+}
+</script>
diff --git a/src/ButtonUploadShareFiles.vue b/src/ButtonUploadShareFiles.vue
new file mode 100644
index 000000000..cb8b57f69
--- /dev/null
+++ b/src/ButtonUploadShareFiles.vue
@@ -0,0 +1,127 @@
+<!--
+	@copyright Copyright (c) 2017 Arawa
+
+	@author 2024 Baptiste Fotia <baptiste.fotia@arawa.fr>
+
+	@license GNU AGPL version 3 or any later version
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as
+	published by the Free Software Foundation, either version 3 of the
+	License, or (at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div>
+		<NcButton @click="shareCsvFromFiles()">
+			<template #icon>
+				<Folder :size="20" />
+			</template>
+			{{ t('workspace', 'Choose from Files') }}
+		</NcButton>
+	</div>
+</template>
+
+<script>
+import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import showNotificationError from './services/Notifications/NotificationError.js'
+import Folder from 'vue-material-design-icons/Folder.vue'
+
+const picker = getFilePickerBuilder(t('deck', 'File to share'))
+	.setMultiSelect(false)
+	.setModal(true)
+	.setType(1)
+	.allowDirectories()
+	.build()
+
+export default {
+	name: 'ButtonUploadShareFiles',
+	components: {
+		NcButton,
+		Folder,
+	},
+	props: {
+		allSelectedUsers: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	methods: {
+		shareCsvFromFiles() {
+			picker.pick()
+				.then(async (path, title) => {
+					console.debug(`path ${path} selected for sharing, title ${title}`)
+					const space = this.$store.state.spaces[this.$route.params.space]
+					const spaceString = JSON.stringify(space)
+					const bodyFormData = new FormData()
+					bodyFormData.append('path', path)
+					bodyFormData.append('space', spaceString)
+					try {
+						const users = await this.$store.dispatch('importCsvFromFiles', { formData: bodyFormData })
+						let usersToDisplay = this.filterAlreadyPresentUsers(users)
+						usersToDisplay = this.addSubtitleToUsers(usersToDisplay)
+						// this.allSelectedUsers = [...this.allSelectedUsers, ...usersToDisplay]
+						this.$emit('push', [...this.allSelectedUsers, ...usersToDisplay])
+					} catch (err) {
+						let duration = 5000
+
+						// change the duration of the notification
+						// related to the number of the word.
+						if (err.response.data.data.message.split(' ').length >= 30) {
+							duration = 8000
+						}
+
+						const title = err.response.data.data.title
+						const text = err.response.data.data.message
+						showNotificationError(title, text, duration)
+						console.error(err.response.data.exception)
+					}
+				})
+		},
+		// When adding users to a space, show only those users who are not already member of the space
+		filterAlreadyPresentUsers(recvUsers) {
+			let users = []
+			console.error('par là 1')
+			if (this.$route.params.group === undefined) {
+				console.error('par là 2')
+				const space = this.$store.state.spaces[this.$route.params.space]
+				users = recvUsers.filter(user => {
+					console.error('par là 3')
+					return (!(user.uid in space.users))
+				}, space)
+			} else {
+				console.error('par là 4')
+				users = recvUsers.filter(user => {
+					console.error('par là 5')
+					return (!(user.groups.includes(this.$route.params.group)))
+				})
+			}
+			// Filters user that are already selected
+			return users.filter(newUser => {
+				console.error('par là 6')
+				return this.allSelectedUsers.every(user => {
+					return newUser.uid !== user.uid
+				})
+			})
+		},
+		addSubtitleToUsers(users) {
+			return users.map(user => {
+				return {
+					...user,
+					subtitle: user.subtitle ?? '',
+				}
+			})
+		},
+	},
+}
+
+</script>
diff --git a/src/MultiSelectUsers.vue b/src/MultiSelectUsers.vue
new file mode 100644
index 000000000..e63952d1e
--- /dev/null
+++ b/src/MultiSelectUsers.vue
@@ -0,0 +1,145 @@
+<!--
+	@copyright Copyright (c) 2017 Arawa
+
+	@author 2024 Baptiste Fotia <baptiste.fotia@arawa.fr>
+
+	@license GNU AGPL version 3 or any later version
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as
+	published by the Free Software Foundation, either version 3 of the
+	License, or (at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="multiselect-area">
+		<NcMultiselect class="select-users-input"
+			label="name"
+			:custom-label="displayForSearching"
+			track-by="uid"
+			:loading="isLookingUpUsers"
+			:multiple="false"
+			:options="selectableUsers"
+			:placeholder="t('workspace', 'Start typing to lookup users')"
+			:tag-width="50"
+			:user-select="true"
+			@change="addUserToBatch"
+			@close="selectableUsers=[]"
+			@search-change="lookupUsers">
+			<span slot="noOptions">{{ t('workspace', 'No username matches your current entry.') }}</span>
+		</NcMultiselect>
+	</div>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import showNotificationError from './services/Notifications/NotificationError.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+
+export default {
+	name: 'MultiSelectUsers',
+	components: {
+		NcMultiselect,
+	},
+	props: {
+		allSelectedUsers: {
+			type: Array,
+			default: () => [], // All selected users from all searches
+		},
+	},
+	data() {
+		return {
+			isLookingUpUsers: false, // True when we are looking up users
+			selectableUsers: [], // Users matching a search term
+		}
+	},
+	methods: {
+		// Adds user to the batch when user selects user in the MultiSelect
+		addUserToBatch(user) {
+			this.$emit('change', user)
+		},
+		displayForSearching({ name, email, uid }) {
+			return `${name} - ${email} - ${uid}`
+		},
+		lookupUsers(term) {
+			// safeguard for initialisation
+			if (term === undefined || term === '') {
+				return
+			}
+			const space = this.$store.state.spaces[this.$route.params.space]
+			const spaceId = space.id
+			// TODO: limit max results?
+			this.isLookingUpUsers = true
+			axios.post(generateUrl(`/apps/workspace/api/autoComplete/${term}/${spaceId}`),
+				{
+					space,
+				})
+				.then((resp) => {
+					if (resp.status === 200) {
+						const usersToDisplay = this.filterAlreadyPresentUsers(resp.data)
+						this.selectableUsers = this.addSubtitleToUsers(usersToDisplay)
+					} else {
+						const text = t('workspace', 'An error occured while trying to lookup users.<br>The error is: {error}', { error: resp.statusText })
+						showNotificationError('Error', text, 3000)
+					}
+				})
+				.catch((e) => {
+					const text = t('workspace', 'A network error occured while trying to lookup users.<br>The error is: {error}', { error: e })
+					showNotificationError('Network error', text, 3000)
+					console.error('Problem to search users', e)
+				})
+			this.isLookingUpUsers = false
+		},
+		addSubtitleToUsers(users) {
+			return users.map(user => {
+				return {
+					...user,
+					subtitle: user.subtitle ?? '',
+				}
+			})
+		},
+		// When adding users to a space, show only those users who are not already member of the space
+		filterAlreadyPresentUsers(recvUsers) {
+			let users = []
+			if (this.$route.params.group === undefined) {
+				const space = this.$store.state.spaces[this.$route.params.space]
+				users = recvUsers.filter(user => {
+					return (!(user.uid in space.users))
+				}, space)
+			} else {
+				users = recvUsers.filter(user => {
+					return (!(user.groups.includes(this.$route.params.group)))
+				})
+			}
+			// Filters user that are already selected
+			return users.filter(newUser => {
+				return this.allSelectedUsers.every(user => {
+					return newUser.uid !== user.uid
+				})
+			})
+		},
+	},
+}
+</script>
+
+<style>
+.select-users-input {
+	width: 80%;
+}
+
+.multiselect-area {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+</style>
diff --git a/src/SpaceDetails.vue b/src/SpaceDetails.vue
index 7ce36d158..057431b5a 100644
--- a/src/SpaceDetails.vue
+++ b/src/SpaceDetails.vue
@@ -84,7 +84,7 @@
 		<UserTable :space-name="$route.params.space" />
 		<NcModal v-if="showSelectUsersModal"
 			@close="toggleShowSelectUsersModal">
-			<SelectUsers :space-name="$route.params.space" @close="toggleShowSelectUsersModal" />
+			<AddUsersTabs @close-sidebar="toggleShowSelectUsersModal" />
 		</NcModal>
 		<NcModal v-if="showDelWorkspaceModal"
 			style="min-heigth: 8rem;"
@@ -104,22 +104,22 @@ import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
 import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
 import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
-import SelectUsers from './SelectUsers.vue'
 import RemoveSpace from './RemoveSpace.vue'
 import UserTable from './UserTable.vue'
 import { destroy, rename, checkGroupfolderNameExist } from './services/groupfoldersService.js'
 import showNotificationError from './services/Notifications/NotificationError.js'
+import AddUsersTabs from './AddUsersTabs.vue'
 
 export default {
 	name: 'SpaceDetails',
 	components: {
+		AddUsersTabs,
 		NcActions,
 		NcActionButton,
 		NcActionInput,
 		NcColorPicker,
 		NcModal,
 		NcMultiselect,
-		SelectUsers,
 		RemoveSpace,
 		UserTable,
 	},
@@ -212,9 +212,9 @@ export default {
 
 					// Renames group
 					this.$store.dispatch('renameGroup', {
-					  name: newSpaceName,
-					  gid: group.gid,
-					  newGroupName: newDisplayName,
+						name: newSpaceName,
+						gid: group.gid,
+						newGroupName: newDisplayName,
 					})
 				})
 
@@ -331,4 +331,9 @@ export default {
 .modal-wrapper--small .modal-container {
 	min-height: 12rem !important;
 }
+
+.modal-container {
+	min-height: 660px !important;
+	max-height: 660px !important;
+}
 </style>
diff --git a/src/UserCard.vue b/src/UserCard.vue
new file mode 100644
index 000000000..670a4b3f7
--- /dev/null
+++ b/src/UserCard.vue
@@ -0,0 +1,109 @@
+<!--
+	@copyright Copyright (c) 2017 Arawa
+
+	@author 2024 Baptiste Fotia <baptiste.fotia@arawa.fr>
+
+	@license GNU AGPL version 3 or any later version
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as
+	published by the Free Software Foundation, either version 3 of the
+	License, or (at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="user-card">
+		<div class="avatar">
+			<div class="icon-member" :class="$store.getters.isMember($route.params.space, user) ? 'is-member' : ''" />
+			<NcAvatar :display-name="user.name" :user="user.uid" />
+			<div class="user-name">
+				<span> {{ user.name }} </span>
+			</div>
+		</div>
+		<div class="user-entry-actions">
+			<div v-if="!$store.getters.isGEorUGroup($route.params.space, $route.params.group)">
+				<NcCheckboxRadioSwitch type="checkbox"
+					class="role-toggle"
+					:checked="user.role === 'admin'"
+					@update:checked="toggleUserRole(user)">
+					{{ t('workspace', 'S.A.') }}
+				</NcCheckboxRadioSwitch>
+			</div>
+			<NcActions>
+				<NcActionButton icon="icon-delete"
+					@click="removeUserFromBatch(user)">
+					{{ t('workspace', 'remove users from selection') }}
+				</NcActionButton>
+			</NcActions>
+		</div>
+	</div>
+</template>
+
+<script>
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+
+export default {
+	name: 'UserCard',
+	components: {
+		NcAvatar,
+		NcActions,
+		NcActionButton,
+		NcCheckboxRadioSwitch,
+	},
+	props: {
+		user: {
+			type: Object,
+			default: () => {},
+		},
+	},
+	methods: {
+		toggleUserRole(user) {
+			this.$emit('toggle-role', user)
+		},
+		removeUserFromBatch(user) {
+			this.$emit('remove-user', user)
+		},
+	},
+}
+</script>
+
+<style scoped>
+
+.user-card {
+  display: flex;
+}
+
+.user-name {
+	margin-left: 10px;
+	max-width: 440px;
+}
+
+.is-member {
+	background-image: url('../img/member.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: contain;
+}
+
+.avatar {
+	align-items: center;
+	display: flex;
+	flex-flow: row;
+}
+
+.user-entry-actions {
+  display: flex;
+}
+
+</style>