diff --git a/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue b/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
index d756aa70dd..c1d0ece848 100644
--- a/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
@@ -1,143 +1,137 @@
 <template>
   <group-select
     :selected-groups="selectedOptions"
-    :group-options="groups"
+    :group-options="availableGroups"
     :position-fixed="true"
     required-mark
     @selected-option-change="changeSelectedGroupOption"
   />
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, Ref, ref, unref, watch } from 'vue'
+<script setup lang="ts">
+import { computed, Ref, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import GroupSelect from './GroupSelect.vue'
 import { useClientService, Modal, useMessages } from '@opencloud-eu/web-pkg'
 import { useUserSettingsStore } from '../../composables/stores/userSettings'
 
-export default defineComponent({
-  name: 'AddToGroupsModal',
-  components: { GroupSelect },
-  props: {
-    modal: { type: Object as PropType<Modal>, required: true },
-    groups: {
-      type: Array as PropType<Group[]>,
-      required: true
-    },
-    users: {
-      type: Array as PropType<User[]>,
-      required: true
-    }
-  },
-  emits: ['update:confirmDisabled'],
-  setup(props, { emit, expose }) {
-    const { showMessage, showErrorMessage } = useMessages()
-    const clientService = useClientService()
-    const { $gettext, $ngettext } = useGettext()
-    const userSettingsStore = useUserSettingsStore()
-
-    const selectedOptions: Ref<Group[]> = ref([])
-    const changeSelectedGroupOption = (options: Group[]) => {
-      selectedOptions.value = options
-    }
+const { groups, users } = defineProps<{
+  modal: Modal
+  groups: Group[]
+  users: User[]
+}>()
 
-    watch(
-      selectedOptions,
-      () => {
-        emit('update:confirmDisabled', !unref(selectedOptions).length)
-      },
-      { immediate: true }
-    )
+const emit = defineEmits<{
+  (e: 'update:confirmDisabled', value: boolean): void
+}>()
 
-    const onConfirm = async () => {
-      const client = clientService.graphAuthenticated
-      const usersToFetch: string[] = []
-      const promises = unref(selectedOptions).reduce((acc, group) => {
-        for (const user of props.users) {
-          if (!user.memberOf.find((userGroup) => userGroup.id === group.id)) {
-            acc.push(client.groups.addMember(group.id, user.id))
-            if (!usersToFetch.includes(user.id)) {
-              usersToFetch.push(user.id)
-            }
-          }
-        }
-        return acc
-      }, [])
-
-      if (!promises.length) {
-        const title = $ngettext(
-          'Group assignment already added',
-          'Group assignments already added',
-          props.users.length * unref(selectedOptions).length
-        )
-        showMessage({ title })
-        return
-      }
+const { showMessage, showErrorMessage } = useMessages()
+const clientService = useClientService()
+const { $gettext, $ngettext } = useGettext()
+const userSettingsStore = useUserSettingsStore()
 
-      const results = await Promise.allSettled(promises)
-
-      const succeeded = results.filter((r) => r.status === 'fulfilled')
-      if (succeeded.length) {
-        const title =
-          succeeded.length === 1 && unref(selectedOptions).length === 1 && props.users.length === 1
-            ? $gettext('Group assignment "%{group}" was added successfully', {
-                group: unref(selectedOptions)[0].displayName
-              })
-            : $ngettext(
-                '%{groupAssignmentCount} group assignment was added successfully',
-                '%{groupAssignmentCount} group assignments were added successfully',
-                succeeded.length,
-                { groupAssignmentCount: succeeded.length.toString() },
-                true
-              )
-        showMessage({ title })
-      }
+const selectedOptions: Ref<Group[]> = ref([])
+const changeSelectedGroupOption = (options: Group[]) => {
+  selectedOptions.value = options
+}
 
-      const failed = results.filter((r) => r.status === 'rejected')
-      if (failed.length) {
-        failed.forEach(console.error)
-
-        const title =
-          failed.length === 1 && unref(selectedOptions).length === 1 && props.users.length === 1
-            ? $gettext('Failed to add group assignment "%{group}"', {
-                group: unref(selectedOptions)[0].displayName
-              })
-            : $ngettext(
-                'Failed to add %{groupAssignmentCount} group assignment',
-                'Failed to add %{groupAssignmentCount} group assignments',
-                failed.length,
-                { groupAssignmentCount: failed.length.toString() },
-                true
-              )
-        showErrorMessage({
-          title,
-          errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
-        })
-      }
+const availableGroups = computed(() => {
+  if (users.length > 1) {
+    // return all groups if multiple users are selected since we don't want to compute the intersection
+    return groups
+  }
+  return groups.filter(
+    (group) => !users.some((user) => user.memberOf.some(({ id }) => id === group.id))
+  )
+})
 
-      try {
-        const usersResponse = await Promise.all(
-          usersToFetch.map((userId) => client.users.getUser(userId))
-        )
+watch(
+  selectedOptions,
+  () => {
+    emit('update:confirmDisabled', !unref(selectedOptions).length)
+  },
+  { immediate: true }
+)
 
-        usersResponse.forEach((user) => {
-          userSettingsStore.upsertUser(user)
-        })
-      } catch (e) {
-        console.error(e)
+const onConfirm = async () => {
+  const client = clientService.graphAuthenticated
+  const usersToFetch: string[] = []
+  const promises = unref(selectedOptions).reduce((acc, group) => {
+    for (const user of users) {
+      if (!user.memberOf.find((userGroup) => userGroup.id === group.id)) {
+        acc.push(client.groups.addMember(group.id, user.id))
+        if (!usersToFetch.includes(user.id)) {
+          usersToFetch.push(user.id)
+        }
       }
     }
+    return acc
+  }, [])
 
-    expose({ onConfirm })
+  if (!promises.length) {
+    const title = $ngettext(
+      'Group assignment already added',
+      'Group assignments already added',
+      users.length * unref(selectedOptions).length
+    )
+    showMessage({ title })
+    return
+  }
 
-    return {
-      selectedOptions,
-      changeSelectedGroupOption,
+  const results = await Promise.allSettled(promises)
 
-      // unit tests
-      onConfirm
-    }
+  const succeeded = results.filter((r) => r.status === 'fulfilled')
+  if (succeeded.length) {
+    const title =
+      succeeded.length === 1 && unref(selectedOptions).length === 1 && users.length === 1
+        ? $gettext('Group assignment "%{group}" was added successfully', {
+            group: unref(selectedOptions)[0].displayName
+          })
+        : $ngettext(
+            '%{groupAssignmentCount} group assignment was added successfully',
+            '%{groupAssignmentCount} group assignments were added successfully',
+            succeeded.length,
+            { groupAssignmentCount: succeeded.length.toString() },
+            true
+          )
+    showMessage({ title })
   }
-})
+
+  const failed = results.filter((r) => r.status === 'rejected')
+  if (failed.length) {
+    failed.forEach(console.error)
+
+    const title =
+      failed.length === 1 && unref(selectedOptions).length === 1 && users.length === 1
+        ? $gettext('Failed to add group assignment "%{group}"', {
+            group: unref(selectedOptions)[0].displayName
+          })
+        : $ngettext(
+            'Failed to add %{groupAssignmentCount} group assignment',
+            'Failed to add %{groupAssignmentCount} group assignments',
+            failed.length,
+            { groupAssignmentCount: failed.length.toString() },
+            true
+          )
+    showErrorMessage({
+      title,
+      errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
+    })
+  }
+
+  try {
+    const usersResponse = await Promise.all(
+      usersToFetch.map((userId) => client.users.getUser(userId))
+    )
+
+    usersResponse.forEach((user) => {
+      userSettingsStore.upsertUser(user)
+    })
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+defineExpose({ onConfirm })
 </script>
diff --git a/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue b/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
index 8680178f48..ea962981c0 100644
--- a/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
@@ -1,143 +1,133 @@
 <template>
   <group-select
     :selected-groups="selectedOptions"
-    :group-options="groups"
+    :group-options="availableGroups"
     :position-fixed="true"
     required-mark
     @selected-option-change="changeSelectedGroupOption"
   />
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, Ref, ref, unref, watch } from 'vue'
+<script setup lang="ts">
+import { computed, Ref, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import GroupSelect from './GroupSelect.vue'
 import { useClientService, Modal, useMessages } from '@opencloud-eu/web-pkg'
 import { useUserSettingsStore } from '../../composables/stores/userSettings'
 
-export default defineComponent({
-  name: 'RemoveFromGroupsModal',
-  components: { GroupSelect },
-  props: {
-    modal: { type: Object as PropType<Modal>, required: true },
-    groups: {
-      type: Array as PropType<Group[]>,
-      required: true
-    },
-    users: {
-      type: Array as PropType<User[]>,
-      required: true
-    }
-  },
-  emits: ['update:confirmDisabled'],
-  setup(props, { emit, expose }) {
-    const { showMessage, showErrorMessage } = useMessages()
-    const clientService = useClientService()
-    const { $gettext, $ngettext } = useGettext()
-    const userSettingsStore = useUserSettingsStore()
-
-    const selectedOptions: Ref<Group[]> = ref([])
-    const changeSelectedGroupOption = (options: Group[]) => {
-      selectedOptions.value = options
-    }
+const { groups, users } = defineProps<{
+  modal: Modal
+  groups: Group[]
+  users: User[]
+}>()
 
-    watch(
-      selectedOptions,
-      () => {
-        emit('update:confirmDisabled', !unref(selectedOptions).length)
-      },
-      { immediate: true }
-    )
+const emit = defineEmits<{
+  (e: 'update:confirmDisabled', value: boolean): void
+}>()
 
-    const onConfirm = async () => {
-      const client = clientService.graphAuthenticated
-      const usersToFetch: string[] = []
-      const promises = unref(selectedOptions).reduce((acc, group) => {
-        for (const user of props.users) {
-          if (user.memberOf.find((userGroup) => userGroup.id === group.id)) {
-            acc.push(client.groups.deleteMember(group.id, user.id))
-            if (!usersToFetch.includes(user.id)) {
-              usersToFetch.push(user.id)
-            }
-          }
-        }
-        return acc
-      }, [])
-
-      if (!promises.length) {
-        const title = $ngettext(
-          'Group assignment already removed',
-          'Group assignments already removed',
-          props.users.length * unref(selectedOptions).length
-        )
-        showMessage({ title })
-        return
-      }
+const { showMessage, showErrorMessage } = useMessages()
+const clientService = useClientService()
+const { $gettext, $ngettext } = useGettext()
+const userSettingsStore = useUserSettingsStore()
 
-      const results = await Promise.allSettled(promises)
-
-      const succeeded = results.filter((r) => r.status === 'fulfilled')
-      if (succeeded.length) {
-        const title =
-          succeeded.length === 1 && unref(selectedOptions).length === 1 && props.users.length === 1
-            ? $gettext('Group assignment "%{group}" was deleted successfully', {
-                group: unref(selectedOptions)[0].displayName
-              })
-            : $ngettext(
-                '%{groupAssignmentCount} group assignment was deleted successfully',
-                '%{groupAssignmentCount} group assignments were deleted successfully',
-                succeeded.length,
-                { groupAssignmentCount: succeeded.length.toString() },
-                true
-              )
-        showMessage({ title })
-      }
+const selectedOptions: Ref<Group[]> = ref([])
+const changeSelectedGroupOption = (options: Group[]) => {
+  selectedOptions.value = options
+}
 
-      const failed = results.filter((r) => r.status === 'rejected')
-      if (failed.length) {
-        failed.forEach(console.error)
-
-        const title =
-          failed.length === 1 && unref(selectedOptions).length === 1 && props.users.length === 1
-            ? $gettext('Failed to delete group assignment "%{group}"', {
-                group: unref(selectedOptions)[0].displayName
-              })
-            : $ngettext(
-                'Failed to delete %{groupAssignmentCount} group assignment',
-                'Failed to delete %{groupAssignmentCount} group assignments',
-                failed.length,
-                { groupAssignmentCount: failed.length.toString() },
-                true
-              )
-        showErrorMessage({
-          title,
-          errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
-        })
-      }
+const availableGroups = computed(() => {
+  return groups.filter((group) =>
+    users.some((user) => user.memberOf.some(({ id }) => id === group.id))
+  )
+})
 
-      try {
-        const usersResponse = await Promise.all(
-          usersToFetch.map((userId) => client.users.getUser(userId))
-        )
+watch(
+  selectedOptions,
+  () => {
+    emit('update:confirmDisabled', !unref(selectedOptions).length)
+  },
+  { immediate: true }
+)
 
-        usersResponse.forEach((user) => {
-          userSettingsStore.upsertUser(user)
-        })
-      } catch (e) {
-        console.error(e)
+const onConfirm = async () => {
+  const client = clientService.graphAuthenticated
+  const usersToFetch: string[] = []
+  const promises = unref(selectedOptions).reduce((acc, group) => {
+    for (const user of users) {
+      if (user.memberOf.find((userGroup) => userGroup.id === group.id)) {
+        acc.push(client.groups.deleteMember(group.id, user.id))
+        if (!usersToFetch.includes(user.id)) {
+          usersToFetch.push(user.id)
+        }
       }
     }
+    return acc
+  }, [])
 
-    expose({ onConfirm })
+  if (!promises.length) {
+    const title = $ngettext(
+      'Group assignment already removed',
+      'Group assignments already removed',
+      users.length * unref(selectedOptions).length
+    )
+    showMessage({ title })
+    return
+  }
 
-    return {
-      selectedOptions,
-      changeSelectedGroupOption,
+  const results = await Promise.allSettled(promises)
 
-      // unit tests
-      onConfirm
-    }
+  const succeeded = results.filter((r) => r.status === 'fulfilled')
+  if (succeeded.length) {
+    const title =
+      succeeded.length === 1 && unref(selectedOptions).length === 1 && users.length === 1
+        ? $gettext('Group assignment "%{group}" was deleted successfully', {
+            group: unref(selectedOptions)[0].displayName
+          })
+        : $ngettext(
+            '%{groupAssignmentCount} group assignment was deleted successfully',
+            '%{groupAssignmentCount} group assignments were deleted successfully',
+            succeeded.length,
+            { groupAssignmentCount: succeeded.length.toString() },
+            true
+          )
+    showMessage({ title })
   }
-})
+
+  const failed = results.filter((r) => r.status === 'rejected')
+  if (failed.length) {
+    failed.forEach(console.error)
+
+    const title =
+      failed.length === 1 && unref(selectedOptions).length === 1 && users.length === 1
+        ? $gettext('Failed to delete group assignment "%{group}"', {
+            group: unref(selectedOptions)[0].displayName
+          })
+        : $ngettext(
+            'Failed to delete %{groupAssignmentCount} group assignment',
+            'Failed to delete %{groupAssignmentCount} group assignments',
+            failed.length,
+            { groupAssignmentCount: failed.length.toString() },
+            true
+          )
+    showErrorMessage({
+      title,
+      errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
+    })
+  }
+
+  try {
+    const usersResponse = await Promise.all(
+      usersToFetch.map((userId) => client.users.getUser(userId))
+    )
+
+    usersResponse.forEach((user) => {
+      userSettingsStore.upsertUser(user)
+    })
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+defineExpose({ onConfirm })
 </script>
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
index 9f759e55f7..301625f4b3 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/DetailsPanel.vue
@@ -1,12 +1,16 @@
 <template>
-  <div v-if="noUsers" class="flex flex-col items-center text-center mt-12">
+  <div
+    v-if="noUsers"
+    class="flex flex-col items-center text-center mt-12"
+    data-testid="no-users-selected"
+  >
     <oc-icon name="user" size="xxlarge" />
     <p>{{ $gettext('Select a user to view details') }}</p>
   </div>
   <div
     v-if="multipleUsers"
     id="oc-users-details-multiple-sidebar"
-    class="flex p-4 bg-role-surface-container rounded-sm"
+    class="flex flex-col items-center p-4 bg-role-surface-container rounded-sm"
   >
     <oc-icon name="group" size="xxlarge" />
     <p>{{ multipleUsersSelectedText }}</p>
@@ -73,86 +77,58 @@
     </dl>
   </div>
 </template>
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 import UserInfoBox from './UserInfoBox.vue'
 import { AppRole, User } from '@opencloud-eu/web-client/graph/generated'
 import { formatFileSize, useCapabilityStore } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { storeToRefs } from 'pinia'
 
-export default defineComponent({
-  name: 'DetailsPanel',
-  components: {
-    UserInfoBox
-  },
-  props: {
-    user: {
-      type: Object as PropType<User>,
-      required: false,
-      default: null
-    },
-    users: {
-      type: Array as PropType<User[]>,
-      required: true
-    },
-    roles: {
-      type: Array as PropType<AppRole[]>,
-      required: true
-    }
-  },
-  setup() {
-    const language = useGettext()
-    const currentLanguage = computed(() => language.current)
+const {
+  users,
+  roles,
+  user = null
+} = defineProps<{
+  users: User[]
+  roles: AppRole[]
+  user?: User
+}>()
+
+const { current: currentLanguage, $gettext } = useGettext()
+const capabilityStore = useCapabilityStore()
+const { graphUsersEditLoginAllowedDisabled } = storeToRefs(capabilityStore)
+
+const noUsers = computed(() => !users.length)
+const multipleUsers = computed(() => users.length > 1)
+const multipleUsersSelectedText = computed(() => {
+  return $gettext('%{count} users selected', {
+    count: users.length.toString()
+  })
+})
 
-    const capabilityStore = useCapabilityStore()
-    const { graphUsersEditLoginAllowedDisabled } = storeToRefs(capabilityStore)
+const roleDisplayName = computed(() => {
+  const assignedRole = user.appRoleAssignments[0]
 
-    return {
-      currentLanguage,
-      graphUsersEditLoginAllowedDisabled
-    }
-  },
-  computed: {
-    noUsers() {
-      return !this.users.length
-    },
-    multipleUsers() {
-      return this.users.length > 1
-    },
-    multipleUsersSelectedText() {
-      return this.$gettext('%{count} users selected', {
-        count: this.users.length.toString()
-      })
-    },
-    roleDisplayName() {
-      const assignedRole = this.user.appRoleAssignments[0]
+  return (
+    $gettext(roles.find((role) => role.id === assignedRole?.appRoleId)?.displayName || '') || '-'
+  )
+})
+const groupsDisplayValue = computed(() => {
+  return user.memberOf
+    .map((group) => group.displayName)
+    .sort()
+    .join(', ')
+})
+
+const showUserQuota = computed(() => 'total' in (user.drive?.quota || {}))
+const quotaDisplayValue = computed(() => {
+  return user.drive.quota.total === 0
+    ? $gettext('No restriction')
+    : formatFileSize(user.drive.quota.total, currentLanguage)
+})
 
-      return (
-        this.$gettext(
-          this.roles.find((role) => role.id === assignedRole?.appRoleId)?.displayName || ''
-        ) || '-'
-      )
-    },
-    groupsDisplayValue() {
-      return this.user.memberOf
-        .map((group) => group.displayName)
-        .sort()
-        .join(', ')
-    },
-    showUserQuota() {
-      return 'total' in (this.user.drive?.quota || {})
-    },
-    quotaDisplayValue() {
-      return this.user.drive.quota.total === 0
-        ? this.$gettext('No restriction')
-        : formatFileSize(this.user.drive.quota.total, this.currentLanguage)
-    },
-    loginDisplayValue() {
-      return this.user.accountEnabled === false
-        ? this.$gettext('Forbidden')
-        : this.$gettext('Allowed')
-    }
-  }
+const loginDisplayValue = computed(() => {
+  return user.accountEnabled === false ? $gettext('Forbidden') : $gettext('Allowed')
 })
 </script>
diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
index c2f8776803..e6f6ba0b5e 100644
--- a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
@@ -39,6 +39,10 @@ export const useUserActionsRemoveFromGroups = ({ groups }: { groups: Ref<Group[]
           return false
         }
 
+        if (resources.every(({ memberOf }) => !memberOf?.length)) {
+          return false
+        }
+
         return resources.length > 0
       },
       handler
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
index af4180787a..a5e4b13e34 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
@@ -4,6 +4,7 @@ import { mock } from 'vitest-mock-extended'
 import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import { Modal, useMessages } from '@opencloud-eu/web-pkg'
 import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
+import GroupSelect from '../../../../src/components/Users/GroupSelect.vue'
 
 describe('AddToGroupsModal', () => {
   it('renders the input', () => {
@@ -11,6 +12,32 @@ describe('AddToGroupsModal', () => {
     expect(wrapper.find('group-select-stub').exists()).toBeTruthy()
   })
 
+  describe('available groups', () => {
+    it('lists all available groups if user is not assigned to any', () => {
+      const users = [mock<User>({ memberOf: [] })]
+      const groups = [mock<Group>(), mock<Group>()]
+      const { wrapper } = getWrapper({ users, groups })
+      const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
+      expect(input.props('groupOptions').length).toBe(groups.length)
+    })
+    it('only lists groups the user is not already assigned to if one user given', () => {
+      const assignedGroup = mock<Group>({ id: '1' })
+      const users = [mock<User>({ memberOf: [assignedGroup] })]
+      const groups = [assignedGroup, mock<Group>()]
+      const { wrapper } = getWrapper({ users, groups })
+      const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
+      expect(input.props('groupOptions').length).toBe(1)
+    })
+    it('lists all available groups if more than one user given', () => {
+      const assignedGroup = mock<Group>({ id: '1' })
+      const users = [mock<User>({ memberOf: [assignedGroup] }), mock<User>({ memberOf: [] })]
+      const groups = [assignedGroup, mock<Group>()]
+      const { wrapper } = getWrapper({ users, groups })
+      const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
+      expect(input.props('groupOptions').length).toBe(groups.length)
+    })
+  })
+
   describe('method "onConfirm"', () => {
     it('adds all users to the given groups', async () => {
       const users = [mock<User>({ memberOf: [] }), mock<User>({ memberOf: [] })]
@@ -20,8 +47,7 @@ describe('AddToGroupsModal', () => {
       mocks.$clientService.graphAuthenticated.users.getUser.mockResolvedValue(
         mock<User>({ id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5' })
       )
-
-      wrapper.vm.selectedOptions = groups
+      ;(wrapper.vm as any).selectedOptions = groups
 
       await wrapper.vm.onConfirm()
       const { showMessage } = useMessages()
@@ -38,8 +64,7 @@ describe('AddToGroupsModal', () => {
       const { wrapper, mocks } = getWrapper({ users, groups })
       mocks.$clientService.graphAuthenticated.groups.addMember.mockRejectedValue(new Error(''))
       mocks.$clientService.graphAuthenticated.users.getUser.mockRejectedValue(new Error(''))
-
-      wrapper.vm.selectedOptions = groups
+      ;(wrapper.vm as any).selectedOptions = groups
 
       await wrapper.vm.onConfirm()
       const { showErrorMessage } = useMessages()
@@ -50,7 +75,7 @@ describe('AddToGroupsModal', () => {
   })
 })
 
-function getWrapper({ users = [mock<User>()], groups = [mock<Group>()] } = {}) {
+function getWrapper({ users = [mock<User>({ memberOf: [] })], groups = [mock<Group>()] } = {}) {
   const mocks = defaultComponentMocks()
 
   return {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
index 966de80bf4..1c334bf982 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
@@ -4,6 +4,7 @@ import { mock } from 'vitest-mock-extended'
 import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import { Modal, useMessages } from '@opencloud-eu/web-pkg'
 import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
+import GroupSelect from '../../../../src/components/Users/GroupSelect.vue'
 
 describe('RemoveFromGroupsModal', () => {
   it('renders the input', () => {
@@ -11,6 +12,29 @@ describe('RemoveFromGroupsModal', () => {
     expect(wrapper.find('group-select-stub').exists()).toBeTruthy()
   })
 
+  describe('available groups', () => {
+    it('lists only groups the user is assigned to', () => {
+      const assignedGroup = mock<Group>({ id: '1' })
+      const users = [mock<User>({ memberOf: [assignedGroup] })]
+      const groups = [assignedGroup, mock<Group>()]
+      const { wrapper } = getWrapper({ users, groups })
+      const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
+      expect(input.props('groupOptions').length).toBe(1)
+    })
+    it('lists a sum of all assigned groups when multiple users are selected', () => {
+      const assignedGroup = mock<Group>({ id: '1' })
+      const assignedGroup2 = mock<Group>({ id: '2' })
+      const users = [
+        mock<User>({ memberOf: [assignedGroup] }),
+        mock<User>({ memberOf: [assignedGroup, assignedGroup2] })
+      ]
+      const groups = [assignedGroup, assignedGroup2, mock<Group>()]
+      const { wrapper } = getWrapper({ users, groups })
+      const input = wrapper.findComponent<typeof GroupSelect>('group-select-stub')
+      expect(input.props('groupOptions').length).toBe(2)
+    })
+  })
+
   describe('method "onConfirm"', () => {
     it('removes all users from the given groups', async () => {
       const users = [
@@ -23,8 +47,7 @@ describe('RemoveFromGroupsModal', () => {
       mocks.$clientService.graphAuthenticated.users.getUser.mockResolvedValue(
         mock<User>({ id: 'e3515ffb-d264-4dfc-8506-6c239f6673b5' })
       )
-
-      wrapper.vm.selectedOptions = groups
+      ;(wrapper.vm as any).selectedOptions = groups
 
       await wrapper.vm.onConfirm()
       const { showMessage } = useMessages()
@@ -44,8 +67,7 @@ describe('RemoveFromGroupsModal', () => {
       const { wrapper, mocks } = getWrapper({ users, groups })
       mocks.$clientService.graphAuthenticated.groups.deleteMember.mockRejectedValue(new Error(''))
       mocks.$clientService.graphAuthenticated.users.getUser.mockRejectedValue(new Error(''))
-
-      wrapper.vm.selectedOptions = groups
+      ;(wrapper.vm as any).selectedOptions = groups
 
       await wrapper.vm.onConfirm()
       const { showErrorMessage } = useMessages()
@@ -56,7 +78,7 @@ describe('RemoveFromGroupsModal', () => {
   })
 })
 
-function getWrapper({ users = [mock<User>()], groups = [mock<Group>()] } = {}) {
+function getWrapper({ users = [mock<User>({ memberOf: [] })], groups = [mock<Group>()] } = {}) {
   const mocks = defaultComponentMocks()
 
   return {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/DetailsPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/DetailsPanel.spec.ts
index c1ad32a5ac..5b76afec3a 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/DetailsPanel.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/DetailsPanel.spec.ts
@@ -29,28 +29,28 @@ describe('DetailsPanel', () => {
       const { wrapper } = getWrapper({
         props: { user: null, users: [] }
       })
-      expect(wrapper.vm.noUsers).toBeTruthy()
+      expect(wrapper.find('[data-testid="no-users-selected"]').exists()).toBeTruthy()
     })
     it('should be false if users are given', () => {
       const { wrapper } = getWrapper({ props: { user: defaultUser, users: [defaultUser] } })
-      expect(wrapper.vm.noUsers).toBeFalsy()
+      expect(wrapper.find('[data-testid="no-users-selected"]').exists()).toBeFalsy()
     })
   })
 
   describe('computed method "multipleUsers"', () => {
     it('should be false if no users are given', () => {
       const { wrapper } = getWrapper({ props: { user: null, users: [] } })
-      expect(wrapper.vm.multipleUsers).toBeFalsy()
+      expect(wrapper.find('#oc-users-details-multiple-sidebar').exists()).toBeFalsy()
     })
     it('should be false if one user is given', () => {
       const { wrapper } = getWrapper({ props: { user: defaultUser, users: [defaultUser] } })
-      expect(wrapper.vm.multipleUsers).toBeFalsy()
+      expect(wrapper.find('#oc-users-details-multiple-sidebar').exists()).toBeFalsy()
     })
     it('should be true if multiple users are given', () => {
       const { wrapper } = getWrapper({
         props: { user: null, users: [defaultUser, { displayName: 'user2' } as User] }
       })
-      expect(wrapper.vm.multipleUsers).toBeTruthy()
+      expect(wrapper.find('#oc-users-details-multiple-sidebar').exists()).toBeTruthy()
     })
   })
 })
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts
index 979a3390bf..89424595d7 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts
@@ -1,7 +1,7 @@
 import { useUserActionsRemoveFromGroups } from '../../../../../src/composables/actions/users/useUserActionsRemoveFromGroups'
 import { mock } from 'vitest-mock-extended'
 import { ref, unref } from 'vue'
-import { User } from '@opencloud-eu/web-client/graph/generated'
+import { Group, User } from '@opencloud-eu/web-client/graph/generated'
 import { getComposableWrapper, writable } from '@opencloud-eu/web-test-helpers'
 import { useCapabilityStore, useModals } from '@opencloud-eu/web-pkg'
 
@@ -9,8 +9,9 @@ describe('useUserActionsRemoveFromGroups', () => {
   describe('method "isVisible"', () => {
     it.each([
       { resources: [], isVisible: false },
-      { resources: [mock<User>()], isVisible: true },
-      { resources: [mock<User>(), mock<User>()], isVisible: true }
+      { resources: [mock<User>()], isVisible: false },
+      { resources: [mock<User>({ memberOf: [mock<Group>()] })], isVisible: true },
+      { resources: [mock<User>({ memberOf: [mock<Group>()] }), mock<User>()], isVisible: true }
     ])('requires at least one user to be enabled', ({ resources, isVisible }) => {
       getWrapper({
         setup: ({ actions }) => {