diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index d4ef8b66523..1a7d0b9ad09 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -83,7 +83,7 @@
 
     <div
       v-if="showMessageLine"
-      class="oc-text-input-message text-sm"
+      class="oc-text-input-message text-sm mt-1 min-h-4.5"
       :class="{
         'oc-text-input-description': !!descriptionMessage,
         'oc-text-input-danger': !!errorMessage
diff --git a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts
new file mode 100644
index 00000000000..c984976e5ad
--- /dev/null
+++ b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts
@@ -0,0 +1,28 @@
+import { defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
+import OcTextInputPassword from './OcTextInputPassword.vue'
+import { PasswordPolicy } from '../../helpers'
+
+describe('OcTextInputPassword', () => {
+  it('shows the initial value', () => {
+    const wrapper = getWrapper('secret')
+    expect(wrapper.find('input').element.value).toBe('secret')
+  })
+  it('updates the input when the value changes from outside', async () => {
+    const wrapper = getWrapper('secret')
+    await wrapper.setProps({ value: '' })
+    expect(wrapper.find('input').element.value).toBe('')
+  })
+})
+
+const passwordPolicy: PasswordPolicy = {
+  rules: [],
+  check: () => true,
+  missing: () => ({ rules: [] })
+}
+
+function getWrapper(value: string) {
+  return mount(OcTextInputPassword, {
+    props: { value, passwordPolicy },
+    global: { plugins: [...defaultPlugins()] }
+  })
+}
diff --git a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
index 3bef4a23e9b..636a9e5f4e8 100644
--- a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
+++ b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
@@ -162,6 +162,13 @@ const setSelectionRange = (start: number, end: number) => {
 
 defineExpose({ focus, select, setSelectionRange })
 
+watch(
+  () => value,
+  (newValue) => {
+    password.value = newValue
+  }
+)
+
 watch(password, (value) => {
   if (!Object.keys(passwordPolicy).length) {
     return
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
index efb3937624b..68d39244350 100644
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/EditPanel.vue
@@ -1,23 +1,21 @@
 <template>
-  <div id="group-edit-panel" class="mt-2">
-    <GroupInfoBox :group="group" />
-    <form
-      id="group-edit-form"
-      class="bg-role-surface-container p-4 rounded-t-sm"
-      autocomplete="off"
-    >
-      <oc-text-input
-        id="displayName-input"
-        v-model="editGroup.displayName"
-        class="mb-2"
-        :label="$gettext('Group name')"
-        :error-message="formData.displayName.errorMessage"
-        :fix-message-line="true"
-        required-mark
-        @update:model-value="validateDisplayName"
-      />
+  <div id="group-edit-panel" class="flex-1 flex flex-col p-2">
+    <form id="group-edit-form" class="flex-1 flex flex-col" autocomplete="off">
+      <section class="bg-role-surface-container rounded-xl px-4 pt-3 pb-1">
+        <h3 class="font-semibold text-sm mt-0 mb-1" v-text="$gettext('Group')" />
+        <oc-text-input
+          id="displayName-input"
+          v-model="editGroup.displayName"
+          :label="$gettext('Group name')"
+          :error-message="formData.displayName.errorMessage"
+          :fix-message-line="true"
+          required-mark
+          @update:model-value="validateDisplayName"
+        />
+      </section>
       <compare-save-dialog
-        class="mb-6 rounded-b-sm"
+        v-model:saved="saved"
+        class="mt-auto pt-4"
         :original-object="group"
         :compare-object="editGroup"
         :confirm-button-disabled="invalidFormData"
@@ -27,123 +25,100 @@
     </form>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, PropType, ref } from 'vue'
+<script setup lang="ts">
+import { computed, ref, unref, watch } from 'vue'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
-import { CompareSaveDialog, eventBus, useMessages } from '@opencloud-eu/web-pkg'
-import { MaybeRef, useClientService } from '@opencloud-eu/web-pkg'
+import { CompareSaveDialog, useClientService, useMessages } from '@opencloud-eu/web-pkg'
 import { useGroupSettingsStore } from '../../../composables'
 import { useGettext } from 'vue3-gettext'
 
-export default defineComponent({
-  name: 'EditPanel',
-  components: {
-    CompareSaveDialog
-  },
-  props: {
-    group: {
-      type: Object as PropType<Group>,
-      default: null
-    }
-  },
-  emits: ['confirm'],
-  setup() {
-    const clientService = useClientService()
-    const { showErrorMessage } = useMessages()
-    const groupSettingsStore = useGroupSettingsStore()
-    const { $gettext } = useGettext()
+const { group = null } = defineProps<{ group?: Group }>()
 
-    const editGroup: MaybeRef<Group> = ref({})
-    const formData = ref({
-      displayName: {
-        errorMessage: '',
-        valid: true
-      }
-    })
+const clientService = useClientService()
+const { showErrorMessage } = useMessages()
+const groupSettingsStore = useGroupSettingsStore()
+const { $gettext } = useGettext()
 
-    const onEditGroup = async (editGroup: Group) => {
-      try {
-        const client = clientService.graphAuthenticated
-        await client.groups.editGroup(editGroup.id, editGroup)
-        const updatedGroup = await client.groups.getGroup(editGroup.id)
-        groupSettingsStore.upsertGroup(updatedGroup)
+const editGroup = ref<Group>({})
+const saved = ref(false)
+const formData = ref({
+  displayName: {
+    errorMessage: '',
+    valid: true
+  }
+})
 
-        eventBus.publish('sidebar.entity.saved')
+const invalidFormData = computed(() => {
+  return Object.values(unref(formData)).some((v) => !v.valid)
+})
 
-        return updatedGroup
-      } catch (error) {
-        console.error(error)
-        showErrorMessage({
-          title: $gettext('Failed to edit group'),
-          errors: [error]
-        })
-      }
-    }
+async function onEditGroup(editGroup: Group) {
+  try {
+    const client = clientService.graphAuthenticated
+    await client.groups.editGroup(editGroup.id, editGroup)
+    const updatedGroup = await client.groups.getGroup(editGroup.id)
+    groupSettingsStore.upsertGroup(updatedGroup)
+    saved.value = true
 
-    return {
-      clientService,
-      editGroup,
-      formData,
-      onEditGroup
-    }
-  },
-  computed: {
-    invalidFormData() {
-      return Object.values(this.formData)
-        .map((v) => !!v.valid)
-        .includes(false)
-    }
-  },
-  watch: {
-    group: {
-      handler: function () {
-        this.editGroup = { ...this.group }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  methods: {
-    async validateDisplayName() {
-      this.formData.displayName.valid = false
+    return updatedGroup
+  } catch (error) {
+    console.error(error)
+    showErrorMessage({
+      title: $gettext('Failed to edit group'),
+      errors: [error]
+    })
+  }
+}
 
-      if (this.editGroup.displayName.trim() === '') {
-        this.formData.displayName.errorMessage = this.$gettext('Group name cannot be empty')
-        return false
-      }
+async function validateDisplayName() {
+  formData.value.displayName.valid = false
 
-      if (this.editGroup.displayName.length > 255) {
-        this.formData.displayName.errorMessage = this.$gettext(
-          'Group name cannot exceed 255 characters'
-        )
-        return false
-      }
+  if (unref(editGroup).displayName.trim() === '') {
+    formData.value.displayName.errorMessage = $gettext('Group name cannot be empty')
+    return false
+  }
 
-      if (this.group.displayName !== this.editGroup.displayName) {
-        try {
-          const client = this.clientService.graphAuthenticated
-          await client.groups.getGroup(this.editGroup.displayName)
-          this.formData.displayName.errorMessage = this.$gettext(
-            'Group "%{groupName}" already exists',
-            {
-              groupName: this.editGroup.displayName
-            }
-          )
-          return false
-        } catch {}
-      }
+  if (unref(editGroup).displayName.length > 255) {
+    formData.value.displayName.errorMessage = $gettext('Group name cannot exceed 255 characters')
+    return false
+  }
 
-      this.formData.displayName.errorMessage = ''
-      this.formData.displayName.valid = true
-      return true
-    },
-    revertChanges() {
-      this.editGroup = { ...this.group }
-      Object.values(this.formData).forEach((formDataValue) => {
-        formDataValue.valid = true
-        formDataValue.errorMessage = ''
+  if (group.displayName !== unref(editGroup).displayName) {
+    try {
+      const client = clientService.graphAuthenticated
+      await client.groups.getGroup(unref(editGroup).displayName)
+      formData.value.displayName.errorMessage = $gettext('Group "%{groupName}" already exists', {
+        groupName: unref(editGroup).displayName
       })
-    }
+      return false
+    } catch {}
   }
-})
+
+  formData.value.displayName.errorMessage = ''
+  formData.value.displayName.valid = true
+  return true
+}
+
+function revertChanges() {
+  editGroup.value = { ...group }
+  Object.values(unref(formData)).forEach((formDataValue) => {
+    formDataValue.valid = true
+    formDataValue.errorMessage = ''
+  })
+}
+
+watch(
+  () => group,
+  () => {
+    editGroup.value = { ...group }
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => group?.id,
+  () => {
+    saved.value = false
+  }
+)
 </script>
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue
deleted file mode 100644
index 885bf31aa41..00000000000
--- a/packages/web-app-admin-settings/src/components/Groups/SideBar/GroupInfoBox.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div class="flex items-center min-w-0 mb-4">
-    <OcAvatar
-      class="mr-3 shrink-0"
-      :width="40"
-      :userid="group.id"
-      :user-name="group.displayName"
-      background-color="var(--oc-role-secondary)"
-    />
-    <h2 class="font-semibold m-0 min-w-0 text-base truncate" v-text="group.displayName" />
-  </div>
-</template>
-<script setup lang="ts">
-import { Group } from '@opencloud-eu/web-client/graph/generated'
-
-defineProps<{ group: Group }>()
-</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 196edf21caf..415b11836d4 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
@@ -28,6 +28,10 @@
       <dd>{{ user.displayName }}</dd>
       <dt>{{ $gettext('Email') }}</dt>
       <dd>{{ user.mail }}</dd>
+      <template v-if="!graphUsersEditLoginAllowedDisabled">
+        <dt>{{ $gettext('Login') }}</dt>
+        <dd>{{ loginDisplayValue }}</dd>
+      </template>
       <dt>{{ $gettext('Role') }}</dt>
       <dd>
         <span v-if="user.appRoleAssignments" v-text="roleDisplayName" />
@@ -44,12 +48,7 @@
         </span>
       </dd>
 
-      <template v-if="!graphUsersEditLoginAllowedDisabled">
-        <dt>{{ $gettext('Login') }}</dt>
-        <dd>{{ loginDisplayValue }}</dd>
-      </template>
-
-      <dt>{{ $gettext('Quota') }}</dt>
+      <dt>{{ $gettext('Personal quota') }}</dt>
       <dd>
         <span v-if="showUserQuota" v-text="quotaDisplayValue" />
         <span v-else>
@@ -60,7 +59,7 @@
                 'User quota becomes available once the user has logged in for the first time.'
               )
             "
-            :title="$gettext('Quota')"
+            :title="$gettext('Personal quota')"
           />
         </span>
       </dd>
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
index 793643e1a64..e72b1e934fa 100644
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue
@@ -1,12 +1,11 @@
 <template>
-  <div id="user-edit-panel">
-    <UserInfoBox :user="user" />
-    <form id="user-edit-form" class="bg-role-surface-container p-4 rounded-sm" autocomplete="off">
-      <div>
+  <div id="user-edit-panel" class="flex-1 flex flex-col p-2">
+    <form id="user-edit-form" class="flex-1 flex flex-col" autocomplete="off">
+      <section class="bg-role-surface-container rounded-xl px-4 pt-3 pb-1">
+        <h3 class="font-semibold text-sm mt-0 mb-1" v-text="$gettext('Profile')" />
         <oc-text-input
           id="userName-input"
           v-model="editUser.onPremisesSamAccountName"
-          class="mb-2"
           :label="$gettext('User name')"
           :error-message="formData.userName.errorMessage"
           :fix-message-line="true"
@@ -17,7 +16,6 @@
         <oc-text-input
           id="displayName-input"
           v-model="editUser.displayName"
-          class="mb-2"
           :label="$gettext('First and last name')"
           :error-message="formData.displayName.errorMessage"
           :fix-message-line="true"
@@ -28,7 +26,6 @@
         <oc-text-input
           id="email-input"
           v-model="editUser.mail"
-          class="mb-2"
           :label="$gettext('Email')"
           :error-message="formData.email.errorMessage"
           :error-message-debounced-time="1000"
@@ -38,10 +35,12 @@
           required-mark
           @update:model-value="validateEmail"
         />
+      </section>
+      <section class="bg-role-surface-container rounded-xl px-4 pt-3 pb-1 mt-4">
+        <h3 class="font-semibold text-sm mt-0 mb-1" v-text="$gettext('Access')" />
         <oc-text-input
           id="password-input"
           :model-value="editUser.passwordProfile?.password"
-          class="mb-2"
           :label="$gettext('Password')"
           type="password"
           :fix-message-line="true"
@@ -49,40 +48,31 @@
           :read-only="isInputFieldReadOnly('user.passwordProfile')"
           @update:model-value="onUpdatePassword"
         />
-        <div class="mb-2">
-          <oc-select
-            id="role-input"
-            :model-value="selectedRoleValue"
-            :label="$gettext('Role')"
-            option-label="displayName"
-            :options="translatedRoleOptions"
-            :clearable="false"
-            :read-only="isInputFieldReadOnly('user.appRoleAssignments')"
-            required-mark
-            @update:model-value="onUpdateRole"
-          />
-          <div class="oc-text-input-message"></div>
-        </div>
-        <div v-if="!graphUsersEditLoginAllowedDisabled" class="mb-2">
-          <oc-select
-            id="login-input"
-            :disabled="isLoginInputDisabled"
-            :model-value="selectedLoginValue"
-            :label="$gettext('Login')"
-            :options="loginOptions"
-            :clearable="false"
-            :read-only="isInputFieldReadOnly('user.accountEnabled')"
-            required-mark
-            @update:model-value="onUpdateLogin"
-          />
-
-          <div class="oc-text-input-message"></div>
-        </div>
+        <oc-switch
+          v-if="!graphUsersEditLoginAllowedDisabled"
+          id="login-input"
+          class="flex justify-between mb-5"
+          :checked="loginAllowed"
+          :label="$gettext('Login allowed')"
+          :disabled="isLoginInputDisabled || isInputFieldReadOnly('user.accountEnabled')"
+          @update:checked="onUpdateLogin"
+        />
+        <oc-select
+          id="role-input"
+          :model-value="selectedRoleValue"
+          :label="$gettext('Role')"
+          option-label="displayName"
+          :options="translatedRoleOptions"
+          :clearable="false"
+          :fix-message-line="true"
+          :read-only="isInputFieldReadOnly('user.appRoleAssignments')"
+          required-mark
+          @update:model-value="onUpdateRole"
+        />
         <quota-select
           id="quota-select-form"
           :key="'quota-select-' + user.id"
           :disabled="isQuotaInputDisabled"
-          class="mb-2"
           :label="$gettext('Personal quota')"
           :total-quota="editUser.drive?.quota?.total || 0"
           :max-quota="maxQuota"
@@ -96,17 +86,20 @@
           required-mark
           @selected-option-change="changeSelectedQuotaOption"
         />
+      </section>
+      <section class="bg-role-surface-container rounded-xl px-4 pt-3 pb-1 mt-4">
+        <h3 class="font-semibold text-sm mt-0 mb-1" v-text="$gettext('Membership')" />
         <group-select
-          class="mb-2"
           :read-only="isInputFieldReadOnly('user.memberOf')"
           :selected-groups="editUser.memberOf"
           :group-options="groupOptions"
           @selected-option-change="changeSelectedGroupOption"
         />
-      </div>
+      </section>
       <compare-save-dialog
-        class="mb-6"
-        :original-object="compareSaveDialogOriginalObject"
+        v-model:saved="saved"
+        class="mt-auto pt-4"
+        :original-object="user"
         :compare-object="editUser"
         :confirm-button-disabled="invalidFormData"
         @revert="revertChanges"
@@ -123,7 +116,6 @@ import {
   QuotaSelect,
   useUserStore,
   useCapabilityStore,
-  useEventBus,
   useMessages,
   useSpacesStore,
   useAuthService
@@ -154,12 +146,12 @@ const clientService = useClientService()
 const userStore = useUserStore()
 const userSettingsStore = useUserSettingsStore()
 const spacesStore = useSpacesStore()
-const eventBus = useEventBus()
 const { showErrorMessage } = useMessages()
 const { $gettext } = useGettext()
 const authService = useAuthService()
 const { graphUsersEditLoginAllowedDisabled } = storeToRefs(capabilityStore)
 const editUser: MaybeRef<User> = ref()
+const saved = ref(false)
 const formData = ref({
   displayName: {
     errorMessage: '',
@@ -272,7 +264,7 @@ const onEditUser = async ({ user, editUser }: { user: User; editUser: User }) =>
     const updatedUser = await client.users.getUser(user.id)
     userSettingsStore.upsertUser(updatedUser)
 
-    eventBus.publish('sidebar.entity.saved')
+    saved.value = true
 
     if (userStore.user.id === updatedUser.id) {
       userStore.setUser(updatedUser)
@@ -290,24 +282,8 @@ const onEditUser = async ({ user, editUser }: { user: User; editUser: User }) =>
 
 const maxQuota = computed(() => capabilityStore.spacesMaxQuota)
 
-const loginOptions = computed(() => [
-  {
-    label: $gettext('Allowed'),
-    value: true
-  },
-  {
-    label: $gettext('Forbidden'),
-    value: false
-  }
-])
-
-const selectedLoginValue = computed(() => {
-  return unref(loginOptions).find((option) =>
-    !('accountEnabled' in editUser.value)
-      ? option.value === true
-      : editUser.value.accountEnabled === option.value
-  )
-})
+// accountEnabled is not always set, a missing value means that login is allowed
+const loginAllowed = computed(() => unref(editUser).accountEnabled !== false)
 
 const translatedRoleOptions = computed(() => {
   return unref(roles).map((role) => {
@@ -321,9 +297,7 @@ const selectedRoleValue = computed(() => {
 })
 
 const invalidFormData = computed(() => {
-  return Object.values(unref(formData))
-    .map((v) => !!v.valid)
-    .includes(false)
+  return Object.values(unref(formData)).some((v) => !v.valid)
 })
 
 const showQuota = computed(() => {
@@ -334,10 +308,6 @@ const isQuotaInputDisabled = computed(() => {
   return typeof unref(showQuota) === 'undefined'
 })
 
-const compareSaveDialogOriginalObject = computed(() => {
-  return cloneDeep(unref(user))
-})
-
 const changeSelectedQuotaOption = (option: { value: number; displayValue: string }) => {
   editUser.value.drive.quota.total = option.value
 }
@@ -447,7 +417,7 @@ const onUpdatePassword = (password: string) => {
   }
 }
 
-const onUpdateLogin = ({ value }: { value: boolean }) => {
+const onUpdateLogin = (value: boolean) => {
   /**
    * Property accountEnabled won't be always set, but this still means, that login is allowed.
    * So we actually don't need to change the property if missing and not set to forbidden in the UI.
@@ -467,4 +437,11 @@ watch(
   },
   { deep: true, immediate: true }
 )
+
+watch(
+  () => user?.id,
+  () => {
+    saved.value = false
+  }
+)
 </script>
diff --git a/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue b/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue
deleted file mode 100644
index ac2a77c8057..00000000000
--- a/packages/web-app-admin-settings/src/components/Users/SideBar/UserInfoBox.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="flex flex-col items-center mb-6">
-    <user-avatar class="mb-4" :width="80" :user-id="user.id" :user-name="user.displayName" />
-    <span v-text="user.onPremisesSamAccountName"></span>
-    <span class="text-role-on-surface-variant text-2xl" v-text="user.displayName"></span>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { UserAvatar } from '@opencloud-eu/web-pkg'
-
-export default defineComponent({
-  name: 'UserInfoBox',
-  components: { UserAvatar },
-  props: {
-    user: {
-      type: Object,
-      required: true
-    }
-  }
-})
-</script>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts
index 8d8fa8336c9..ce3d39bfe23 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/EditPanel.spec.ts
@@ -6,7 +6,7 @@ import {
   mount
 } from '@opencloud-eu/web-test-helpers'
 import { mock } from 'vitest-mock-extended'
-import { eventBus, useMessages } from '@opencloud-eu/web-pkg'
+import { useMessages } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
 
 describe('EditPanel', () => {
@@ -17,53 +17,53 @@ describe('EditPanel', () => {
   describe('method "revertChanges"', () => {
     it('should revert changes on property editGroup', () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.editGroup.displayName = 'users'
-      wrapper.vm.revertChanges()
-      expect(wrapper.vm.editGroup.displayName).toEqual('group')
+      ;(wrapper.vm as any).editGroup.displayName = 'users'
+      ;(wrapper.vm as any).revertChanges()
+      expect((wrapper.vm as any).editGroup.displayName).toEqual('group')
     })
     it('should revert changes on property formData', () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.formData.displayName.valid = false
-      wrapper.vm.formData.displayName.errorMessage = 'error'
-      wrapper.vm.revertChanges()
-      expect(wrapper.vm.formData.displayName.valid).toBeTruthy()
-      expect(wrapper.vm.formData.displayName.errorMessage).toEqual('')
+      ;(wrapper.vm as any).formData.displayName.valid = false
+      ;(wrapper.vm as any).formData.displayName.errorMessage = 'error'
+      ;(wrapper.vm as any).revertChanges()
+      expect((wrapper.vm as any).formData.displayName.valid).toBeTruthy()
+      expect((wrapper.vm as any).formData.displayName.errorMessage).toEqual('')
     })
   })
 
   describe('method "validateDisplayName"', () => {
     it('should return true if displayName is valid', async () => {
       const { wrapper, mocks } = getWrapper()
-      wrapper.vm.editGroup.displayName = 'users'
+      ;(wrapper.vm as any).editGroup.displayName = 'users'
       const graphMock = mocks.$clientService.graphAuthenticated
       const getGroupStub = graphMock.groups.getGroup.mockRejectedValue(() => mockAxiosReject())
-      expect(await wrapper.vm.validateDisplayName()).toBeTruthy()
+      expect(await (wrapper.vm as any).validateDisplayName()).toBeTruthy()
       expect(getGroupStub).toHaveBeenCalled()
     })
     it('should return false if displayName is longer than 255 characters', async () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.editGroup.displayName = 'n'.repeat(256)
-      expect(await wrapper.vm.validateDisplayName()).toBeFalsy()
+      ;(wrapper.vm as any).editGroup.displayName = 'n'.repeat(256)
+      expect(await (wrapper.vm as any).validateDisplayName()).toBeFalsy()
     })
     it('should return false if displayName is empty', async () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.editGroup.displayName = ''
-      expect(await wrapper.vm.validateDisplayName()).toBeFalsy()
+      ;(wrapper.vm as any).editGroup.displayName = ''
+      expect(await (wrapper.vm as any).validateDisplayName()).toBeFalsy()
     })
     it('should return false if displayName is already existing', async () => {
       const { wrapper, mocks } = getWrapper()
-      wrapper.vm.editGroup.displayName = 'users'
+      ;(wrapper.vm as any).editGroup.displayName = 'users'
       const graphMock = mocks.$clientService.graphAuthenticated
       const getGroupStub = graphMock.groups.getGroup.mockResolvedValue(
         mock<Group>({ displayName: 'group' })
       )
-      expect(await wrapper.vm.validateDisplayName()).toBeFalsy()
+      expect(await (wrapper.vm as any).validateDisplayName()).toBeFalsy()
       expect(getGroupStub).toHaveBeenCalled()
     })
   })
 
   describe('method "onEditGroup"', () => {
-    it('should emit event on success', async () => {
+    it('should mark the changes as saved on success', async () => {
       const { wrapper, mocks } = getWrapper()
 
       const clientService = mocks.$clientService
@@ -77,12 +77,11 @@ describe('EditPanel', () => {
         name: 'administrators'
       }
 
-      const busStub = vi.spyOn(eventBus, 'publish')
-      const updatedGroup = await wrapper.vm.onEditGroup(editGroup)
+      const updatedGroup = await (wrapper.vm as any).onEditGroup(editGroup)
 
       expect(updatedGroup.id).toEqual('1')
       expect(updatedGroup.displayName).toEqual('administrators')
-      expect(busStub).toHaveBeenCalled()
+      expect((wrapper.vm as any).saved).toBe(true)
     })
 
     it('should show message on error', async () => {
@@ -90,7 +89,7 @@ describe('EditPanel', () => {
       const { wrapper, mocks } = getWrapper()
       const clientService = mocks.$clientService
       clientService.graphAuthenticated.groups.editGroup.mockRejectedValue(undefined)
-      await wrapper.vm.onEditGroup({})
+      await (wrapper.vm as any).onEditGroup({})
 
       const { showErrorMessage } = useMessages()
       expect(showErrorMessage).toHaveBeenCalled()
@@ -100,13 +99,13 @@ describe('EditPanel', () => {
   describe('computed method "invalidFormData"', () => {
     it('should be false if formData is invalid', () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.formData.displayName.valid = true
-      expect(wrapper.vm.invalidFormData).toBeFalsy()
+      ;(wrapper.vm as any).formData.displayName.valid = true
+      expect((wrapper.vm as any).invalidFormData).toBeFalsy()
     })
     it('should be true if formData is valid', () => {
       const { wrapper } = getWrapper()
-      wrapper.vm.formData.displayName.valid = false
-      expect(wrapper.vm.invalidFormData).toBeTruthy()
+      ;(wrapper.vm as any).formData.displayName.valid = false
+      expect((wrapper.vm as any).invalidFormData).toBeTruthy()
     })
   })
 })
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap
index 2bfca27ff8d..1d5f2a63363 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/EditPanel.spec.ts.snap
@@ -1,11 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`EditPanel > renders all available inputs 1`] = `
-"<div id="group-edit-panel" class="mt-2">
-  <groupinfobox group="[object Object]"></groupinfobox>
-  <form id="group-edit-form" class="bg-role-surface-container p-4 rounded-t-sm" autocomplete="off">
-    <oc-text-input-stub id="displayName-input" modelvalue="group" class="mb-2" label="Group name" error-message="" fix-message-line="true" required-mark=""></oc-text-input-stub>
-    <div class="w-full flex flex-row flex-wrap justify-between items-center mb-6 rounded-b-sm"><span>No changes</span>
+"<div id="group-edit-panel" class="flex-1 flex flex-col p-2">
+  <form id="group-edit-form" class="flex-1 flex flex-col" autocomplete="off">
+    <section class="bg-role-surface-container rounded-xl px-4 pt-3 pb-1">
+      <h3 class="font-semibold text-sm mt-0 mb-1">Group</h3>
+      <oc-text-input-stub id="displayName-input" modelvalue="group" label="Group name" error-message="" fix-message-line="true" required-mark=""></oc-text-input-stub>
+    </section>
+    <div class="w-full flex flex-row flex-wrap justify-between items-center mt-auto pt-4"><span>No changes</span>
       <div>
         <oc-button-stub disabled="true" class="compare-save-dialog-revert-btn"></oc-button-stub>
         <oc-button-stub appearance="filled" class="compare-save-dialog-confirm-btn" disabled="true"></oc-button-stub>
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
index d85a308f41e..3157298ce08 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/SideBar/__snapshots__/EditPanel.spec.ts.snap
@@ -1,26 +1,26 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`EditPanel > renders all available inputs 1`] = `
-"<div id="user-edit-panel">
-  <userinfobox user="[object Object]"></userinfobox>
-  <form id="user-edit-form" class="bg-role-surface-container p-4 rounded-sm" autocomplete="off">
-    <div>
-      <oc-text-input-stub label="User name" errormessage="" id="userName-input" type="text" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" hasborder="true" class="mb-2"></oc-text-input-stub>
-      <oc-text-input-stub label="First and last name" errormessage="" id="displayName-input" type="text" modelvalue="jan" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" hasborder="true" class="mb-2"></oc-text-input-stub>
-      <oc-text-input-stub label="Email" errormessage="" id="email-input" type="email" modelvalue="jan@opencloud.eu" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="1000" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" hasborder="true" class="mb-2"></oc-text-input-stub>
-      <oc-text-input-stub label="Password" id="password-input" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="false" passwordpolicy="[object Object]" hasborder="true" class="mb-2" placeholder="●●●●●●●●"></oc-text-input-stub>
-      <div class="mb-2">
-        <oc-select-stub label="Role" id="role-input" filter="[Function]" disabled="false" inlinelabel="false" labelhidden="false" optionlabel="displayName" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" positionfixed="false" requiredmark="true" hasborder="true" options="[object Object]"></oc-select-stub>
-        <div class="oc-text-input-message"></div>
-      </div>
-      <div class="mb-2">
-        <oc-select-stub label="Login" id="login-input" filter="[Function]" disabled="false" inlinelabel="false" labelhidden="false" optionlabel="label" searchable="true" clearable="false" loading="false" fixmessageline="false" multiple="false" readonly="false" positionfixed="false" requiredmark="true" hasborder="true" model-value="[object Object]" options="[object Object],[object Object]"></oc-select-stub>
-        <div class="oc-text-input-message"></div>
-      </div>
-      <quota-select-stub totalquota="0" maxquota="0" id="quota-select-form" disabled="false" class="mb-2" label="Personal quota" fix-message-line="true" description-message="" read-only="false" required-mark=""></quota-select-stub>
-      <group-select-stub groupoptions="undefined,undefined" selectedgroups="" requiredmark="false" class="mb-2" read-only="false"></group-select-stub>
-    </div>
-    <compare-save-dialog-stub originalobject="[object Object]" compareobject="[object Object]" confirmbuttondisabled="false" class="mb-6"></compare-save-dialog-stub>
+"<div id="user-edit-panel" class="flex-1 flex flex-col p-2">
+  <form id="user-edit-form" class="flex-1 flex flex-col" autocomplete="off">
+    <section class="bg-role-surface-container rounded-xl px-4 pt-3 pb-1">
+      <h3 class="font-semibold text-sm mt-0 mb-1">Profile</h3>
+      <oc-text-input-stub label="User name" errormessage="" id="userName-input" type="text" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" hasborder="true"></oc-text-input-stub>
+      <oc-text-input-stub label="First and last name" errormessage="" id="displayName-input" type="text" modelvalue="jan" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" hasborder="true"></oc-text-input-stub>
+      <oc-text-input-stub label="Email" errormessage="" id="email-input" type="email" modelvalue="jan@opencloud.eu" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="1000" fixmessageline="true" readonly="false" requiredmark="true" passwordpolicy="[object Object]" hasborder="true"></oc-text-input-stub>
+    </section>
+    <section class="bg-role-surface-container rounded-xl px-4 pt-3 pb-1 mt-4">
+      <h3 class="font-semibold text-sm mt-0 mb-1">Access</h3>
+      <oc-text-input-stub label="Password" id="password-input" type="password" modelvalue="" clearbuttonenabled="false" clearbuttonaccessiblelabel="" disabled="false" inlinelabel="false" errormessagedebouncedtime="500" fixmessageline="true" readonly="false" requiredmark="false" passwordpolicy="[object Object]" hasborder="true" placeholder="●●●●●●●●"></oc-text-input-stub>
+      <oc-switch-stub label="Login allowed" checked="true" labelid="oc-switch-label-1" disabled="false" id="login-input" class="flex justify-between mb-5"></oc-switch-stub>
+      <oc-select-stub label="Role" id="role-input" filter="[Function]" disabled="false" inlinelabel="false" labelhidden="false" optionlabel="displayName" searchable="true" clearable="false" loading="false" fixmessageline="true" multiple="false" readonly="false" positionfixed="false" requiredmark="true" hasborder="true" options="[object Object]"></oc-select-stub>
+      <quota-select-stub totalquota="0" maxquota="0" id="quota-select-form" disabled="false" label="Personal quota" fix-message-line="true" description-message="" read-only="false" required-mark=""></quota-select-stub>
+    </section>
+    <section class="bg-role-surface-container rounded-xl px-4 pt-3 pb-1 mt-4">
+      <h3 class="font-semibold text-sm mt-0 mb-1">Membership</h3>
+      <group-select-stub groupoptions="undefined,undefined" selectedgroups="" requiredmark="false" read-only="false"></group-select-stub>
+    </section>
+    <compare-save-dialog-stub originalobject="[object Object]" compareobject="[object Object]" confirmbuttondisabled="false" saved="false" class="mt-auto pt-4"></compare-save-dialog-stub>
   </form>
 </div>"
 `;
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap
index 135bcfd3f77..68e22d404ec 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/GroupSelect.spec.ts.snap
@@ -7,7 +7,7 @@ exports[`GroupSelect > renders the select input 1`] = `
     </label>
     <!--v-if-->
     <vue-select-stub data-v-9521f10d="" modelvalue="[object Object]" inputid="oc-select-1" components="[object Object]" options="undefined" disabled="false" clearable="false" deselectfromdropdown="false" searchable="true" multiple="true" placeholder="" transition="vs__fade" clearsearchonselect="true" closeonselect="true" label="displayName" autocomplete="off" reduce="[Function]" selectable="[Function]" getoptionlabel="[Function]" getoptionkey="[Function]" taggable="false" pushtags="false" filterable="true" filterby="[Function]" filter="[Function]" createoption="[Function]" resetonoptionschange="false" clearsearchonblur="[Function]" nodrop="false" dir="auto" selectontab="false" selectonkeycodes="13" searchinputqueryselector="[type=search]" mapkeydown="[Function]" appendtobody="false" calculateposition="[Function]" dropdownshouldopen="[Function]" uid="1" loading="false" class="oc-select bg-transparent mb-2"></vue-select-stub>
-    <div data-v-9521f10d="" class="oc-text-input-message text-sm">
+    <div data-v-9521f10d="" class="oc-text-input-message text-sm mt-1 min-h-4.5">
       <!--v-if--> <span data-v-9521f10d="" id="oc-select-1-message" class=""></span>
     </div>
   </div>
diff --git a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
index 1880c4628d3..b8a0d637e4c 100644
--- a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
@@ -77,7 +77,6 @@
 import { computed, onMounted, ref, toRef, unref, VNodeRef, watch } from 'vue'
 import {
   createLocationCommon,
-  eventBus,
   useAuthStore,
   useClientService,
   useMessages,
@@ -196,7 +195,6 @@ const save = async (e: TagOption[] | string[]) => {
 
     updateResourceField({ id: id, field: 'tags', value: [...selectedTagLabels] })
 
-    eventBus.publish('sidebar.entity.saved')
     if (unref(tagSelect) !== null) {
       unref(tagSelect).$refs.search.focus()
     }
diff --git a/packages/web-app-files/tests/unit/components/SideBar/TagsSelect.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/TagsSelect.spec.ts
index e78c9ce64f0..f432414eff8 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/TagsSelect.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/TagsSelect.spec.ts
@@ -26,17 +26,6 @@ describe('Tag Select', () => {
     ).toEqual([{ label: 'a' }, { label: 'b' }, { label: 'c' }])
   })
 
-  describe('save method', () => {
-    it('publishes the "save"-event', async () => {
-      const eventStub = vi.spyOn(eventBus, 'publish')
-      const tags = ['a', 'b']
-      const resource = mock<Resource>({ tags: tags })
-      const { wrapper } = createWrapper(resource, mockDeep<ClientService>(), false)
-      await (wrapper.vm as any).save(tags)
-      expect(eventStub).toHaveBeenCalled()
-    })
-  })
-
   test.each<[string[], { label: string }[], string[]]>([
     [['a', 'b'], [{ label: 'c' }], ['c']],
     [['a', 'b'], [{ label: 'a' }, { label: 'b' }, { label: 'c' }], ['c']],
diff --git a/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue b/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
index 7b06ebb94f7..559603070b5 100644
--- a/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
+++ b/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full flex flex-row flex-wrap justify-between items-center">
-    <span v-if="saved" class="flex items-center">
-      <oc-icon name="checkbox-circle" />
+    <span v-if="showSaved" class="flex items-center">
+      <oc-icon name="check" />
       <span class="ml-2" v-text="$gettext('Changes saved')" />
     </span>
     <span v-else>{{ unsavedChangesText }}</span>
@@ -26,59 +26,52 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, computed, unref, watch } from 'vue'
+import { computed, onBeforeUnmount, unref, watch } from 'vue'
 import isEqual from 'lodash-es/isEqual'
-import { eventBus } from '../../services/eventBus'
 import { useGettext } from 'vue3-gettext'
 
+const SAVED_MESSAGE_TIMEOUT = 3000
+
 const {
   originalObject,
   compareObject,
-  confirmButtonDisabled = false
+  confirmButtonDisabled = false,
+  saved = false
 } = defineProps<{
   originalObject: Record<string, any>
   compareObject: Record<string, any>
   confirmButtonDisabled?: boolean
+  saved?: boolean
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'confirm'): void
   (e: 'revert'): void
+  (e: 'update:saved', value: boolean): void
 }>()
 
 const { $gettext } = useGettext()
 
-const saved = ref(false)
-let savedEventToken: string
+let savedTimeout: ReturnType<typeof setTimeout>
 
 const unsavedChanges = computed(() => !isEqual(originalObject, compareObject))
+const showSaved = computed(() => saved && !unref(unsavedChanges))
 const unsavedChangesText = computed(() =>
   unref(unsavedChanges) ? $gettext('Unsaved changes') : $gettext('No changes')
 )
 
-onMounted(() => {
-  savedEventToken = eventBus.subscribe('sidebar.entity.saved', () => {
-    saved.value = true
-  })
-})
-
-onBeforeUnmount(() => {
-  eventBus.unsubscribe('sidebar.entity.saved', savedEventToken)
-})
-
 watch(
-  () => unref(unsavedChanges),
-  (newVal) => {
-    if (newVal) {
-      saved.value = false
+  () => saved,
+  (isSaved) => {
+    clearTimeout(savedTimeout)
+    if (!isSaved) {
+      return
     }
+    savedTimeout = setTimeout(() => emit('update:saved', false), SAVED_MESSAGE_TIMEOUT)
   }
 )
 
-watch(
-  () => originalObject.id,
-  () => {
-    saved.value = false
-  }
-)
+onBeforeUnmount(() => {
+  clearTimeout(savedTimeout)
+})
 </script>
diff --git a/packages/web-pkg/src/components/SideBar/SideBarPanels.vue b/packages/web-pkg/src/components/SideBar/SideBarPanels.vue
index fafb59f3122..756a7cc8685 100644
--- a/packages/web-pkg/src/components/SideBar/SideBarPanels.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBarPanels.vue
@@ -53,13 +53,14 @@
         <div
           class="sidebar-panel__body-content"
           :class="{
-            'flex-1 ': !panel.isRoot?.(panelContext)
+            'flex-1 flex flex-col': !panel.isRoot?.(panelContext)
           }"
         >
           <slot name="body">
             <div
               v-for="(p, index) in panel.isRoot?.(panelContext) ? rootPanels : [panel]"
               :key="`sidebar-panel-${p.name}`"
+              :class="{ 'flex-1 flex flex-col': !panel.isRoot?.(panelContext) }"
             >
               <component
                 :is="p.component"
diff --git a/packages/web-pkg/tests/unit/components/sidebar/CompareSaveDialog.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/CompareSaveDialog.spec.ts
index 34451c809eb..6ef1866ca26 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/CompareSaveDialog.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/CompareSaveDialog.spec.ts
@@ -23,6 +23,35 @@ describe('CompareSaveDialog', () => {
       expect((wrapper.vm as any).unsavedChanges).toBeTruthy()
     })
   })
+  describe('saved state', () => {
+    it.each([
+      { saved: true, compareObject: { id: '1', displayName: 'jan' }, showsSaved: true },
+      { saved: true, compareObject: { id: '1', displayName: 'janina' }, showsSaved: false },
+      { saved: false, compareObject: { id: '1', displayName: 'jan' }, showsSaved: false }
+    ])(
+      'shows "Changes saved": $showsSaved (saved: $saved, compareObject: $compareObject)',
+      ({ saved, compareObject, showsSaved }) => {
+        const { wrapper } = getWrapper({
+          propsData: { originalObject: { id: '1', displayName: 'jan' }, compareObject, saved }
+        })
+        expect(wrapper.text().includes('Changes saved')).toBe(showsSaved)
+      }
+    )
+    it('resets the saved state after a timeout', async () => {
+      vi.useFakeTimers()
+      const { wrapper } = getWrapper({
+        propsData: {
+          originalObject: { id: '1', displayName: 'jan' },
+          compareObject: { id: '1', displayName: 'jan' }
+        }
+      })
+      await wrapper.setProps({ saved: true })
+      expect(wrapper.emitted('update:saved')).toBeUndefined()
+      vi.runAllTimers()
+      expect(wrapper.emitted('update:saved')).toEqual([[false]])
+      vi.useRealTimers()
+    })
+  })
 })
 
 function getWrapper({ propsData = {} } = {}) {
diff --git a/tests/e2e/support/objects/app-admin-settings/users/actions.ts b/tests/e2e/support/objects/app-admin-settings/users/actions.ts
index 1d79aa66696..f6730c4f479 100644
--- a/tests/e2e/support/objects/app-admin-settings/users/actions.ts
+++ b/tests/e2e/support/objects/app-admin-settings/users/actions.ts
@@ -10,9 +10,7 @@ const editActionBtnQuickActions =
 const editPanel = '.sidebar-panel__body-EditPanel:visible'
 const closeEditPanel = '.sidebar-panel__header .header__close'
 const deleteActionBtn = '.oc-users-actions-delete-trigger'
-const loginDropDown = '.vs__dropdown-menu'
-const dropdownOption = '.vs__dropdown-option'
-const loginInput = '#login-input'
+const loginSwitch = '#login-input [role="switch"]'
 const compareDialogConfirm = '.compare-save-dialog-confirm-btn'
 const addToGroupsBatchAction = '.oc-users-actions-add-to-groups-trigger'
 const removeFromGroupsBatchAction = '.oc-users-actions-remove-from-groups-trigger'
@@ -78,14 +76,11 @@ export const changeAccountEnabled = async (args: {
   value: boolean
 }): Promise<void> => {
   const { page, value, uuid } = args
-  await page.locator(loginInput).waitFor()
-  await page.locator(loginInput).click()
-  await page.locator(loginDropDown).waitFor()
-
-  await page
-    .locator(dropdownOption)
-    .getByText(value === false ? 'Forbidden' : 'Allowed')
-    .click()
+  const loginSwitchLocator = page.locator(loginSwitch)
+  await loginSwitchLocator.waitFor()
+  if ((await loginSwitchLocator.getAttribute('aria-checked')) !== value.toString()) {
+    await loginSwitchLocator.click()
+  }
 
   await Promise.all([
     page.waitForResponse(